19302: added useeffect for icon highlight Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

[arvados-workbench2.git] / src / views-components / side-panel / side-panel-collapsed.tsx

diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
index e25fff6eb0258d690061df3ffb78f5d9cbb6393d..6d19c8e0a8722701d3ea2c108500341609fa236c 100644 (file)
--- a/src/views-components/side-panel/side-panel-collapsed.tsx
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -2,20 +2,36 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactElement } from 'react'
-import { ProjectIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
+import React, { ReactElement, useEffect, useState } from 'react'
+import { connect } from 'react-redux'
+import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
 import { List, ListItem, Tooltip } from '@material-ui/core'
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
 import { ArvadosTheme } from 'common/custom-theme'
 import { navigateTo } from 'store/navigation/navigation-action'
+import { RootState } from 'store/store'
+import { Dispatch } from 'redux'
+import {
+    navigateToSharedWithMe,
+    navigateToPublicFavorites,
+    navigateToFavorites,
+    navigateToGroups,
+    navigateToAllProcesses,
+    navigateToTrash,
+} from 'store/navigation/navigation-action'
+import { RouterAction } from 'react-router-redux'
+import { Tree } from 'models/tree'
 
-type CssRules = 'root' | 'icon'
+type CssRules = 'root' | 'unselected' | 'selected'
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {},
-    icon: {
+    unselected: {
         color: theme.customs.colors.grey700,
     },
+    selected: {
+        color: theme.palette.primary.main,
+    },
 })
 
 enum SidePanelCollapsedCategory {
@@ -23,78 +39,98 @@ enum SidePanelCollapsedCategory {
     SHARED_WITH_ME = 'Shared with me',
     PUBLIC_FAVORITES = 'Public Favorites',
     FAVORITES = 'My Favorites',
-    TRASH = 'Trash',
-    ALL_PROCESSES = 'All Processes',
     GROUPS = 'Groups',
+    ALL_PROCESSES = 'All Processes',
+    TRASH = 'Trash',
 }
 
 type TCollapsedCategory = {
     name: SidePanelCollapsedCategory
     icon: ReactElement
-    navTarget: string
+    navTarget: RouterAction | ''
 }
 
 const sidePanelCollapsedCategories: TCollapsedCategory[] = [
     {
         name: SidePanelCollapsedCategory.PROJECTS,
-        icon: <ProjectIcon />,
-        navTarget: 'foo',
+        icon: <ProjectsIcon />,
+        navTarget: '',
     },
     {
         name: SidePanelCollapsedCategory.SHARED_WITH_ME,
         icon: <ShareMeIcon />,
-        navTarget: 'foo',
+        navTarget: navigateToSharedWithMe,
     },
     {
         name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
         icon: <PublicFavoriteIcon />,
-        navTarget: 'public-favorites',
+        navTarget: navigateToPublicFavorites,
     },
     {
         name: SidePanelCollapsedCategory.FAVORITES,
         icon: <FavoriteIcon />,
-        navTarget: 'foo',
+        navTarget: navigateToFavorites,
     },
     {
         name: SidePanelCollapsedCategory.GROUPS,
         icon: <GroupsIcon />,
-        navTarget: 'foo',
+        navTarget: navigateToGroups,
     },
     {
         name: SidePanelCollapsedCategory.ALL_PROCESSES,
         icon: <ProcessIcon />,
-        navTarget: 'foo',
+        navTarget: navigateToAllProcesses,
     },
     {
         name: SidePanelCollapsedCategory.TRASH,
         icon: <TrashIcon />,
-        navTarget: 'foo',
+        navTarget: navigateToTrash,
     },
 ]
 
-export const SidePanelCollapsed = withStyles(styles)(({ classes }: WithStyles) => {
+const mapStateToProps = (state: RootState) => {
+    return {
+        user: state.auth.user,
+        selectedPath: state.properties.breadcrumbs[0].label,
+    }
+}
 
-    const handleClick = (navTarget: string) => {
-        console.log(navTarget)
-        navigateTo(navTarget)
+const mapDispatchToProps = (dispatch: Dispatch) => {
+    return {
+        navToHome: (navTarget) => dispatch<any>(navigateTo(navTarget)),
+        navTo: (navTarget) => dispatch<any>(navTarget),
     }
+}
+
+export const SidePanelCollapsed = withStyles(styles)(
+    connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
+        const [selectedIcon, setSelectedIcon] = useState(selectedPath)
 
-    return (
-        <List>
-            {sidePanelCollapsedCategories.map(cat => (
-                <ListItem
-                    key={cat.name}
-                    className={classes.icon}
-                    onClick={()=> handleClick(cat.navTarget)}
-                >
-                    <Tooltip
-                        title={cat.name}
-                        disableFocusListener
+        useEffect(() => setSelectedIcon(selectedPath), [selectedPath])
+
+        const handleClick = (cat: TCollapsedCategory) => {
+            if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
+            else navTo(cat.navTarget)
+        }
+
+        const { root, unselected, selected } = classes
+        return (
+            <List className={root}>
+                {sidePanelCollapsedCategories.map((cat) => (
+                    <ListItem
+                        key={cat.name}
+                        className={selectedIcon === cat.name ? selected : unselected}
+                        onClick={() => handleClick(cat)}
                     >
-                        {cat.icon}
-                    </Tooltip>
-                </ListItem>
-            ))}
-        </List>
-    )
-})
+                        <Tooltip
+                            title={cat.name}
+                            disableFocusListener
+                        >
+                            {cat.icon}
+                        </Tooltip>
+                    </ListItem>
+                ))}
+            </List>
+        )
+    })
+)