From 97c8d9bf9a5964168c8746060944a99586f4cf6e Mon Sep 17 00:00:00 2001
From: arpitnath <arpitnath42@gmail.com>
Date: Mon, 7 Aug 2023 01:22:54 +0530
Subject: [PATCH] fixed page actions: sorting pages

---
 frontend/src/Editor/EditorFunc.jsx        | 25 +++++++++++++++++++++--
 frontend/src/Editor/LeftSidebar/index.jsx |  7 +++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx
index 22972cf2a4..b0198fc052 100644
--- a/frontend/src/Editor/EditorFunc.jsx
+++ b/frontend/src/Editor/EditorFunc.jsx
@@ -86,6 +86,7 @@ const defaultDefinition = (darkMode) => {
         components: {},
         handle: 'home',
         name: 'Home',
+        index: 0,
       },
     },
     globalSettings: {
@@ -1098,6 +1099,7 @@ const EditorComponent = (props) => {
       name,
       handle: newHandle,
       components: {},
+      index: Object.keys(copyOfAppDefinition.pages).length,
     };
 
     setCurrentPageId(newPageId);
@@ -1347,6 +1349,25 @@ const EditorComponent = (props) => {
     });
   };
 
+  const updateOnSortingPages = (newSortedPages) => {
+    const copyOfAppDefinition = JSON.parse(JSON.stringify(appDefinition));
+    const pagesObj = newSortedPages.reduce((acc, page, index) => {
+      acc[page.id] = {
+        ...page,
+        index: index,
+      };
+      return acc;
+    }, {});
+
+    const newAppDefinition = _.cloneDeep(copyOfAppDefinition);
+
+    newAppDefinition.pages = pagesObj;
+
+    appDefinitionChanged(newAppDefinition, {
+      pageDefinitionChanged: true,
+    });
+  };
+
   // !-------
 
   const currentState = props?.currentState;
@@ -1383,7 +1404,7 @@ const EditorComponent = (props) => {
         <EditorHeader
           darkMode={props.darkMode}
           globalSettingsChanged={globalSettingsChanged}
-          appDefinition={appDefinition}
+          appDefinition={_.cloneDeep(appDefinition)}
           toggleAppMaintenance={toggleAppMaintenance}
           editingVersion={editingVersion}
           app={app}
@@ -1437,7 +1458,7 @@ const EditorComponent = (props) => {
               updatePageHandle={updatePageHandle}
               // updateOnPageLoadEvents={updateOnPageLoadEvents}
               // showHideViewerNavigationControls={showHideViewerNavigation}
-              // updateOnSortingPages={updateOnSortingPages}
+              updateOnSortingPages={updateOnSortingPages}
               setEditorMarginLeft={handleEditorMarginLeftChange}
             />
             {!props.showComments && (
diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx
index 9f353cb85a..87c5329a73 100644
--- a/frontend/src/Editor/LeftSidebar/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/index.jsx
@@ -28,7 +28,6 @@ export const LeftSidebar = forwardRef((props, ref) => {
     dataSourcesChanged,
     globalDataSourcesChanged,
     dataQueriesChanged,
-
     appDefinition,
     setSelectedComponent,
     removeComponent,
@@ -145,7 +144,11 @@ export const LeftSidebar = forwardRef((props, ref) => {
         updateHomePage={updateHomePage}
         updatePageHandle={updatePageHandle}
         clonePage={clonePage}
-        pages={Object.entries(appDefinition.pages).map(([id, page]) => ({ id, ...page })) || []}
+        pages={
+          Object.entries(_.cloneDeep(appDefinition).pages)
+            .map(([id, page]) => ({ id, ...page }))
+            .sort((a, b) => a.index - b.index) || []
+        }
         homePageId={appDefinition.homePageId}
         showHideViewerNavigationControls={showHideViewerNavigationControls}
         updateOnSortingPages={updateOnSortingPages}