Skip to content

Commit 575b878

Browse files
diemoldiemol
committed
[grid] Moving more classes to functional components
React is moving to use hooks, which do not work in classes. While we do not use a lot of hooks, most examples and docs online are created with functional components, so moving to those will make future changes easier.
1 parent eba2dbd commit 575b878

12 files changed

Lines changed: 451 additions & 605 deletions

File tree

‎javascript/grid-ui/src/components/Footer/Footer.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,19 @@ import React from 'react'
1919
import { Box, Link, Typography } from '@mui/material'
2020

2121
function Footer (): JSX.Element {
22+
// noinspection HtmlUnknownAnchorTarget
2223
return (
2324
<Box pt={4}>
24-
<Typography variant="body2" color="textSecondary" align="center">
25-
<Link href="#/help" underline="hover">
25+
<Typography variant='body2' color='textSecondary' align='center'>
26+
<Link href='#/help' underline='hover'>
2627
Help
2728
</Link>
2829
{' - All rights reserved - '}
2930
<Link
30-
href="https://sfconservancy.org/"
31-
target="_blank"
32-
rel="noreferrer"
33-
underline="hover"
31+
href='https://sfconservancy.org/'
32+
target='_blank'
33+
rel='noreferrer'
34+
underline='hover'
3435
>
3536
Software Freedom Conservancy
3637
</Link>{' '}

‎javascript/grid-ui/src/components/NavBar/NavBar.tsx‎

Lines changed: 101 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// under the License.
1717

1818
import Divider from '@mui/material/Divider'
19-
import Drawer from '@mui/material/Drawer'
19+
import MuiDrawer from '@mui/material/Drawer'
2020
import IconButton from '@mui/material/IconButton'
2121
import List from '@mui/material/List'
2222
import ListItem from '@mui/material/ListItem'
@@ -26,65 +26,59 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
2626
import DashboardIcon from '@mui/icons-material/Dashboard'
2727
import AssessmentIcon from '@mui/icons-material/Assessment'
2828
import HelpIcon from '@mui/icons-material/Help'
29-
import clsx from 'clsx'
30-
import React, { ReactNode } from 'react'
31-
import { Box, Theme, Typography } from '@mui/material'
32-
import createStyles from '@mui/styles/createStyles'
33-
import withStyles from '@mui/styles/withStyles'
29+
import React from 'react'
30+
import { Box, Typography } from '@mui/material'
3431
import { useLocation } from 'react-router-dom'
3532
import OverallConcurrency from './OverallConcurrency'
36-
import { StyleRules } from '@mui/styles'
33+
import { CSSObject, styled, Theme } from '@mui/material/styles'
3734

3835
const drawerWidth = 240
3936

40-
const useStyles = (theme: Theme): StyleRules => createStyles(
41-
{
42-
root: {
43-
display: 'flex'
44-
},
45-
toolbarIcon: {
46-
display: 'flex',
47-
alignItems: 'center',
48-
justifyContent: 'flex-end',
49-
padding: '0 8px',
50-
...theme.mixins.toolbar,
51-
backgroundColor: theme.palette.primary.main
52-
},
53-
drawerPaper: {
54-
position: 'relative',
55-
whiteSpace: 'nowrap',
56-
width: drawerWidth,
57-
minHeight: '100vh',
58-
transition: theme.transitions.create('width', {
59-
easing: theme.transitions.easing.sharp,
60-
duration: theme.transitions.duration.enteringScreen
61-
})
62-
},
63-
drawerPaperClose: {
64-
overflowX: 'hidden',
65-
minHeight: '100vh',
66-
transition: theme.transitions.create('width', {
67-
easing: theme.transitions.easing.sharp,
68-
duration: theme.transitions.duration.leavingScreen
69-
}),
70-
width: theme.spacing(7),
71-
[theme.breakpoints.up('sm')]: {
72-
width: theme.spacing(9)
73-
}
74-
},
75-
queueBackground: {
76-
backgroundColor: theme.palette.secondary.main
77-
}
78-
79-
})
80-
8137
function ListItemLink (props): JSX.Element {
8238
return <ListItem button component='a' {...props} />
8339
}
8440

41+
const openedMixin = (theme: Theme): CSSObject => ({
42+
width: drawerWidth,
43+
transition: theme.transitions.create('width', {
44+
easing: theme.transitions.easing.sharp,
45+
duration: theme.transitions.duration.enteringScreen
46+
}),
47+
overflowX: 'hidden'
48+
})
49+
50+
const closedMixin = (theme: Theme): CSSObject => ({
51+
transition: theme.transitions.create('width', {
52+
easing: theme.transitions.easing.sharp,
53+
duration: theme.transitions.duration.leavingScreen
54+
}),
55+
overflowX: 'hidden',
56+
width: `calc(${theme.spacing(7)} + 1px)`,
57+
[theme.breakpoints.up('sm')]: {
58+
width: `calc(${theme.spacing(8)} + 1px)`
59+
}
60+
})
61+
62+
const Drawer = styled(MuiDrawer,
63+
{ shouldForwardProp: (prop) => prop !== 'open' })(
64+
({ theme, open }) => ({
65+
width: drawerWidth,
66+
flexShrink: 0,
67+
whiteSpace: 'nowrap',
68+
boxSizing: 'border-box',
69+
...(open && {
70+
...openedMixin(theme),
71+
'& .MuiDrawer-paper': openedMixin(theme)
72+
}),
73+
...(!open && {
74+
...closedMixin(theme),
75+
'& .MuiDrawer-paper': closedMixin(theme)
76+
})
77+
})
78+
)
79+
8580
function NavBarBottom (props): JSX.Element {
8681
const {
87-
classes,
8882
sessionQueueSize,
8983
sessionCount,
9084
maxSession,
@@ -101,7 +95,7 @@ function NavBarBottom (props): JSX.Element {
10195

10296
return (
10397
<div>
104-
<Box p={3} m={1} className={classes.queueBackground}>
98+
<Box p={3} m={1} sx={{ bgcolor: 'secondary.main' }}>
10599
<Typography
106100
align='center'
107101
gutterBottom
@@ -120,79 +114,65 @@ function NavBarBottom (props): JSX.Element {
120114
)
121115
}
122116

123-
interface NavBarProps {
124-
open: boolean
125-
maxSession: number
126-
sessionCount: number
127-
nodeCount: number
128-
sessionQueueSize: number
129-
classes: any
130-
}
131-
132-
class NavBar extends React.Component<NavBarProps, {}> {
133-
static defaultProps = {
134-
open: false
135-
}
136-
137-
render (): ReactNode {
138-
const {
139-
open,
140-
maxSession,
141-
sessionCount,
142-
nodeCount,
143-
sessionQueueSize,
144-
classes
145-
} = this.props
117+
function NavBar (props) {
118+
const {
119+
open,
120+
maxSession,
121+
sessionCount,
122+
nodeCount,
123+
sessionQueueSize
124+
} = props
146125

147-
return (
148-
<Drawer
149-
variant='permanent'
150-
classes={{
151-
paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose)
152-
}}
153-
open={open}
126+
return (
127+
<Drawer
128+
variant='permanent'
129+
open={open}
130+
>
131+
<Box
132+
display='flex'
133+
alignItems='center'
134+
justifyContent='flex-end'
135+
sx={{ bgcolor: 'primary.main' }}
136+
marginTop={2}
154137
>
155-
<div className={classes.toolbarIcon}>
156-
<IconButton color='secondary' size='large'>
157-
<ChevronLeftIcon />
158-
</IconButton>
138+
<IconButton color='secondary' size='large'>
139+
<ChevronLeftIcon />
140+
</IconButton>
141+
</Box>
142+
<Divider />
143+
<List>
144+
<div>
145+
<ListItemLink href='#'>
146+
<ListItemIcon>
147+
<DashboardIcon />
148+
</ListItemIcon>
149+
<ListItemText primary='Overview' />
150+
</ListItemLink>
151+
<ListItemLink href='#/sessions'>
152+
<ListItemIcon>
153+
<AssessmentIcon />
154+
</ListItemIcon>
155+
<ListItemText primary='Sessions' />
156+
</ListItemLink>
157+
<ListItemLink href='#/help'>
158+
<ListItemIcon>
159+
<HelpIcon />
160+
</ListItemIcon>
161+
<ListItemText primary='Help' />
162+
</ListItemLink>
159163
</div>
160-
<Divider />
161-
<List>
162-
<div>
163-
<ListItemLink href='#'>
164-
<ListItemIcon>
165-
<DashboardIcon />
166-
</ListItemIcon>
167-
<ListItemText primary='Overview' />
168-
</ListItemLink>
169-
<ListItemLink href='#/sessions'>
170-
<ListItemIcon>
171-
<AssessmentIcon />
172-
</ListItemIcon>
173-
<ListItemText primary='Sessions' />
174-
</ListItemLink>
175-
<ListItemLink href='#/help'>
176-
<ListItemIcon>
177-
<HelpIcon />
178-
</ListItemIcon>
179-
<ListItemText primary='Help' />
180-
</ListItemLink>
181-
</div>
182-
</List>
183-
<Box flexGrow={1} />
184-
{open && (
185-
<NavBarBottom
186-
classes={classes}
187-
sessionQueueSize={sessionQueueSize}
188-
sessionCount={sessionCount}
189-
maxSession={maxSession}
190-
nodeCount={nodeCount}
191-
/>
192-
)}
193-
</Drawer>
194-
)
195-
}
164+
</List>
165+
<Box flexGrow={1} />
166+
{open && (
167+
<NavBarBottom
168+
sessionQueueSize={sessionQueueSize}
169+
sessionCount={sessionCount}
170+
maxSession={maxSession}
171+
nodeCount={nodeCount}
172+
/>
173+
)}
174+
</Drawer>
175+
)
196176
}
197177

198-
export default (withStyles(useStyles))(NavBar)
178+
export default NavBar

0 commit comments

Comments
 (0)