Fix Kanban widget getting into infinite loop (#7808)

* Fix kanban rendering leading to infinite look

* Fix disabled page is being displayed on switch page event dropdown

* Fix kanban getting into infinite loop

frontend/src/Editor/Components/Kanban/Components/Item.jsx

@@ -26,11 +26,12 @@ export const Item = React.memo(
         isFirstItem = false,
         setShowModal = () => {},
         cardDataAsObj = {},
+        setLastSelectedCard,
         ...props
       },
       ref
     ) => {
-      const { id, component, containerProps, fireEvent, setExposedVariable, darkMode } = kanbanProps;
+      const { id, component, containerProps, fireEvent, darkMode, setExposedVariable } = kanbanProps;
       useEffect(() => {
         if (!dragOverlay) {
           return;
@@ -61,6 +62,7 @@ export const Item = React.memo(
             )
               return;
             setExposedVariable('lastSelectedCard', cardDataAsObj[value]);
+            setLastSelectedCard(cardDataAsObj[value]);
             setShowModal(true);
             fireEvent('onCardSelected');
           }}

frontend/src/Editor/Components/Kanban/KanbanBoard.jsx

@@ -37,11 +37,10 @@ const dropAnimation = {
 const TRASH_ID = 'void';
 
 export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
-  const { properties, fireEvent, setExposedVariable, setExposedVariables, exposedVariables, styles } = kanbanProps;
-  const { lastSelectedCard = {} } = exposedVariables;
+  const { properties, fireEvent, setExposedVariable, setExposedVariables, styles } = kanbanProps;
   const { columnData, cardData, cardWidth, cardHeight, showDeleteButton, enableAddCard } = properties;
   const { accentColor } = styles;
-
+  const [lastSelectedCard, setLastSelectedCard] = useState({});
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const columnDataAsObj = useMemo(() => convertArrayToObj(columnData), [JSON.stringify(columnData)]);
 
@@ -85,7 +84,6 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
   useEffect(() => {
     droppableItemsColumnId.current = containers.find((container) => items[container]?.length > 0);
   }, [items, containers]);
-
   useEffect(() => {
     setExposedVariable('updateCardData', async function (cardId, value) {
       if (cardDataAsObj[cardId] === undefined) return toast.error('Card not found');
@@ -105,9 +103,10 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
           updatedCardData: getData(cardDataAsObj),
         });
         fireEvent('onUpdate');
+      } else {
+        setExposedVariable('updatedCardData', getData(cardDataAsObj));
+        fireEvent('onUpdate');
       }
-      setExposedVariable('updatedCardData', getData(cardDataAsObj));
-      fireEvent('onUpdate');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lastSelectedCard, JSON.stringify(cardDataAsObj)]);
@@ -149,7 +148,6 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
         ...items,
         [columnId]: [...items[columnId], cardDetails.id],
       }));
-
       setExposedVariables({ lastAddedCard: { ...cardDetails }, updatedCardData: getData(cardDataAsObj) });
       fireEvent('onCardAdded');
     });
@@ -371,6 +369,7 @@ export function KanbanBoard({ widgetHeight, kanbanProps, parentRef }) {
                           isFirstItem={index === 0 && droppableItemsColumnId.current === columnId}
                           setShowModal={setShowModal}
                           cardDataAsObj={cardDataAsObj}
+                          setLastSelectedCard={setLastSelectedCard}
                         />
                       );
                     })}
@@ -427,6 +426,7 @@ function SortableItem({
   isFirstItem,
   setShowModal,
   cardDataAsObj,
+  setLastSelectedCard,
 }) {
   const { setNodeRef, setActivatorNodeRef, listeners, isDragging, isSorting, transform, transition } = useSortable({
     id,
@@ -451,6 +451,7 @@ function SortableItem({
       isFirstItem={isFirstItem}
       setShowModal={setShowModal}
       cardDataAsObj={cardDataAsObj}
+      setLastSelectedCard={setLastSelectedCard}
     />
   );
 }

frontend/src/Editor/Components/KanbanBoard/KanbanBoard.jsx

@@ -6,6 +6,7 @@ import { useCurrentState } from '@/_stores/currentStateStore';
 
 export const BoardContext = React.createContext({});
 
+// This one is deprecated and not deleted to support backward compatibility
 export const KanbanBoard = ({
   id,
   height,

frontend/src/Editor/EditorFunc.jsx

@@ -227,6 +227,15 @@ const EditorComponent = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify({ appDefinition, currentPageId, dataQueries })]);
 
+  useEffect(
+    () => {
+      const components = appDefinition?.pages?.[currentPageId]?.components || {};
+      computeComponentState(components);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentPageId]
+  );
+
   useEffect(() => {
     // This effect runs when lastKeyPressTimestamp changes
     // You can place your database update logic here
@@ -756,7 +765,6 @@ const EditorComponent = (props) => {
         resolve();
       });
     }
-
     let updatedAppDefinition;
     const copyOfAppDefinition = JSON.parse(JSON.stringify(appDefinition));