Remember clicks in collections sidebar

Author: jsajal

src/components/molecules/sidebar/content/Collection.js

@@ -10,13 +10,17 @@ import 'tippy.js/dist/tippy.css';
 import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { deleteFlowTest } from 'service/collection';
+import useCollectionStore from 'stores/CollectionStore';
 
 const Collection = ({ collectionId, item, depth }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  //const [isExpanded, setIsExpanded] = useState(false);
+  const clickItem = useCollectionStore((state) => state.clickItem);
   const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
   const [flowTestPathToDelete, setFlowTestPathToDelete] = useState('');
+
   const messageForConfirmActionModal =
     'Do you wish to delete this flowtest? This action deletes it from disk and cannot be undone';
+
   const getListDisplayTitle = () => {
     if (item.type === OBJ_TYPES.collection) {
       // this is for collections tab thus we have archive box icon
@@ -27,7 +31,8 @@ const Collection = ({ collectionId, item, depth }) => {
             const clickFromElementDataSet = event.target.dataset;
             const clickFrom = clickFromElementDataSet?.clickFrom;
             if (!clickFrom || clickFrom !== 'options-menu') {
-              return setIsExpanded((prev) => !prev);
+              clickItem(item, collectionId);
+              //return setIsExpanded((prev) => !prev);
             }
           }}
         >
@@ -90,7 +95,8 @@ const Collection = ({ collectionId, item, depth }) => {
           onClick={(event) => {
             const clickFrom = event.target.dataset?.clickFrom;
             if (!clickFrom || clickFrom !== 'options-menu') {
-              return setIsExpanded((prev) => !prev);
+              clickItem(item, collectionId);
+              //return setIsExpanded((prev) => !prev);
             }
           }}
         >
@@ -113,7 +119,7 @@ const Collection = ({ collectionId, item, depth }) => {
     <>
       <li>
         {getListDisplayTitle()}
-        {isExpanded && (
+        {item.collapsed === false && (
           <>
             {item.items?.map((childItem, index) => (
               <ul

src/stores/CollectionStore.js

@@ -21,6 +21,7 @@ const useCollectionStore = create((set, get) => ({
       type: OBJ_TYPES.collection,
       name: name,
       pathname: pathname,
+      collapsed: true,
       nodes: nodes,
       items: [],
       environments: [],
@@ -53,6 +54,7 @@ const useCollectionStore = create((set, get) => ({
                 pathname: `${currentPath}${PATH_SEPARATOR}${directoryName}`,
                 name: directoryName,
                 type: OBJ_TYPES.folder,
+                collapsed: true,
                 items: [],
               };
               currentSubItems.push(childItem);
@@ -192,6 +194,7 @@ const useCollectionStore = create((set, get) => ({
                 pathname: `${currentPath}${PATH_SEPARATOR}${directoryName}`,
                 name: directoryName,
                 type: OBJ_TYPES.folder,
+                collapsed: true,
                 items: [],
               };
               currentSubItems.push(childItem);
@@ -305,6 +308,26 @@ const useCollectionStore = create((set, get) => ({
       }),
     );
   },
+  clickItem: (item, collectionId) => {
+    set(
+      produce((state) => {
+        if (item) {
+          if (item.type === OBJ_TYPES.collection) {
+            const collection = state.collections.find((c) => c.id === collectionId);
+            if (collection) {
+              collection.collapsed = !collection.collapsed;
+            }
+          } else if (item.type === OBJ_TYPES.folder) {
+            const collection = state.collections.find((c) => c.id === collectionId);
+            if (collection) {
+              const findItem = findItemInCollectionTree(item, collection);
+              findItem.collapsed = !findItem.collapsed;
+            }
+          }
+        }
+      }),
+    );
+  },
 }));
 
 export default useCollectionStore;