Save custom-project response in query cache

client/src/app/projects/preview/page.tsx

@@ -4,22 +4,10 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 
-import mockResponse from "@/app/projects/preview/mock-response";
-
 import CustomProject from "@/containers/projects/custom-project";
 
-export const CUSTOM_PROJECT_MOCK_QUERYKEY = ["custom-project-mock-data"];
 export default function CustomProjectPreviewPage() {
-  /**
-   *
-   * Mimic queryCache from createCustomProject response
-   *
-   * This is only for testing purpose with the current mock data,
-   * and should be replaced when the complete user flow is done
-   */
-
   const queryClient = new QueryClient();
-  queryClient.setQueryData(CUSTOM_PROJECT_MOCK_QUERYKEY, mockResponse);
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>

client/src/containers/projects/new/header.tsx

@@ -2,6 +2,8 @@
 
 import { useFormContext } from "react-hook-form";
 
+import { useRouter } from "next/navigation";
+
 import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
 
 import { Button } from "@/components/ui/button";
@@ -11,6 +13,7 @@ import { onSubmit } from "./index";
 
 export default function Header() {
   const methods = useFormContext<CreateCustomProjectForm>();
+  const router = useRouter();
 
   return (
     <div className="flex items-center justify-between py-3 pr-6">
@@ -22,7 +25,10 @@ export default function Header() {
         <Button variant="secondary">Cancel</Button>
         <Button
           // disabled={!methods.formState.isValid}
-          onClick={methods.handleSubmit(onSubmit)}
+          onClick={() => {
+            methods.handleSubmit((data) => onSubmit(data))();
+            router.push("/projects/preview");
+          }}
         >
           Continue
         </Button>

client/src/containers/projects/new/index.tsx

@@ -28,7 +28,7 @@ import ProjectSidebar from "@/containers/projects/new/sidebar";
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 
-export const onSubmit = (data: CreateCustomProjectForm) => {
+export const onSubmit = async (data: CreateCustomProjectForm) => {
   const queryClient = getQueryClient();
 
   const originalValues = { ...data };
@@ -97,7 +97,12 @@ export const onSubmit = (data: CreateCustomProjectForm) => {
     },
   };
 
-  client.customProjects.createCustomProject.mutation({ body: data });
+  const { status, body } =
+    await client.customProjects.createCustomProject.mutation({ body: data });
+
+  if (status === 201) {
+    queryClient.setQueryData(queryKeys.customProjects.cached.queryKey, body);
+  }
 };
 
 export default function CreateCustomProject() {

client/src/hooks/use-get-custom-project.ts

@@ -10,13 +10,11 @@ import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 import { getAuthHeader } from "@/lib/utils";
 
-import { CUSTOM_PROJECT_MOCK_QUERYKEY } from "@/app/projects/preview/page";
-
 export function useGetCustomProject(id?: string) {
   const { data: session } = useSession();
   const queryCache = useQueryClient().getQueryData<{
     data: InstanceType<typeof CustomProjectEntity>;
-  }>(CUSTOM_PROJECT_MOCK_QUERYKEY);
+  }>(queryKeys.customProjects.cached.queryKey);
   const getCustomProjectQuery = client.customProjects.getCustomProject.useQuery(
     queryKeys.customProjects.one(id || "").queryKey,
     {

client/src/lib/query-keys.ts

@@ -44,6 +44,7 @@ export const tableKeys = createQueryKeys("tables", {
 });
 
 export const customProjectKeys = createQueryKeys("customProjects", {
+  cached: null,
   countries: null,
   one: (id: string) => [id],
   assumptions: ({