Fixed object update issues.

src/components/Dashboard/common/ObjectTable.jsx

@@ -39,7 +39,7 @@ import CheckIcon from '../../Icons/CheckIcon'
 import { useNavigate } from 'react-router-dom'
 import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
 import { AuthContext } from '../context/AuthContext'
-import merge from 'lodash/merge'
+import unionBy from 'lodash/unionBy'
 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
 
@@ -88,9 +88,10 @@ const ObjectTable = forwardRef(
     const [lazyLoading, setLazyLoading] = useState(false)
 
     const subscribedIdsRef = useRef([])
-    const [typeSubscribed, setTypeSubscribed] = useState(false)
+    // const [typeSubscribed, setTypeSubscribed] = useState(false)
     const unsubscribesRef = useRef([])
     const updateEventHandlerRef = useRef()
+    const subscribeToObjectTypeUpdatesRef = useRef(null)
 
     const rowActions =
       model.actions?.filter((action) => action.row == true) || []
@@ -291,12 +292,17 @@ const ObjectTable = forwardRef(
     const updateEventHandler = useCallback((id, updatedData) => {
       console.log('GOT UPDATE FOR', id)
       setPages((prevPages) =>
-        prevPages.map((page) => ({
+        prevPages.map((page) => {
-          ...page,
+          const updatedItems = unionBy(
-          items: page.items.map((item) => {
+            [{ ...updatedData, _id: id }],
-            return item._id === id ? merge({}, item, updatedData) : item
+            page.items,
-          })
+            '_id'
-        }))
+          )
+          return {
+            ...page,
+            items: updatedItems
+          }
+        })
       )
     }, [])
 
@@ -363,33 +369,43 @@ const ObjectTable = forwardRef(
     // Cleanup effect for component unmount
     useEffect(() => {
       return () => {
-        // Clean up all subscriptions when component unmounts
+        console.log('API: Call unsub', connected)
-        unsubscribesRef.current.forEach((unsubscribe) => {
+        if (connected == true && unsubscribesRef.current) {
-          console.log('CALLING UNSUB on unmount')
+          console.log('API: Got object unsub')
-          if (unsubscribe) unsubscribe()
+          // Clean up all subscriptions when component unmounts
-        })
+          unsubscribesRef.current.forEach((unsubscribe) => {
-        unsubscribesRef.current = []
+            console.log('CALLING UNSUB on unmount')
-        subscribedIdsRef.current = []
+            if (unsubscribe) unsubscribe()
-      }
+          })
-    }, [])
+          unsubscribesRef.current = []
+          subscribedIdsRef.current = []
 
-    useEffect(() => {
+          // Clean up type subscription
-      if (connected == true && typeSubscribed == false) {
+        }
-        const unsubscribe = subscribeToObjectTypeUpdates(type, newEventHandler)
+        if (connected == true && subscribeToObjectTypeUpdatesRef.current) {
-        setTypeSubscribed(true)
+          console.log('UNSUBBING type subscription on unmount')
-        return () => {
+          console.log('API: Got type unsub')
-          if (unsubscribe && typeSubscribed == true) {
+          subscribeToObjectTypeUpdatesRef.current()
-            unsubscribe()
+          subscribeToObjectTypeUpdatesRef.current = null
-          }
         }
       }
-    }, [
+    }, [connected])
-      type,
+
-      subscribeToObjectTypeUpdates,
+    useEffect(() => {
-      connected,
+      if (
-      newEventHandler,
+        connected == true &&
-      typeSubscribed
+        subscribeToObjectTypeUpdatesRef.current == null
-    ])
+      ) {
+        console.log(
+          'API: Subbing to updates',
+          subscribeToObjectTypeUpdatesRef.current
+        )
+        subscribeToObjectTypeUpdatesRef.current = subscribeToObjectTypeUpdates(
+          type,
+          newEventHandler
+        )
+      }
+    }, [type, subscribeToObjectTypeUpdates, connected, newEventHandler])
 
     const updateData = useCallback(
       (_id, updatedData) => {