Homework9

package.json

@@ -6,9 +6,14 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.2",
+    "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^20.5.9",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -18,6 +23,7 @@
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
+    "typescript": "^5.2.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/App.js → src/components/App.tsx

@@ -1,33 +1,34 @@
-import '../index.css'
-import {createBrowserRouter, RouterProvider} from "react-router-dom";
+import '../index.css';
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./home/Home";
 import Popular from "./popular/Popular";
 import Battle from "./battle/Battle";
 import Nav from "./Nav";
 import BattleResult from "./battle/BattleResult";
-import {Provider} from "react-redux";
+import { Provider } from "react-redux";
 import store from "./redux";
+import React from "react";
 
 const router = createBrowserRouter([
     {
         path: "/",
-        element: <Nav/>,
+        element: <Nav />,
         children: [
             {
                 path: "/",
-                element: <Home/>,
+                element: <Home />,
             },
             {
                 path: "/popular",
-                element: <Popular/>,
+                element: <Popular />,
             },
             {
                 path: "/battle",
-                element: <Battle/>,
+                element: <Battle />,
             },
             {
                 path: "/battle/result",
-                element: <BattleResult/>,
+                element: <BattleResult />,
             },
             {
                 path: "*",
@@ -37,9 +38,9 @@ const router = createBrowserRouter([
     },
 ]);
 
-const App = () =>
-    <Provider store={store} >
-        <RouterProvider router={router} />
-    </Provider>
+const App = (): JSX.Element =>
+<Provider store={store} >
+    <RouterProvider router={router} />
+</Provider>;
 
 export default App;

src/components/Loading.tsx

@@ -0,0 +1,21 @@
+import { Backdrop, CircularProgress } from "@mui/material";
+import React, { memo, ReactNode } from "react";
+
+interface LoadingProps {
+    isLoading: boolean;
+}
+
+const Loading = memo(({ isLoading }: LoadingProps): ReactNode => {
+    return (
+        <Backdrop
+            sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+            open={isLoading}
+        >
+            <ul className='loader'>
+                <CircularProgress size={150} />
+            </ul>
+        </Backdrop>
+    );
+});
+
+export default Loading;

src/components/Nav.js → src/components/Nav.tsx

@@ -1,7 +1,5 @@
-import {Outlet} from "react-router-dom";
-
-const React = require('react');
-const NavLink = require('react-router-dom').NavLink;
+import { NavLink, Outlet } from 'react-router-dom';
+import React from "react";
 
 const Nav = () => {
     return (