From c342ab302e0f3af518e9092b832f06aa436f5a99 Mon Sep 17 00:00:00 2001
From: sriramveeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 27 Sep 2023 15:59:37 +0530
Subject: [PATCH] fix: ui package setup and project update form refactor

---
 .../project/create-project-modal.tsx          |  75 +--
 web/components/project/form-loader.tsx        |  62 +++
 web/components/project/form.tsx               | 262 ++++++++++
 web/components/project/index.ts               |   2 +
 web/package.json                              |   1 +
 .../projects/[projectId]/settings/index.tsx   | 478 ++++--------------
 web/pages/api/unsplash.ts                     |  31 +-
 web/services/project.service.ts               |  13 +-
 web/store/project.ts                          |  86 +++-
 9 files changed, 529 insertions(+), 481 deletions(-)
 create mode 100644 web/components/project/form-loader.tsx
 create mode 100644 web/components/project/form.tsx

diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index b6a2be8bb..d2ea87d6b 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -1,13 +1,10 @@
 import React, { useState, useEffect } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
 // services
 import projectServices from "services/project.service";
 // hooks
@@ -25,8 +22,6 @@ import {
   Avatar,
   CustomSearchSelect,
 } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
@@ -38,6 +33,7 @@ import { ICurrentUserResponse, IProject } from "types";
 import { PROJECTS_LIST } from "constants/fetch-keys";
 // constants
 import { NETWORK_CHOICES } from "constants/project";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   isOpen: boolean;
@@ -75,12 +71,11 @@ const IsGuestCondition: React.FC<{
   return null;
 };
 
-export const CreateProjectModal: React.FC<Props> = ({
-  isOpen,
-  setIsOpen,
-  setToFavorite = false,
-  user,
-}) => {
+export const CreateProjectModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen, setToFavorite = false, user } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // states
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
 
   const { setToastAlert } = useToast();
