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) => {
+          const updatedItems = unionBy(
+            [{ ...updatedData, _id: id }],
+            page.items,
+            '_id'
+          )
+          return {
             ...page,
-          items: page.items.map((item) => {
+            items: updatedItems
-            return item._id === id ? merge({}, item, updatedData) : item
+          }
         })
-        }))
       )
     }, [])
 
@@ -363,6 +369,9 @@ const ObjectTable = forwardRef(
     // Cleanup effect for component unmount
     useEffect(() => {
       return () => {
+        console.log('API: Call unsub', connected)
+        if (connected == true && unsubscribesRef.current) {
+          console.log('API: Got object unsub')
           // Clean up all subscriptions when component unmounts
           unsubscribesRef.current.forEach((unsubscribe) => {
             console.log('CALLING UNSUB on unmount')
@@ -370,26 +379,33 @@ const ObjectTable = forwardRef(
           })
           unsubscribesRef.current = []
           subscribedIdsRef.current = []
+
+          // Clean up type subscription
         }
-    }, [])
+        if (connected == true && subscribeToObjectTypeUpdatesRef.current) {
+          console.log('UNSUBBING type subscription on unmount')
+          console.log('API: Got type unsub')
+          subscribeToObjectTypeUpdatesRef.current()
+          subscribeToObjectTypeUpdatesRef.current = null
+        }
+      }
+    }, [connected])
 
     useEffect(() => {
-      if (connected == true && typeSubscribed == false) {
+      if (
-        const unsubscribe = subscribeToObjectTypeUpdates(type, newEventHandler)
+        connected == true &&
-        setTypeSubscribed(true)
+        subscribeToObjectTypeUpdatesRef.current == null
-        return () => {
+      ) {
-          if (unsubscribe && typeSubscribed == true) {
+        console.log(
-            unsubscribe()
+          'API: Subbing to updates',
-          }
+          subscribeToObjectTypeUpdatesRef.current
-        }
+        )
-      }
+        subscribeToObjectTypeUpdatesRef.current = subscribeToObjectTypeUpdates(
-    }, [
           type,
-      subscribeToObjectTypeUpdates,
+          newEventHandler
-      connected,
+        )
-      newEventHandler,
+      }
-      typeSubscribed
+    }, [type, subscribeToObjectTypeUpdates, connected, newEventHandler])
-    ])
 
     const updateData = useCallback(
       (_id, updatedData) => {