"use client";

import { useRouter } from 'next/navigation';
const Form = () => {
  const router = useRouter();
  const submitHandler = async (data: ClientFormData) => {
     const response = await fetch("/api/clients", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });
      router.refresh();
      reset();
      setFiles([]);
  };
  const onSubmit = handleSubmit(submitHandler);

  return(
      <form
       onSubmit={onSubmit}
       className="px-10 space-y-5 my-4">
      .....
     </form>
  )
}

router.push("/dashboard/clients");
router.refresh();

// app/clients/page.tsx
import { ClientInterface } from "@/app/_lib/types";
import ClientsDataTable from "./_components/ClientsDataTable";

async function getClients(): Promise<ClientInterface[]> {
  const res = await fetch("http://localhost:3000/api/clients", {cache: "no-cache"});
  if (!res.ok) throw new Error("Failed to fetch clients");
  return res.json();
}

export default async function ClientsPage() {
  const clients = await getClients();
  return <ClientsDataTable initialClients={clients} />;
}

// app/clients/_components/ClientsDataTable.tsx
const ClientsDataTable = ({ initialClients }: ClientsDataTableProps) => {
  const [clientCells, setClientCells] = useState<ClientInterface[]>(initialClients);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const filteredClients = useMemo(() => 
    clientCells.filter(client =>
      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      client.website.toLowerCase().includes(searchQuery.toLowerCase())
    ), [clientCells, searchQuery]);

  const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
  const paginatedClients = useMemo(() => 
    filteredClients.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage),
    [filteredClients, currentPage, itemsPerPage]
  );

  const handlePageChange = useCallback((page: number) => setCurrentPage(page), []);
  const handleNextPage = useCallback(() => setCurrentPage(prev => Math.min(prev + 1, totalPages)), [totalPages]);
  const handlePreviousPage = useCallback(() => setCurrentPage(prev => Math.max(prev - 1, 1)), []);

  return (....)
}

// app/clients/_components/CreateClientForm.tsx
"use client";
import { useCreateClient } from "./useClientForm";

const CreateClientForm = () => {
  const { register, errors, isPending, onSubmit, files, setFiles, getRootProps, getInputProps, apiError } = useCreateClient();
return (...)
}

// app/clients/_components/useClientForm.ts
export function useCreateClient() {
  const [files, setFiles] = useState<File[]>([]);
  const [isPending, setIsPending] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);
  const { startUpload } = useUploadThing("imageUploader", {
    onUploadError: (err) => {
      toast.error(err.message);
    },
  });

  const { register, handleSubmit, formState: { errors }, setValue, reset, setError } = useForm({
    resolver: zodResolver(clientSchema),
  });

  const { getRootProps, getInputProps } = useDropzone(...);

  const router = useRouter();

  const submitHandler = async (data: ClientFormData) => {
    setIsPending(true);
    try {
      if (files.length > 0) {
        const uploadResponse = await startUpload(files);
        if (uploadResponse && uploadResponse[0]) data.logo_url = uploadResponse[0].ufsUrl;
      }

      const response = await fetch("/api/clients", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (!response.ok) throw new Error((await response.json()).error);

      reset();
      setFiles([]);
      // router.push("/dashboard/clients");
      // router.refresh();
      window.location.reload()

    } catch (error) {
      setApiError(error instanceof Error ? error.message : "Failed to create client.");
    } finally {
      setIsPending(false);
    }
  };

  return { register, errors, isPending, apiError, onSubmit: handleSubmit(submitHandler), files, setFiles, getRootProps, getInputProps };
}

const response = await fetch("/api/clients", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data),
});

router.refresh(): Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).

// /api/todos/route.ts
export async function POST(request: NextRequest) {
  const body = await request.json();
  const { id } = body;

  await db.delete(todosTable).where(eq(todosTable.id, id));
  revalidatePath("/todos");

  return NextResponse.json({ message: "Deleted" });
}

// a client component button
<Button
  variant={"ghost"}
  onClick={async () => {
    await fetch("/api/todos", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: todo.id }),
    });

    router.refresh();
  }}
>
  <Trash />
</Button>

// my page.tsx which is a server component
export const dynamic = "force-dynamic";

export default async function TodosPage() {
  const todos = await db.select().from(todosTable).orderBy(todosTable.id);

import { ClientInterface } from "@/app/_lib/types";
import ClientsDataTable from "./_components/ClientsDataTable";

async function getClients(): Promise<ClientInterface[]> {
  const res = await fetch("http://localhost:3000/api/clients");
  if (!res.ok) throw new Error("Failed to fetch clients");
  return res.json();
}

export default async function ClientsPage() {
  const clients = await getClients();
  return <ClientsDataTable initialClients={clients} />;
}

const ClientsDataTable = ({ initialClients }: ClientsDataTableProps) => {
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  const filteredClients = useMemo(() => 
    initialClients.filter(client =>
      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      client.website.toLowerCase().includes(searchQuery.toLowerCase())
    ), [initialClients, searchQuery]);

  const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
  const paginatedClients = useMemo(() => 
    filteredClients.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage),
    [filteredClients, currentPage, itemsPerPage]
  );
....

export async function POST(req: NextRequest) {
  try {
    const body = await req.json();
    const parsedBody = clientSchema.safeParse(body);

    if (!parsedBody.success) {
      return NextResponse.json(
        { error: parsedBody.error.flatten().fieldErrors },
        { status: 400 }
      );
    }

    const client = await prisma.clients.create({
      data: parsedBody.data,
    });
    return NextResponse.json(
      { message: "Client created successfully", client },
      { status: 201 }
    );
  } catch (error) {
    if (error instanceof Prisma.PrismaClientKnownRequestError) {
      if (error.code === "P2002") {
        return NextResponse.json(
          { error: "Email is already in use." },
          { status: 409 }
        );
      }
    }
    return NextResponse.json(
      { error: "An unexpected error occurred while creating the client." },
      { status: 500 }
    );
  }
}

async function getClients(): Promise<ClientInterface[]> {
  const res = await fetch("http://localhost:3000/api/clients");
  if (!res.ok) throw new Error("Failed to fetch clients");
  return await res.json();
}

const ClientsDataTable = () => {
  const [clientCells, setClientCells] = useState<ClientInterface[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  useEffect(() => {
    const fetchClients = async () => {
      const response = await fetch("/api/clients");
      const data = await response.json();
      setClientCells(data);
    };
    fetchClients();
  }, []);
...

const ClientsDataTable = ({ initialClients }: ClientsDataTableProps) => {
  const [clientCells, setClientCells] = useState<ClientInterface[]>(initialClients);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  useEffect(() => {
     setClientCells(initialClients);
  }, [initialClients]);
  ...

const ClientsDataTable = ({ initialClients }: ClientsDataTableProps) => {
  const [clientCells, setClientCells] = useState<ClientInterface[]>(initialClients);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  useEffect(() => {
     setClientCells((prev) => {
       const newClients = initialClients.filter(client => 
         !prev.some(existingClient => existingClient.id === client.id)
       );
       return [
         ...prev,
         newClients
       ]
     };
  }, [initialClients]);
  ...