Refactor: Restructure Node Request Format and Fix Type Issues

src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx

@@ -9,7 +9,7 @@ import { getTopicsData, putNodeData } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useSelectedNode } from '~/stores/useGraphStore'
 import { useModal } from '~/stores/useModalStore'
-import { NodeExtended, Topic } from '~/types'
+import { NodeExtended, NodeRequest, Topic } from '~/types'
 import { colors } from '~/utils/colors'
 import { TitleEditor } from '../Title'
 
@@ -88,21 +88,27 @@ export const Body = () => {
 
     const updatedData = getValues()
 
-    const nodeData = {
+    const nodeData: NodeRequest = {
       node_type: node?.node_type,
-      node_data: {
+      properties: {
         name: updatedData.name,
-        properties: updatedData.properties,
-        ref_id: updatedData.ref_id,
+        ...(updatedData.properties as Record<string, unknown>),
       },
+      ref_id: node?.ref_id,
     }
 
     try {
       await putNodeData(node?.ref_id || '', nodeData)
 
       const { updateNode } = useDataStore.getState()
 
-      updateNode({ ...node, ...nodeData.node_data } as NodeExtended)
+      const updatedNode: NodeExtended = {
+        ...node,
+        name: nodeData.properties.name || '',
+        properties: nodeData.properties,
+      } as NodeExtended
+
+      updateNode(updatedNode)
 
       closeHandler()
     } catch (error) {

src/components/SourcesTableModal/SourcesView/Topics/EditTopicModal/index.tsx

@@ -1,97 +1,99 @@
-import { Button } from '@mui/material'
-import { FC, useEffect, useState } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
-import { ClipLoader } from 'react-spinners'
-import { BaseModal } from '~/components/Modal'
-import { putNodeData } from '~/network/fetchSourcesData'
-import { useModal } from '~/stores/useModalStore'
-import { useTopicsStore } from '~/stores/useTopicsStore'
-import { Topic } from '~/types'
-import { colors } from '~/utils/colors'
-import { TitleEditor } from './Title'
-import styled from 'styled-components'
-
-type Props = {
-  topic: Topic
-  onClose: () => void
-}
-
-export type FormData = {
-  name: string
-}
-
-export const EditTopicModal: FC<Props> = ({ topic, onClose }) => {
-  const { close } = useModal('editTopic')
-  const [data] = useTopicsStore((s) => [s.data])
-  const form = useForm<FormData>({ mode: 'onChange' })
-  const { watch, setValue, reset, getValues } = form
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (topic) {
-      setValue('name', topic?.name)
-    }
-
-    return () => {
-      reset()
-    }
-  }, [topic, setValue, reset])
-
-  const nameValue = watch('name')
-  const name = nameValue?.trim()
-
-  const closeHandler = () => {
-    onClose()
-    close()
-  }
-
-  const handleSave = async () => {
-    setLoading(true)
-
-    try {
-      await putNodeData(topic?.ref_id, { node_type: topic?.node_type, node_data: { name } })
-
-      if (data) {
-        const newData = { ...data }
-
-        newData[topic?.ref_id].name = name
-
-        useTopicsStore.setState({ data: newData })
-      }
-
-      closeHandler()
-    } catch (error) {
-      console.warn(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const isTopicNameChanged = getValues().name && topic?.name !== getValues().name
-
-  return (
-    <BaseModal id="editTopic" kind="regular" onClose={closeHandler} preventOutsideClose>
-      <FormProvider {...form}>
-        <TitleEditor />
-        <Button
-          color="secondary"
-          disabled={loading || !name || !isTopicNameChanged}
-          onClick={handleSave}
-          size="large"
-          variant="contained"
-        >
-          Save Changes
-          {loading && (
-            <ClipLoaderWrapper>
-              <ClipLoader color={colors.lightGray} size={12} />
-            </ClipLoaderWrapper>
-          )}
-        </Button>
-      </FormProvider>
-    </BaseModal>
-  )
-}
-
-const ClipLoaderWrapper = styled.span`
-  margin-top: 2px;
-`
+import { Button } from '@mui/material'
+import { FC, useEffect, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { ClipLoader } from 'react-spinners'
+import styled from 'styled-components'
+import { BaseModal } from '~/components/Modal'
+import { putNodeData } from '~/network/fetchSourcesData'
+import { useModal } from '~/stores/useModalStore'
+import { useTopicsStore } from '~/stores/useTopicsStore'
+import { Topic } from '~/types'
+import { colors } from '~/utils/colors'
+import { TitleEditor } from './Title'
+
+type Props = {
+  topic: Topic
+  onClose: () => void
+}
+
+export type FormData = {
+  name: string
+}
+
+export const EditTopicModal: FC<Props> = ({ topic, onClose }) => {
+  const { close } = useModal('editTopic')
+  const [data] = useTopicsStore((s) => [s.data])
+  const form = useForm<FormData>({ mode: 'onChange' })
+  const { watch, setValue, reset, getValues } = form
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (topic) {
+      setValue('name', topic?.name)
+    }
+
+    return () => {
+      reset()
+    }
+  }, [topic, setValue, reset])
+
+  const nameValue = watch('name')
+  const name = nameValue?.trim()
+
+  const closeHandler = () => {
+    onClose()
+    close()
+  }
+
+  const handleSave = async () => {
+    setLoading(true)
+
+    try {
+      await putNodeData(topic?.ref_id, {
+        node_type: topic?.node_type,
+        properties: { name }
+      })
+
+      if (data) {
+        const newData = { ...data }
+
+        newData[topic?.ref_id].name = name
+        useTopicsStore.setState({ data: newData })
+      }
+
+      closeHandler()
+    } catch (error) {
+      console.warn(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const isTopicNameChanged = getValues().name && topic?.name !== getValues().name
+
+  return (
+    <BaseModal id="editTopic" kind="regular" onClose={closeHandler} preventOutsideClose>
+      <FormProvider {...form}>
+        <TitleEditor />
+        <Button
+          color="secondary"
+          disabled={loading || !name || !isTopicNameChanged}
+          onClick={handleSave}
+          size="large"
+          variant="contained"
+        >
+          Save Changes
+          {loading && (
+            <ClipLoaderWrapper>
+              <ClipLoader color={colors.lightGray} size={12} />
+            </ClipLoaderWrapper>
+          )}
+        </Button>
+      </FormProvider>
+    </BaseModal>
+  )
+}
+
+const ClipLoaderWrapper = styled.span`
+  margin-top: 2px;
+`