Upgrade to mui v5 and switch to notistack (#85)

* build: update `react` and `react-dom` * build: upgrade to `mui` v5 and install `notistack` * refactor: switch to `mui` v5 and `notistack` * test: remove enzyme tests * feat: set `maxSnack` prop * feat: fix level buttons issue * feat: remove snackbar props
aadulan · Dec 16, 2021 · ea5ec07 · ea5ec07
1 parent bf4726a
commit ea5ec07
Show file tree

Hide file tree

Showing 25 changed files with 780 additions and 912 deletions.
diff --git a/package.json b/package.json
@@ -4,20 +4,24 @@
   "private": true,
   "homepage": "https://aadulan.github.io/solve-x/",
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@matejmazur/react-katex": "^3.0.2",
-    "@material-ui/core": "^4.4.3",
-    "@material-ui/icons": "^4.5.1",
+    "@mui/icons-material": "^5.2.4",
+    "@mui/material": "^5.2.4",
+    "@mui/styles": "^5.2.3",
     "algebra.js": "^0.2.6",
     "jshint": "^2.10.2",
     "katex": "^0.11.1",
     "math-abs": "^1.0.2",
     "math-floor": "^1.0.1",
     "mathjs": "^7.5.1",
+    "notistack": "^2.0.3",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
+    "react": "17.0.0",
     "react-beautiful-dnd": "^12.2.0",
-    "react-dom": "^16.9.0",
+    "react-dom": "17.0.0",
     "react-draggable": "^4.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "4.0.3",

diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import { SnackbarProvider } from 'notistack';
 import './Styles/index.css';
 import EqDisplay from './Components/Display/EqDisplay';
 import Start from './Components/Start/Start';
-import { createTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 const theme = createTheme({
   palette: {
@@ -15,15 +15,16 @@ const theme = createTheme({
 });
 
 export default function App() {
-  // var basename= window.location.pathname || ''
   return (
-    <HashRouter basename={''}>
-      <ThemeProvider theme={theme}>
-        <Switch>
-          <Route exact path="/" component={Start} />
-          <Route exact path="/:id" component={EqDisplay} />
-        </Switch>
-      </ThemeProvider>
-    </HashRouter>
+    <ThemeProvider theme={theme}>
+      <SnackbarProvider maxSnack={1}>
+        <HashRouter basename={''}>
+          <Switch>
+            <Route exact path="/" component={Start} />
+            <Route exact path="/:id" component={EqDisplay} />
+          </Switch>
+        </HashRouter>
+      </SnackbarProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/Components/Calculator/Calculator.jsx b/src/Components/Calculator/Calculator.jsx
@@ -1,21 +1,27 @@
 import React, { useState } from 'react';
-import Typography from '@material-ui/core/Typography';
-import { Grid, CardContent, Card, Fab, Divider } from '@material-ui/core';
 import Draggable from 'react-draggable';
-import { makeStyles } from '@material-ui/core/styles';
+import { useSnackbar } from 'notistack';
 import clsx from 'clsx';
-import CardActions from '@material-ui/core/CardActions';
-import Collapse from '@material-ui/core/Collapse';
-import IconButton from '@material-ui/core/IconButton';
-import { red } from '@material-ui/core/colors';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import CalculatorButton from './CalculatorButton';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  Collapse,
+  Divider,
+  Fab,
+  Grid,
+  IconButton,
+  Typography,
+} from '@mui/material';
+import { red } from '@mui/material/colors';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     width: 250,
-    // maxWidth: 300,
   },
   media: {
     height: 0,
@@ -60,7 +66,8 @@ export default function Calculator(props) {
   const [number, setNumber] = useState('');
   const [sign, setSign] = useState('');
   const [isPositive, setPositive] = useState('+');
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const { enqueueSnackbar } = useSnackbar();
 
   const handleExpandClick = () => {
     setExpanded((exp) => !exp);
@@ -81,9 +88,7 @@ export default function Calculator(props) {
 
   const addNumber = (e) => {
     if (number.length >= 5) {
-      props.onMessage('Maximum number of digits reached');
-      props.onVariant('error');
-      props.onOpen(true);
+      enqueueSnackbar('Maximum number of digits reached', { variant: 'error' });
     } else {
       setNumber(number.concat(e));
     }
@@ -107,9 +112,7 @@ export default function Calculator(props) {
 
     props.onCalChange(newSign, isPositive.concat(number));
     if (newSign === '' || number === '') {
-      props.onMessage('Number or sign empty!');
-      props.onVariant('error');
-      props.onOpen(true);
+      enqueueSnackbar('Number or sign empty!', { variant: 'error' });
     } else {
       props.onEnterChange(true);
       setNumber('');

diff --git a/src/Components/Calculator/CalculatorButton.jsx b/src/Components/Calculator/CalculatorButton.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button, Grid, Typography } from '@material-ui/core';
-import DeleteIcon from '@material-ui/icons/Delete';
-import DoneIcon from '@material-ui/icons/Done';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DoneIcon from '@mui/icons-material/Done';
+import { Button, Grid, Typography } from '@mui/material';
 
 export default function CalculatorButton(props) {
   // callback cb
@@ -44,6 +44,7 @@ export default function CalculatorButton(props) {
           background: backgroundColour(props.val),
           marginTop: 2,
           marginBottom: 2,
+          color: 'black',
         }}
       >
         {val}

diff --git a/src/Components/Display/AppBar.jsx b/src/Components/Display/AppBar.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
 import MethodMenu from '../Settings/MethodMenu';
 import HelperPop from '../Settings/HelperPop';
 import { Link } from 'react-router-dom';
-import { Divider } from '@material-ui/core';
 import Dialog from '../Info/Info';
+import { makeStyles } from '@mui/styles';
+import { AppBar, Divider, Toolbar } from '@mui/material';
 
 const useStyles = makeStyles({
   root: {

diff --git a/src/Components/Display/EqCard.jsx b/src/Components/Display/EqCard.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import { Typography } from '@material-ui/core';
 import { Draggable } from 'react-beautiful-dnd';
 import { useStyles } from '../../Styles/Styles';
 import 'katex/dist/katex.min.css';
 import TeX from '@matejmazur/react-katex';
+import { Card, CardContent, Typography } from '@mui/material';
 
 //isDragDisabled to allow to conditionally move items
 
@@ -21,7 +19,7 @@ export default function EqCard(props) {
       {(provided) => (
         <Card
           className={classes.card}
-          innerRef={provided.innerRef}
+          ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           // isDragging={snapshot.isDragging}