From ae7d952a97542c2cfc12f6f41ab0de93af278919 Mon Sep 17 00:00:00 2001
From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Fri, 22 Jun 2018 16:09:05 +0200
Subject: [PATCH] left-side-panel-small-refactor

Feature ##13598

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
---
 src/components/project-tree/project-tree.tsx | 12 ++---
 src/components/side-panel/side-panel.tsx     | 10 ++---
 src/index.tsx                                |  2 +-
 src/store/side-panel/side-panel-reducer.ts   | 46 ++++++++++----------
 src/views/workbench/workbench.tsx            |  8 ++--
 5 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/project-tree/project-tree.tsx b/src/components/project-tree/project-tree.tsx
index 65e94e49..7406f7f3 100644
--- a/src/components/project-tree/project-tree.tsx
+++ b/src/components/project-tree/project-tree.tsx
@@ -14,20 +14,20 @@ import { Project } from '../../models/project';
 
 export interface ProjectTreeProps {
     projects: Array<TreeItem<Project>>;
-    toggleProjectTreeItemOpen: (id: string, status: TreeItemStatus) => void;
-    toggleProjectTreeItemActive: (id: string) => void;
+    toggleOpen: (id: string, status: TreeItemStatus) => void;
+    toggleActive: (id: string) => void;
 }
 
 class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
     render(): ReactElement<any> {
-        const { classes, projects, toggleProjectTreeItemOpen, toggleProjectTreeItemActive } = this.props;
+        const { classes, projects, toggleOpen, toggleActive } = this.props;
         const { active, listItemText, row, treeContainer } = classes;
         return (
             <div className={treeContainer}>
                 <Tree items={projects}
-                    toggleItemOpen={toggleProjectTreeItemOpen}
-                    toggleItemActive={toggleProjectTreeItemActive}
-                    render={(project: TreeItem<Project>, level: number) =>
+                    toggleItemOpen={toggleOpen}
+                    toggleItemActive={toggleActive}
+                    render={(project: TreeItem<Project>) =>
                         <span className={row}>
                             <ListItemIcon className={project.active ? active : ''}>
                                 <i className="fas fa-folder" />
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index ecfb5f09..36e4c74d 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -22,23 +22,23 @@ export interface SidePanelItem {
 }
 
 interface SidePanelProps {
-    toggleSidePanelOpen: (id: string) => void;
-    toggleSidePanelActive: (id: string) => void;
+    toggleOpen: (id: string) => void;
+    toggleActive: (id: string) => void;
     sidePanelItems: SidePanelItem[];
 }
 
 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
     render(): ReactElement<any> {
-        const { classes, toggleSidePanelOpen, toggleSidePanelActive, sidePanelItems } = this.props;
+        const { classes, toggleOpen, toggleActive, sidePanelItems } = this.props;
         const { listItemText, leftSidePanelContainer, row, list, icon, projectIcon, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
         return (
             <div className={leftSidePanelContainer}>
                 <List>
                     {sidePanelItems.map(it => (
                         <span key={it.name}>
-                            <ListItem button className={list} onClick={() => toggleSidePanelActive(it.id)}>
+                            <ListItem button className={list} onClick={() => toggleActive(it.id)}>
                                 <span className={row}>
-                                    {it.name === "Projects" ? <i onClick={() => toggleSidePanelOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow} 
+                                    {it.name === "Projects" ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow} 
                                         ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
                                     <ListItemIcon className={it.active ? active : ''}>
                                         <i className={`${it.icon} ${icon} ${it.name === "Projects" ? projectIcon : ''}`} />
diff --git a/src/index.tsx b/src/index.tsx
index cebe9354..1807bd8d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,7 +27,7 @@ const store = configureStore({
     auth: {
         user: undefined
     },
-    sidePanel: sidePanelData
+    sidePanel: []
 }, history);
 
 store.dispatch(authActions.INIT());
diff --git a/src/store/side-panel/side-panel-reducer.ts b/src/store/side-panel/side-panel-reducer.ts
index 9f01fa2a..8051017c 100644
--- 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 = [
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index ff9a863e..9e274325 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -185,13 +185,13 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                         }}>
                         <div className={classes.toolbar} />
                             <SidePanel
-                                toggleSidePanelOpen={this.toggleSidePanelOpen}
-                                toggleSidePanelActive={this.toggleSidePanelActive}
+                                toggleOpen={this.toggleSidePanelOpen}
+                                toggleActive={this.toggleSidePanelActive}
                                 sidePanelItems={sidePanelItems}>
                                 <ProjectTree
                                     projects={projects}
-                                    toggleProjectTreeItemOpen={this.toggleProjectTreeItemOpen}
-                                    toggleProjectTreeItemActive={this.toggleProjectTreeItemActive} />
+                                    toggleOpen={this.toggleProjectTreeItemOpen}
+                                    toggleActive={this.toggleProjectTreeItemActive} />
                             </SidePanel>
                     </Drawer>}
                 <main className={classes.content}>
-- 
2.30.2