Skip to content

Commit eba2dbd

Browse files
diemoldiemol
committed
[grid] Starting move to React 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 3156fae commit eba2dbd

6 files changed

Lines changed: 124 additions & 253 deletions

File tree

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

Lines changed: 39 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,67 +15,48 @@
1515
// specific language governing permissions and limitations
1616
// under the License.
1717

18-
import React, { ReactNode } from 'react'
19-
import { Box, Container, Typography, Theme } from '@mui/material'
20-
import createStyles from '@mui/styles/createStyles'
21-
import withStyles from '@mui/styles/withStyles'
22-
import { StyleRules } from '@mui/styles'
18+
import React from 'react'
19+
import { Box, Container, Typography } from '@mui/material'
2320

24-
const useStyles = (theme: Theme): StyleRules => createStyles(
25-
{
26-
root: {
27-
backgroundColor: theme.palette.secondary.main,
28-
height: '100%',
29-
paddingBottom: theme.spacing(3),
30-
paddingTop: theme.spacing(3),
31-
width: '100%',
32-
justifyContent: 'center'
33-
}
34-
})
35-
36-
interface ErrorProps {
37-
message: string
38-
errorMessage: string
39-
classes: any
40-
}
41-
42-
class Error extends React.Component<ErrorProps, {}> {
43-
render (): ReactNode {
44-
const { message, errorMessage, classes } = this.props
45-
// noinspection HtmlUnknownAnchorTarget
46-
return (
47-
<div className={classes.root}>
48-
<Box
49-
display='flex'
50-
flexDirection='column'
51-
height='100%'
52-
justifyContent='center'
53-
>
54-
<Container maxWidth='md'>
55-
<Box mb={3}>
56-
<Typography
57-
align='center'
58-
color='textPrimary'
59-
variant='h3'
60-
>
61-
{message}
62-
</Typography>
63-
</Box>
21+
function Error (props) {
22+
const { message, errorMessage } = props
23+
return (
24+
<Box
25+
height="100%"
26+
width="100%"
27+
paddingY={3}
28+
sx={{ bgcolor: 'secondary.main' }}
29+
>
30+
<Box
31+
display="flex"
32+
flexDirection="column"
33+
height="100%"
34+
justifyContent="center"
35+
>
36+
<Container maxWidth="md">
37+
<Box mb={3}>
6438
<Typography
65-
align='center'
66-
color='textPrimary'
67-
variant='h4'
68-
component='span'
39+
align="center"
40+
color="textPrimary"
41+
variant="h3"
6942
>
70-
<pre>
71-
{errorMessage}
72-
</pre>
43+
{message}
7344
</Typography>
74-
</Container>
75-
</Box>
76-
</div>
77-
)
78-
}
45+
</Box>
46+
<Typography
47+
align="center"
48+
color="textPrimary"
49+
variant="h4"
50+
component="span"
51+
>
52+
<pre>
53+
{errorMessage}
54+
</pre>
55+
</Typography>
56+
</Container>
57+
</Box>
58+
</Box>
59+
)
7960
}
8061

81-
export default withStyles(useStyles)(Error)
62+
export default Error

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

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,29 @@
1515
// specific language governing permissions and limitations
1616
// under the License.
1717

18-
import React, { ReactNode } from 'react'
18+
import React from 'react'
1919
import { Box, Link, Typography } from '@mui/material'
2020

21-
class Footer extends React.Component<{}, {}> {
22-
render (): ReactNode {
23-
// noinspection HtmlUnknownAnchorTarget
24-
return (
25-
<Box pt={4}>
26-
<Typography variant='body2' color='textSecondary' align='center'>
27-
<Link href='#/help' underline='hover'>
28-
Help
29-
</Link>
30-
{' - All rights reserved - '}
31-
<Link
32-
href='https://sfconservancy.org/'
33-
target='_blank'
34-
rel='noreferrer'
35-
underline='hover'
36-
>
37-
Software Freedom Conservancy
38-
</Link>{' '}
39-
{new Date().getFullYear()}.
40-
</Typography>
41-
</Box>
42-
)
43-
}
21+
function Footer (): JSX.Element {
22+
return (
23+
<Box pt={4}>
24+
<Typography variant="body2" color="textSecondary" align="center">
25+
<Link href="#/help" underline="hover">
26+
Help
27+
</Link>
28+
{' - All rights reserved - '}
29+
<Link
30+
href="https://sfconservancy.org/"
31+
target="_blank"
32+
rel="noreferrer"
33+
underline="hover"
34+
>
35+
Software Freedom Conservancy
36+
</Link>{' '}
37+
{new Date().getFullYear()}.
38+
</Typography>
39+
</Box>
40+
)
4441
}
4542

4643
export default Footer

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

Lines changed: 24 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,46 +15,31 @@
1515
// specific language governing permissions and limitations
1616
// under the License.
1717

18-
import React, { ReactNode } from 'react'
18+
import React from 'react'
1919
import LinearProgress from '@mui/material/LinearProgress'
20-
import { Box, Theme, Typography } from '@mui/material'
21-
import createStyles from '@mui/styles/createStyles'
22-
import withStyles from '@mui/styles/withStyles'
23-
import { StyleRules } from '@mui/styles'
20+
import { Box, Typography } from '@mui/material'
2421

25-
const useStyles = (theme: Theme): StyleRules => createStyles(
26-
{
27-
root: {
28-
backgroundColor: theme.palette.secondary.main,
29-
height: '100%',
30-
paddingTop: theme.spacing(1),
31-
width: '100%',
32-
justifyContent: 'center'
33-
}
34-
})
35-
36-
interface LoadingProps {
37-
classes: any
38-
}
39-
40-
class Loading extends React.Component<LoadingProps, {}> {
41-
render (): ReactNode {
42-
const { classes } = this.props
43-
return (
44-
<div className={classes.root}>
45-
<Box mb={2}>
46-
<Typography
47-
align='center'
48-
color='textPrimary'
49-
variant='h3'
50-
>
51-
Loading...
52-
</Typography>
53-
</Box>
54-
<LinearProgress />
55-
</div>
56-
)
57-
}
22+
function Loading () {
23+
return (
24+
<Box
25+
sx={{ bgcolor: 'secondary.main' }}
26+
height="100%"
27+
width="100%"
28+
paddingY={1}
29+
justifyContent="center"
30+
>
31+
<Box mb={2}>
32+
<Typography
33+
align="center"
34+
color="textPrimary"
35+
variant="h3"
36+
>
37+
Loading...
38+
</Typography>
39+
</Box>
40+
<LinearProgress/>
41+
</Box>
42+
)
5843
}
5944

60-
export default withStyles(useStyles)(Loading)
45+
export default Loading

‎javascript/grid-ui/src/components/common/BrowserLogo.tsx‎

Lines changed: 18 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -15,68 +15,25 @@
1515
// specific language governing permissions and limitations
1616
// under the License.
1717

18-
import React, { ReactNode } from 'react'
19-
import { StyleRules } from '@mui/styles'
20-
import withStyles from '@mui/styles/withStyles'
18+
import React from 'react'
2119
import browserLogo from '../../util/browser-logo'
2220
import { Size } from '../../models/size'
23-
import clsx from 'clsx'
24-
25-
const useStyles = (): StyleRules => (
26-
{
27-
logo: {
28-
marginRight: 0,
29-
marginLeft: 0
30-
},
31-
small: {
32-
width: 24,
33-
height: 24
34-
},
35-
medium: {
36-
width: 32,
37-
height: 32
38-
},
39-
large: {
40-
width: 48,
41-
height: 48
42-
}
43-
})
44-
45-
interface BrowserLogoProps {
46-
browserName: string
47-
size: Size
48-
classes: any
49-
}
50-
51-
class BrowserLogo extends React.Component<BrowserLogoProps, {}> {
52-
static defaultProps = {
53-
size: Size.S
54-
}
55-
56-
render (): ReactNode {
57-
const { browserName, size, classes } = this.props
58-
59-
function sizeMap (size): string {
60-
if (size === Size.S) {
61-
return classes.small
62-
}
63-
if (size === Size.M) {
64-
return classes.medium
65-
}
66-
if (size === Size.L) {
67-
return classes.large
68-
}
69-
return classes.small
70-
}
71-
72-
return (
73-
<img
74-
src={browserLogo(browserName)}
75-
className={clsx(classes.logo, sizeMap(size))}
76-
alt='Browser Logo'
77-
/>
78-
)
79-
}
21+
import { Box } from '@mui/material'
22+
23+
function BrowserLogo (props) {
24+
const { browserName, size } = props
25+
const browserLogoSize = size ?? Size.S
26+
console.log(browserLogoSize)
27+
return (
28+
<Box
29+
component="img"
30+
src={browserLogo(browserName)}
31+
marginX={0}
32+
width={browserLogoSize}
33+
height={browserLogoSize}
34+
alt="Browser Logo"
35+
/>
36+
)
8037
}
8138

82-
export default withStyles(useStyles)(BrowserLogo)
39+
export default BrowserLogo

0 commit comments

Comments
 (0)