fix: project settings form not loading new data while switching between projects

web/components/project/form.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
@@ -42,6 +42,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     control,
     setValue,
     setError,
+    reset,
     formState: { errors, isSubmitting },
   } = useForm<IProject>({
     defaultValues: {
@@ -51,6 +52,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     },
   });
 
+  useEffect(() => {
+    if (!project) return;
+    reset({
+      ...project,
+      emoji_and_icon: project.emoji ?? project.icon_prop,
+      workspace: (project.workspace as IWorkspace).id,
+    });
+  }, [project, reset]);
+
   const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
 

web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -29,7 +29,7 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // api call to fetch project details
   useSWR(
-    workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null,
     workspaceSlug && projectId
       ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
       : null