build: upgrade react-scripts to v4

.eslintignore

@@ -1,3 +1,4 @@
+.eslintrc.js
 src/react-app-env.d.ts
 coverage
 types

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
     camelcase: 'error',
     'consistent-return': 'off',
     'import/extensions': ['error', 'never', { json: 'always' }],
+    'import/no-unresolved': 'off',
     'import/no-extraneous-dependencies': [
       'error',
       {
@@ -66,6 +67,12 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': ['error', {
       'vars': 'all'
     }],
+    // note you must disable the base rule as it can report incorrect errors
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    // note you must disable the base rule as it can report incorrect errors
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
     'no-restricted-syntax': 'off',
     'react/destructuring-assignment': 'off',
     'react/jsx-boolean-value': [2, 'never'],
@@ -75,6 +82,8 @@ module.exports = {
     ],
     'react/jsx-fragments': ['error', 'element'],
     'react/jsx-props-no-spreading': 'off',
+    'react/require-default-props': 'off',
+    'react/prop-types': 'off',
     strict: 0,
     '@typescript-eslint/explicit-function-return-type': 'off', // Want to use it, but it requires return types for all built-in React lifecycle methods.
     '@typescript-eslint/no-non-null-assertion': 'off',

package.json

@@ -60,16 +60,16 @@
     "js-sha256": "^0.9.0",
     "normalize.css": "^8.0.1",
     "pluralize": "^7.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-dropzone": "^11.0.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-dropzone": "^11.2.1",
     "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.0",
     "rxjs": "^6.6.0",
     "styled-components": "^4.2.0",
     "ts-jest": "^26.1.3",
-    "typescript": "3.9.2",
+    "typescript": "4.0.3",
     "use-interval": "^1.2.1",
     "yauzl": "^2.10.0"
   },
@@ -80,18 +80,18 @@
     "@types/pify": "^3.0.2",
     "@types/react-router-dom": "^5.1.5",
     "@types/yauzl": "^2.9.1",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "@votingworks/ballot-encoder": "^4.0.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.13.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.14.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fetch-mock": "^9.9.0",
     "history": "^4.10.1",
     "husky": "^4.2.5",
