Added React Router DOM for Admin Client navigation

admin-client/package.json

@@ -10,8 +10,10 @@
     "@types/node": "^16.18.90",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

admin-client/src/App.tsx

@@ -1,26 +1,12 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { Outlet } from "react-router-dom";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+      return (
+            <div className="App">
+                  <Outlet />
+            </div>
+      );
 }
 
 export default App;

admin-client/src/index.tsx

@@ -1,19 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+import { RouterProvider } from "react-router-dom";
+import { Router } from "./routes/routes";
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+      <React.StrictMode>
+            <RouterProvider router={Router} />
+      </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

admin-client/src/pages/auth.page.tsx

@@ -0,0 +1,8 @@
+import { useState } from "react";
+
+const Auth = () => {
+      const [login, setLogin] = useState<boolean>(false);
+      return <div className="Auth">{login ? "Login" : "Register"}</div>;
+};
+
+export default Auth;

admin-client/src/pages/upload.page.tsx

@@ -0,0 +1,5 @@
+const Upload = () => {
+      return <div className="upload">upload</div>;
+};
+
+export default Upload;

admin-client/src/routes/routes.tsx

@@ -0,0 +1,20 @@
+import { createBrowserRouter } from "react-router-dom";
+import App from "../App";
+
+// pages
+import Auth from "../pages/auth.page";
+import Upload from "../pages/upload.page";
+
+export const Router = createBrowserRouter([
+      {
+            path: "/",
+            element: <App />,
+            children: [
+                  {
+                        path: "/auth",
+                        element: <Auth />,
+                  },
+                  { path: "/upload", element: <Upload /> },
+            ],
+      },
+]);