Fixed Project Settings table (#10360)

* chore: Refactor project settings tab to use displayedSettings instead of updatedSettings * updated use effect * Fixed condition * Fixed lint * Added originalSettings * Fixed issue with setting array * Added refetch * Resolved comment
EtherealEngine · Jun 11, 2024 · 23de2af · 23de2af
1 parent 5406697
commit 23de2af
Showing 1 changed file with 22 additions and 32 deletions.
diff --git a/packages/client-core/src/admin/components/settings/tabs/project.tsx b/packages/client-core/src/admin/components/settings/tabs/project.tsx
@@ -50,7 +50,8 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
   const projectState = useMutableState(ProjectState)
   const projects = projectState.projects
 
-  const updatedSettings = useHookstate<ProjectSettingType[]>([])
+  const displayedSettings = useHookstate<ProjectSettingType[]>([])
+  const originalSettings = useHookstate<ProjectSettingType[]>([])
   const selectedProjectId = useHookstate(projects.get(NO_PROXY).length > 0 ? projects.get(NO_PROXY)[0].id : '')
 
   const project = useGet(projectPath, selectedProjectId.value, { query: { $select: ['settings'] } })
@@ -62,30 +63,33 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
   }, [])
 
   useEffect(() => {
-    if (selectedProjectId.value) {
-      updatedSettings.set([])
+    if (project.data && project.data.settings) {
+      originalSettings.set(JSON.parse(JSON.stringify(project.data.settings)))
+      displayedSettings.set(originalSettings.value.slice())
     }
-  }, [selectedProjectId])
+  }, [project])
 
   const handleClear = () => {
-    updatedSettings.set([])
+    displayedSettings.set(originalSettings.value.slice())
   }
 
   const handleSubmit = async () => {
     try {
       state.loading.set(true)
-      for (const updatedSetting of updatedSettings.value) {
-        await patchProjectSetting(
-          updatedSetting.id,
-          { value: updatedSetting.value },
-          {
-            query: {
-              projectId: selectedProjectId.value
+      for (const [index, displayedSetting] of displayedSettings.value.entries()) {
+        if (displayedSetting.value !== originalSettings.value[index].value)
+          await patchProjectSetting(
+            displayedSetting.id,
+            { value: displayedSetting.value },
+            {
+              query: {
+                projectId: selectedProjectId.value
+              }
             }
-          }
-        )
+          )
       }
       state.set({ loading: false, errorMessage: '' })
+      project.refetch()
     } catch (err) {
       state.set({ loading: false, errorMessage: err.message })
     }
@@ -98,22 +102,8 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
     }
   })
 
-  const handleSettingsChange = (e: React.ChangeEvent<HTMLInputElement>, setting: ProjectSettingType) => {
-    const index = updatedSettings.value.findIndex((item) => item.id === setting.id)
-    if (index === -1) {
-      updatedSettings.set([...updatedSettings.value, { ...setting, value: e.target.value }])
-    } else {
-      updatedSettings[index].nested('value').set(e.target.value)
-    }
-  }
-
-  const displayedSettings = JSON.parse(JSON.stringify(project.data?.settings || [])) as ProjectSettingType[]
-  for (const updatedSetting of updatedSettings.value) {
-    const index = displayedSettings.findIndex((setting) => setting.id === updatedSetting.id)
-
-    if (index !== -1) {
-      displayedSettings[index] = updatedSetting
-    }
+  const handleSettingsChange = (e: React.ChangeEvent<HTMLInputElement>, setting: ProjectSettingType, index: number) => {
+    displayedSettings[index].set({ ...setting, value: e.target.value })
   }
 
   return (
@@ -135,7 +125,7 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
 
       {displayedSettings.length > 0 ? (
         <>
-          {displayedSettings.map((setting: ProjectSettingType, index: number) => (
+          {displayedSettings.value.map((setting: ProjectSettingType, index: number) => (
             <div className="mb-3 grid grid-cols-2 gap-2" key={index}>
               <Input
                 className="col-span-1"
@@ -164,7 +154,7 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
                     </Tooltip>
                   )
                 }
-                onChange={(e) => handleSettingsChange(e, setting)}
+                onChange={(e) => handleSettingsChange(e, setting, index)}
               />
             </div>
           ))}