Fix: Updating a Node Should Render Changes on the Frontend Immediately

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

@@ -6,9 +6,9 @@
 import { validateImageInputType } from '~/components/ModalsContainer/EditNodeNameModal/utils'
 import { Flex } from '~/components/common/Flex'
 import { getTopicsData, putNodeData } from '~/network/fetchSourcesData'
-import { useSelectedNode } from '~/stores/useDataStore'
+import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
 import { useModal } from '~/stores/useModalStore'
-import { Topic } from '~/types'
+import { NodeExtended, Topic } from '~/types'
 import { colors } from '~/utils/colors'
 import { TitleEditor } from '../Title'
 
@@ -61,7 +61,7 @@
 
         setActualTopicNode(node)
       } catch (error) {
         console.log(error)
       } finally {
         setTopicIsLoading(false)
       }
@@ -90,9 +90,14 @@
     setLoading(true)
 
     const propName = 'name'
+    const updatedData = { [propName]: topicValue.trim(), image_url: imageUrl.trim() }
 
     try {
-      await putNodeData(node?.ref_id || '', { [propName]: topicValue.trim(), image_url: imageUrl.trim() })
+      await putNodeData(node?.ref_id || '', updatedData)
+
+      const { updateNode } = useDataStore.getState()
+
+      updateNode({ ...node, ...updatedData } as NodeExtended)
 
       closeHandler()
     } catch (error) {

src/stores/useDataStore/index.ts

@@ -74,6 +74,7 @@ export type DataStore = {
   setHideNodeDetails: (_: boolean) => void
   setTeachMe: (_: boolean) => void
   addNewNode: (node: NodeExtended) => void
+  updateNode: (updatedNode: NodeExtended) => void
   removeNode: (id: string) => void
   setSidebarFilterCounts: (filterCounts: SidebarFilterWithCount[]) => void
 }
@@ -106,6 +107,7 @@ const defaultData: Omit<
   | 'setHideNodeDetails'
   | 'setTeachMe'
   | 'addNewNode'
+  | 'updateNode'
   | 'removeNode'
 > = {
   categoryFilter: null,
@@ -219,6 +221,29 @@ export const useDataStore = create<DataStore>()(
     setShowSelectionGraph: (showSelectionGraph) => set({ showSelectionGraph }),
     setHideNodeDetails: (hideNodeDetails) => set({ hideNodeDetails }),
     setTeachMe: (showTeachMe) => set({ showTeachMe }),
+    updateNode: (updatedNode) => {
+      set((state) => {
+        const nodes = state.data?.nodes || []
+        const links = state.data?.links || []
+
+        const updatedNodes = nodes.map((node) => {
+          if (node.ref_id === updatedNode.ref_id) {
+            return { ...node, ...updatedNode }
+          }
+
+          return node
+        })
+
+        return {
+          ...state,
+          data: {
+            ...state.data,
+            nodes: updatedNodes,
+            links,
+          },
+        }
+      })
+    },
     addNewNode: (node) => {
       const { data } = get()