src/views-components/side-panel/side-panel-collapsed.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { ReactElement, useState } from 'react'
   6 import { connect } from 'react-redux'
   7 import { ProjectsIcon, ProcessIcon, FavoriteIcon, ShareMeIcon, TrashIcon, PublicFavoriteIcon, GroupsIcon } from 'components/icon/icon'
   8 import { List, ListItem, Tooltip } from '@material-ui/core'
   9 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'
  10 import { ArvadosTheme } from 'common/custom-theme'
  11 import { navigateTo } from 'store/navigation/navigation-action'
  12 import { RootState } from 'store/store'
  13 import { Dispatch } from 'redux'
  14 import {
  15     navigateToSharedWithMe,
  16     navigateToPublicFavorites,
  17     navigateToFavorites,
  18     navigateToGroups,
  19     navigateToAllProcesses,
  20     navigateToTrash,
  21 } from 'store/navigation/navigation-action'
  22 import { RouterAction } from 'react-router-redux'
  23 import { Tree } from 'models/tree'
  24
  25 type CssRules = 'root' | 'unselected' | 'selected'
  26
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     root: {},
  29     unselected: {
  30         color: theme.customs.colors.grey700,
  31     },
  32     selected: {
  33         color: theme.palette.primary.main,
  34     },
  35 })
  36
  37 enum SidePanelCollapsedCategory {
  38     PROJECTS = 'Home Projects',
  39     SHARED_WITH_ME = 'Shared with me',
  40     PUBLIC_FAVORITES = 'Public Favorites',
  41     FAVORITES = 'My Favorites',
  42     GROUPS = 'Groups',
  43     ALL_PROCESSES = 'All Processes',
  44     TRASH = 'Trash',
  45 }
  46
  47 type TCollapsedCategory = {
  48     name: SidePanelCollapsedCategory
  49     icon: ReactElement
  50     navTarget: RouterAction | ''
  51 }
  52
  53 const sidePanelCollapsedCategories: TCollapsedCategory[] = [
  54     {
  55         name: SidePanelCollapsedCategory.PROJECTS,
  56         icon: <ProjectsIcon />,
  57         navTarget: '',
  58     },
  59     {
  60         name: SidePanelCollapsedCategory.SHARED_WITH_ME,
  61         icon: <ShareMeIcon />,
  62         navTarget: navigateToSharedWithMe,
  63     },
  64     {
  65         name: SidePanelCollapsedCategory.PUBLIC_FAVORITES,
  66         icon: <PublicFavoriteIcon />,
  67         navTarget: navigateToPublicFavorites,
  68     },
  69     {
  70         name: SidePanelCollapsedCategory.FAVORITES,
  71         icon: <FavoriteIcon />,
  72         navTarget: navigateToFavorites,
  73     },
  74     {
  75         name: SidePanelCollapsedCategory.GROUPS,
  76         icon: <GroupsIcon />,
  77         navTarget: navigateToGroups,
  78     },
  79     {
  80         name: SidePanelCollapsedCategory.ALL_PROCESSES,
  81         icon: <ProcessIcon />,
  82         navTarget: navigateToAllProcesses,
  83     },
  84     {
  85         name: SidePanelCollapsedCategory.TRASH,
  86         icon: <TrashIcon />,
  87         navTarget: navigateToTrash,
  88     },
  89 ]
  90
  91 const findSelectedPath = (tree: Tree<any>) => {
  92     for (const category in tree) {
  93         if (tree[category].active === true) {
  94             return tree[category].id
  95         }
  96     }
  97     return null
  98 }
  99
 100 const mapStateToProps = (state: RootState) => {
 101     return {
 102         user: state.auth.user,
 103         selectedPath: findSelectedPath(state.treePicker.sidePanelTree),
 104     }
 105 }
 106
 107 const mapDispatchToProps = (dispatch: Dispatch) => {
 108     return {
 109         navToHome: (navTarget) => dispatch<any>(navigateTo(navTarget)),
 110         navTo: (navTarget) => dispatch<any>(navTarget),
 111     }
 112 }
 113
 114 export const SidePanelCollapsed = withStyles(styles)(
 115     connect(mapStateToProps, mapDispatchToProps)(({ classes, user, selectedPath, navToHome, navTo }: WithStyles & any) => {
 116         const [selectedIcon, setSelectedIcon] = useState(selectedPath)
 117
 118         const handleClick = (cat: TCollapsedCategory) => {
 119             setSelectedIcon(cat.name)
 120             if (cat.name === SidePanelCollapsedCategory.PROJECTS) navToHome(user.uuid)
 121             else navTo(cat.navTarget)
 122         }
 123
 124         const { root, unselected, selected } = classes
 125         return (
 126             <List className={root}>
 127                 {sidePanelCollapsedCategories.map((cat) => (
 128                     <ListItem
 129                         key={cat.name}
 130                         className={selectedIcon === cat.name ? selected : unselected}
 131                         onClick={() => handleClick(cat)}
 132                     >
 133                         <Tooltip
 134                             title={cat.name}
 135                             disableFocusListener
 136                         >
 137                             {cat.icon}
 138                         </Tooltip>
 139                     </ListItem>
 140                 ))}
 141             </List>
 142         )
 143     })
 144 )