src/components/Dashboard/common/ObjectTable.jsx

@@ -82,14 +82,10 @@ const ObjectTable = forwardRef(
 
     // Table state
     const [pages, setPages] = useState([])
-    const pagesRef = useRef(pages)
     const [hasMore, setHasMore] = useState(true)
     const [loading, setLoading] = useState(true)
     const [lazyLoading, setLazyLoading] = useState(false)
 
-    const [subscribedIds, setSubscribedIds] = useState([])
-    const [typeSubscribed, setTypeSubscribed] = useState(false)
-
     const rowActions =
       model.actions?.filter((action) => action.row == true) || []
 
@@ -144,7 +140,6 @@ const ObjectTable = forwardRef(
             order: sorter.order
           })
         }
-        console.log('Fetching data...')
         try {
           const result = await fetchObjects(type, {
             page: pageNum,
@@ -278,27 +273,25 @@ const ObjectTable = forwardRef(
 
     const reload = useCallback(async () => {
       setLazyLoading(true)
-      console.log('Pages during reload', pagesRef.current)
+      for (let i = 0; i < pages.length; i++) {
-      for (let i = 0; i < pagesRef.current.length; i++) {
+        const page = pages[i]
-        const page = pagesRef.current[i]
         await fetchData(page.pageNum)
       }
-    }, [fetchData])
+    }, [fetchData, pages])
 
     // Update event handler for real-time updates
-    const updateEventHandler = useCallback((id, updatedData) => {
+    const updateEventHandler = useCallback((updatedData) => {
       setPages((prevPages) =>
         prevPages.map((page) => ({
           ...page,
-          items: page.items.map((item) => {
+          items: page.items.map((item) =>
-            return item._id === id ? merge({}, item, updatedData) : item
+            item._id === updatedData._id ? merge({}, item, updatedData) : item
-          })
+          )
         }))
       )
     }, [])
 
     const newEventHandler = useCallback(() => {
-      console.log('GOT NEW EVENT')
       reload()
     }, [reload])
 
@@ -306,19 +299,17 @@ const ObjectTable = forwardRef(
     useEffect(() => {
       if (pages.length > 0 && connected) {
         const unsubscribes = []
+
         // Subscribe to each item in all pages
         pages.forEach((page) => {
           if (page?.items && page?.items?.length > 0) {
             page.items.forEach((item) => {
-              if (!item.isSkeleton && !subscribedIds.includes(item?._id)) {
+              if (!item.isSkeleton) {
                 const unsubscribe = subscribeToObjectUpdates(
                   item._id,
                   type,
-                  (updateData) => {
+                  updateEventHandler
-                    updateEventHandler(item._id, updateData)
-                  }
                 )
-                setSubscribedIds((prev) => [...prev, item._id])
                 if (unsubscribe) {
                   unsubscribes.push(unsubscribe)
                 }
@@ -334,32 +325,18 @@ const ObjectTable = forwardRef(
           })
         }
       }
-    }, [
+    }, [pages, type, subscribeToObjectUpdates, updateEventHandler, connected])
-      pages,
-      type,
-      subscribeToObjectUpdates,
-      updateEventHandler,
-      connected,
-      subscribedIds
-    ])
 
     useEffect(() => {
-      if (connected == true && typeSubscribed == false) {
+      if (connected == true) {
         const unsubscribe = subscribeToObjectTypeUpdates(type, newEventHandler)
-        setTypeSubscribed(true)
         return () => {
-          if (unsubscribe && typeSubscribed == true) {
+          if (unsubscribe) {
             unsubscribe()
           }
         }
       }
-    }, [
+    }, [type, subscribeToObjectTypeUpdates, connected, newEventHandler])
-      type,
-      subscribeToObjectTypeUpdates,
-      connected,
-      newEventHandler,
-      typeSubscribed
-    ])
 
     const updateData = useCallback(
       (_id, updatedData) => {
@@ -474,10 +451,6 @@ const ObjectTable = forwardRef(
       }
     ]
 
-    useEffect(() => {
-      console.log('Pages', pages)
-      pagesRef.current = pages
-    }, [pages])
     // Add columns in the order specified by model.columns
     model.columns.forEach((colName) => {
       const prop = modelProperties.find((p) => p.name === colName)

src/components/Dashboard/common/TemplateEditor.jsx

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect, useRef, useCallback } from 'react'
+import { useState, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { Flex, Alert, Card, Spin, Splitter, Button, Modal, Input } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -44,28 +44,25 @@ const TemplateEditor = ({
     }
   }
 
-  const reloadPreview = useCallback(
+  function reloadPreview(content, testObject = {}, scale = 1) {
-    (content, testObject = {}, scale = 1) => {
+    fetchTemplatePreview(
-      fetchTemplatePreview(
+      objectData._id,
-        objectData._id,
+      content,
-        content,
+      testObject,
-        testObject,
+      scale,
-        scale,
+      (result) => {
-        (result) => {
+        setReloadLoading(false)
-          setReloadLoading(false)
+        if (result?.error) {
-          if (result?.error) {
+          setPreviewError(true)
-            setPreviewError(true)
+          setPreviewMessage(result.error)
-            setPreviewMessage(result.error)
+        } else {
-          } else {
+          setPreviewError(false)
-            setPreviewError(false)
+          updatePreviewContent(result.html)
-            updatePreviewContent(result.html)
+          setPreviewMessage('No issues found.')
-            setPreviewMessage('No issues found.')
-          }
         }
-      )
+      }
-    },
+    )
-    [fetchTemplatePreview, objectData?._id]
+  }
-  )
 
   // Move useEffect to component level and use state to track objectData changes
   useEffect(() => {
@@ -73,7 +70,7 @@ const TemplateEditor = ({
       console.log('PreviewScale', previewScale)
       reloadPreview(objectData.content, objectData.testObject, previewScale)
     }
-  }, [objectData, previewScale, reloadPreview])
+  }, [objectData, previewScale])
 
   return (
     <>

src/components/Dashboard/context/ApiServerContext.jsx

@@ -243,17 +243,16 @@ const ApiServerProvider = ({ children }) => {
 
   const offObjectUpdatesEvent = useCallback((id, objectType, callback) => {
     if (socketRef.current && socketRef.current.connected == true) {
-      const callbacksRefKey = `${objectType}:${id}`
       // Remove callback from the subscribed callbacks map
-      if (subscribedCallbacksRef.current.has(callbacksRefKey)) {
+      if (subscribedCallbacksRef.current.has(id)) {
         const callbacks = subscribedCallbacksRef.current
-          .get(callbacksRefKey)
+          .get(id)
           .filter((cb) => cb !== callback)
         if (callbacks.length === 0) {
-          subscribedCallbacksRef.current.delete(callbacksRefKey)
+          subscribedCallbacksRef.current.delete(id)
           socketRef.current.emit('unsubscribe', { id: id, type: objectType })
         } else {
-          subscribedCallbacksRef.current.set(callbacksRefKey, callbacks)
+          subscribedCallbacksRef.current.set(id, callbacks)
         }
       }
     }
@@ -262,7 +261,6 @@ const ApiServerProvider = ({ children }) => {
   const offObjectTypeUpdatesEvent = useCallback((objectType, callback) => {
     if (socketRef.current && socketRef.current.connected == true) {
       // Remove callback from the subscribed callbacks map
-      console.log('Unsubscribing from type')
       if (subscribedCallbacksRef.current.has(objectType)) {
         const callbacks = subscribedCallbacksRef.current
           .get(objectType)