@@ -113,24 +108,13 @@ export const CreateProjectModal: React.FC<Props> = ({
   const handleAddToFavorites = (projectId: string) => {
     if (!workspaceSlug) return;
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === projectId ? { ...p, is_favorite: true } : p)),
-      false
-    );
-
-    projectServices
-      .addProjectToFavorites(workspaceSlug as string, {
-        project: projectId,
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the project from favorites. Please try again.",
-        })
-      );
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
   };
 
   const onSubmit = async (formData: IProject) => {
@@ -141,14 +125,9 @@ export const CreateProjectModal: React.FC<Props> = ({
     if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
     else payload.emoji = formData.emoji_and_icon;
 
-    await projectServices
-      .createProject(workspaceSlug.toString(), payload, user)
+    await projectStore
+      .createProject(workspaceSlug.toString(), payload)
       .then((res) => {
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -206,8 +185,7 @@ export const CreateProjectModal: React.FC<Props> = ({
 
   const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
-  if (memberDetails && isOpen)
-    if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
+  if (memberDetails && isOpen) if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -277,10 +255,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                     />
                   </div>
                 </div>
-                <form
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="divide-y-[0.5px] divide-custom-border-100 px-3"
-                >
+                <form onSubmit={handleSubmit(onSubmit)} className="divide-y-[0.5px] divide-custom-border-100 px-3">
                   <div className="mt-9 space-y-6 pb-5">
                     <div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
                       <div className="md:col-span-3">
@@ -316,8 +291,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                           validations={{
                             required: "Identifier is required",
                             validate: (value) =>
-                              /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
-                              "Identifier must be in uppercase.",
+                              /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
                             minLength: {
                               value: 1,
                               message: "Identifier must at least be of 1 character",
@@ -384,9 +358,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                           name="project_lead"
                           control={control}
                           render={({ field: { value, onChange } }) => {
-                            const selectedMember = workspaceMembers?.find(
-                              (m) => m.member.id === value
-                            );
+                            const selectedMember = workspaceMembers?.find((m) => m.member.id === value);
 
                             return (
                               <CustomSearchSelect
@@ -409,10 +381,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                                       </>
                                     ) : (
                                       <>
-                                        <Icon
-                                          iconName="group"
-                                          className="!text-sm text-custom-text-400"
-                                        />
+                                        <Icon iconName="group" className="!text-sm text-custom-text-400" />
                                         <span className="text-custom-text-400">Lead</span>
                                       </>
                                     )}
diff --git a/web/components/project/form-loader.tsx b/web/components/project/form-loader.tsx
new file mode 100644
index 000000000..325807b83
--- /dev/null
+++ b/web/components/project/form-loader.tsx
@@ -0,0 +1,62 @@
+import { FC } from "react";
+// components
+import { Loader } from "components/ui";
+
+export interface IProjectDetailsFormLoader {}
+
+export const ProjectDetailsFormLoader: FC<IProjectDetailsFormLoader> = () => (
+  <>
+    <div className="relative h-44 w-full mt-6">
+      <Loader>
+        <Loader.Item height="auto" width="46px" />
+      </Loader>
+      <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
+        <div className="flex gap-3 flex-grow truncate">
+          <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+            <Loader>
+              <Loader.Item height="46px" width="46px" />
+            </Loader>
+          </div>
+        </div>
+        <div className="flex justify-center flex-shrink-0">
+          <Loader>
+            <Loader.Item height="32px" width="108px" />
+          </Loader>
+        </div>
+      </div>
+    </div>
+    <div className="flex flex-col gap-8 my-8">
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm">Project Name</h4>
+        <Loader>
+          <Loader.Item height="46px" width="100%" />
+        </Loader>
+      </div>
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm">Description</h4>
+        <Loader className="w-full">
+          <Loader.Item height="102px" width="full" />
+        </Loader>
+      </div>
+      <div className="flex items-center justify-between gap-10 w-full">
+        <div className="flex flex-col gap-1 w-1/2">
+          <h4 className="text-sm">Identifier</h4>
+          <Loader>
+            <Loader.Item height="36px" width="100%" />
+          </Loader>
+        </div>
+        <div className="flex flex-col gap-1 w-1/2">
+          <h4 className="text-sm">Network</h4>
+          <Loader className="w-full">
+            <Loader.Item height="46px" width="100%" />
+          </Loader>
+        </div>
+      </div>
+      <div className="flex items-center justify-between py-2">
+        <Loader className="mt-2 w-full">
+          <Loader.Item height="34px" width="100px" />
+        </Loader>
+      </div>
+    </div>
+  </>
+);
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
new file mode 100644
index 000000000..ae154a59c
--- /dev/null
+++ b/web/components/project/form.tsx
@@ -0,0 +1,262 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// components
+import EmojiIconPicker from "components/emoji-icon-picker";
+import { ImagePickerPopover } from "components/core";
+import { Input, TextArea, CustomSelect, PrimaryButton } from "components/ui";
+import { Input as InputElement } from "@plane/ui";
+// types
+import { IProject, IWorkspace } from "types";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+// services
+import projectService from "services/project.service";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IProjectDetailsForm {
+  project: IProject;
+  workspaceSlug: string;
+  isAdmin: boolean;
+}
+
+export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
+  const { project, workspaceSlug, isAdmin } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<IProject>({
+    defaultValues: {
+      ...project,
+      emoji_and_icon: project.emoji ?? project.icon_prop,
+      workspace: (project.workspace as IWorkspace).id,
+    },
+  });
+
+  const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+
+    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
+    const formattedValue = alphanumericValue.toUpperCase();
+
+    setValue("identifier", formattedValue);
+  };
+
+  const updateProject = async (payload: Partial<IProject>) => {
+    if (!workspaceSlug || !project) return;
+
+    return projectStore
+      .updateProject(workspaceSlug.toString(), project.id, payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project updated successfully",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Project could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug) return;
+
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      cover_image: formData.cover_image,
+    };
+
+    if (typeof formData.emoji_and_icon === "object") {
+      payload.emoji = null;
+      payload.icon_prop = formData.emoji_and_icon;
+    } else {
+      payload.emoji = formData.emoji_and_icon;
+      payload.icon_prop = null;
+    }
+
+    if (project.identifier !== formData.identifier)
+      await projectService
+        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
+        .then(async (res) => {
+          if (res.exists) setError("identifier", { message: "Identifier already exists" });
+          else await updateProject(payload);
+        });
+    else await updateProject(payload);
+  };
+
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
+  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="relative h-44 w-full mt-6">
+        <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
+        <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
+          <div className="flex gap-3 flex-grow truncate">
+            <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+              <div className="h-7 w-7 grid place-items-center">
+                <Controller
+                  control={control}
+                  name="emoji_and_icon"
+                  render={({ field: { value, onChange } }) => (
+                    <EmojiIconPicker
+                      label={value ? renderEmoji(value) : "Icon"}
+                      value={value}
+                      onChange={onChange}
+                      disabled={!isAdmin}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1 text-white truncate">
+              <span className="text-lg font-semibold truncate">{watch("name")}</span>
+              <span className="flex items-center gap-2 text-sm">
+                <span>
+                  {watch("identifier")} . {currentNetwork?.label}
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div className="flex justify-center flex-shrink-0">
+            <div>
+              <Controller
+                control={control}
+                name="cover_image"
+                render={({ field: { value, onChange } }) => (
+                  <ImagePickerPopover label={"Change cover"} onChange={onChange} value={value} disabled={!isAdmin} />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-8 my-8">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Project Name</h4>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "Name is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <InputElement
+                id="name"
+                name="name"
+                type="text"
+                ref={ref}
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.name)}
+                className="!p-3 rounded-md font-medium"
+                placeholder="Project Name"
+                disabled={!isAdmin}
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Description</h4>
+          <TextArea
+            id="description"
+            name="description"
+            error={errors.description}
+            register={register}
+            placeholder="Enter project description"
+            validations={{}}
+            className="min-h-[102px] text-sm"
+            disabled={!isAdmin}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-10 w-full">
+          <div className="flex flex-col gap-1 w-1/2">
+            <h4 className="text-sm">Identifier</h4>
+            <Input
+              id="identifier"
+              name="identifier"
+              error={errors.identifier}
+              register={register}
+              placeholder="Enter identifier"
+              onChange={handleIdentifierChange}
+              validations={{
+                required: "Identifier is required",
+                validate: (value) => /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
+                minLength: {
+                  value: 1,
+                  message: "Identifier must at least be of 1 character",
+                },
+                maxLength: {
+                  value: 12,
+                  message: "Identifier must at most be of 5 characters",
+                },
+              }}
+              disabled={!isAdmin}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1 w-1/2">
+            <h4 className="text-sm">Network</h4>
+            <Controller
+              name="network"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={selectedNetwork?.label ?? "Select network"}
+                  className="!border-custom-border-200 !shadow-none"
+                  input
+                  disabled={!isAdmin}
+                  optionsClassName="w-full"
+                >
+                  {NETWORK_CHOICES.map((network) => (
+                    <CustomSelect.Option key={network.key} value={network.key}>
+                      {network.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between py-2">
+          <>
+            <PrimaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </PrimaryButton>
+            <span className="text-sm text-custom-sidebar-text-400 italic">
+              Created on {renderShortDateWithYearFormat(project?.created_at)}
+            </span>
+          </>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/project/index.ts b/web/components/project/index.ts
index 92d047312..e702de8ad 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -12,3 +12,5 @@ export * from "./priority-select";
 export * from "./card-list";
 export * from "./card";
 export * from "./join-project-modal";
+export * from "./form";
+export * from "./form-loader";
diff --git a/web/package.json b/web/package.json
index a3b3ba92b..9b7e886c0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,7 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
+    "@plane/ui": "*",
     "@sentry/nextjs": "^7.36.0",
     "@tiptap/extension-code-block-lowlight": "^2.0.4",
     "@tiptap/extension-color": "^2.0.4",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 6fc2f05d8..0ad153722 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -1,46 +1,27 @@
-import { useEffect, useState } from "react";
-
+import { useState } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
+import useSWR from "swr";
 import { Disclosure, Transition } from "@headlessui/react";
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // services
 import projectService from "services/project.service";
 // components
-import { DeleteProjectModal, SettingsSidebar } from "components/project";
-import { ImagePickerPopover } from "components/core";
-import EmojiIconPicker from "components/emoji-icon-picker";
+import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
 // hooks
-import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
-// ui
-import {
-  Input,
-  TextArea,
-  Loader,
-  CustomSelect,
-  DangerButton,
-  Icon,
-  PrimaryButton,
-} from "components/ui";
+// components
+import { Loader, DangerButton, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 import { truncateText } from "helpers/string.helper";
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { IProject, IWorkspace } from "types";
+import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
-// constants
-import { NETWORK_CHOICES } from "constants/project";
+import { PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 
 const defaultValues: Partial<IProject> = {
   name: "",
@@ -49,23 +30,28 @@ const defaultValues: Partial<IProject> = {
   network: 0,
 };
 
-const GeneralSettings: NextPage = () => {
+const GeneralSettings: NextPage = observer(() => {
+  const { project: projectStore } = useMobxStore();
+  // states
   const [selectProject, setSelectedProject] = useState<string | null>(null);
-
+  // user info
   const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  const { data: projectDetails } = useSWR<IProject>(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+  // derived values
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+  console.log("projectDetails", projectDetails);
+  console.log("condition", workspaceSlug && projectId && !projectDetails);
+  console.log("wow", projectId);
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
     workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
       : null
   );
-
+  // API call to fetch user privileges
   const { data: memberDetails } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
     workspaceSlug && projectId
@@ -73,101 +59,8 @@ const GeneralSettings: NextPage = () => {
       : null
   );
 
-  const {
-    register,
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    setValue,
-    setError,
-    formState: { errors, isSubmitting },
-  } = useForm<IProject>({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (projectDetails)
-      reset({
-        ...projectDetails,
-        emoji_and_icon: projectDetails.emoji ?? projectDetails.icon_prop,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  const updateProject = async (payload: Partial<IProject>) => {
-    if (!workspaceSlug || !projectDetails) return;
-
-    await projectService
-      .updateProject(workspaceSlug as string, projectDetails.id, payload, user)
-      .then((res) => {
-        mutate<IProject>(
-          PROJECT_DETAILS(projectDetails.id),
-          (prevData) => ({ ...prevData, ...res }),
-          false
-        );
-
-        mutate(
-          PROJECTS_LIST(workspaceSlug as string, {
-            is_favorite: "all",
-          })
-        );
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Project updated successfully",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Project could not be updated. Please try again.",
-        });
-      });
-  };
-
-  const onSubmit = async (formData: IProject) => {
-    if (!workspaceSlug || !projectDetails) return;
-
-    const payload: Partial<IProject> = {
-      name: formData.name,
-      network: formData.network,
-      identifier: formData.identifier,
-      description: formData.description,
-      cover_image: formData.cover_image,
-    };
-
-    if (typeof formData.emoji_and_icon === "object") {
-      payload.emoji = null;
-      payload.icon_prop = formData.emoji_and_icon;
-    } else {
-      payload.emoji = formData.emoji_and_icon;
-      payload.icon_prop = null;
-    }
-
-    if (projectDetails.identifier !== formData.identifier)
-      await projectService
-        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
-        .then(async (res) => {
-          if (res.exists) setError("identifier", { message: "Identifier already exists" });
-          else await updateProject(payload);
-        });
-    else await updateProject(payload);
-  };
-
-  const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
-
-    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
-    const formattedValue = alphanumericValue.toUpperCase();
-
-    setValue("identifier", formattedValue);
-  };
-
-  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
-  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+  // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
+  // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
   const isAdmin = memberDetails?.role === 20;
 
@@ -184,269 +77,82 @@ const GeneralSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <DeleteProjectModal
-        data={projectDetails ?? null}
-        isOpen={Boolean(selectProject)}
-        onClose={() => setSelectedProject(null)}
-        user={user}
-      />
+      {projectDetails && (
+        <DeleteProjectModal
+          project={projectDetails}
+          isOpen={Boolean(selectProject)}
+          onClose={() => setSelectedProject(null)}
+        />
+      )}
+
       <div className="flex flex-row gap-2 h-full">
         <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
         <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="relative h-44 w-full mt-6">
-              <img
-                src={watch("cover_image")!}
-                alt={watch("cover_image")!}
-                className="h-44 w-full rounded-md object-cover"
-              />
-              <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
-                <div className="flex gap-3 flex-grow truncate">
-                  <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
-                    {projectDetails ? (
-                      <div className="h-7 w-7 grid place-items-center">
-                        <Controller
-                          control={control}
-                          name="emoji_and_icon"
-                          render={({ field: { value, onChange } }) => (
-                            <EmojiIconPicker
-                              label={value ? renderEmoji(value) : "Icon"}
-                              value={value}
-                              onChange={onChange}
-                              disabled={!isAdmin}
-                            />
+          {projectDetails && workspaceSlug ? (
+            <ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
+          ) : (
+            <ProjectDetailsFormLoader />
+          )}
+
+          {isAdmin && (
+            <Disclosure as="div" className="border-t border-custom-border-400">
+              {({ open }) => (
+                <div className="w-full">
+                  <Disclosure.Button
+                    as="button"
+                    type="button"
+                    className="flex items-center justify-between w-full py-4"
+                  >
+                    <span className="text-xl tracking-tight">Delete Project</span>
+                    <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
+                  </Disclosure.Button>
+
+                  <Transition
+                    show={open}
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform opacity-0"
+                    enterTo="transform opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform opacity-100"
+                    leaveTo="transform opacity-0"
+                  >
+                    <Disclosure.Panel>
+                      <div className="flex flex-col gap-8">
+                        <span className="text-sm tracking-tight">
+                          The danger zone of the project delete page is a critical area that requires careful
+                          consideration and attention. When deleting a project, all of the data and resources within
+                          that project will be permanently removed and cannot be recovered.
+                        </span>
+                        <div>
+                          {projectDetails ? (
+                            <div>
+                              <DangerButton
+                                onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                                className="!text-sm"
+                                outline
+                              >
+                                Delete my project
+                              </DangerButton>
+                            </div>
+                          ) : (
+                            <Loader className="mt-2 w-full">
+                              <Loader.Item height="38px" width="144px" />
+                            </Loader>
                           )}
-                        />
-                      </div>
-                    ) : (
-                      <Loader>
-                        <Loader.Item height="46px" width="46px" />
-                      </Loader>
-                    )}
-                  </div>
-                  <div className="flex flex-col gap-1 text-white truncate">
-                    <span className="text-lg font-semibold truncate">{watch("name")}</span>
-                    <span className="flex items-center gap-2 text-sm">
-                      <span>
-                        {watch("identifier")} . {currentNetwork?.label}
-                      </span>
-                    </span>
-                  </div>
-                </div>
-
-                <div className="flex justify-center flex-shrink-0">
-                  {projectDetails ? (
-                    <div>
-                      <Controller
-                        control={control}
-                        name="cover_image"
-                        render={({ field: { value, onChange } }) => (
-                          <ImagePickerPopover
-                            label={"Change cover"}
-                            onChange={(imageUrl) => {
-                              setValue("cover_image", imageUrl);
-                            }}
-                            value={watch("cover_image")}
-                            disabled={!isAdmin}
-                          />
-                        )}
-                      />
-                    </div>
-                  ) : (
-                    <Loader>
-                      <Loader.Item height="32px" width="108px" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-8 my-8">
-              <div className="flex flex-col gap-1">
-                <h4 className="text-sm">Project Name</h4>
-                {projectDetails ? (
-                  <Input
-                    id="name"
-                    name="name"
-                    error={errors.name}
-                    register={register}
-                    className="!p-3 rounded-md font-medium"
-                    placeholder="Project Name"
-                    validations={{
-                      required: "Name is required",
-                    }}
-                    disabled={!isAdmin}
-                  />
-                ) : (
-                  <Loader>
-                    <Loader.Item height="46px" width="100%" />
-                  </Loader>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1">
-                <h4 className="text-sm">Description</h4>
-                {projectDetails ? (
-                  <TextArea
-                    id="description"
-                    name="description"
-                    error={errors.description}
-                    register={register}
-                    placeholder="Enter project description"
-                    validations={{}}
-                    className="min-h-[102px] text-sm"
-                    disabled={!isAdmin}
-                  />
-                ) : (
-                  <Loader className="w-full">
-                    <Loader.Item height="102px" width="full" />
-                  </Loader>
-                )}
-              </div>
-
-              <div className="flex items-center justify-between gap-10 w-full">
-                <div className="flex flex-col gap-1 w-1/2">
-                  <h4 className="text-sm">Identifier</h4>
-                  {projectDetails ? (
-                    <Input
-                      id="identifier"
-                      name="identifier"
-                      error={errors.identifier}
-                      register={register}
-                      placeholder="Enter identifier"
-                      onChange={handleIdentifierChange}
-                      validations={{
-                        required: "Identifier is required",
-                        validate: (value) =>
-                          /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
-                          "Identifier must be in uppercase.",
-                        minLength: {
-                          value: 1,
-                          message: "Identifier must at least be of 1 character",
-                        },
-                        maxLength: {
-                          value: 5,
-                          message: "Identifier must at most be of 5 characters",
-                        },
-                      }}
-                      disabled={!isAdmin}
-                    />
-                  ) : (
-                    <Loader>
-                      <Loader.Item height="36px" width="100%" />
-                    </Loader>
-                  )}
-                </div>
-
-                <div className="flex flex-col gap-1 w-1/2">
-                  <h4 className="text-sm">Network</h4>
-                  {projectDetails ? (
-                    <Controller
-                      name="network"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSelect
-                          value={value}
-                          onChange={onChange}
-                          label={selectedNetwork?.label ?? "Select network"}
-                          className="!border-custom-border-200 !shadow-none"
-                          input
-                          disabled={!isAdmin}
-                        >
-                          {NETWORK_CHOICES.map((network) => (
-                            <CustomSelect.Option key={network.key} value={network.key}>
-                              {network.label}
-                            </CustomSelect.Option>
-                          ))}
-                        </CustomSelect>
-                      )}
-                    />
-                  ) : (
-                    <Loader className="w-full">
-                      <Loader.Item height="46px" width="100%" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between py-2">
-                {projectDetails ? (
-                  <>
-                    <PrimaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
-                      {isSubmitting ? "Updating Project..." : "Update Project"}
-                    </PrimaryButton>
-                    <span className="text-sm text-custom-sidebar-text-400 italic">
-                      Created on {renderShortDateWithYearFormat(projectDetails?.created_at)}
-                    </span>
-                  </>
-                ) : (
-                  <Loader className="mt-2 w-full">
-                    <Loader.Item height="34px" width="100px" />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            {isAdmin && (
-              <Disclosure as="div" className="border-t border-custom-border-400">
-                {({ open }) => (
-                  <div className="w-full">
-                    <Disclosure.Button
-                      as="button"
-                      type="button"
-                      className="flex items-center justify-between w-full py-4"
-                    >
-                      <span className="text-xl tracking-tight">Delete Project</span>
-                      <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
-                    </Disclosure.Button>
-
-                    <Transition
-                      show={open}
-                      enter="transition duration-100 ease-out"
-                      enterFrom="transform opacity-0"
-                      enterTo="transform opacity-100"
-                      leave="transition duration-75 ease-out"
-                      leaveFrom="transform opacity-100"
-                      leaveTo="transform opacity-0"
-                    >
-                      <Disclosure.Panel>
-                        <div className="flex flex-col gap-8">
-                          <span className="text-sm tracking-tight">
-                            The danger zone of the project delete page is a critical area that
-                            requires careful consideration and attention. When deleting a project,
-                            all of the data and resources within that project will be permanently
-                            removed and cannot be recovered.
-                          </span>
-                          <div>
-                            {projectDetails ? (
-                              <div>
-                                <DangerButton
-                                  onClick={() => setSelectedProject(projectDetails.id ?? null)}
-                                  className="!text-sm"
-                                  outline
-                                >
-                                  Delete my project
-                                </DangerButton>
-                              </div>
-                            ) : (
-                              <Loader className="mt-2 w-full">
-                                <Loader.Item height="38px" width="144px" />
-                              </Loader>
-                            )}
-                          </div>
                         </div>
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            )}
-          </form>
+                      </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+          )}
         </div>
       </div>
     </ProjectAuthorizationWrapper>
   );
-};
+});
 
 export default GeneralSettings;
diff --git a/web/pages/api/unsplash.ts b/web/pages/api/unsplash.ts
index 693fecc1c..3f811fbe9 100644
--- a/web/pages/api/unsplash.ts
+++ b/web/pages/api/unsplash.ts
@@ -4,19 +4,22 @@ import type { NextApiRequest, NextApiResponse } from "next";
 const unsplashKey = process.env.UNSPLASH_ACCESS_KEY;
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { query, page, per_page = 20 } = req.query;
+  try {
+    const { query, page, per_page = 20 } = req.query;
+    const url = query
+      ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
+      : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
 
-  const url = query
-    ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
-    : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
-
-  const response = await axios({
-    method: "GET",
-    url,
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
-
-  res.status(200).json(response);
+    const response = await axios({
+      method: "GET",
+      url,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    res.status(200).json(response.data);
+  } catch (error) {
+    console.log("unsplash failed", error);
+    res.status(500).json({ message: "failed to fetch unsplash images", error });
+  }
 }
diff --git a/web/services/project.service.ts b/web/services/project.service.ts
index a33604308..d700d0e5a 100644
--- a/web/services/project.service.ts
+++ b/web/services/project.service.ts
@@ -21,11 +21,7 @@ export class ProjectService extends APIService {
     super(API_BASE_URL);
   }
 
-  async createProject(
-    workspaceSlug: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
+  async createProject(workspaceSlug: string, data: Partial<IProject>, user: any): Promise<IProject> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
       .then((response) => {
         trackEventServices.trackProjectEvent(response.data, "CREATE_PROJECT", user);
@@ -71,12 +67,7 @@ export class ProjectService extends APIService {
       });
   }
 
-  async updateProject(
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
+  async updateProject(workspaceSlug: string, projectId: string, data: Partial<IProject>, user: any): Promise<IProject> {
     return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
       .then((response) => {
         trackEventServices.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
diff --git a/web/store/project.ts b/web/store/project.ts
index 1f5d8fdec..f35982b3d 100644
--- a/web/store/project.ts
+++ b/web/store/project.ts
@@ -20,7 +20,7 @@ export interface IProjectStore {
   projects: { [key: string]: IProject[] };
   project_details: {
     [projectId: string]: IProject; // projectId: project Info
-  } | null;
+  };
   states: {
     [projectId: string]: IStateResponse; // project_id: states
   } | null;
@@ -50,19 +50,22 @@ export interface IProjectStore {
   getProjectMemberById: (memberId: string) => IProjectMember | null;
 
   fetchProjects: (workspaceSlug: string) => Promise<void>;
-  fetchProjectStates: (workspaceSlug: string, projectSlug: string) => Promise<void>;
-  fetchProjectLabels: (workspaceSlug: string, projectSlug: string) => Promise<void>;
-  fetchProjectMembers: (workspaceSlug: string, projectSlug: string) => Promise<void>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
+  fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
 
-  addProjectToFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
-  removeProjectFromFavorites: (workspaceSlug: string, projectSlug: string) => Promise<any>;
+  addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
 
   orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
   updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
 
   joinProject: (workspaceSlug: string, projectIds: string[]) => Promise<void>;
-  leaveProject: (workspaceSlug: string, projectSlug: string) => Promise<void>;
-  deleteProject: (workspaceSlug: string, projectSlug: string) => Promise<void>;
+  leaveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  createProject: (workspaceSlug: string, data: any) => Promise<any>;
+  updateProject: (workspaceSlug: string, projectId: string, data: any) => Promise<any>;
+  deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
 }
 
 class ProjectStore implements IProjectStore {
@@ -74,7 +77,7 @@ class ProjectStore implements IProjectStore {
   projects: { [workspaceSlug: string]: IProject[] } = {}; // workspace_id: project[]
   project_details: {
     [key: string]: IProject; // project_id: project
-  } | null = {};
+  } = {};
   states: {
     [key: string]: IStateResponse; // project_id: states
   } | null = {};
@@ -91,10 +94,6 @@ class ProjectStore implements IProjectStore {
   projectService;
   issueService;
   stateService;
-  moduleService;
-  viewService;
-  pageService;
-  cycleService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
@@ -123,6 +122,8 @@ class ProjectStore implements IProjectStore {
       // action
       setProjectId: action,
       setSearchQuery: action,
+      fetchProjects: action,
+      fetchProjectDetails: action,
 
       getProjectStateById: action,
       getProjectLabelById: action,
@@ -137,6 +138,8 @@ class ProjectStore implements IProjectStore {
 
       orderProjectsWithSortOrder: action,
       updateProjectView: action,
+      createProject: action,
+      updateProject: action,
       leaveProject: action,
     });
 
@@ -144,10 +147,6 @@ class ProjectStore implements IProjectStore {
     this.projectService = new ProjectService();
     this.issueService = new IssueService();
     this.stateService = new ProjectStateServices();
-    this.moduleService = new ModuleService();
-    this.viewService = new ViewService();
-    this.pageService = new PageService();
-    this.cycleService = new CycleService();
   }
 
   get searchedProjects() {
@@ -230,6 +229,22 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  fetchProjectDetails = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.getProject(workspaceSlug, projectId);
+      runInAction(() => {
+        this.project_details = {
+          ...this.project_details,
+          [projectId]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Error while fetching project details", error);
+      throw error;
+    }
+  };
+
   getProjectStateById = (stateId: string) => {
     if (!this.projectId) return null;
     const states = this.projectStates;
@@ -438,6 +453,43 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  createProject = async (workspaceSlug: string, data: any) => {
+    try {
+      const response = await this.projectService.createProject(workspaceSlug, data, this.rootStore.user.currentUser);
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: [...this.projects[workspaceSlug], response],
+        };
+        this.project_details = {
+          ...this.project_details,
+          [response.id]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
+  updateProject = async (workspaceSlug: string, projectId: string, data: any) => {
+    try {
+      const response = await this.projectService.updateProject(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+      await this.fetchProjectDetails(workspaceSlug, projectId);
+      await this.fetchProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
   deleteProject = async (workspaceSlug: string, projectId: string) => {
     try {
       await this.projectService.deleteProject(workspaceSlug, projectId, this.rootStore.user.currentUser);