refactor: Upgrade dependencies

itstrueitstrueitsrealitsreal · Dec 4, 2023 · 2e95318 · 2e95318
1 parent adfd1b8
commit 2e95318
Show file tree

Hide file tree

Showing 15 changed files with 10,648 additions and 12,038 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+build
+.eslintrc.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,56 @@
+module.exports = {
+    env: {
+        browser: true,
+        es6: true,
+        node: true,
+    },
+    settings: {
+        "import/resolver": {
+            node: {
+                extensions: [".js", ".jsx", ".ts", ".tsx"],
+                moduleDirectory: ["node_modules", "src/"],
+            },
+        },
+        react: {
+            version: "detect",
+        },
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
+        "plugin:import/recommended",
+    ],
+    globals: {
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+    },
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 11,
+        sourceType: "module",
+    },
+    plugins: ["react", "@typescript-eslint", "import"],
+    rules: {
+        "no-unused-var": "off",
+        "no-var": "error",
+        curly: ["error", "multi-line"],
+        "import/order": [
+            "error",
+            { groups: ["index", "sibling", "parent", "internal", "external", "builtin", "object", "type"] },
+        ],
+    },
+    overrides: [
+        {
+            files: ["**/*.tsx"],
+            rules: {
+                "react/prop-types": "off",
+            },
+        },
+    ],
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Webstorm config files
+.idea
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: "all",
+    printWidth: 120,
+    tabWidth: 4,
+    endOfLine: "lf",
+};
diff --git a/package.json b/package.json
@@ -3,23 +3,19 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.12.4",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@mui/material": "^5.14.19",
+        "@mui/styles": "^5.14.19",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
-        "@types/jest": "^26.0.15",
-        "@types/material-ui": "^0.21.12",
-        "@types/node": "^12.0.0",
-        "@types/react": "^17.0.0",
-        "@types/react-dom": "^17.0.0",
-        "@types/react-router-dom": "^5.3.2",
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-react": "^7.27.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-router-dom": "^6.0.2",
-        "react-scripts": "4.0.3",
-        "typescript": "^4.1.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.20.1",
+        "react-scripts": "5.0.1",
         "typewriter-effect": "^2.18.2",
         "web-vitals": "^2.1.2"
     },
@@ -52,12 +48,19 @@
         ]
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.4.0",
-        "@typescript-eslint/parser": "^5.4.0",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@types/jest": "^26.0.15",
+        "@types/material-ui": "^0.21.12",
+        "@types/node": "^12.0.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "@typescript-eslint/eslint-plugin": "^6.13.1",
+        "@typescript-eslint/parser": "^6.13.1",
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-config-react-app": "^6.0.0",
         "eslint-plugin-prettier": "^4.0.0",
-        "prettier": "^2.4.1"
+        "prettier": "^2.4.1",
+        "typescript": "^5.3.2"
     }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,11 @@
