fix(blue-print): auto fill properties

src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx

@@ -1,5 +1,5 @@
 import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils/colors'
@@ -8,14 +8,15 @@ type MediaOptionKey = 'videoAudio' | 'image' | 'sourceLink'
 
 type MediaOptionsProps = {
   setMediaOptions: (options: { videoAudio: boolean; image: boolean; sourceLink: boolean }) => void
+  initialOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean }
 }
 
-const MediaOptions = ({ setMediaOptions }: MediaOptionsProps) => {
-  const [mediaOptions, setLocalMediaOptions] = useState({
-    videoAudio: false,
-    image: false,
-    sourceLink: false,
-  })
+const MediaOptions = ({ setMediaOptions, initialOptions }: MediaOptionsProps) => {
+  const [mediaOptions, setLocalMediaOptions] = useState(initialOptions)
+
+  useEffect(() => {
+    setLocalMediaOptions(initialOptions)
+  }, [initialOptions])
 
   const handleToggle = (option: MediaOptionKey) => {
     setLocalMediaOptions((prevOptions) => {

src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx

@@ -239,6 +239,16 @@ export const Editor = ({
       setValue('type', selectedSchema.type as string)
       setValue('parent', selectedSchema.parent)
 
+      if (selectedSchema.index) {
+        setValue('selectedIndex', selectedSchema.index)
+      }
+
+      setMediaOptions({
+        videoAudio: !!selectedSchema.media_url,
+        image: !!selectedSchema.image_url,
+        sourceLink: !!selectedSchema.source_link,
+      })
+
       if (selectedSchema.type !== NoParent.value.toLowerCase()) {
         getNodeType(selectedSchema.type as string).then((data) => {
           const parsedDataDefault = data ? parseJson(data) : [{ required: false, type: 'string', key: '' }]
@@ -398,6 +408,24 @@ export const Editor = ({
     return undefined
   }, [selectedSchema, selectedNodeParentOptions])
 
+  const resolvedSelectedIndexValue = useMemo((): TAutocompleteOption | undefined => {
+    if (!selectedSchema) {
+      return undefined
+    }
+
+    const option = attributes.find((attr) => attr.key === selectedSchema.index)
+
+    if (option) {
+      return { label: option.key, value: option.key }
+    }
+
+    if (selectedSchema.index) {
+      return { label: selectedSchema.index, value: selectedSchema.index }
+    }
+
+    return undefined
+  }, [selectedSchema, attributes])
+
   return (
     <Flex>
       <HeaderRow>
@@ -491,16 +519,17 @@ export const Editor = ({
               onDelete={handleDeleteAttribute}
               parent={selectedSchema ? selectedSchema.type : parent}
             />
-            <MediaOptions setMediaOptions={setMediaOptions} />
+            <MediaOptions initialOptions={mediaOptions} setMediaOptions={setMediaOptions} />
             <Flex>
               <LineBar />
               <Flex mb={12} mt={12}>
                 <Text>Indexes</Text>
               </Flex>
               <Grid item mb={2} width="70%">
                 <AutoComplete
-                  onSelect={(val) => setValue(`selectedIndex`, val?.value)}
+                  onSelect={(val) => setValue('selectedIndex', val?.value || '')}
                   options={attributes.map((attr) => ({ label: attr.key, value: attr.key }))}
+                  selectedValue={resolvedSelectedIndexValue}
                 />
               </Grid>
               <LineBar />

src/network/fetchSourcesData/index.ts

@@ -137,6 +137,10 @@ export interface Schema {
   children?: string[]
   primary_color?: string
   node_key?: string
+  index?: string
+  media_url?: string
+  image_url?: string
+  source_link?: string
   attributes?: { [key: string]: string }
 }