Migrate to React18 (#345)

* changes from running codemods

* apply needed changes

* update dependencies

* use makeStyles from tss-react

Author: marvinsjsu

client/package-lock.json

@@ -9,25 +9,25 @@
 		"@mui/base": "^5.0.0-beta.2",
 		"@mui/icons-material": "^5.11.16",
 		"@mui/material": "^5.13.2",
-		"@mui/styles": "^5.13.2",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
 		"@types/jest": "^26.0.23",
 		"@types/jsonwebtoken": "^8.5.4",
 		"@types/node": "^15.6.0",
-		"@types/react-dom": "^17.0.2",
+		"@types/react-dom": "^18.2.0",
 		"@types/react-router-dom": "^5.1.7",
 		"axios": "^0.26.1",
 		"jest": "26.6.0",
 		"jsonwebtoken": "^9.0.0",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.34.0",
 		"react-input-mask": "^3.0.0-alpha.2",
 		"react-query": "^3.35.0",
 		"react-router-dom": "^5.2.0",
 		"socket.io-client": "^4.5.1",
+		"tss-react": "^4.8.4",
 		"typescript": "^4.2.4",
 		"web-vitals": "^1.0.1",
 		"yup": "^0.32.11"
@@ -59,8 +59,8 @@
 		"@types/jest": "^26.0.23",
 		"@types/jsonwebtoken": "^8.5.4",
 		"@types/node": "^15.6.0",
-		"@types/react": "^17.0.2",
-		"@types/react-dom": "^17.0.2",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
 		"@types/react-input-mask": "^3.0.2",
 		"@types/react-router-dom": "^5.1.7",
 		"@typescript-eslint/eslint-plugin": "^5.5.0",

client/package.json

@@ -1,10 +1,10 @@
 import { Grid, Typography, Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import type { Theme } from '@mui/material/styles';
 import MainImage from '../assets/banner-section-main.svg';
 import CTAButton from './Buttons/CTAButton';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   gridTitle: {
     backgroundColor: 'red',
   },
@@ -42,7 +42,7 @@ function BannerText() {
 }
 
 function BannerSection() {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <Box>

client/src/components/BannerSection.tsx

@@ -1,9 +1,9 @@
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Typography } from '@mui/material';
 import type { Theme } from '@mui/material/styles';
 import { useHistory } from 'react-router-dom';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   CTAButton: {
     color: 'white',
     backgroundColor: '#EF6A60',
@@ -23,7 +23,7 @@ type Props = {
 };
 
 function CTAButton({ text }: Props) {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const history = useHistory();
 
   return (

client/src/components/Buttons/CTAButton.tsx

@@ -4,10 +4,10 @@ import Grid from '@mui/material/Grid';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { NavLink } from 'react-router-dom';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   wrapper: {
     borderRadius: 5,
   },
@@ -42,7 +42,7 @@ type Props = {
 };
 
 function CallToActionCard({ btnText, color, headerText, subText, to }: Props) {
-  const classes = useStyles({});
+  const { classes } = useStyles();
 
   return (
     <Card className={classes.wrapper} sx={{ height: '500px', width: '100%' }}>

client/src/components/CallToActionCard.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 
 import Grid from '@mui/material/Grid';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 
 import CallToActionCard from './CallToActionCard';
 import routes from '../routes/routes';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   grid: {
     justifyContent: 'center',
     paddingTop: '25px',
   },
 }));
 
 function CallToActionCards() {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <Grid className={classes.grid} container gap="20px">

client/src/components/CallToActionCards.tsx

@@ -1,9 +1,10 @@
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 
 type Props = {
   progress: number;
 };
-const useStyles = makeStyles(() => ({
+// TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
+const useStyles = makeStyles<{ progress: number }>()((_theme, { progress }) => ({
   container: {
     width: '10em',
     height: 4,
@@ -12,16 +13,14 @@ const useStyles = makeStyles(() => ({
     overflow: 'hidden',
   },
   fill: {
-    width: (props: Props) => {
-      return `${props.progress}%`;
-    },
+    width: `${progress}%`,
     height: '100%',
     backgroundColor: '#43AFBF',
   },
 }));
 
 export default function ProgressBar(props: Props) {
-  const classes = useStyles(props);
+  const { classes } = useStyles({ progress: props.progress });
 
   return (
     <div className={classes.container}>

client/src/components/Card/ProgressBar.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Box, Grid } from '@mui/material';
 
 import type { Theme } from '@mui/material/styles';
 
-const bulletStyles = makeStyles<Theme, BulletProps>((theme: Theme) => ({
+const bulletStyles = makeStyles()((theme: Theme) => ({
   grid: {
     marginTop: '30px',
   },
@@ -22,7 +22,7 @@ type BulletProps = {
 };
 
 function BulletGrid(props: BulletProps) {
-  const classes = bulletStyles(props);
+  const { classes } = bulletStyles();
 
   return (
     <Grid container justifyContent="space-between">

client/src/components/DisplayGrids/BulletGrid.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Box } from '@mui/material';
 
 import type { Theme } from '@mui/material/styles';
 
-const useStyles = makeStyles<Theme, GridProps>((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   missionContent: {
     display: 'grid',
     gridTemplateColumns: 'repeat(7, 132px)',
@@ -41,7 +41,7 @@ type GridProps = {
 };
 
 function GridImages(props: GridProps): JSX.Element {
-  const classes = useStyles(props);
+  const { classes } = useStyles();
 
   return (
     <Box className={`${classes.missionContent}`}>
@@ -65,13 +65,14 @@ function GridImages(props: GridProps): JSX.Element {
 
 // SUB-COMPONENT GridImage
 
-const imageStyles = makeStyles<Theme, ImageProps>({
+// TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
+const imageStyles = makeStyles<{ src: string }>()((_theme, { src }) => ({
   gridImage: {
     width: '100%',
     height: '109px',
     border: '1px solid black',
     backgroundColor: '#C4C4C4',
-    backgroundImage: (props) => `url(${props.src})`,
+    backgroundImage: `url(${src})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
   },
@@ -84,15 +85,15 @@ const imageStyles = makeStyles<Theme, ImageProps>({
       gridRow: 'auto / span 1',
     },
   },
-});
+}));
 
 type ImageProps = {
   src: string;
   isWide: boolean;
 };
 
 function GridImage(props: ImageProps): JSX.Element {
-  const classes = imageStyles(props);
+  const { classes } = imageStyles({ src: props.src });
 
   let wideClass = props.isWide === true ? classes.wideImage : '';
 
@@ -101,33 +102,36 @@ function GridImage(props: ImageProps): JSX.Element {
 
 // SUB-COMPONENT MissionStatement
 
-const missionStyles = makeStyles<Theme, MissionProps>({
-  missionText: {
-    gridColumn: '5 / span 3',
-    gridRow: (props) => `${props.row} / span 1`,
-    textAlign: 'left',
-    fontSize: '1.4rem',
-  },
-  '@media screen and (max-width: 1100px)': {
+// TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
+const missionStyles = makeStyles<{ row: string }>()((_theme, { row }) => {
+  return {
     missionText: {
-      gridColumn: '4 / span 3',
+      gridColumn: '5 / span 3',
+      gridRow: `${row} / span 1`,
+      textAlign: 'left',
+      fontSize: '1.4rem',
     },
-  },
-  '@media screen and (max-width: 820px)': {
-    missionText: {
-      gridColumn: '1 / span 4',
-      gridRow: 'auto / span 1',
+    '@media screen and (max-width: 1100px)': {
+      missionText: {
+        gridColumn: '4 / span 3',
+      },
     },
-  },
-  '@media screen and (max-width: 520px)': {
-    missionText: {
-      gridColumn: '1 / span 3',
+    '@media screen and (max-width: 820px)': {
+      missionText: {
+        gridColumn: '1 / span 4',
+        gridRow: 'auto / span 1',
+      },
     },
-  },
-  missionTitle: {
-    fontWeight: 'bold',
-    fontSize: '1.4rem',
-  },
+    '@media screen and (max-width: 520px)': {
+      missionText: {
+        gridColumn: '1 / span 3',
+      },
+    },
+    missionTitle: {
+      fontWeight: 'bold',
+      fontSize: '1.4rem',
+    },
+  };
 });
 
 type MissionProps = {
@@ -137,7 +141,7 @@ type MissionProps = {
 };
 
 function MissionStatement(props: MissionProps): JSX.Element {
-  const classes = missionStyles(props);
+  const { classes } = missionStyles({ row: props.row });
 
   return (
     <Box className={`${classes.missionText}`}>

client/src/components/DisplayGrids/GridImages.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Grid } from '@mui/material';
 
-import type { Theme } from '@mui/material/styles';
-
-const instructionStyles = makeStyles<Theme, InstructionProps>((theme: Theme) => ({
+const instructionStyles = makeStyles()(() => ({
   gridBoxes: {
     '& > div': {
       width: '100%',
@@ -32,7 +30,7 @@ type InstructionProps = {
 };
 
 function InstructionGrid(props: InstructionProps) {
-  const classes = instructionStyles(props);
+  const { classes } = instructionStyles();
 
   return (
     <Grid container justifyContent="space-between" className={`${classes.gridBoxes}`}>

client/src/components/DisplayGrids/InstructionGrid.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 
@@ -15,7 +15,7 @@ const faqQuestions = [
   { question: 'Other questions about this service?', answer: loremIpsum.slice(0, 150) },
 ];
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   faqs: {
     display: 'flex',
     height: 'auto',
@@ -53,7 +53,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 function FAQs() {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <div className={classes.faqs}>

client/src/components/FAQs.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { Theme } from '@mui/material/styles';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   wrapper: {
     padding: '0px 0px 5px 0px',
     position: 'relative',
@@ -34,7 +34,7 @@ type Props = {
 };
 
 function FilterGroup(props: Props): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const { filters, header, onHandleCheck, selectedFilters } = props;
   let [expand, setExpand] = React.useState<boolean>(false);