fully upgrade to TypeScript 4.x

{{cookiecutter.project_slug}}/frontend/.eslintrc.js

@@ -21,7 +21,7 @@ let rules = {
 };
 
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
+  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier'],
   parser: 'babel-eslint',
   rules,
   env: {

{{cookiecutter.project_slug}}/frontend/package.json

@@ -3,17 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.0.0",
+    "@material-ui/icons": "^4.0.0",
+    "@material-ui/lab": "^4.0.0-alpha.54",
+    "jwt-decode": "^3.0.0",
     "ra-data-json-server": "^3.5.2",
     "ra-data-simple-rest": "^3.3.2",
     "react": "^16.13.1",
     "react-admin": "^3.5.2",
     "react-dom": "^16.13.1",
+    "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.3",
+    "react-scripts": "4.0.3",
     "react-truncate": "^2.4.0",
-    "standard": "^14.3.3",
-    "jwt-decode": "^3.0.0",
-    "@material-ui/lab": "^4.0.0-alpha.54"
+    "standard": "^16.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,26 +40,27 @@
     ]
   },
   "devDependencies": {
-    "typescript": "^4.0.2",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^11.0.4",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
     "@testing-library/user-event": "^12.0.11",
     "@types/jest": "^26.0.3",
+    "@types/jwt-decode": "^2.2.1",
     "@types/node": "^14.0.1",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/react-router-dom": "^5.1.3",
-    "@types/jwt-decode": "^2.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
+    "@typescript-eslint/parser": "^4.0.0",
     "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^4.6.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.0.5",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^16.13.1",
+    "typescript": "^4.0.2"
   }
 }

{{cookiecutter.project_slug}}/frontend/src/views/Home.tsx

@@ -17,10 +17,10 @@ export const Home: FC = () => {
 
   const queryBackend = async () => {
     try {
-      const message = await getMessage();
-      setMessage(message);
+      const msg = await getMessage();
+      setMessage(msg);
     } catch (err) {
-      setError(err);
+      setError(String(err));
     }
   };
 
@@ -64,3 +64,5 @@ export const Home: FC = () => {
     </>
   );
 };
+
+export default Home;

{{cookiecutter.project_slug}}/frontend/src/views/Login.tsx

@@ -51,7 +51,7 @@ export const Login: FC = () => {
         setError(err.message);
       } else {
         // handle errors thrown from backend
-        setError(err);
+        setError(String(err));
       }
     }
   };
@@ -65,7 +65,7 @@ export const Login: FC = () => {
           <Grid item>
             <Face />
           </Grid>
-          <Grid item md={true} sm={true} xs={true}>
+          <Grid item md sm xs>
             <TextField
               id="email"
               label="Email"
@@ -84,7 +84,7 @@ export const Login: FC = () => {
           <Grid item>
             <Fingerprint />
           </Grid>
-          <Grid item md={true} sm={true} xs={true}>
+          <Grid item md sm xs>
             <TextField
               id="password"
               label="Password"
@@ -149,3 +149,5 @@ export const Login: FC = () => {
     </Paper>
   );
 };
+
+export default Login;

{{cookiecutter.project_slug}}/frontend/src/views/SignUp.tsx

@@ -48,7 +48,7 @@ export const SignUp: FC = () => {
           setError(err.message);
         } else {
           // handle errors thrown from backend
-          setError(err);
+          setError(String(err));
         }
       }
     }
@@ -63,7 +63,7 @@ export const SignUp: FC = () => {
           <Grid item>
             <Face />
           </Grid>
-          <Grid item md={true} sm={true} xs={true}>
+          <Grid item md sm xs>
             <TextField
               id="email"
               label="Email"
@@ -82,7 +82,7 @@ export const SignUp: FC = () => {
           <Grid item>
             <Fingerprint />
           </Grid>
-          <Grid item md={true} sm={true} xs={true}>
+          <Grid item md sm xs>
             <TextField
               id="password"
               label="Password"
@@ -100,7 +100,7 @@ export const SignUp: FC = () => {
           <Grid item>
             <Fingerprint />
           </Grid>
-          <Grid item md={true} sm={true} xs={true}>
+          <Grid item md sm xs>
             <TextField
               id="passwordConfirmation"
               label="Confirm password"
@@ -136,3 +136,5 @@ export const SignUp: FC = () => {
     </Paper>
   );
 };
+
+export default SignUp;

{{cookiecutter.project_slug}}/frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -13,7 +17,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "decs.d.ts"]
+  "include": [
+    "src",
+    "decs.d.ts"
+  ]
 }