Merge pull request #1311 from AhsanFarooqDev/delete_node_on_the_frontend

Delete node on the frontend should remove it from the graph

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

@@ -88,10 +88,12 @@ export const Body = () => {
 
     setLoading(true)
 
+    const selectedNodeId = selectedNode?.ref_id as string
+
     try {
       await deleteNode(refId)
 
-      removeNode(refId)
+      removeNode(selectedNodeId)
       setSelectedNode(null)
 
       closeHandler()

src/components/Universe/Graph/Cubes/index.tsx

@@ -2,9 +2,8 @@ import { Select } from '@react-three/drei'
 import { ThreeEvent } from '@react-three/fiber'
 import { memo, useCallback } from 'react'
 import { Object3D } from 'three'
-import { useGraphData } from '~/components/DataRetriever'
 import { useAppStore } from '~/stores/useAppStore'
-import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
+import { useDataStore, useSelectedNode, useUpdateGraphData } from '~/stores/useDataStore'
 import { NodeExtended } from '~/types'
 import { BlurryInstances } from './BlurryInstances'
 import { Cube } from './Cube'
@@ -14,7 +13,7 @@ import { TextNode } from './Text'
 import { isMainTopic } from './constants'
 
 export const Cubes = memo(() => {
-  const data = useGraphData()
+  const data = useUpdateGraphData()
   const selectedNode = useSelectedNode()
   const nearbyNodeIds = useDataStore((s) => s.nearbyNodeIds)
   const setHoveredNode = useDataStore((s) => s.setHoveredNode)
@@ -87,7 +86,7 @@ export const Cubes = memo(() => {
     >
       <BlurryInstances hide={hideUniverse} />
       <RelevanceBadges />
-      {data.nodes
+      {data?.nodes
         .filter((f) => {
           const isSelected = f?.ref_id === selectedNode?.ref_id
           const isNearbyOrPersistent = nearbyNodeIds.includes(f.ref_id || '') || isMainTopic(f)

src/stores/useDataStore/__tests__/index.tsx

@@ -23,4 +23,37 @@ describe('useDataStore', () => {
   it('should return views in correct order', () => {
     expect(graphStyles).toEqual(['sphere', 'force', 'split', 'earth'])
   })
+
+  it('removes node correctly', () => {
+    const initialData = {
+      nodes: [
+        { id: 'node_1', ref_id: 'node_1' },
+        { id: 'node_2', ref_id: 'node_2' },
+        { id: 'node_3', ref_id: 'node_3' },
+      ],
+      links: [{ source: '1', target: '3' }],
+    }
+
+    const { removeNode, setData } = useDataStore.getState()
+
+    // Set initial data
+    setData(initialData)
+
+    // Remove node with id '2'
+    removeNode('node_2')
+
+    // Get updated state data
+    const updatedData = useDataStore.getState().data
+
+    // Expected result after removing node '2'
+    const expectedData = {
+      nodes: [
+        { id: 'node_1', ref_id: 'node_1' },
+        { id: 'node_3', ref_id: 'node_3' },
+      ],
+      links: [{ source: '1', target: '3' }],
+    }
+
+    expect(updatedData).toEqual(expectedData)
+  })
 })

src/stores/useDataStore/index.ts

@@ -264,7 +264,7 @@ export const useDataStore = create<DataStore>()(
 
       const removeData = {
         ...data,
-        nodes: data.nodes.filter((el) => el.ref_id !== id && el.id !== id && el.id !== id && el.ref_id !== id),
+        nodes: data.nodes.filter((el) => el.ref_id !== id && el.id !== id),
       }
 
       set({ data: removeData })
@@ -284,3 +284,9 @@ export const useFilteredNodes = () =>
       s.sidebarFilter === 'Other' ? !i.node_type : i.node_type === s.sidebarFilter,
     )
   })
+
+export const useUpdateGraphData = () => {
+  const data = useDataStore((state) => state.data)
+
+  return data
+}