chore(canvas): refactor project page

canvas/app/dashboard/_layout/container-text-center.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import React from "react";
+
+export type TContainerWithTextCenterProps = React.HTMLProps<HTMLDivElement> & {
+  paragraphProps?: Omit<React.HTMLProps<HTMLParagraphElement>, "children">;
+};
+
+export function ContainerWithTextCenter(props: TContainerWithTextCenterProps) {
+  const { className, children, paragraphProps, ...rest } = props;
+  const { className: pClassName, ...pRest } = props;
+
+  return (
+    <div
+      className={clsx(
+        "flex-1 flex flex-col justify-center items-center font-thin text-3xl",
+        className
+      )}
+      {...rest}
+    >
+      <p className={clsx("text-center", pClassName)} {...pRest}>
+        {children}
+      </p>
+    </div>
+  );
+}

canvas/app/dashboard/_layout/layout-container.tsx

@@ -6,9 +6,14 @@ export function LayoutContainer(props: TLayoutContainer) {
   const { children } = props;
 
   return (
-    <div className="h-screen w-screen bg-[#eee] flex p-3">
-      <div className="flex flex-col flex-1 bg-white rounded-2xl p-4 md:px-8">
-        {children}
+    <div className="bg-[#eee] min-h-screen flex flex-col p-3">
+      <div className="bg-white rounded-2xl p-4 h-full flex-1 w-full flex justify-center">
+        <div
+          id="main-wrapper"
+          className="flex flex-col flex-1 max-w-7xl  md:px-8"
+        >
+          {children}
+        </div>
       </div>
     </div>
   );

canvas/app/dashboard/_layout/page-container.tsx

@@ -1,12 +1,18 @@
+import clsx from "clsx";
 import React from "react";
 
-export type TPageContainer = React.PropsWithChildren;
+export type TPageContainer = React.HTMLProps<HTMLDivElement>;
 
 export function PageContainer(props: TPageContainer) {
-  const { children } = props;
+  const { children, className } = props;
 
   return (
-    <div className="px-0 py-4 md:px-4 flex flex-col flex-1 overflow-auto relative">
+    <div
+      className={clsx(
+        "px-0 py-4 md:px-4 flex flex-col flex-1 relative",
+        className
+      )}
+    >
       {children}
     </div>
   );

canvas/app/dashboard/project/all/components/container.tsx

@@ -0,0 +1,10 @@
+import { PageContainer } from "@/app/dashboard/_layout/page-container";
+
+export function AllProjectsContainer(props: React.PropsWithChildren) {
+  const { children } = props;
+  return (
+    <PageContainer className="gap-8 py-0  grid grid-cols-1 md:py-8 md:px-0 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      {children}
+    </PageContainer>
+  );
+}

canvas/app/dashboard/project/all/components/create-project/content.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Modal } from "@/components/custom/modal";
+import { CreateProjectForm } from "./form";
+import { Button } from "@/components/ui/button";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  createProject,
+  GET_PROJECT_QUERY_KEY,
+  TProject,
+} from "@/services/projects";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { TCreateProjectFormData } from "@/schema/create-project";
+import { Alert } from "@/components/custom/alert";
+import { PROJECT_URL } from "@/constants/routes";
+
+const formID = "create-project-form";
+
+export function CreateProjectContent() {
+  const { push } = useRouter();
+  const queryClient = useQueryClient();
+
+  const handleOnCreateProjectSuccess = React.useCallback(
+    async (data: TProject) => {
+      /**
+       * Invalidating queries, as after creating new
+       * project we want to fetch it.
+       */
+      await queryClient.invalidateQueries({
+        queryKey: [GET_PROJECT_QUERY_KEY],
+      });
+
+      setTimeout(() => {
+        push(`${PROJECT_URL}/${data.id}`);
+      }, 3000);
+    },
+    [push]
+  );
+
+  const {
+    isError: hasErrorDuringCreatingProject,
+    isSuccess: hasCreatedProjectSuccessfully,
+    isPending: isSubmittingCreateProjectForm,
+    mutate: createNewProject,
+  } = useMutation({
+    mutationFn: createProject,
+    onSuccess: handleOnCreateProjectSuccess,
+  });
+
+  const handleSubmit = React.useCallback((data: TCreateProjectFormData) => {
+    createNewProject(data);
+  }, []);
+
+  return (
+    <Modal
+      title="Create a new project"
+      trigger={<Button>Create Project</Button>}
+      hasCloseButtonInFooter
+      actions={[
+        <Button className="my-1" type="submit" form={formID}>
+          Create
+        </Button>,
+      ]}
+    >
+      {hasErrorDuringCreatingProject && (
+        <Alert
+          variant="destructive"
+          title="Error!"
+          description=" Something went wrong while creating the project. Please try again after sometime."
+        />
+      )}
+
+      {hasCreatedProjectSuccessfully && (
+        <Alert
+          variant="default"
+          title="Success!"
+          description="Project created successfully."
+        />
+      )}
+
+      <CreateProjectForm
+        onSubmit={handleSubmit}
+        formID={formID}
+        isSubmitting={isSubmittingCreateProjectForm}
+      />
+    </Modal>
+  );
+}