Merge pull request #237 from chesslablab/issue/236-update-to-MUI-5

Issue/236 update to m UI 5
chesslablab · Jan 4, 2022 · a02c4de · a02c4de
2 parents 456e150 + a357e31
commit a02c4de
Show file tree

Hide file tree

Showing 28 changed files with 93 additions and 173 deletions.
diff --git a/package.json b/package.json
@@ -41,31 +41,30 @@
     "url": "git+ssh://git@github.com/chesslablab/redux-chess.git"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/styles": "^4.11.4",
-    "@material-ui/system": "^4.12.1",
-    "@material-ui/utils": "^4.11.2",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/material": "^5.2.7",
+    "@mui/styles": "^5.2.3",
     "html2canvas": "^1.3.2",
     "jwt-decode": "^3.1.2",
-    "recharts": "^2.1.0",
-    "redux": "^4.1.0",
-    "redux-devtools-extension": "^2.13.9",
-    "redux-thunk": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
-    "react-scripts": "4.0.3",
-    "react-timer-hook": "^3.0.4"
+    "react-scripts": "^5.0.0",
+    "react-timer-hook": "^3.0.4",
+    "recharts": "^2.1.0",
+    "redux": "^4.1.0",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
+    "@testing-library/react-hooks": "^7.0.1",
     "babel-cli": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-17-updated": "^1.0.2",
-    "@testing-library/react-hooks": "^7.0.1"
+    "enzyme-adapter-react-17-updated": "^1.0.2"
   }
 }
diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { Button, Menu, MenuItem } from '@material-ui/core';
-import ComputerIcon from '@material-ui/icons/Computer';
-import TuneIcon from '@material-ui/icons/Tune';
-import PublishIcon from '@material-ui/icons/Publish';
-import GroupAddIcon from '@material-ui/icons/GroupAdd';
-import SettingsIcon from '@material-ui/icons/Settings';
+import { Button, ButtonGroup, Menu, MenuItem } from '@mui/material';
+import ComputerIcon from '@mui/icons-material/Computer';
+import TuneIcon from '@mui/icons-material/Tune';
+import PublishIcon from '@mui/icons-material/Publish';
+import GroupAddIcon from '@mui/icons-material/GroupAdd';
+import SettingsIcon from '@mui/icons-material/Settings';
 import { useDispatch, useSelector } from 'react-redux';
 import boardActionTypes from '../constants/boardActionTypes';
 import loadFenDialogActionTypes from '../constants/loadFenDialogActionTypes';
