fix(blue-print): data sync issue between Type and Edit Type modals

stakwork · Sep 12, 2024 · fb38823 · fb38823
1 parent 96c982e
commit fb38823
Showing 1 changed file with 34 additions and 23 deletions.
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
@@ -221,29 +221,36 @@ export const Editor = ({
   }, [selectedSchema])
 
   useEffect(() => {
-    const init = async () => {
-      if (selectedSchema) {
-        setValue('type', selectedSchema?.type as string)
-        setValue('parent', selectedSchema.parent)
-
-        let parsedDataDefault: parsedObjProps[] = [{ required: false, type: 'string', key: '' }]
+    const resetForm = () => {
+      reset(defaultValues)
+      setParsedData([{ required: false, type: 'string', key: '' }])
+      setDeletedAttributes([])
+
+      setMediaOptions({
+        videoAudio: false,
+        image: false,
+        sourceLink: false,
+      })
+    }
 
-        if (selectedSchema.type !== NoParent.value.toLowerCase()) {
-          const data = await getNodeType(selectedSchema.type as string)
+    resetForm()
 
-          parsedDataDefault = data ? parseJson(data) : parsedDataDefault
-        }
+    if (selectedSchema) {
+      setValue('type', selectedSchema.type as string)
+      setValue('parent', selectedSchema.parent)
 
-        parsedDataDefault = parsedDataDefault.filter((x) => x.key !== 'node_key')
+      if (selectedSchema.type !== NoParent.value.toLowerCase()) {
+        getNodeType(selectedSchema.type as string).then((data) => {
+          const parsedDataDefault = data ? parseJson(data) : [{ required: false, type: 'string', key: '' }]
+          const filteredData = parsedDataDefault.filter((x) => x.key !== 'node_key')
 
-        setParsedData(parsedDataDefault)
-
-        await fetchAndSetOptions(setSelectedNodeParentOptions, (schema) => schema.type !== selectedSchema.type)
+          setParsedData(filteredData)
+        })
       }
-    }
 
-    init()
-  }, [selectedSchema, setValue])
+      fetchAndSetOptions(setSelectedNodeParentOptions, (schema) => schema.type !== selectedSchema.type)
+    }
+  }, [selectedSchema, setValue, reset])
 
   const parent = watch('parent')
 
@@ -373,19 +380,23 @@ export const Editor = ({
 
   const resolvedParentValue = () => parentOptions?.find((i) => i.value === parent)
 
-  const resolvedSelectedParentValue = (): TAutocompleteOption | undefined => {
-    const option = selectedNodeParentOptions?.find((i) => i.value === parent)
+  const resolvedSelectedParentValue = useMemo((): TAutocompleteOption | undefined => {
+    if (!selectedSchema) {
+      return undefined
+    }
+
+    const option = selectedNodeParentOptions?.find((i) => i.value === selectedSchema.parent)
 
     if (option) {
       return option
     }
 
-    if (parent) {
-      return { label: parent, value: parent }
+    if (selectedSchema.parent) {
+      return { label: selectedSchema.parent, value: selectedSchema.parent }
     }
 
     return undefined
-  }
+  }, [selectedSchema, selectedNodeParentOptions])
 
   return (
     <Flex>
@@ -469,7 +480,7 @@ export const Editor = ({
                         setDisplayParentError(false)
                       }}
                       options={selectedNodeParentOptions || []}
-                      selectedValue={resolvedSelectedParentValue()}
+                      selectedValue={resolvedSelectedParentValue}
                     />
                     {errMessage && <StyledError>{errMessage}</StyledError>}
                   </Flex>