@@ -104,6 +104,7 @@
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
+    "type-fest": "^0.18.0",
     "zip-stream": "^3.0.1"
   },
   "jest": {

src/App.test.tsx

@@ -24,11 +24,13 @@ beforeEach(() => {
   })
 
   const oldWindowLocation = window.location
-  delete window.location
-  window.location = {
-    ...oldWindowLocation,
-    href: '/',
-  }
+  Object.defineProperty(window, 'location', {
+    value: {
+      ...oldWindowLocation,
+      href: '/',
+    },
+    configurable: true,
+  })
 })
 
 test('renders without crashing', async () => {
@@ -88,7 +90,6 @@ test('clicking Scan Batch will scan a batch', async () => {
   })
 
   const mockAlert = jest.fn()
-  delete window.alert
   window.alert = mockAlert
 
   await act(async () => {

src/App.tsx

@@ -5,7 +5,7 @@ import './App.css'
 
 import AppRoot from './AppRoot'
 
-const App = () => (
+const App: React.FC = () => (
   <BrowserRouter>
     <Route path="/">
       <AppRoot />

src/AppRoot.tsx

@@ -7,7 +7,6 @@ import Prose from './components/Prose'
 import Modal from './components/Modal'
 
 import {
-  ButtonEvent,
   CardData,
   ScanStatusResponse,
   CardReadLongResponse,
@@ -181,6 +180,7 @@ const App: React.FC = () => {
         })
       ).json()
       if (result.status !== 'ok') {
+        // eslint-disable-next-line no-alert
         window.alert(`could not scan: ${result.status}`)
         setIsScanning(false)
       }
@@ -207,18 +207,6 @@ const App: React.FC = () => {
     }
   }, [])
 
-  const invalidateBatch = useCallback(async (event: ButtonEvent) => {
-    try {
-      const { id } = (event.target as HTMLElement).dataset
-      await fetch('/scan/invalidateBatch', {
-        method: 'post',
-        body: id,
-      })
-    } catch (error) {
-      console.log('failed invalidateBranch()', error) // eslint-disable-line no-console
-    }
-  }, [])
-
   const zeroData = useCallback(async () => {
     try {
       await fetch('/scan/zero', {
@@ -265,6 +253,7 @@ const App: React.FC = () => {
       setIsExportingCVRs(false)
 
       if (response.status !== 200) {
+        // eslint-disable-next-line no-console
         console.log('error downloading CVRs')
         return
       }
@@ -397,7 +386,6 @@ const App: React.FC = () => {
                 <MainChild maxWidth={false}>
                   <DashboardScreen
                     adjudicationStatus={adjudication}
-                    invalidateBatch={invalidateBatch}
                     isScanning={isScanning}
                     status={{
                       ...status,

src/components/Button.tsx

@@ -63,11 +63,11 @@ export interface Props extends StyledButtonProps {
   onPress: MouseEventHandler
 }
 
-const Button = ({
+const Button: React.FC<Props> = ({
   component: Component = StyledButton,
   onPress,
   ...rest
-}: Props) => {
+}) => {
   const [startCoordinates, setStartCoordinates] = useState([0, 0])
 
   const onTouchStart = (event: React.TouchEvent) => {

src/components/ElectionConfiguration.tsx

@@ -13,7 +13,7 @@ export interface Props {
   acceptFiles(files: readonly File[]): void
 }
 
-const ElectionConfiguration = ({ acceptFiles }: Props) => {
+const ElectionConfiguration: React.FC<Props> = ({ acceptFiles }) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop(files: readonly File[]) {
       acceptFiles(files)

src/components/LinkButton.tsx

@@ -5,6 +5,7 @@ import Button, { ButtonInterface } from './Button'
 
 interface Props
   extends ButtonInterface,
+    // eslint-disable-next-line @typescript-eslint/ban-types
     RouteComponentProps<{}>,
     React.PropsWithoutRef<JSX.IntrinsicElements['button']> {}
 

src/components/MainNav.tsx

@@ -45,7 +45,7 @@ interface Props {
   isTestMode?: boolean
 }
 
-const MainNav = ({ children, isTestMode = false }: Props) => (
+const MainNav: React.FC<Props> = ({ children, isTestMode = false }) => (
   <Nav>
     <StyledNav>
       <Brand>

src/components/StatusFooter.tsx

@@ -18,7 +18,7 @@ export interface Props {
   electionHash?: string
 }
 
-const StatusFooter = ({ election, electionHash }: Props) => {
+const StatusFooter: React.FC<Props> = ({ election, electionHash }) => {
   const electionDate =
     election && localeWeedkayAndDate.format(new Date(election?.date))
 

src/components/Text.tsx

@@ -69,7 +69,7 @@ const Text = styled('p')<Props>`
   ${({ warningIcon, voteIcon }) => (warningIcon || voteIcon) && iconStyles}
 `
 
-export const TextWithLineBreaks = ({ text }: { text: string }) => (
+export const TextWithLineBreaks: React.FC<{ text: string }> = ({ text }) => (
   <React.Fragment>
     {text.split(/[\n|\r]{2}/g).map((x) => (
       <p key={x}>

src/components/USBControllerButton.tsx

@@ -8,7 +8,7 @@ import { UsbDriveStatus } from '../lib/usbstick'
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const doNothing = () => {}
 
-const USBControllerButton = () => {
+const USBControllerButton: React.FC = () => {
   const { usbDriveStatus: status, usbDriveEject } = useContext(AppContext)
 
   if (status === UsbDriveStatus.notavailable) {

src/config/types.ts

@@ -17,12 +17,6 @@ export interface Dictionary<T> {
   [key: string]: T | undefined
 }
 
-export type DeepReadonly<T> = T extends (infer E)[]
-  ? readonly DeepReadonly<E>[]
-  : T extends object
-  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
-  : T
-
 // Events
 export type InputEvent = React.FormEvent<EventTarget>
 export type ButtonEvent = React.MouseEvent<HTMLButtonElement>
@@ -117,7 +111,7 @@ export interface ScanStatusResponse {
   adjudication: AdjudicationStatus
 }
 
-export type GetConfigRequest = {}
+export type GetConfigRequest = void
 export interface GetConfigResponse {
   election?: Election
   testMode: boolean
@@ -129,12 +123,12 @@ export interface PatchConfigRequest {
 }
 export type PatchConfigResponse = OkResponse
 
-export type CardReadRequest = {}
+export type CardReadRequest = void
 export type CardReadResponse =
   | { present: false }
   | { present: true; longValueExists: boolean; shortValue?: string }
 
-export type CardReadLongRequest = {}
+export type CardReadLongRequest = void
 export interface CardReadLongResponse {
   longValue: string
 }

src/hooks/useInterval.ts

@@ -1,7 +1,7 @@
 // TODO: Replace with library: https://github.com/votingworks/bas/issues/16
 import { useEffect } from 'react'
 
-function useInterval(callback: () => void, delay: number) {
+function useInterval(callback: () => void, delay: number): void {
   useEffect(() => {
     const id = setInterval(callback, delay)
     return () => clearInterval(id)

src/lib/usbstick.ts

@@ -31,7 +31,7 @@ export const getStatus = async (): Promise<UsbDriveStatus> => {
   return UsbDriveStatus.present
 }
 
-export const doMount = async () => {
+export const doMount = async (): Promise<void> => {
   if (!isAvailable()) {
     return
   }
@@ -44,7 +44,7 @@ export const doMount = async () => {
   window.kiosk!.mountUsbDrive(device.deviceName)
 }
 
-export const doUnmount = async () => {
+export const doUnmount = async (): Promise<void> => {
   if (!isAvailable()) {
     return
   }

src/screens/AdvancedOptionsScreen.tsx

@@ -18,15 +18,15 @@ interface Props {
   toggleTestMode: () => Promise<void>
 }
 
-const AdvancedOptionsScreen = ({
+const AdvancedOptionsScreen: React.FC<Props> = ({
   unconfigureServer,
   zeroData,
   backup,
   hasBatches,
   isTestMode,
   togglingTestMode,
   toggleTestMode,
-}: Props) => {
+}) => {
   const [isConfirmingFactoryReset, setIsConfirmingFactoryReset] = useState(
     false
   )

src/screens/BallotEjectScreen.tsx

@@ -57,7 +57,10 @@ const doNothing = () => {
   console.log('disabled') // eslint-disable-line no-console
 }
 
-const BallotEjectScreen = ({ continueScanning, isTestMode }: Props) => {
+const BallotEjectScreen: React.FC<Props> = ({
+  continueScanning,
+  isTestMode,
+}) => {
   const [sheetInfo, setSheetInfo] = useState<BallotSheetInfo | undefined>()
 
   const [ballotState, setBallotState] = useState<EjectState>(undefined)

src/screens/BallotReviewScreen.tsx

@@ -1,3 +1,4 @@
+import { ReadonlyDeep } from 'type-fest'
 import React, { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useParams, useHistory } from 'react-router-dom'
@@ -8,7 +9,6 @@ import ContestOptionButton from '../components/ContestOptionButton'
 import {
   Contest,
   ContestOption,
-  DeepReadonly,
   MarkStatus,
   ReviewMarginalMarksBallot,
   AdjudicationStatus,
@@ -71,10 +71,10 @@ export interface Props {
   adjudicationStatus: AdjudicationStatus
 }
 
-export default function BallotReviewScreen({
+const BallotReviewScreen: React.FC<Props> = ({
   isTestMode,
   adjudicationStatus,
-}: Props) {
+}) => {
   const history = useHistory()
   const { ballotId } = useParams<{
     ballotId?: string
@@ -139,8 +139,8 @@ export default function BallotReviewScreen({
 
   const getContestOptionDecoration = useCallback(
     (
-      contest: DeepReadonly<Contest>,
-      option: DeepReadonly<ContestOption>
+      contest: ReadonlyDeep<Contest>,
+      option: ReadonlyDeep<ContestOption>
     ): { current: MarkStatus; changed?: MarkStatus } => {
       if (state.type === 'review' || state.type === 'done') {
         const current =
@@ -337,3 +337,5 @@ export default function BallotReviewScreen({
     </Screen>
   )
 }
+
+export default BallotReviewScreen