dynamic redirect created

src/App.tsx

@@ -1,5 +1,7 @@
 // Modules
+import { useMemo, useState, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
+import { UserContext } from "./context/UserContext";
 
 // Style
 import "./assets/styles/style.scss";
@@ -8,12 +10,29 @@ import "./assets/styles/style.scss";
 import Login from "./pages/Login";
 
 const App = () => {
+  const [user, setUser] = useState({
+    username: "",
+    accessLevel: "",
+  });
+
+  useEffect(() => {
+    const userData = localStorage.getItem("userData");
+
+    if (userData) {
+      setUser(JSON.parse(userData));
+    }
+  }, []);
+
+  const userValue = useMemo(() => ({ user, setUser }), [user, setUser]);
+
   return (
-    <div className="App">
-      <Routes>
-        <Route path="/login" element={<Login />} />
-      </Routes>
-    </div>
+    <UserContext.Provider value={userValue}>
+      <div className="App">
+        <Routes>
+          <Route path="/login" element={<Login />} />
+        </Routes>
+      </div>
+    </UserContext.Provider>
   );
 };
 

src/context/UserContext.tsx

@@ -0,0 +1,4 @@
+// Modules
+import { createContext } from "react";
+
+export const UserContext: any = createContext(null);

src/pages/Login.tsx

@@ -1,10 +1,14 @@
-import React, { useState, useEffect } from "react";
+// Modules
+import React, { useState, useEffect, useContext } from "react";
+import { UserContext } from "../context/UserContext";
+import { useNavigate } from "react-router-dom";
 
 const Login = () => {
   const cred: Record<string, string> = {
-    username: "admin@2022",
+    username: "admin_2022",
     password: "backpackadmin",
   };
+
   const [valid, setValid] = useState({
     username: "",
     password: "",
@@ -12,6 +16,9 @@ const Login = () => {
     valid: false,
   });
 
+  const { user, setUser } = useContext<any>(UserContext);
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (valid.username === cred.username && valid.password === cred.password) {
       setValid({ ...valid, valid: true });
@@ -20,6 +27,12 @@ const Login = () => {
     }
   }, [valid.username, valid.password]);
 
+  useEffect(() => {
+    if (user.username) {
+      navigate("/");
+    }
+  }, [user]);
+
   return (
     <main className="login">
       <div className="container">
@@ -75,8 +88,14 @@ const Login = () => {
               </span>
               <button
                 className="login__form__button login__form__button--violet"
-                onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+                onClick={() => {
                   setValid({ ...valid, check: true });
+                  if (valid.valid) {
+                    setUser({
+                      username: valid.username,
+                      accessLevel: "admin",
+                    });
+                  }
                 }}
               >
                 Login