Upgrade babel and eslint packages

.babelrc

@@ -1,8 +1,11 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
   "plugins": [
-    "syntax-dynamic-import",
-    "transform-class-properties",
-    "transform-object-rest-spread"
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
   ]
 }

.eslintrc.json

@@ -11,9 +11,10 @@
         "asyncArrow": "always",
         "named": "never"
     }],
-    "jsx-quotes": ["error", "prefer-double"]
+    "jsx-quotes": ["error", "prefer-double"],
+    "react/jsx-fragments": "off"
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "allowImportExportEverywhere": true
   }

package.json

@@ -45,26 +45,27 @@
     "redux-thunk": "^2.2.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
+    "@babel/core": "^7.0.0",
+    "@babel/eslint-parser": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.0",
     "clean-webpack-plugin": "^0.1.17",
     "css-loader": "^0.28.7",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.19.1",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-jsx": "^5.0.0",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.7.0",
-    "eslint-plugin-react": "^7.8.2",
-    "eslint-plugin-standard": "^3.1.0",
+    "eslint": "^7.17.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-config-standard-jsx": "^10.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.22.0",
     "fetch-mock": "^6.0.0-beta.2",
     "file-loader": "^1.1.5",
     "glob": "^7.1.2",

src/actions/index.js

@@ -57,7 +57,7 @@ export const postSnippet = (snippet, onSuccess, onError = () => {}) => dispatch
   fetch(getApiUri('snippets'), {
     method: 'POST',
     headers: {
-      'Accept': 'application/json',
+      Accept: 'application/json',
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(snippet),

src/components/ListBox.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Scrollbars } from 'react-custom-scrollbars'
 
 const ListBox = (props) => {
-  const [ selected, setSelected ] = useState(null)
+  const [selected, setSelected] = useState(null)
   const { items, className } = props
 
   useEffect(() => {

src/components/Snippet.jsx

@@ -20,7 +20,7 @@ import { existingSnippetOptions } from '../entries/aceEditorOptions'
 import '../styles/Snippet.styl'
 
 const Snippet = ({ snippet, fetchSnippet, match }) => {
-  const [ isShowEmbed, setIsShowEmbed ] = useState(false)
+  const [isShowEmbed, setIsShowEmbed] = useState(false)
   const embeddedRef = useRef()
 
   useEffect(() => {

src/components/common/Title.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import '../../styles/common/Title.styl'
 
 const Title = ({ title, additionalClass }) => (
-  <div className={`title ${additionalClass}`}>{ title }</div>
+  <div className={`title ${additionalClass}`}>{title}</div>
 )
 
 export default Title

src/entries/snippetValidation.js

@@ -27,7 +27,7 @@ const reasons = details => {
 
     errors.push(messages.has(reason)
       ? messages.get(reason)
-      : messages.get('default')
+      : messages.get('default'),
     )
   })
 

src/hoc/withSearch.jsx

@@ -3,7 +3,7 @@ import React, { Fragment, useState, useCallback } from 'react'
 import { regExpEscape } from '../misc/reqExp'
 
 const withSearch = BaseComponent => (props) => {
-  const [ searchQuery, setSearchQuery ] = useState(null)
+  const [searchQuery, setSearchQuery] = useState(null)
   const { items, onClick, className } = props
 
   const onSearch = useCallback(e => {

tests/components/Sidebar.test.jsx

@@ -14,9 +14,9 @@ describe('Sidebar', () => {
 
   it('should have correct routes on sidebar items', () => {
     const routes = {
-      '0': '/',
-      '1': '/recent',
-      '2': '/about',
+      0: '/',
+      1: '/recent',
+      2: '/about',
     }
     const wrapper = shallow(<Sidebar />)
 
@@ -27,9 +27,9 @@ describe('Sidebar', () => {
 
   it('should have correct icons on sidebar items', () => {
     const icons = {
-      '0': 'icon-new',
-      '1': 'icon-recent',
-      '2': 'icon-about',
+      0: 'icon-new',
+      1: 'icon-recent',
+      2: 'icon-about',
     }
     const wrapper = shallow(<Sidebar />)
 
@@ -40,9 +40,9 @@ describe('Sidebar', () => {
 
   it('should have correct titles on sidebar items', () => {
     const titles = {
-      '0': 'New Snippet',
-      '1': 'Recent Snippets',
-      '2': 'About',
+      0: 'New Snippet',
+      1: 'Recent Snippets',
+      2: 'About',
     }
     const wrapper = shallow(<Sidebar />)
 

webpack.config.js

@@ -11,103 +11,103 @@ module.exports = () => {
   const syntaxes = process.env.SYNTAXES
     ? process.env.SYNTAXES.split(',').map(item => item.trim())
     : [
-      'text',
-      'c_cpp',
-      'csharp',
-      'golang',
-      'java',
-      'javascript',
-      'php',
-      'perl',
-      'python',
-      'ruby',
-      'rust',
-      'css',
-      'html',
-      'objectivec',
-      'swift',
-      'clojure',
-      'lisp',
-      'haskell',
-      'scala',
-      'scheme',
-      'actionscript',
-      'ada',
-      'apache_conf',
-      'asciidoc',
-      'assembly_x86',
-      'batchfile',
-      'cobol',
-      'coffee',
-      'd',
-      'dart',
-      'diff',
-      'dockerfile',
-      'dot',
-      'ejs',
-      'elixir',
-      'elm',
-      'erlang',
-      'fortran',
-      'gitignore',
-      'glsl',
-      'gobstones',
-      'graphqlschema',
-      'groovy',
-      'haml',
-      'handlebars',
-      'haxe',
-      'hjson',
-      'ini',
-      'jade',
-      'json',
-      'jsp',
-      'jsx',
-      'julia',
-      'kotlin',
-      'latex',
-      'less',
-      'livescript',
-      'lua',
-      'makefile',
-      'markdown',
-      'matlab',
-      'mel',
-      'mysql',
-      'nix',
-      'nsis',
-      'ocaml',
-      'pascal',
-      'pgsql',
-      'powershell',
-      'prolog',
-      'protobuf',
-      'r',
-      'rdoc',
-      'rst',
-      'sass',
-      'scad',
-      'scss',
-      'sh',
-      'sjs',
-      'smarty',
-      'sql',
-      'stylus',
-      'svg',
-      'tcl',
-      'tex',
-      'textile',
-      'toml',
-      'tsx',
-      'twig',
-      'typescript',
-      'vala',
-      'vbscript',
-      'verilog',
-      'vhdl',
-      'xml',
-      'yaml',
-      'django']
+        'text',
+        'c_cpp',
+        'csharp',
+        'golang',
+        'java',
+        'javascript',
+        'php',
+        'perl',
+        'python',
+        'ruby',
+        'rust',
+        'css',
+        'html',
+        'objectivec',
+        'swift',
+        'clojure',
+        'lisp',
+        'haskell',
+        'scala',
+        'scheme',
+        'actionscript',
+        'ada',
+        'apache_conf',
+        'asciidoc',
+        'assembly_x86',
+        'batchfile',
+        'cobol',
+        'coffee',
+        'd',
+        'dart',
+        'diff',
+        'dockerfile',
+        'dot',
+        'ejs',
+        'elixir',
+        'elm',
+        'erlang',
+        'fortran',
+        'gitignore',
+        'glsl',
+        'gobstones',
+        'graphqlschema',
+        'groovy',
+        'haml',
+        'handlebars',
+        'haxe',
+        'hjson',
+        'ini',
+        'jade',
+        'json',
+        'jsp',
+        'jsx',
+        'julia',
+        'kotlin',
+        'latex',
+        'less',
+        'livescript',
+        'lua',
+        'makefile',
+        'markdown',
+        'matlab',
+        'mel',
+        'mysql',
+        'nix',
+        'nsis',
+        'ocaml',
+        'pascal',
+        'pgsql',
+        'powershell',
+        'prolog',
+        'protobuf',
+        'r',
+        'rdoc',
+        'rst',
+        'sass',
+        'scad',
+        'scss',
+        'sh',
+        'sjs',
+        'smarty',
+        'sql',
+        'stylus',
+        'svg',
+        'tcl',
+        'tex',
+        'textile',
+        'toml',
+        'tsx',
+        'twig',
+        'typescript',
+        'vala',
+        'vbscript',
+        'verilog',
+        'vhdl',
+        'xml',
+        'yaml',
+        'django']
   const assetsPath = process.env.ASSETS_PATH == null
     ? '/'
     : process.env.ASSETS_PATH
@@ -221,7 +221,7 @@ module.exports = () => {
       // https://webpack.js.org/api/module-methods/#import-<Paste>
       new webpack.IgnorePlugin(
         new RegExp(`/(?!(?:${syntaxes.join('|')}).js$).*js$`),
-        /brace[\\/]mode/
+        /brace[\\/]mode/,
       ),
 
       // Each time we change something, a new version of bundled assets is