From 46a0f51d71f6286b8c4070b58d7d1b2c10a1eda7 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 11:35:26 +0800
Subject: [PATCH 1/7] fix: optimize how the options are created

---
 .../Meta/ItemSettings/settings/ItemParent.js  | 90 ++++++++-----------
 1 file changed, 35 insertions(+), 55 deletions(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js
index ec84a04117..7588498f53 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js
@@ -1,6 +1,6 @@
 import { memo, Fragment, useState, useEffect } from "react";
-import { connect } from "react-redux";
-import debounce from "lodash/debounce";
+import { connect, useSelector } from "react-redux";
+import { debounce, uniqBy } from "lodash";
 import { notify } from "shell/store/notifications";
 
 import { Select, Option } from "@zesty-io/core/Select";
@@ -18,6 +18,7 @@ export const ItemParent = connect((state) => {
 })(
   memo(
     function ItemParent(props) {
+      const items = useSelector((state) => state.content);
       const [loading, setLoading] = useState(false);
       const [parent, setParent] = useState({
         meta: {
@@ -27,7 +28,7 @@ export const ItemParent = connect((state) => {
       });
 
       const [parents, setParents] = useState(
-        parentOptions(props.currentItemLangID, props.path, props.content)
+        parentOptions(props.currentItemLangID, props.path, items, "useState")
       );
 
       const onSearch = debounce((term) => {
@@ -37,7 +38,7 @@ export const ItemParent = connect((state) => {
             setLoading(false);
             setParents(
               parentOptions(props.currentItemLangID, props.path, {
-                ...props.content,
+                ...items,
                 ...res?.data,
               })
             );
@@ -89,7 +90,7 @@ export const ItemParent = connect((state) => {
 
         // Try to preselect parent
         if (parentZUID && parentZUID != "0" && parentZUID !== null) {
-          const item = props.content[parentZUID];
+          const item = items[parentZUID];
           if (item && item.meta && item.meta.ZUID && item.meta.path) {
             setParent(item);
           } else {
@@ -108,7 +109,7 @@ export const ItemParent = connect((state) => {
                      */
                     setParents(
                       parentOptions(props.currentItemLangID, props.path, {
-                        ...props.content,
+                        ...items,
                         [res.data[0].meta.ZUID]: res.data[0],
                       })
                     );
@@ -177,7 +178,7 @@ export const ItemParent = connect((state) => {
                     </Fragment>
                   }
                 />
-                {parents.map((item) => (
+                {parents?.map((item) => (
                   <Option
                     key={item.value}
                     value={item.value}
@@ -203,60 +204,39 @@ export const ItemParent = connect((state) => {
         }
       });
 
-      let prevItemsLen = Object.keys(prevProps["content"]).length;
-      let nextItemsLen = Object.keys(nextProps["content"]).length;
-
-      // Compare content length to see if new ones where added
-      if (prevItemsLen !== nextItemsLen) {
-        isEqual = false;
-      }
-
       return isEqual;
     }
   )
 );
 
 function parentOptions(currentItemLangID, path, items) {
-  return (
-    Object.keys(items)
-      // Filter items into list of zuids
-      .filter(
-        (itemZUID) =>
-          itemZUID.slice(0, 3) !== "new" && // Exclude new items
-          items[itemZUID].meta &&
-          items[itemZUID].meta.ZUID && // must have a ZUID
-          items[itemZUID].web &&
-          items[itemZUID].web.path && // must have a path
-          items[itemZUID].web.path !== "/" && // Exclude homepage
-          items[itemZUID].web.path !== path && // Exclude current item
-          items[itemZUID].meta.langID === currentItemLangID // display only relevant language options
-      )
-      // De-dupe list of zuids & convert to item objects
-      .reduce((acc, zuid) => {
-        let exists = acc.find((el) => el.meta.ZUID === zuid);
+  const options = Object.entries(items)
+    ?.reduce((acc, [itemZUID, itemData]) => {
+      if (
+        itemZUID.slice(0, 3) !== "new" && // Exclude new items
+        itemData?.meta?.ZUID && // must have a ZUID
+        itemData?.web?.path && // must have a path
+        itemData?.web.path !== "/" && // Exclude homepage
+        itemData?.web.path !== path && // Exclude current item
+        itemData?.meta?.langID === currentItemLangID // display only relevant language options
+      ) {
+        acc.push({
+          value: itemZUID,
+          text: itemData.web.path,
+        });
+      }
 
-        if (!exists) {
-          acc.push(items[zuid]);
-        }
+      return acc;
+    }, [])
+    .sort((a, b) => {
+      if (a.text > b.text) {
+        return 1;
+      } else if (a.text < b.text) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
 
-        return acc;
-      }, [])
-      // Convert items to options object
-      .map((item) => {
-        return {
-          value: item.meta.ZUID,
-          text: item.web.path,
-        };
-      })
-      // Put items in alphabetical descending order
-      .sort((a, b) => {
-        if (a.text > b.text) {
-          return 1;
-        } else if (a.text < b.text) {
-          return -1;
-        } else {
-          return 0;
-        }
-      })
-  );
+  return uniqBy(options, "value");
 }

From 4d61a173625524dc113d865c3a87b01ef7b9ead6 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 11:37:38 +0800
Subject: [PATCH 2/7] task: add dispatch delay while user is typing

---
 .../Meta/ItemSettings/settings/MetaLinkText.js  | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
index 07fe483b7d..be86682dc6 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
@@ -1,4 +1,5 @@
-import { memo } from "react";
+import { memo, useState } from "react";
+import { useDebounce } from "react-use";
 
 import { TextField } from "@mui/material";
 import { FieldShell } from "../../../../../components/Editor/Field/FieldShell";
@@ -10,6 +11,16 @@ export const MetaLinkText = memo(function MetaLinkText({
   onChange,
   errors,
 }) {
+  const [value, setValue] = useState(meta_link_text);
+
+  useDebounce(
+    () => {
+      onChange(value, "metaLinkText");
+    },
+    250,
+    [value]
+  );
+
   return (
     <article className={styles.MetaLinkText} data-cy="metaLinkText">
       <FieldShell
@@ -27,9 +38,9 @@ export const MetaLinkText = memo(function MetaLinkText({
       >
         <TextField
           name="metaLinkText"
-          value={meta_link_text}
+          value={value}
           placeholder={"This text is used in application navigation"}
-          onChange={(evt) => onChange(evt.target.value, "metaLinkText")}
+          onChange={(evt) => setValue(evt.target.value)}
         />
       </FieldShell>
     </article>

From 404a0be7b6de624f2025ad11b31aa29e9f0913c7 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 12:05:27 +0800
Subject: [PATCH 3/7] chore: remove unused param

---
 .../app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js
index 7588498f53..94c87f3c34 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/ItemParent.js
@@ -28,7 +28,7 @@ export const ItemParent = connect((state) => {
       });
 
       const [parents, setParents] = useState(
-        parentOptions(props.currentItemLangID, props.path, items, "useState")
+        parentOptions(props.currentItemLangID, props.path, items)
       );
 
       const onSearch = debounce((term) => {

From 013d87a9dde1c2cba79d9e8ecc3fa85a3b78553b Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 12:06:25 +0800
Subject: [PATCH 4/7] task: remove unused prop

---
 .../src/app/views/ItemEdit/Meta/ItemSettings/ItemSettings.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/ItemSettings.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/ItemSettings.js
index 5b7789e5ca..e78884ef5f 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/ItemSettings.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/ItemSettings.js
@@ -83,7 +83,6 @@ export const ItemSettings = memo(
               <ItemParent
                 itemZUID={meta.ZUID}
                 modelZUID={props.modelZUID}
-                content={props.content}
                 parentZUID={web.parentZUID}
                 path={web.path}
                 onChange={onChange}

From 42d78a370aed5c533a1d2cbab0bf19b706597dab Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 12:55:23 +0800
Subject: [PATCH 5/7] task: revert debounce

---
 .../Meta/ItemSettings/settings/MetaLinkText.js     | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
index be86682dc6..b8ee055d90 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
@@ -11,16 +11,6 @@ export const MetaLinkText = memo(function MetaLinkText({
   onChange,
   errors,
 }) {
-  const [value, setValue] = useState(meta_link_text);
-
-  useDebounce(
-    () => {
-      onChange(value, "metaLinkText");
-    },
-    250,
-    [value]
-  );
-
   return (
     <article className={styles.MetaLinkText} data-cy="metaLinkText">
       <FieldShell
@@ -38,9 +28,9 @@ export const MetaLinkText = memo(function MetaLinkText({
       >
         <TextField
           name="metaLinkText"
-          value={value}
+          value={meta_link_text}
           placeholder={"This text is used in application navigation"}
-          onChange={(evt) => setValue(evt.target.value)}
+          onChange={(evt) => onChange(evt.target.value, "metaLinkText")}
         />
       </FieldShell>
     </article>

From ff1997f4453d4810bf709ad1ecbd2ea96de1e60e Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 12:56:20 +0800
Subject: [PATCH 6/7] fix: prevent unnecessary renders due to unnecessary
 dependencies

---
 .../content-editor/src/app/ContentEditor.js    | 18 ++----------------
 .../components/global-tabs/GlobalTabs.tsx      |  3 +--
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/apps/content-editor/src/app/ContentEditor.js b/src/apps/content-editor/src/app/ContentEditor.js
index 04142d0480..995f34fc53 100644
--- a/src/apps/content-editor/src/app/ContentEditor.js
+++ b/src/apps/content-editor/src/app/ContentEditor.js
@@ -97,7 +97,6 @@ let customTheme = createTheme(legacyTheme, {
 
 export default function ContentEditor() {
   const navContent = useSelector((state) => state.navContent);
-  const ui = useSelector((state) => state.ui);
   const dispatch = useDispatch();
 
   const [loading, setLoading] = useState(true);
@@ -130,15 +129,7 @@ export default function ContentEditor() {
               </AppLink>
             </div>
           ) : (
-            <section
-              className={cx(
-                styles.ContentEditor,
-                ui.contentNav ? styles.ContentGridOpen : "",
-                ui.contentNavHover && !ui.contentNav
-                  ? styles.ContentGridHover
-                  : ""
-              )}
-            >
+            <section className={cx(styles.ContentEditor)}>
               <ResizableContainer
                 id="contentNav"
                 defaultWidth={220}
@@ -147,12 +138,7 @@ export default function ContentEditor() {
               >
                 <ContentNav />
               </ResizableContainer>
-              <div
-                className={cx(
-                  styles.Content,
-                  ui.openNav ? styles.GlobalOpen : styles.GlobalClosed
-                )}
-              >
+              <div className={cx(styles.Content)}>
                 <div className={styles.ContentWrap}>
                   <Switch>
                     {/* <Route path="/content/releases" component={ReleaseApp} /> */}
diff --git a/src/shell/components/global-tabs/GlobalTabs.tsx b/src/shell/components/global-tabs/GlobalTabs.tsx
index e5a6e36dab..5fc589243c 100644
--- a/src/shell/components/global-tabs/GlobalTabs.tsx
+++ b/src/shell/components/global-tabs/GlobalTabs.tsx
@@ -53,7 +53,6 @@ export default memo(function GlobalTabs() {
   const { data: models } = useGetContentModelsQuery();
   const apps = useSelector((state: AppState) => state.apps.installed);
 
-  const content = useSelector((state: AppState) => state.content);
   const files = useSelector((state: AppState) => state.files);
   const users = useSelector((state: AppState) => state.users);
   const [tabBarWidth, setTabBarWidth] = useState(0);
@@ -95,7 +94,7 @@ export default memo(function GlobalTabs() {
     if (loadedTabs) {
       dispatch(rebuildTabs(queryData));
     }
-  }, [loadedTabs, models, content, files, queryData, apps, users]);
+  }, [loadedTabs, models, files, queryData, apps, users]);
 
   useEffect(() => {
     setTabs(pinnedTabs);

From 90ddccca3138c9a3ea54c1217db178a2ba398a09 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 Jan 2024 12:58:36 +0800
Subject: [PATCH 7/7] chore: cleanup

---
 .../views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
index b8ee055d90..07fe483b7d 100644
--- a/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
+++ b/src/apps/content-editor/src/app/views/ItemEdit/Meta/ItemSettings/settings/MetaLinkText.js
@@ -1,5 +1,4 @@
-import { memo, useState } from "react";
-import { useDebounce } from "react-use";
+import { memo } from "react";
 
 import { TextField } from "@mui/material";
 import { FieldShell } from "../../../../../components/Editor/Field/FieldShell";