From af03fe9f89311b1a7125da1ff0c020d142951dbf Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Wed, 17 Apr 2024 20:28:42 +0500
Subject: [PATCH] fix(render-changes): updating a node on the frontend
 immediately

---
 .../EditNodeNameModal/Body/index.tsx          | 11 +++++---
 src/stores/useDataStore/index.ts              | 25 +++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
index 880b38543..aca8a1c8f 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
+++ b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
@@ -6,9 +6,9 @@ import styled from 'styled-components'
 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'
 
@@ -90,9 +90,14 @@ export const Body = () => {
     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) {
diff --git a/src/stores/useDataStore/index.ts b/src/stores/useDataStore/index.ts
index 1a65de1f3..314ea9e56 100644
--- a/src/stores/useDataStore/index.ts
+++ b/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()