Merge branch '13746-infinite-project-loading-animation'

[arvados.git] / src / store / side-panel / side-panel-reducer.ts

diff --git a/src/store/side-panel/side-panel-reducer.ts b/src/store/side-panel/side-panel-reducer.ts
index 9f01fa2a1d67c8c3bd7c320b90934241b3cac9b6..9fc5df1510e37b0f72a86f229c56ca45c0e7c93c 100644 (file)
--- a/src/store/side-panel/side-panel-reducer.ts
+++ b/src/store/side-panel/side-panel-reducer.ts
@@ -10,29 +10,29 @@ import { SidePanelItem } from '../../components/side-panel/side-panel';
 export type SidePanelState = SidePanelItem[];
 
 const sidePanelReducer = (state: SidePanelState = sidePanelData, action: SidePanelAction) => {
-    return actions.match(action, {
-        TOGGLE_SIDE_PANEL_ITEM_OPEN: () => {
-            const sidePanel = _.cloneDeep(state);
-            sidePanel[0].open = !sidePanel[0].open;
-            return sidePanel;
-        },
-        TOGGLE_SIDE_PANEL_ITEM_ACTIVE: itemId => {
-            const sidePanel = _.cloneDeep(state);
-            resetSidePanelActivity(sidePanel);
-            sidePanel.map(it => {
-                if (it.id === itemId) {
-                    it.active = true;
-                }
-            });
-            return sidePanel;
-        },
-        RESET_SIDE_PANEL_ACTIVITY: () => {
-            const sidePanel = _.cloneDeep(state);
-            resetSidePanelActivity(sidePanel);
-            return sidePanel;
-        },
-        default: () => state
-    });
+    if (state.length === 0) {
+        return sidePanelData;
+    } else {
+        return actions.match(action, {
+            TOGGLE_SIDE_PANEL_ITEM_OPEN: itemId => state.map(it => itemId === it.id && it.open === false ? {...it, open: true} : {...it, open: false}),
+            TOGGLE_SIDE_PANEL_ITEM_ACTIVE: itemId => {
+                const sidePanel = _.cloneDeep(state);
+                resetSidePanelActivity(sidePanel);
+                sidePanel.map(it => {
+                    if (it.id === itemId) {
+                        it.active = true;
+                    }
+                });
+                return sidePanel;
+            },
+            RESET_SIDE_PANEL_ACTIVITY: () => {
+                const sidePanel = _.cloneDeep(state);
+                resetSidePanelActivity(sidePanel);
+                return sidePanel;
+            },
+            default: () => state
+        });
+    }
 };
 
 export const sidePanelData = [
@@ -42,6 +42,8 @@ export const sidePanelData = [
         icon: "fas fa-th fa-fw",
         open: false,
         active: false,
+        margin: true,
+        openAble: true
     },
     {
         id: "2",