handle version switch with new reference architecture

frontend/src/Editor/AppVersionsManager/AppVersionsManager.jsx

@@ -6,6 +6,7 @@ import { toast } from 'react-hot-toast';
 import { shallow } from 'zustand/shallow';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { useEditorStore } from '@/_stores/editorStore';
+import { useAppDataStore } from '@/_stores/appDataStore';
 
 const appVersionLoadingStatus = Object.freeze({
   loading: 'loading',
@@ -56,7 +57,17 @@ export const AppVersionsManager = function ({
   const darkMode = localStorage.getItem('darkMode') === 'true';
 
   const selectVersion = (id) => {
-    appVersionService
+    const currentVersionId = useAppDataStore.getState().currentVersionId;
+
+    const isSameVersionSelected = currentVersionId === id;
+
+    if (isSameVersionSelected) {
+      return toast('You are already editing this version', {
+        icon: '⚠️',
+      });
+    }
+
+    return appVersionService
       .getAppVersionData(appId, id)
       .then((data) => {
         const isCurrentVersionReleased = data.currentVersionId ? true : false;

frontend/src/Editor/Container.jsx

@@ -46,8 +46,8 @@ export const Container = ({
   socket,
   handleUndo,
   handleRedo,
-  currentPageId,
 }) => {
+  const currentPageId = useEditorStore.getState().currentPageId;
   const appDefinition = useEditorStore.getState().appDefinition;
   // Dont update first time to skip
   // redundant save on app definition load
@@ -279,6 +279,10 @@ export const Container = ({
       appDefinitionChanged(newDefinition, opts);
     }
 
+    return () => {
+      firstUpdate.current = true;
+    };
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [boxes]);
 

frontend/src/Editor/Editor.jsx

@@ -753,12 +753,12 @@ const EditorComponent = (props) => {
 
     useCurrentStateStore.getState().actions.setCurrentState({
       page: currentpageData,
-    }),
-      updateEditorState({
-        isLoading: false,
-        appDefinition: appJson,
-        isUpdatingEditorStateInProcess: false,
-      });
+    });
+    updateEditorState({
+      isLoading: false,
+      appDefinition: appJson,
+      isUpdatingEditorStateInProcess: false,
+    });
 
     updateState({ components: appJson.pages[homePageId]?.components });
 
@@ -776,7 +776,7 @@ const EditorComponent = (props) => {
       await fetchDataQueries(data.editing_version?.id, true, true),
     ])
       .then(async () => {
-        await onEditorLoad(appJson, homePageId);
+        await onEditorLoad(appJson, homePageId, versionSwitched);
         updateEntityReferences(appJson, homePageId);
       })
       .finally(async () => {
@@ -817,6 +817,9 @@ const EditorComponent = (props) => {
       updateEditorState({
         isLoading: true,
       });
+      useCurrentStateStore.getState().actions.setCurrentState({});
+      useCurrentStateStore.getState().actions.setEditorReady(false);
+      useResolveStore.getState().actions.resetStore();
 
       callBack(appData, null, true);
       initComponentVersioning();
@@ -1380,7 +1383,7 @@ const EditorComponent = (props) => {
     }
   };
 
-  const onEditorLoad = (appJson, pageId, isPageSwitch = false) => {
+  const onEditorLoad = (appJson, pageId, isPageSwitchOrVersionSwitch = false) => {
     useCurrentStateStore.getState().actions.setEditorReady(true);
     const currentComponents = appJson?.pages?.[pageId]?.components;
 
@@ -1389,7 +1392,7 @@ const EditorComponent = (props) => {
     const newComponents = Object.keys(currentComponents).map((componentId) => {
       const component = currentComponents[componentId];
 
-      if (isPageSwitch || !referenceManager.get(componentId)) {
+      if (isPageSwitchOrVersionSwitch || !referenceManager.get(componentId)) {
         return {
           id: componentId,
           name: component.component.name,

frontend/src/Editor/EditorSelecto.jsx

@@ -3,18 +3,13 @@ import Selecto from 'react-selecto';
 import { useEditorStore, EMPTY_ARRAY } from '@/_stores/editorStore';
 import { shallow } from 'zustand/shallow';
 
-const EditorSelecto = ({
-  selectionRef,
-  canvasContainerRef,
-  currentPageId,
-  setSelectedComponent,
-  appDefinition,
-  selectionDragRef,
-}) => {
-  const { setSelectionInProgress, setSelectedComponents } = useEditorStore(
+const EditorSelecto = ({ selectionRef, canvasContainerRef, setSelectedComponent, selectionDragRef }) => {
+  const { setSelectionInProgress, setSelectedComponents, currentPageId, appDefinition } = useEditorStore(
     (state) => ({
       setSelectionInProgress: state?.actions?.setSelectionInProgress,
       setSelectedComponents: state?.actions?.setSelectedComponents,
+      currentPageId: state?.currentPageId,
+      appDefinition: state?.appDefinition,
     }),
     shallow
   );