left-side-panel-small-refactor

Feature ##13598

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/project-tree/project-tree.tsx b/src/components/project-tree/project-tree.tsx
index 65e94e49fcc738ed0f0a5744560bf8cd2a99b4d7..7406f7f3ec95651480a21a859b98f40d441c3e43 100644 (file)
--- 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 ecfb5f09f2c03fc3c136e35cf9b2bf3009346be8..36e4c74d414721d7d170f6b1d34bd8d3c79feae3 100644 (file)
--- 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 cebe935498dd28e7f55ca8c275f626204e762759..1807bd8dc199cd4e5e2522f67aa81eff4a6914f3 100644 (file)
--- 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 9f01fa2a1d67c8c3bd7c320b90934241b3cac9b6..8051017c9edc16100180dc7e10b46a53829a296b 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 = [

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index ff9a863e752b65239b92d0938dd73e5888f33c65..9e274325075d6923b9932ada253326e2a6c06c06 100644 (file)
--- 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}>