Upgrade to eslint 8 (#550)

discretize · May 1, 2023 · 7887325 · 7887325
1 parent 8d4014c
commit 7887325
Show file tree

Hide file tree

Showing 17 changed files with 1,618 additions and 1,012 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -72,6 +72,8 @@
       }
     ],
 
+    "react/function-component-definition": "off",
+
     // typescript:
     "react/jsx-filename-extension": ["warn", { "extensions": [".jsx", ".tsx"] }],
     "import/extensions": [

diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.7",
-    "@babel/core": "7.16.7",
+    "@babel/core": "7.21.5",
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@babel/plugin-transform-typescript": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
@@ -81,24 +81,24 @@
     "@types/babel__core": "^7.1.19",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "@vitejs/plugin-react": "^1.0.7",
     "axios": "^0.21.4",
     "babel-eslint": "^10.0.0",
     "babel-plugin-i18next-extract": "^0.8.3",
-    "eslint": "^7.5.0",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint": "^8.0.0",
+    "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^24.0.0",
-    "eslint-plugin-jsdoc": "^37.9.7",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "eslint-plugin-testing-library": "^3.9.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsdoc": "^43.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.10.3",
     "esm": "^3.2.25",
     "gh-pages": "^3.2.3",
     "prettier": "^2.4.1",

diff --git a/src/components/BuildPage.jsx b/src/components/BuildPage.jsx
@@ -71,7 +71,8 @@ const BuildPage = () => {
 
   // Component for a trait line, augmented with the name of the trait line
   // TODO maybe move this into react-discretize-components
-  const Traits = ({ id, selected: selectedTraits }) => {
+  // eslint-disable-next-line react/no-unstable-nested-components
+  function Traits({ id, selected: selectedTraits }) {
     return (
       <Box display="flex" mb={1}>
         <Paper elevation={0} className={classes.traitlineRoot}>
@@ -82,7 +83,7 @@ const BuildPage = () => {
         <TraitLine id={id} defaultSelected={selectedTraits} selectable={false} />
       </Box>
     );
-  };
+  }
 
   let assumedBuffs = buffModifiers.flatMap((buff) => buff.items).filter((buff) => buffs[buff.id]);
 

diff --git a/src/components/baseComponents/LanguageSelection.jsx b/src/components/baseComponents/LanguageSelection.jsx
@@ -17,22 +17,20 @@ const LanguageSelection = () => {
   };
 
   return (
-    <>
-      <FormControl sx={{ minWidth: 150 }} size="small" variant="standard">
-        <FormLabel id="filter-button-group">Language</FormLabel>
+    <FormControl sx={{ minWidth: 150 }} size="small" variant="standard">
+      <FormLabel id="filter-button-group">Language</FormLabel>
 
-        <RadioGroup
-          aria-labelledby="language-select-label"
-          value={language}
-          onChange={onChangeLanguage}
-          color="primary"
-        >
-          {LANGUAGES.map(({ value, label }) => (
-            <FormControlLabel key={value} value={value} control={<Radio />} label={label} />
-          ))}
-        </RadioGroup>
-      </FormControl>
-    </>
+      <RadioGroup
+        aria-labelledby="language-select-label"
+        value={language}
+        onChange={onChangeLanguage}
+        color="primary"
+      >
+        {LANGUAGES.map(({ value, label }) => (
+          <FormControlLabel key={value} value={value} control={<Radio />} label={label} />
+        ))}
+      </RadioGroup>
+    </FormControl>
   );
 };
 

diff --git a/src/components/baseComponents/Layout.jsx b/src/components/baseComponents/Layout.jsx
@@ -1,24 +1,21 @@
 import { Box, Container } from '@mui/material';
 import React from 'react';
 
-const Layout = ({ children, ContainerProps, disableContainer = false }) => {
-  return (
-    <>
-      {(!disableContainer && (
-        <Container disableGutters maxWidth="lg" {...ContainerProps}>
-          <Box
-            sx={{
-              padding: 2,
-              backgroundColor: 'background.default',
-              boxShadow: 5,
-            }}
-          >
-            {children}
-          </Box>
-        </Container>
-      )) || <Box p={2}>{children}</Box>}
-    </>
+const Layout = ({ children, ContainerProps, disableContainer = false }) =>
+  disableContainer ? (
+    <Box p={2}>{children}</Box>
+  ) : (
+    <Container disableGutters maxWidth="lg" {...ContainerProps}>
+      <Box
+        sx={{
+          padding: 2,
+          backgroundColor: 'background.default',
+          boxShadow: 5,
+        }}
+      >
+        {children}
+      </Box>
+    </Container>
   );
-};
 
 export default Layout;
diff --git a/src/components/baseComponents/Section.jsx b/src/components/baseComponents/Section.jsx
@@ -23,15 +23,14 @@ const useStyles = makeStyles()((theme) => ({
   },
 }));
 
-// first disables the delimiting line above!
-const Section = ({ first, title, helpText, extraInfo, content }) => {
+const SectionInfo = ({ title, children }) => {
   const { t } = useTranslation();
   const expert = useSelector(getExpertMode);
   const { classes } = useStyles();
 
   const [expandedClick, setExpandedClick] = React.useState(!expert);
 
-  const SectionInfo = ({ children }) => (
+  return (
     <>
       <Typography variant="h5">{title}</Typography>{' '}
       {children && (
@@ -56,7 +55,10 @@ const Section = ({ first, title, helpText, extraInfo, content }) => {
       )}
     </>
   );
+};
 
+// first disables the delimiting line above!
+const Section = ({ first, title, helpText, extraInfo, content }) => {
   return (
     <Grid item container spacing={2} mb={2} sx={{ borderColor: 'primary.main' }}>
       {!first && (
@@ -65,7 +67,7 @@ const Section = ({ first, title, helpText, extraInfo, content }) => {
         </Grid>
       )}
       <Grid item xs={12} sm={3}>
-        <SectionInfo>{helpText}</SectionInfo>
+        <SectionInfo title={title}>{helpText}</SectionInfo>
         {extraInfo}
       </Grid>
 

diff --git a/src/components/sections/controls/Controls.jsx b/src/components/sections/controls/Controls.jsx
@@ -86,76 +86,74 @@ const ControlsBox = () => {
   }
 
   return (
-    <>
-      <Box display="flex" flexWrap="wrap">
-        <Box>
-          <Button
-            variant="outlined"
-            color="primary"
-            className={classes.button}
-            onClick={onStartCalculate}
-            classes={{ label: classes.label }}
-            disabled={status === RUNNING || profession === ''}
-          >
-            {status === RUNNING ? (
-              <ProgressIcon className={classes.icon} />
-            ) : (
-              <EqualizerRoundedIcon className={classes.icon} />
-            )}
-            <Typography>
-              <Trans>Calculate</Trans>
-            </Typography>
-          </Button>
-        </Box>
-        <Box>
+    <Box display="flex" flexWrap="wrap">
+      <Box>
+        <Button
+          variant="outlined"
+          color="primary"
+          className={classes.button}
+          onClick={onStartCalculate}
+          classes={{ label: classes.label }}
+          disabled={status === RUNNING || profession === ''}
+        >
+          {status === RUNNING ? (
+            <ProgressIcon className={classes.icon} />
+          ) : (
+            <EqualizerRoundedIcon className={classes.icon} />
+          )}
+          <Typography>
+            <Trans>Calculate</Trans>
+          </Typography>
+        </Button>
+      </Box>
+      <Box>
+        <Button
+          variant="outlined"
+          color="primary"
+          className={classes.button}
+          onClick={(e) => dispatch({ type: SagaTypes.Stop })}
+          disabled={status !== RUNNING}
+        >
+          <Cancel className={classNames(classes.icon)} />
+          <Typography style={{ marginLeft: 8 }}>
+            <Trans>Stop</Trans>
+          </Typography>
+        </Button>
+      </Box>
+      <Box flexGrow={1}>
+        {status === STOPPED ? (
           <Button
             variant="outlined"
             color="primary"
             className={classes.button}
-            onClick={(e) => dispatch({ type: SagaTypes.Stop })}
-            disabled={status !== RUNNING}
+            onClick={(e) => dispatch({ type: SagaTypes.Resume })}
           >
-            <Cancel className={classNames(classes.icon)} />
+            <ProgressIcon className={classes.icon} />
             <Typography style={{ marginLeft: 8 }}>
-              <Trans>Stop</Trans>
+              <Trans>Resume</Trans>
             </Typography>
           </Button>
-        </Box>
-        <Box flexGrow={1}>
-          {status === STOPPED ? (
-            <Button
-              variant="outlined"
-              color="primary"
-              className={classes.button}
-              onClick={(e) => dispatch({ type: SagaTypes.Resume })}
-            >
-              <ProgressIcon className={classes.icon} />
-              <Typography style={{ marginLeft: 8 }}>
-                <Trans>Resume</Trans>
-              </Typography>
-            </Button>
-          ) : null}
-        </Box>
+        ) : null}
+      </Box>
 
-        <Box alignSelf="center" display="flex" m={1} maxWidth={300}>
-          <Typography variant="caption" className={classes.errorText}>
-            {error}
-          </Typography>
-        </Box>
-        <Box alignSelf="center">
-          <Chip
-            sx={{ marginRight: 1 }}
-            label={
-              <>
-                <Trans>Status:</Trans> {firstUppercase(status)} {icon}
-              </>
-            }
-            color={[SUCCESS, WAITING, RUNNING].includes(status) ? 'primary' : 'secondary'}
-          />
-          <ResultTableSettings />
-        </Box>
+      <Box alignSelf="center" display="flex" m={1} maxWidth={300}>
+        <Typography variant="caption" className={classes.errorText}>
+          {error}
+        </Typography>
+      </Box>
+      <Box alignSelf="center">
+        <Chip
+          sx={{ marginRight: 1 }}
+          label={
+            <>
+              <Trans>Status:</Trans> {firstUppercase(status)} {icon}
+            </>
+          }
+          color={[SUCCESS, WAITING, RUNNING].includes(status) ? 'primary' : 'secondary'}
+        />
+        <ResultTableSettings />
       </Box>
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/sections/distribution/DistributionSection.jsx b/src/components/sections/distribution/DistributionSection.jsx
@@ -43,15 +43,13 @@ const DistributionSection = () => {
       title={t('Skill Coefficients')}
       content={<DamageDistribution />}
       extraInfo={
-        <>
-          {profession !== '' && (
-            <Presets
-              data={distributionPresets}
-              handleClick={onTemplateClickDistribution}
-              presetCategory="distribution"
-            />
-          )}
-        </>
+        profession !== '' && (
+          <Presets
+            data={distributionPresets}
+            handleClick={onTemplateClickDistribution}
+            presetCategory="distribution"
+          />
+        )
       }
       helpText={
         <>

diff --git a/src/components/sections/infusions/InfusionsSection.jsx b/src/components/sections/infusions/InfusionsSection.jsx
@@ -34,11 +34,9 @@ const InfusionsSection = () => {
       title={title}
       content={<Infusions />}
       helpText={
-        <>
-          <Trans>
-            Select up to 2 types of stat infusions, and optionally limit the quantity allowed.
-          </Trans>
-        </>
+        <Trans>
+          Select up to 2 types of stat infusions, and optionally limit the quantity allowed.
+        </Trans>
       }
       extraInfo={
         <Presets