Upgrade react-scripts to v4 (#84)

* build: upgrade `react-scripts` * fix: change image urls * refactor: fix prettier issues
aadulan · Dec 14, 2021 · bf4726a · bf4726a
1 parent ef93ff8
commit bf4726a
Show file tree

Hide file tree

Showing 14 changed files with 3,862 additions and 3,820 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -34,6 +34,9 @@
                 // https://stackoverflow.com/a/53769213/9184658
                 "endOfLine": "auto"
             }
+        ],
+        "react/prop-types": [
+            0
         ]
         // "semi": "error"
     }

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "react-dom": "^16.9.0",
     "react-draggable": "^4.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.1.1",
+    "react-scripts": "4.0.3",
     "react-spring": "^8.0.27",
     "react-window": "^1.8.5"
   },
@@ -56,7 +56,6 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^6.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.0",

diff --git a/src/Components/Calculator/Calculator.jsx b/src/Components/Calculator/Calculator.jsx
@@ -176,7 +176,7 @@ export default function Calculator(props) {
                         aria-label="add"
                       >
                         <img
-                          src="plus-minus.svg"
+                          src={process.env.PUBLIC_URL + '/plus-minus.svg'}
                           alt="sign"
                           style={{ maxWidth: 20 }}
                         ></img>

diff --git a/src/Components/Display/AppBar.jsx b/src/Components/Display/AppBar.jsx
@@ -40,7 +40,7 @@ export default function TemporaryDrawer(props) {
             style={{ marginRight: 'auto' }}
           >
             <img
-              src="operations.svg"
+              src={process.env.PUBLIC_URL + '/operations.svg'}
               alt="logo"
               style={{ width: 50, height: 50, marginRight: 'auto' }}
             ></img>

diff --git a/src/Components/Display/EqCard.jsx b/src/Components/Display/EqCard.jsx
@@ -18,7 +18,7 @@ export default function EqCard(props) {
       index={props.index}
       isDragDisabled={props.isDragDisabled}
     >
-      {(provided, snapshot) => (
+      {(provided) => (
         <Card
           className={classes.card}
           innerRef={provided.innerRef}

diff --git a/src/Components/Display/EqDisplay.js b/src/Components/Display/EqDisplay.js
@@ -353,9 +353,7 @@ function EqDisplay() {
           alignItems="center"
           style={{ overflow: 'hidden' }}
         >
-          <DragDropContext
-            onDragEnd={onDragEnd}
-          >
+          <DragDropContext onDragEnd={onDragEnd}>
             <EquationSpace
               dropId={'eqspace-lhs'}
               expression={equation.lhs}

diff --git a/src/Components/Display/EqSpace.jsx b/src/Components/Display/EqSpace.jsx
@@ -18,7 +18,7 @@ export default function EquationSpace(props) {
   return (
     <Card className={classes.eqSpaceCard}>
       <Droppable droppableId={props.dropId} direction="horizontal">
-        {(provided, snapshot) => (
+        {(provided) => (
           <Grid
             className={classes.drop}
             direction="row"

diff --git a/src/Components/Display/Equal.jsx b/src/Components/Display/Equal.jsx
@@ -3,7 +3,7 @@ import { Typography } from '@material-ui/core';
 import 'katex/dist/katex.min.css';
 import TeX from '@matejmazur/react-katex';
 
-export default function Equal(props) {
+export default function Equal() {
   return (
     <Typography id="equal" variant="h1">
       <span style={{ margin: 'auto' }}>

diff --git a/src/Components/Info/Table.jsx b/src/Components/Info/Table.jsx
@@ -33,7 +33,7 @@ export default function SimpleTable() {
   return (
     <Grid container>
       {symbols.map((row, index) => (
-        <React.Fragment>
+        <React.Fragment key={index}>
           <Grid item xs>
             <Divider />
           </Grid>

diff --git a/src/Components/Settings/MethodMenu.jsx b/src/Components/Settings/MethodMenu.jsx
@@ -5,14 +5,14 @@ import Menu from '@material-ui/core/Menu';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Button } from '@material-ui/core';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
   root: {
     maxWidth: 150,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
   },
-}));
+});
 
 const options = [
   ['Change side, change sign', 'change'],

diff --git a/src/Components/Start/LevelButton.jsx b/src/Components/Start/LevelButton.jsx
@@ -91,7 +91,7 @@ export default function LevelButton(props) {
         <span
           className={classes.imageSrc}
           style={{
-            backgroundImage: `url(${props.image})`,
+            backgroundImage: `url(${process.env.PUBLIC_URL + '/' + props.image})`,
           }}
         />
         <span className={classes.imageBackdrop} />

diff --git a/src/Components/Start/Start.jsx b/src/Components/Start/Start.jsx
@@ -47,7 +47,7 @@ const levels = [
   },
 ];
 
-function Start(props) {
+function Start() {
   return (
     <Grid
       id="start"
@@ -57,7 +57,11 @@ function Start(props) {
       justifyContent="center"
     >
       <Grid direction="column" container item alignItems="center">
-        <img src="logo.svg" alt="logo" style={{ width: 250 }}></img>
+        <img
+          src={process.env.PUBLIC_URL + '/logo.svg'}
+          alt="logo"
+          style={{ width: 250 }}
+        ></img>
       </Grid>
       <Grid item>
         <Divider />

diff --git a/src/Components/TextBox/textBox.jsx b/src/Components/TextBox/textBox.jsx
@@ -20,7 +20,7 @@ export default function TextBox(props) {
         throw new Error('No terms');
       }
 
-      e.lhs.terms.forEach((t, index) => {
+      e.lhs.terms.forEach((t) => {
         if (t.variables[0].degree > 1) {
           throw new Error('Not a Linear Equation');
         }
@@ -32,7 +32,7 @@ export default function TextBox(props) {
         }
       });
 
-      e.rhs.terms.forEach((t, index) => {
+      e.rhs.terms.forEach((t) => {
         if (t.variables[0].degree > 1) {
           throw new Error('Not a Linear Equation');
         }