@@ -69,11 +69,10 @@ const Buttons = ({ props }) => {
   const handleDownloadImage = () => DownloadImage();
 
   return (
-    <div>
+    <ButtonGroup variant="contained" aria-label="outlined primary button group">
       <Button
         startIcon={<GroupAddIcon />}
         onClick={handleClickPlayFriend}
-        style={{ textTransform: 'none' }}
       >
         Invite a Friend
       </Button>
@@ -96,15 +95,13 @@ const Buttons = ({ props }) => {
       </Menu>
       <Button
         startIcon={<TuneIcon />}
-        style={{ textTransform: 'none' }}
         onClick={() => wsMssgQuit(state).then(() => wsMssgStartAnalysis(state.server.ws))}
       >
         Analysis Board
       </Button>
       <Button
         startIcon={<ComputerIcon />}
         onClick={handleClickPlayWithTheComputer}
-        style={{ textTransform: 'none' }}
       >
         Play With the Computer
       </Button>
@@ -126,7 +123,6 @@ const Buttons = ({ props }) => {
       <Button
         startIcon={<PublishIcon />}
         onClick={handleClickLoad}
-        style={{ textTransform: 'none' }}
       >
         Load
       </Button>
@@ -148,7 +144,6 @@ const Buttons = ({ props }) => {
       <Button
         onClick={handleClickSettings}
         startIcon={<SettingsIcon />}
-        style={{ textTransform: 'none' }}
       >
         Settings
       </Button>
@@ -209,7 +204,7 @@ const Buttons = ({ props }) => {
           Image
         </MenuItem>
       </Menu>
-    </div>
+    </ButtonGroup>
   );
 }
 

diff --git a/src/components/Chess.js b/src/components/Chess.js
@@ -1,9 +1,9 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
 import { Provider } from "react-redux";
-import { CssBaseline } from "@material-ui/core";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
+import { CssBaseline } from "@mui/material";
+import { makeStyles } from '@mui/styles';
+import Grid from "@mui/material/Grid";
+import Paper from "@mui/material/Paper";
 import LoadFenDialog from "./Dialog/LoadFenDialog";
 import FenDialog from "./Dialog/FenDialog";
 import TakebackOfferDialog from "./Dialog/TakebackOfferDialog";
@@ -30,45 +30,28 @@ import InfoAlert from "./InfoAlert.js";
 import "../index.css";
 import store from "../store";
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    flexGrow: 1,
-    padding: theme.spacing(2),
-  },
-  buttons: {
-    marginBottom: theme.spacing(2),
-  },
-  leftCol: {
-    marginRight: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-  },
+const useStyles = makeStyles({
   paper: {
-    paddingTop: theme.spacing(1),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-    marginBottom: theme.spacing(2),
+    padding: 10,
   },
-}));
+});
 
 const Chess = ({ props }) => {
   const classes = useStyles();
 
   return (
     <Provider store={store}>
       <CssBaseline />
-      <Grid container className={classes.container}>
-        <Grid item xs={12} className={classes.buttons}>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
           <Buttons props={props} />
         </Grid>
-        <Grid item xs={12} md={3} className={classes.leftCol}>
+        <Grid item xs={12} md={3}>
           <Paper className={classes.paper}>
             <MainBreadcrumbs />
             <History />
             <GameClock />
-            <Grid container className={classes.container}>
-              <MoveValidator />
-            </Grid>
+            <MoveValidator />
             <ButtonsPlayFriendMode />
           </Paper>
           <InfoAlert />

diff --git a/src/components/Dialog/CreateInviteCodeDialog.js b/src/components/Dialog/CreateInviteCodeDialog.js
@@ -1,23 +1,24 @@
 import React from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, TextField } from '@mui/material';
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import { wsMssgQuit, wsMssgStartPlayfriend } from '../../actions/serverActions';
 import createInviteCodeDialogActions from '../../constants/createInviteCodeDialogActionTypes';
 import Pgn from '../../utils/Pgn';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const useStyles = makeStyles({
+  form: {
+    marginTop: 10,
     '& .MuiTextField-root': {
-      margin: theme.spacing(1),
+      padding: 15,
     },
   },
-}));
+});
 
 const CreateInviteCodeDialog = () => {
+  const classes = useStyles();
   const state = useSelector(state => state);
   const dispatch = useDispatch();
-  const classes = useStyles();
 
   const handleCreateCode = (event) => {
     event.preventDefault();
@@ -34,7 +35,7 @@ const CreateInviteCodeDialog = () => {
     <Dialog open={state.createInviteCodeDialog.open} maxWidth="sm" fullWidth={true}>
       <DialogTitle>Create invite code</DialogTitle>
       <DialogContent>
-        <form className={classes.root} onSubmit={handleCreateCode}>
+        <form className={classes.form} onSubmit={handleCreateCode}>
           <TextField
             select
             fullWidth

diff --git a/src/components/Dialog/DrawAcceptDialog.js b/src/components/Dialog/DrawAcceptDialog.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
 import { wsMssgDraw } from "../../actions/serverActions";
 import drawAcceptDialogActionTypes from "../../constants/drawAcceptDialogActionTypes";
 import Wording from "../../utils/Wording.js";

diff --git a/src/components/Dialog/DrawOfferDialog.js b/src/components/Dialog/DrawOfferDialog.js
@@ -5,7 +5,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-} from "@material-ui/core";
+} from "@mui/material";
 import Wording from "../../utils/Wording.js";
 import { useDispatch, useSelector } from "react-redux";
 import { wsMssgDraw } from "../../actions/serverActions";

diff --git a/src/components/Dialog/EnterInviteCodeDialog.js b/src/components/Dialog/EnterInviteCodeDialog.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Dialog, DialogActions, DialogContent, TextField } from "@material-ui/core";
+import { Button, Dialog, DialogActions, DialogContent, TextField } from "@mui/material";
 import { wsMssgAccept, wsMssgQuit } from "../../actions/serverActions";
 import enterInviteCodeDialogActions from "../../constants/enterInviteCodeDialogActionTypes";
 

diff --git a/src/components/Dialog/FenDialog.js b/src/components/Dialog/FenDialog.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@material-ui/core';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
 import { useDispatch, useSelector } from "react-redux";
 import fenDialogActions from '../../constants/fenDialogActionTypes';
 

diff --git a/src/components/Dialog/HeuristicPictureDialog.js b/src/components/Dialog/HeuristicPictureDialog.js
@@ -5,8 +5,8 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-} from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
+} from "@mui/material";
+import Alert from "@mui/material/Alert";
 import HeuristicPicture from "../HeuristicPicture.js";
 import { useDispatch, useSelector } from "react-redux";
 import heuristicPictureDialogActions from "../../constants/heuristicPictureDialogActionTypes";

