Upgrade to React 17

.eslintrc.json

@@ -12,15 +12,29 @@
   ],
   "parser": "babel-eslint",
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
   "rules": {
-    "no-console": "warn"
+    "no-console": "warn",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   },
   "settings": {
     "react": {
       "version": "detect"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier/@typescript-eslint"
+      ]
+    }
+  ]
 }

.gitignore

@@ -7,7 +7,8 @@
 /src/functions/node_modules
 # testing
 /coverage
-
+#eslint
+.eslintcache
 # production
 /build
 /func

package.json

@@ -8,27 +8,27 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@netlify/zip-it-and-ship-it": "^1.3.1",
     "@reduxjs/toolkit": "^1.3.6",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.1.2",
+    "@testing-library/user-event": "^12.2.2",
     "http-proxy-middleware": "^1.0.4",
-    "netlify-lambda": "^1.6.3",
-    "node-sass": "^4.14.1",
+    "netlify-lambda": "^2.0.1",
+    "node-sass": "^4.0.0",
     "query-string": "^6.13.6",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-pdfobject": "^1.1.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^4.0.1",
     "react-social-login-buttons": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
+    "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|md)\"",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
@@ -50,22 +50,23 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/parser": "^4.8.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^4.0.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^2.0.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "gh-pages": "^2.2.0",
     "husky": "^4.2.5",
     "prettier": "^2.0.5",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "typescript": "^4.1.0"
   },
   "husky": {
     "hooks": {

src/App.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import './index.css'
 import store from './redux/store'

src/App.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 

src/AuthWrapper.js

@@ -2,9 +2,9 @@ import { loginSuccess } from './redux/actions'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import App from './App'
-import React from 'react'
+import { Component } from 'react'
 // Parent
-class AuthWrapper extends React.Component {
+class AuthWrapper extends Component {
   constructor(props) {
     super(props)
     this.state = {

src/components/ApprovalButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { Fragment, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import PropTypes from 'prop-types'
 import { ENDPOINT } from '../utils/config'
@@ -59,7 +59,7 @@ function ApprovalButton(props) {
       Approve
     </Button>
   )
-  return <React.Fragment>{button}</React.Fragment>
+  return <Fragment>{button}</Fragment>
 }
 
 ApprovalButton.propTypes = {

src/components/ApprovalRow.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { Fragment, useState } from 'react'
 import PropTypes from 'prop-types'
 import Collapse from '@material-ui/core/Collapse'
 import TableCell from '@material-ui/core/TableCell'
@@ -30,11 +30,11 @@ function ApprovalRow(props) {
       </TableCell>
     </TableRow>
   ) : (
-    <React.Fragment />
+    <Fragment />
   )
 
   return (
-    <React.Fragment>
+    <Fragment>
       <TableRow>
         <TableCell component="th" scope="row">
           {props.data.linkedin ? (
@@ -87,7 +87,7 @@ function ApprovalRow(props) {
         </TableCell>
       </TableRow>
       {details}
-    </React.Fragment>
+    </Fragment>
   )
 }
 

src/components/ApprovalTable.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Component, Fragment } from 'react'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
@@ -14,7 +14,7 @@ import ApprovalRow from './ApprovalRow'
 import LoadingIndicator from './LoadingIndicator.js'
 import SearchBar from './SearchBar'
 
-class SimpleTable extends React.Component {
+class SimpleTable extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -72,11 +72,11 @@ class SimpleTable extends React.Component {
   tableBody = () => {
     const tableData = this.props.data
     const content = (
-      <React.Fragment>
+      <Fragment>
         {tableData.map((row) => (
           <ApprovalRow key={row._id} data={row} />
         ))}
-      </React.Fragment>
+      </Fragment>
     )
 
     return content

src/components/Carousel.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import './styles/Carousel.sass'
 
 interface CarouselProps {
@@ -11,7 +11,7 @@ interface CarouselProps {
   children: React.ReactNode
 }
 
-export default class extends React.Component<
+export default class Carousel extends React.Component<
   CarouselProps,
   {
     activeOn: number
@@ -20,13 +20,13 @@ export default class extends React.Component<
   state = {
     activeOn: 0,
   }
-  forward: boolean = false
+  forward = false
   length: number
   outerLength: number
   css: string
-  auto: boolean = false
+  auto = false
   interval: NodeJS.Timeout | null = null
-  initial: boolean = true
+  initial = true
   wrapper: React.RefObject<HTMLDivElement>
 
   constructor(props: CarouselProps) {

src/components/CartButton.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import { Component, Fragment } from 'react'
 import Button from '@material-ui/core/Button'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { addToCart, removeFromCart } from '../redux/actions'
 
-class CartButton extends React.Component {
+class CartButton extends Component {
   constructor(props) {
     super(props)
     this.state = { added: false }
@@ -30,7 +30,7 @@ class CartButton extends React.Component {
         Add Candidate
       </Button>
     )
-    return <React.Fragment>{button}</React.Fragment>
+    return <Fragment>{button}</Fragment>
   }
 }
 

src/components/CartNavBar.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import PersonIcon from '@material-ui/icons/Person'
 import Typography from '@material-ui/core/Typography'
 
-class Cart extends React.Component {
+class Cart extends Component {
   constructor() {
     super()
     this.state = { numInCart: 0 }

src/components/FileInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@material-ui/core'
 import './styles/FileInput.sass'
 

src/components/FilterPane.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import Hidden from '@material-ui/core/Hidden'
 import FormGroup from '@material-ui/core/FormGroup'

src/components/FilterPaneApproved.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import Hidden from '@material-ui/core/Hidden'
 import FormGroup from '@material-ui/core/FormGroup'

src/components/LabelInput.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
 import { Input } from '@material-ui/core'
 
 /**

src/components/LandingInfo.js

@@ -1,8 +1,8 @@
-import React from 'react'
+import { Component } from 'react'
 import { Grid, Button } from '@material-ui/core'
 import { Link as RouterLink } from 'react-router-dom'
 
-export default class LandingInfo extends React.Component {
+export default class LandingInfo extends Component {
   render() {
     return (
       <div id="info">

src/components/LandingPage.tsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import Carousel from './Carousel'
 import './styles/LandingPage.sass'
 import LandingInfo from './LandingInfo'
 import Alert from '@material-ui/lab/Alert'
 import Collapse from '@material-ui/core/Collapse'
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
 
 function App(props: any) {
   const classes = props.classes
@@ -28,35 +27,39 @@ function App(props: any) {
 
   return (
     <div className={classes.content + ' landing-content'}>
-      <div className={classes.toolbar} /> 
-      {login||logout?<Collapse in={open}
-        style={{
-          width: '300px',
-          margin: '0 auto',
-        }}
-      > 
-        <Alert severity="success" 
-
-        style={{
-          marginBottom: '16px',
-        }}
-
-          action={
-            <IconButton
-              aria-label="close"
-              color="inherit"
-              size="small"
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              <CloseIcon fontSize="inherit" />
-            </IconButton>
-          }
-        >{login? "Login Successful" : "Logout Successful"}
-
-        </Alert>
-        </Collapse> : <></>}
+      <div className={classes.toolbar} />
+      {login || logout ? (
+        <Collapse
+          in={open}
+          style={{
+            width: '300px',
+            margin: '0 auto',
+          }}
+        >
+          <Alert
+            severity="success"
+            style={{
+              marginBottom: '16px',
+            }}
+            action={
+              <IconButton
+                aria-label="close"
+                color="inherit"
+                size="small"
+                onClick={() => {
+                  setOpen(false)
+                }}
+              >
+                <CloseIcon fontSize="inherit" />
+              </IconButton>
+            }
+          >
+            {login ? 'Login Successful' : 'Logout Successful'}
+          </Alert>
+        </Collapse>
+      ) : (
+        <></>
+      )}
       <Carousel
         // auto
         width="100%"

src/components/LoadingIndicator.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
 const IndicatorRotation = keyframes`