-import Home from './pages/Home';
-import BasicThreadView from './pages/BasicThreadView';
-import StyledThreadView from './pages/StyledThreadView';
-import React from 'react';
-import './App.css';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { createTheme, ThemeProvider } from '@material-ui/core';
-import { blue, orange } from '@material-ui/core/colors';
+import Home from "./pages/Home";
+import BasicThreadView from "./pages/BasicThreadView";
+import StyledThreadView from "./pages/StyledThreadView";
+import React from "react";
+import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { blue, orange } from "@mui/material/colors";
 
 const theme = createTheme({
     palette: {

diff --git a/src/components/BasicThreadList.tsx b/src/components/BasicThreadList.tsx
@@ -1,16 +1,16 @@
-import '../App.css';
+import "../App.css";
 
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 const BasicThreadList: React.FC = () => {
     return (
-        <div style={{ width: '25vw', margin: 'auto', textAlign: 'center' }}>
-            <h4>{'Welcome to my forum!'}</h4>
+        <div style={{ width: "25vw", margin: "auto", textAlign: "center" }}>
+            <h4>{"Welcome to my forum!"}</h4>
             <ul>
                 <li>
-                    <Link to="/thread/1">{'Inspirational Quotes'}</Link>
-                    {' by Aiken'}
+                    <Link to="/thread/1">{"Inspirational Quotes"}</Link>
+                    {" by Aiken"}
                 </li>
             </ul>
         </div>

diff --git a/src/components/CommentItem.tsx b/src/components/CommentItem.tsx
@@ -1,26 +1,26 @@
-import Comment from '../types/Comment';
+import Comment from "../types/Comment";
 
-import React from 'react';
-import { Card, CardContent, makeStyles, Typography } from '@material-ui/core';
+import React from "react";
+import { Card, CardContent, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 
 type Props = {
     comment: Comment;
     styled: boolean;
 };
-
-const useStyles = makeStyles({
+const useStyles = makeStyles(() => ({
     commentBody: {
         fontSize: 16,
-        whiteSpace: 'pre-wrap',
-        paddingBottom: '1em',
+        whiteSpace: "pre-wrap",
+        paddingBottom: "1em",
     },
     commentCard: {
-        marginBottom: '1em',
+        marginBottom: "1em",
     },
     metadata: {
         fontSize: 14,
     },
-});
+}));
 
 const CommentItem: React.FC<Props> = ({ comment, styled }) => {
     const classes = useStyles();
@@ -33,7 +33,7 @@ const CommentItem: React.FC<Props> = ({ comment, styled }) => {
                         {comment.body}
                     </Typography>
                     <Typography color="textSecondary" className={classes.metadata} gutterBottom>
-                        {'Posted by ' + comment.author + ' on ' + comment.timestamp.toLocaleString()}
+                        {"Posted by " + comment.author + " on " + comment.timestamp.toLocaleString()}
                     </Typography>
                 </CardContent>
             </Card>
@@ -45,7 +45,7 @@ const CommentItem: React.FC<Props> = ({ comment, styled }) => {
         <li className={classes.commentBody}>
             {comment.body}
             <br />
-            <em>{'posted by ' + comment.author + ' on ' + comment.timestamp.toLocaleString()}</em>
+            <em>{"posted by " + comment.author + " on " + comment.timestamp.toLocaleString()}</em>
         </li>
     );
 };

diff --git a/src/components/CommentList.tsx b/src/components/CommentList.tsx
@@ -1,7 +1,7 @@
-import CommentItem from './CommentItem';
-import Comment from '../types/Comment';
+import CommentItem from "./CommentItem";
+import Comment from "../types/Comment";
 
-import React from 'react';
+import React from "react";
 
 type Props = {
     styled: boolean;
@@ -11,20 +11,20 @@ const BasicCommentList: React.FC<Props> = ({ styled }: Props) => {
     const comments: Comment[] = [
         {
             body:
-                'Any fool can write code that a computer can understand.\n' +
-                'Good programmers write code that humans can understand.\n' +
-                ' ~ Martin Fowler',
-            author: 'Benedict',
+                "Any fool can write code that a computer can understand.\n" +
+                "Good programmers write code that humans can understand.\n" +
+                " ~ Martin Fowler",
+            author: "Benedict",
             timestamp: new Date(2022, 10, 28, 10, 33, 30),
         },
         {
-            body: 'Code reuse is the Holy Grail of Software Engineering.\n' + ' ~ Douglas Crockford',
-            author: 'Casey',
+            body: "Code reuse is the Holy Grail of Software Engineering.\n" + " ~ Douglas Crockford",
+            author: "Casey",
             timestamp: new Date(2022, 11, 1, 11, 11, 11),
         },
         {
-            body: "Nine people can't make a baby in a month.\n" + ' ~ Fred Brooks',
-            author: 'Duuet',
+            body: "Nine people can't make a baby in a month.\n" + " ~ Fred Brooks",
+            author: "Duuet",
             timestamp: new Date(2022, 11, 2, 10, 30, 0),
         },
     ];

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,12 @@
-import App from './App';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+root.render(
     <React.StrictMode>
         <App />
     </React.StrictMode>,
-    document.getElementById('root'),
 );
diff --git a/src/pages/BasicThreadView.tsx b/src/pages/BasicThreadView.tsx
@@ -1,9 +1,9 @@
-import BasicCommentList from '../components/CommentList';
-import { Button } from '@material-ui/core';
-import { Link } from 'react-router-dom';
-import Typewriter from 'typewriter-effect';
+import BasicCommentList from "../components/CommentList";
+import { Button } from "@mui/material";
+import { Link } from "react-router-dom";
+import Typewriter from "typewriter-effect";
 
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const BasicThreadView: React.FC = () => {
     const [isShowButton, setIsShowButton] = useState(false);
@@ -17,9 +17,9 @@ const BasicThreadView: React.FC = () => {
     };
 
     return (
-        <div style={{ width: '25vw', margin: 'auto', textAlign: 'center' }}>
-            <h3>{'Inspirational Quotes'}</h3>
-            <h4>{'Thread started by Aiken'}</h4>
+        <div style={{ width: "25vw", margin: "auto", textAlign: "center" }}>
+            <h3>{"Inspirational Quotes"}</h3>
+            <h4>{"Thread started by Aiken"}</h4>
             <BasicCommentList styled={false} />
             <Link to="/">{`<- Back to threads`}</Link>
             <br />
@@ -38,7 +38,7 @@ const BasicThreadView: React.FC = () => {
             />
             {isShowButton && (
                 <Button variant="contained" color="primary" component={Link} to="/thread/1/styled">
-                    {'Yes'}
+                    {"Yes"}
                 </Button>
             )}
         </div>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,5 +1,5 @@
-import BasicThreadList from '../components/BasicThreadList';
-import React from 'react';
+import BasicThreadList from "../components/BasicThreadList";
+import React from "react";
 
 const Home: React.FC = () => {
     return (