diff --git a/src/components/Dialog/LoadFenDialog.js b/src/components/Dialog/LoadFenDialog.js
@@ -1,31 +1,14 @@
 import React from "react";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-} from "@material-ui/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
 import { wsMssgStartLoadfen, wsMssgQuit } from "../../actions/serverActions";
 import boardActionTypes from "../../constants/boardActionTypes";
 import loadFenDialogActions from "../../constants/loadFenDialogActionTypes";
 import modeActionTypes from "../../constants/modeActionTypes";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    "& .MuiTextField-root": {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 const LoadFenDialog = () => {
   const state = useSelector((state) => state);
   const dispatch = useDispatch();
-  const classes = useStyles();
 
   const handleLoad = (event) => {
     event.preventDefault();
@@ -40,13 +23,11 @@ const LoadFenDialog = () => {
     <Dialog open={state.loadFenDialog.open} maxWidth="sm" fullWidth={true}>
       <DialogTitle>Load FEN</DialogTitle>
       <DialogContent>
-        <form className={classes.root} onSubmit={handleLoad}>
+        <form onSubmit={handleLoad}>
           <TextField fullWidth required name="fen" label="FEN string" />
           <DialogActions>
             <Button type="submit">Load</Button>
-            <Button
-              onClick={() => dispatch({ type: loadFenDialogActions.CLOSE })}
-            >
+            <Button onClick={() => dispatch({ type: loadFenDialogActions.CLOSE })}>
               Cancel
             </Button>
           </DialogActions>

diff --git a/src/components/Dialog/LoadPgnDialog.js b/src/components/Dialog/LoadPgnDialog.js
@@ -1,31 +1,14 @@
 import React from "react";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-} from "@material-ui/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
 import { wsMssgStartLoadpgn, wsMssgQuit } from "../../actions/serverActions";
 import boardActionTypes from "../../constants/boardActionTypes";
 import loadPgnDialogActions from "../../constants/loadPgnDialogActionTypes";
 import modeActionTypes from "../../constants/modeActionTypes";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    "& .MuiTextField-root": {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 const LoadPgnDialog = () => {
   const state = useSelector((state) => state);
   const dispatch = useDispatch();
-  const classes = useStyles();
 
   const handleLoad = (event) => {
     event.preventDefault();
@@ -40,7 +23,7 @@ const LoadPgnDialog = () => {
     <Dialog open={state.loadPgnDialog.open} maxWidth="sm" fullWidth={true}>
       <DialogTitle>Load PGN</DialogTitle>
       <DialogContent>
-        <form className={classes.root} onSubmit={handleLoad}>
+        <form onSubmit={handleLoad}>
           <TextField
             fullWidth
             required
@@ -51,9 +34,7 @@ const LoadPgnDialog = () => {
           />
           <DialogActions>
             <Button type="submit">Load</Button>
-            <Button
-              onClick={() => dispatch({ type: loadPgnDialogActions.CLOSE })}
-            >
+            <Button onClick={() => dispatch({ type: loadPgnDialogActions.CLOSE })}>
               Cancel
             </Button>
           </DialogActions>

diff --git a/src/components/Dialog/PgnDialog.js b/src/components/Dialog/PgnDialog.js
@@ -6,7 +6,7 @@ import {
   DialogContent,
   DialogTitle,
   TextField,
-} from "@material-ui/core";
+} from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import pgnDialogActions from "../../constants/pgnDialogActionTypes";
 

diff --git a/src/components/Dialog/PlayLikeGrandmasterDialog.js b/src/components/Dialog/PlayLikeGrandmasterDialog.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, TextField } from '@material-ui/core';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, TextField } from '@mui/material';
 import { wsMssgQuit, wsMssgResponse, wsMssgStartGrandmaster } from '../../actions/serverActions';
 import playLikeGrandmasterDialogActions from '../../constants/playLikeGrandmasterDialogActionTypes';
 import Pgn from '../../utils/Pgn';

diff --git a/src/components/Dialog/RematchAcceptDialog.js b/src/components/Dialog/RematchAcceptDialog.js
@@ -5,7 +5,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-} from "@material-ui/core";
+} from "@mui/material";
 import Wording from "../../utils/Wording.js";
 import { useDispatch, useSelector } from "react-redux";
 import { wsMssgRematch, wsMssgRestart } from "../../actions/serverActions";