Update to CRA 4

frontend/.eslintrc.json

@@ -27,7 +27,8 @@
         "@typescript-eslint/no-namespace": 0,
         "@typescript-eslint/no-use-before-define": 0,
         "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
-        "@typescript-eslint/explicit-member-accessibility": "warn"
+        "@typescript-eslint/explicit-member-accessibility": "warn",
+        "@typescript-eslint/explicit-module-boundary-types": "off"
     },
     "settings": {
         "react": {

frontend/package.json

@@ -13,27 +13,27 @@
         "material-ui-dropzone": "^3.5.0",
         "myzod": "^1.1.0",
         "prop-types": "^15.7.2",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
         "react-fast-compare": "^3.2.0",
-        "react-hook-form": "^6.9.5",
-        "react-scripts": "^3.4.4",
+        "react-hook-form": "^6.9.6",
+        "react-scripts": "4.0.0",
         "react-use-websocket": "^2.2.0"
     },
     "devDependencies": {
         "@testing-library/dom": "^7.26.3",
-        "@testing-library/jest-dom": "^5.11.4",
-        "@testing-library/react": "^10.4.9",
-        "@testing-library/user-event": "^12.1.9",
-        "@types/jest": "~24.9.1",
+        "@testing-library/jest-dom": "^5.11.5",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/jest": "~26.0.15",
         "@types/lodash": "^4.14.162",
-        "@types/node": "^14.14.0",
+        "@types/node": "^14.14.2",
         "@types/react": "^16.9.53",
         "@types/react-dom": "^16.9.8",
-        "@typescript-eslint/eslint-plugin": "^2.34.0",
-        "@typescript-eslint/parser": "^2.34.0",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.13.0",
+        "@typescript-eslint/eslint-plugin": "^4.5.0",
+        "@typescript-eslint/parser": "^4.5.0",
+        "eslint": "^7.12.0",
+        "eslint-config-prettier": "^6.14.0",
         "eslint-plugin-react": "^7.21.5",
         "eslint-plugin-react-hooks": "^4.2.0",
         "eslint-plugin-simple-import-sort": "^5.0.3",

frontend/src/app.tsx

@@ -6,7 +6,7 @@ import { Game, GameProps } from './pages/game';
 import { Login } from './pages/login';
 import { StaticView } from './pages/staticView';
 
-export const App = (_props: {}) => {
+export const App = () => {
     const [gameProps, setGameProps] = React.useState<GameProps | undefined>();
     const leave = React.useCallback(() => setGameProps(undefined), []);
     const onLogin = React.useCallback((roomID, nickname) => setGameProps({ roomID, nickname, leave }), [leave]);

frontend/src/hooks/index.tsx

@@ -7,11 +7,11 @@ export interface ServerTime {
 
 const Context = React.createContext<ServerTime>(Object.seal({ setOffset: () => {}, now: Date.now }));
 
-export const ServerTimeProvider = (props: React.PropsWithChildren<{}>) => {
+export function ServerTimeProvider<P>(props: React.PropsWithChildren<P>) {
     const [offset, setOffset] = React.useState(0);
     const value = React.useMemo(() => Object.seal({ setOffset, now: () => Date.now() + offset }), [offset]);
     return <Context.Provider value={value}>{props.children}</Context.Provider>;
-};
+}
 
 export function useServerTime() {
     return React.useContext(Context);

frontend/src/index.tsx

@@ -47,7 +47,7 @@ function useTheme() {
     return { theme, toggleTheme, isDark: themeName === 'dark' };
 }
 
-const Root = (_props: {}) => {
+const Root = () => {
     const { theme, toggleTheme, isDark } = useTheme();
 
     return (

frontend/src/pages/loading.tsx

@@ -1,7 +1,7 @@
 import { Container, Grid } from '@material-ui/core';
 import * as React from 'react';
 
-export const Loading = (_props: {}) => {
+export const Loading = () => {
     return (
         <Container>
             <Grid

frontend/src/pages/staticView.tsx

@@ -328,5 +328,5 @@ const props = {
 };
 
 // Static game page for testing.
-export const StaticView = (_props: {}) =>
+export const StaticView = () =>
     process.env.NODE_ENV === 'development' ? GameView({ ...props, send, roomID: 'fakeRoomID', leave: noop }) : null;

frontend/tsconfig.json

@@ -13,7 +13,8 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "jsx": "react"
+        "jsx": "react",
+        "noFallthroughCasesInSwitch": true
     },
     "include": ["src"]
 }