global state for username and logged added

src/components/Login.jsx

@@ -10,6 +10,8 @@ const Login = () => {
   const [cookies, setCookie] = useCookies(["jwtToken"]);
   const { dark, setDark } = useGlobalContext();
   const navigate = useNavigate();
+  const {logged, setLogged} = useGlobalContext();
+  const {userName, setUserName} = useGlobalContext();
 
   function login(event) {
     event.preventDefault();
@@ -28,6 +30,8 @@ const Login = () => {
         )
         .then((response) => {
           setCookie("jwtToken", response.data.jwtToken, { path: "/" });
+          setLogged(true);
+          setUserName(userData.username);
           navigate("/");
         });
     } catch (error) {

src/components/NavbarComp.jsx

@@ -10,6 +10,8 @@ const NavbarComp = () => {
   const { dark, setDark } = useGlobalContext();
   const [cookies, setCookie] = useCookies(["jwtToken"]);
   const navigate = useNavigate();
+  const {logged, setLogged} = useGlobalContext();
+  const {userName, setUserName} = useGlobalContext();
 
   function toggleColorMode() {
     if (dark === "dark") {
@@ -23,6 +25,7 @@ const NavbarComp = () => {
 
   function logout(){
     setCookie("jwtToken", "", { path: "/" });
+    setLogged(false);
     navigate("/");
   }
 
@@ -41,20 +44,20 @@ const NavbarComp = () => {
             <Nav.Link style={{ marginRight: "40px" }} as={Link} to="/gamepage">
               GamePage
             </Nav.Link>
-            {cookies.jwtToken == "" || cookies.jwtToken == null ? (
+            {!logged ? (
               <Nav.Link as={Link} to="/register">
                 Register
               </Nav.Link>
             ) : (
               ""
             )}
-            {cookies.jwtToken == "" || cookies.jwtToken == null ? (
+            {!logged ? (
               <Nav.Link as={Link} to="/login">
                 Login
               </Nav.Link>
             ) : (
               <Nav.Link onClick={() => logout()}>
-                Logout
+                {userName} Logout
               </Nav.Link>
             )}
           </Nav>

src/components/Register.jsx

@@ -10,6 +10,8 @@ const Register = () => {
   const [cookies, setCookie] = useCookies(["jwtToken"]);
   const { dark, setDark } = useGlobalContext();
   const navigate = useNavigate();
+  const {logged, setLogged} = useGlobalContext();
+  const {userName, setUserName} = useGlobalContext();
 
 
   function register(event) {
@@ -38,6 +40,8 @@ const Register = () => {
             )
             .then((response) => {
               setCookie("jwtToken", response.data.jwtToken, { path: "/" });
+              setLogged(true);
+              setUserName(userData.username);
               navigate("/");
             });
         })

src/components/context.jsx

@@ -7,14 +7,20 @@ export const GlobalProvider = ({ children }) => {
     "linear-gradient(to bottom, #121212, #333 60%, #eee 85%)"
   );
   const [dark, setDark] = useState("dark")
+  const [logged, setLogged] = useState(false)
+  const [userName, setUserName] = useState("")
 
   return (
     <GlobalContext.Provider
       value={{
         bgColor,
         setBgColor,
         dark,
-        setDark
+        setDark,
+        logged,
+        setLogged,
+        userName,
+        setUserName
       }}
     >
       {children}