rewrite to modern hooks

.eslintignore

@@ -1,2 +1,4 @@
 dist
 package
+build
+watch-build

.eslintrc

@@ -1,19 +1,26 @@
 {
   "extends": "airbnb",
   "parser": "babel-eslint",
+  "plugins": [
+    "react",
+    "react-hooks"
+  ],
   "env": {
     "node": true,
-    "browser": true,
+    "browser": true
   },
   "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+
     "no-console": 0,
     "react/destructuring-assignment": 0,
     "react/forbid-prop-types": [1, { "forbid": ["any"] }],
     "jsx-a11y/click-events-have-key-events": 0,
     "react/jsx-one-expression-per-line": 0,
-    "object-curly-newline": 0
-  },
-  "plugins": [
-    "react"
-  ]
+    "object-curly-newline": 0,
+    "arrow-parens": 0,
+    "jsx-a11y/control-has-associated-label": 0,
+    "react/prop-types": 0
+  }
 }

package.json

@@ -42,11 +42,12 @@
     "electron": "^7.0.1",
     "electron-builder": "^22.3.2",
     "electron-builder-notarize": "^1.1.2",
-    "eslint": "^5.6.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.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",
     "svg2png": "^4.1.1"
   },
   "dependencies": {
@@ -68,10 +69,11 @@
     "mousetrap": "^1.6.1",
     "p-queue": "^6.2.0",
     "prop-types": "^15.6.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-hammerjs": "^1.0.1",
     "react-sortable-hoc": "^1.5.3",
+    "react-use": "^13.24.0",
     "read-chunk": "^2.0.0",
     "string-to-stream": "^1.1.1",
     "strong-data-uri": "^1.0.5",

src/TimelineSeg.jsx

@@ -1,5 +1,4 @@
-const React = require('react');
-const PropTypes = require('prop-types');
+import React, { Fragment } from 'react';
 
 const { formatDuration } = require('./util');
 
@@ -44,7 +43,8 @@ const TimelineSeg = ({
   const onThisSegClick = () => onSegClick(segNum);
 
   return (
-    <React.Fragment>
+    // eslint-disable-next-line react/jsx-fragments
+    <Fragment>
       {cutStartTime !== undefined && (
         <div style={startMarkerStyle} className="cut-time-marker" role="button" tabIndex="0" onClick={onThisSegClick} />
       )}
@@ -61,27 +61,8 @@ const TimelineSeg = ({
       {cutEndTime !== undefined && (
         <div style={endMarkerStyle} className="cut-time-marker" role="button" tabIndex="0" onClick={onThisSegClick} />
       )}
-    </React.Fragment>
+    </Fragment>
   );
 };
 
-TimelineSeg.propTypes = {
-  isCutRangeValid: PropTypes.bool.isRequired,
-  duration: PropTypes.number,
-  cutStartTime: PropTypes.number,
-  cutEndTime: PropTypes.number,
-  apparentCutStart: PropTypes.number.isRequired,
-  apparentCutEnd: PropTypes.number.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  segNum: PropTypes.number.isRequired,
-  onSegClick: PropTypes.func.isRequired,
-  color: PropTypes.object.isRequired,
-};
-
-TimelineSeg.defaultProps = {
-  duration: undefined,
-  cutStartTime: undefined,
-  cutEndTime: undefined,
-};
-
-module.exports = TimelineSeg;
+export default TimelineSeg;

src/ffmpeg.js

@@ -133,7 +133,7 @@ async function cutMultiple({
   const outFiles = [];
 
   let i = 0;
-  // eslint-disable-next-line no-restricted-syntax
+  // eslint-disable-next-line no-restricted-syntax,no-unused-vars
   for (const { cutFrom, cutTo, cutToApparent } of segments) {
     const ext = path.extname(filePath) || `.${format}`;
     const cutSpecification = `${formatDuration(cutFrom, true)}-${formatDuration(cutToApparent, true)}`;

src/merge/SortableFiles.jsx

@@ -16,7 +16,8 @@ const SortableItem = sortableElement(({ value, sortIndex }) => (
     {sortIndex + 1}
     {'. '}
     {basename(value)}
-  </div>));
+  </div>
+));
 
 const SortableContainer = sortableContainer(({ items }) => (
   <div>

src/util.js

@@ -68,7 +68,7 @@ const toast = swal.mixin({
   timer: 5000,
 });
 
-const errorToast = title => toast.fire({
+const errorToast = (title) => toast.fire({
   type: 'error',
   title,
 });