upgrade

- create-react-app
- eslint

.eslintrc

@@ -1,10 +1,5 @@
 {
   "extends": "airbnb",
-  "parser": "babel-eslint",
-  "plugins": [
-    "react",
-    "react-hooks"
-  ],
   "env": {
     "node": true,
     "browser": true,
@@ -12,23 +7,18 @@
   },
   "rules": {
     "max-len": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error",
     "import/no-extraneous-dependencies": ["error", {
       "devDependencies": true,
       "optionalDependencies": false
     }],
-
-    "react/jsx-fragments": 0,
     "no-console": 0,
-    "react/destructuring-assignment": 0,
-    "react/forbid-prop-types": [1, { "forbid": ["any"] }],
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/interactive-supports-focus": 0,
     "react/jsx-one-expression-per-line": 0,
     "object-curly-newline": 0,
     "arrow-parens": 0,
     "jsx-a11y/control-has-associated-label": 0,
-    "react/prop-types": 0
+    "react/prop-types": 0,
+    "no-multiple-empty-lines": ["error", { "max": 2, "maxBOF": 0, "maxEOF": 0 }]
   }
 }

package.json

@@ -47,12 +47,12 @@
     "electron-builder": "^22.9.1",
     "electron-builder-notarize": "^1.1.2",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^5.16.0 || ^6.1.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint": "^7.23.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "evergreen-ui": "^4.23.0",
     "fast-xml-parser": "^3.17.4",
     "file-url": "^3.0.0",
@@ -73,7 +73,7 @@
     "react-i18next": "^11.3.3",
     "react-icons": "^4.1.0",
     "react-lottie-player": "^1.2.0",
-    "react-scripts": "^3.4.0",
+    "react-scripts": "^4.0.3",
     "react-sortable-hoc": "^1.5.3",
     "react-sortablejs": "^6.0.0",
     "react-syntax-highlighter": "^13.0.0",

src/App.jsx

@@ -1946,7 +1946,6 @@ const App = memo(() => {
       setAutoLoadTimecode={setAutoLoadTimecode}
       enableTransferTimestamps={enableTransferTimestamps}
       setEnableTransferTimestamps={setEnableTransferTimestamps}
-
       AutoExportToggler={AutoExportToggler}
       renderCaptureFormatButton={renderCaptureFormatButton}
       onTunerRequested={onTunerRequested}
@@ -1960,7 +1959,6 @@ const App = memo(() => {
   useEffect(() => {
     // Testing:
     // if (isDev) load({ filePath: '/Users/mifi/Downloads/inp.MOV', customOutDir });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const VolumeIcon = muted || dummyVideoPath ? FaVolumeMute : FaVolumeUp;
@@ -2145,7 +2143,7 @@ const App = memo(() => {
       )}
 
       {isFileOpened && (
-        <Fragment>
+        <>
           <div
             className="no-user-select"
             style={{
@@ -2209,7 +2207,7 @@ const App = memo(() => {
               </motion.div>
             )}
           </AnimatePresence>
-        </Fragment>
+        </>
       )}
 
       <motion.div

src/Canvas.jsx

@@ -1,4 +1,3 @@
-
 import React, { memo, useEffect, useRef, useMemo, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 

src/ErrorBoundary.jsx

@@ -29,6 +29,7 @@ class ErrorBoundary extends Component {
       );
     }
 
+    // eslint-disable-next-line react/destructuring-assignment
     return this.props.children;
   }
 }

src/Settings.jsx

@@ -44,7 +44,7 @@ const Settings = memo(({
   };
 
   return (
-    <Fragment>
+    <>
       <Row>
         <KeyCell>App language</KeyCell>
         <Table.TextCell>
@@ -250,7 +250,7 @@ const Settings = memo(({
           />
         </Table.TextCell>
       </Row>
-    </Fragment>
+    </>
   );
 });
 

src/TimelineControls.jsx

@@ -132,7 +132,7 @@ const TimelineControls = memo(({
           />
         )}
         {hasVideo && !simpleMode && (
-          <Fragment>
+          <>
             <FaImages
               size={20}
               style={{ padding: '0 5px', color: timelineMode === 'thumbnails' ? primaryTextColor : undefined }}
@@ -148,7 +148,7 @@ const TimelineControls = memo(({
               title={t('Show keyframes')}
               onClick={toggleKeyframesEnabled}
             />
-          </Fragment>
+          </>
         )}
       </div>
 

src/TopMenu.jsx

@@ -16,9 +16,9 @@ const TopMenu = memo(({
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       {filePath && (
-        <Fragment>
+        <>
           <Button height={20} iconBefore="list" onClick={withBlur(() => setStreamsSelectorShown(true))}>
             {t('Tracks')} ({numStreamsToCopy}/{numStreamsTotal})
           </Button>
@@ -31,7 +31,7 @@ const TopMenu = memo(({
           >
             {copyAnyAudioTrack ? t('Keep audio') : t('Discard audio')}
           </Button>
-        </Fragment>
+        </>
       )}
 
       <div style={{ flexGrow: 1 }} />
@@ -51,7 +51,7 @@ const TopMenu = memo(({
 
       <IoIosHelpCircle size={24} role="button" onClick={toggleHelp} style={{ verticalAlign: 'middle', marginLeft: 5 }} />
       <IoIosSettings size={24} role="button" onClick={toggleSettings} style={{ verticalAlign: 'middle', marginLeft: 5 }} />
-    </Fragment>
+    </>
   );
 });