19302: side panel nav works Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii...

diff --git a/src/views-components/side-panel/side-panel-collapsed.tsx b/src/views-components/side-panel/side-panel-collapsed.tsx
index e25fff6eb0258d690061df3ffb78f5d9cbb6393d..ba829f6c30870ca337dcf606ed3743658a0df130 100644 (file)
--- a/src/views-components/side-panel/side-panel-collapsed.tsx
+++ b/src/views-components/side-panel/side-panel-collapsed.tsx
@@ -3,11 +3,23 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React, { ReactElement } from 'react'
-import { ProjectIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
+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'
 
 type CssRules = 'root' | 'icon'
 
@@ -23,78 +35,93 @@ 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,
+    }
+}
 
-    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, navToHome, navTo }: WithStyles & any) => {
 
-    return (
-        <List>
-            {sidePanelCollapsedCategories.map(cat => (
-                <ListItem
-                    key={cat.name}
-                    className={classes.icon}
-                    onClick={()=> handleClick(cat.navTarget)}
-                >
-                    <Tooltip
-                        title={cat.name}
-                        disableFocusListener
+        const handleClick = (cat: TCollapsedCategory) => {
+            if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
+            else navTo(cat.navTarget)
+        }
+
+        return (
+            <List>
+                {sidePanelCollapsedCategories.map(cat => (
+                    <ListItem
+                        key={cat.name}
+                        className={classes.icon}
+                        onClick={() => handleClick(cat)}
                     >
-                        {cat.icon}
-                    </Tooltip>
-                </ListItem>
-            ))}
-        </List>
-    )
-})
+                        <Tooltip
+                            title={cat.name}
+                            disableFocusListener
+                        >
+                            {cat.icon}
+                        </Tooltip>
+                    </ListItem>
+                ))}
+            </List>
+        )
+    })
+)