Merge pull request #2255 from MirzaHanan/Edit-Node-render-properties

Fixed(Edit Node): Render Properties
stakwork · Oct 3, 2024 · 0e46895 · 0e46895
2 parents ea104e1 + 9b5d526
commit 0e46895
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 59 deletions.
diff --git a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
@@ -17,29 +17,28 @@ export type FormData = {
   name: string
   image_url: string
   imageInputType?: boolean
+  [key: string]: unknown
 }
 
 export const Body = () => {
   const { close } = useModal('editNodeName')
   const form = useForm<FormData>({ mode: 'onChange' })
   const { watch, setValue, reset, getValues } = form
   const [loading, setLoading] = useState(false)
-
   const [topicIsLoading, setTopicIsLoading] = useState(false)
-
   const [actualTopicNode, setActualTopicNode] = useState<null | Topic>()
-
   const selectedNode = useSelectedNode()
-
   const { open: openRemoveNodeModal } = useModal('removeNode')
 
   useEffect(() => {
     if (actualTopicNode) {
-      setValue('name', actualTopicNode?.name)
+      Object.keys(actualTopicNode).forEach((key) => {
+        setValue(key, actualTopicNode[key as keyof Topic])
+      })
     } else if (selectedNode) {
-      setValue('name', selectedNode.name)
-
-      setValue('image_url', selectedNode?.image_url ?? '')
+      Object.keys(selectedNode).forEach((key) => {
+        setValue(key, selectedNode[key as keyof NodeExtended])
+      })
     }
 
     return () => {
@@ -72,9 +71,6 @@ export const Body = () => {
   }, [selectedNode])
 
   const isValidImageUrl = watch('imageInputType')
-
-  const topicValue = watch('name')
-
   const imageUrl = watch('image_url')
 
   useEffect(() => {
@@ -90,8 +86,7 @@ export const Body = () => {
   const handleSave = async () => {
     setLoading(true)
 
-    const propName = 'name'
-    const updatedData = { [propName]: topicValue.trim(), image_url: imageUrl.trim() }
+    const updatedData = getValues()
 
     try {
       await putNodeData(node?.ref_id || '', { node_data: updatedData })
@@ -130,23 +125,21 @@ export const Body = () => {
         ) : (
           <TitleEditor />
         )}
-        <Flex direction="row" mb={6}>
+        <Flex direction="row" mt={18}>
           <DeleteButton
             color="secondary"
             disabled={topicIsLoading || !node}
             onClick={handleDelete}
             size="large"
-            style={{ marginRight: 20 }}
             variant="contained"
           >
             Delete
           </DeleteButton>
-          <Button
+          <SaveButton
             color="secondary"
             disabled={shouldDisableSave}
             onClick={handleSave}
             size="large"
-            style={{ flex: 1 }}
             variant="contained"
           >
             Save Changes
@@ -155,7 +148,7 @@ export const Body = () => {
                 <ClipLoader color={colors.lightGray} size={12} />
               </ClipLoaderWrapper>
             )}
-          </Button>
+          </SaveButton>
         </Flex>
       </FormProvider>
     </Wrapper>
@@ -170,6 +163,8 @@ const DeleteButton = styled(Button)`
   && {
     color: ${colors.primaryRed};
     background-color: rgba(237, 116, 116, 0.1);
+    flex: 1;
+    margin-right: 10px;
 
     &:hover,
     &:active,
@@ -180,6 +175,12 @@ const DeleteButton = styled(Button)`
   }
 `
 
+const SaveButton = styled(Button)`
+  && {
+    flex: 1;
+  }
+`
+
 const ClipLoaderWrapper = styled.span`
   margin-top: 3px;
 `
diff --git a/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
@@ -1,6 +1,6 @@
+import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import EditNodeIcon from '~/components/Icons/EditNodeIcon'
-import { imageUrlRegex } from '~/components/ModalsContainer/EditNodeNameModal/utils'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { TextInput } from '~/components/common/TextInput'
@@ -22,11 +22,26 @@ export const TitleEditor = () => {
   const selectedNode = useSelectedNode()
   const nodeType = selectedNode?.node_type as string
 
+  const [properties, setProperties] = useState<{ [key: string]: unknown }>({})
+
+  useEffect(() => {
+    if (selectedNode?.properties) {
+      setProperties(selectedNode.properties)
+    }
+  }, [selectedNode])
+
   const handleEditNode = () => {
     close()
     openAddItemNodeModal()
   }
 
+  const handleChange = (key: string, value: string) => {
+    setProperties((prev) => ({
+      ...prev,
+      [key]: value,
+    }))
+  }
+
   return (
     <Flex>
       <Flex align="center" direction="row" justify="space-between" mb={18}>
@@ -43,46 +58,27 @@ export const TitleEditor = () => {
         </Flex>
       </Flex>
 
-      <Flex mb={18}>
-        <LabelText
-          style={{
-            marginBottom: 8,
-          }}
-        >
-          Node Name
-        </LabelText>
-        <TextInput
-          id="cy-topic"
-          maxLength={50}
-          name="name"
-          placeholder="Node name"
-          rules={{
-            ...requiredRule,
-          }}
-        />
-      </Flex>
-
-      <Flex mb={36}>
-        <LabelText
-          style={{
-            marginBottom: 8,
-          }}
-        >
-          Image Url
-        </LabelText>
-        <TextInput
-          id="cy-image_url"
-          maxLength={500}
-          name="image_url"
-          placeholder="Image url"
-          rules={{
-            pattern: {
-              message: 'Please enter a valid URL',
-              value: imageUrlRegex,
-            },
-          }}
-        />
-      </Flex>
+      <ScrollableContent>
+        {Object.keys(properties).map((key) => (
+          <Flex key={key} mb={18}>
+            <LabelText
+              style={{
+                marginBottom: 8,
+              }}
+            >
+              {key}
+            </LabelText>
+            <TextInput
+              id={`cy-${key}`}
+              maxLength={50}
+              name={`properties.${key}`}
+              onChange={(value: string) => handleChange(key, value)}
+              placeholder={`Please Enter the ${key}`}
+              rules={key === 'name' ? { ...requiredRule } : {}}
+            />
+          </Flex>
+        ))}
+      </ScrollableContent>
     </Flex>
   )
 }
@@ -113,3 +109,11 @@ const EditIconWrapper = styled(Flex)`
   align-items: center;
   cursor: pointer;
 `
+
+const ScrollableContent = styled(Flex)`
+  display: flex;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 40px;
+  width: calc(100% + 40px);
+`