Checkpoint 100xDevs-hkirat#2 -> State at the top

PrasadPonnada · Jul 21, 2023 · 664d013 · 664d013
1 parent 29a8ca3
commit 664d013
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 32 deletions.
diff --git a/admin-client/src/App.jsx b/admin-client/src/App.jsx
@@ -6,23 +6,42 @@ import AddCourse from "./components/AddCourse.jsx";
 import Courses from "./components/Courses";
 import Course from "./components/Course";
 import {Landing} from "./components/Landing.jsx";
+import {useState, useEffect} from "react";
+import axios from "axios";
+import {BASE_URL} from "./config.js";
 
 function App() {
+    const [userEmail, setUserEmail] = useState(null)
 
+    const init = async() => {
+        const response = await axios.get(`${BASE_URL}/admin/me`, {
+            headers: {
+                "Authorization": "Bearer " + localStorage.getItem("token")
+            }
+        })
+
+        if (response.data.username) {
+            setUserEmail(response.data.username)
+        }
+    };
+
+    useEffect(() => {
+        init();
+    }, []);
     return (
         <div style={{width: "100vw",
             height: "100vh",
             backgroundColor: "#eeeeee"}}
         >
                 <Router>
-                    <Appbar />
+                    <Appbar userEmail={userEmail} setUserEmail={setUserEmail}/>
                     <Routes>
                         <Route path={"/addcourse"} element={<AddCourse />} />
                         <Route path={"/course/:courseId"} element={<Course />} />
                         <Route path={"/courses"} element={<Courses />} />
-                        <Route path={"/signin"} element={<Signin />} />
-                        <Route path={"/signup"} element={<Signup />} />
-                        <Route path={"/"} element={<Landing />} />
+                        <Route path={"/signin"} element={<Signin setUserEmail={setUserEmail} />} />
+                        <Route path={"/signup"} element={<Signup setUserEmail={setUserEmail} />} />
+                        <Route path={"/"} element={<Landing userEmail={userEmail} />} />
                     </Routes>
                 </Router>
 

diff --git a/admin-client/src/components/Appbar.jsx b/admin-client/src/components/Appbar.jsx
@@ -1,29 +1,9 @@
 import {Typography} from "@mui/material";
 import Button from "@mui/material/Button";
-import { useEffect, useState } from "react";
 import {useNavigate} from "react-router-dom";
-import { BASE_URL } from "../config.js";
-import axios from "axios";
 
-function Appbar() {
+function Appbar({userEmail, setUserEmail}) {
     const navigate = useNavigate()
-    const [userEmail, setUserEmail] = useState(null);
-
-    const init = async() => {
-        const response = await axios.get(`${BASE_URL}/admin/me`, {
-            headers: {
-                "Authorization": "Bearer " + localStorage.getItem("token")
-            }
-        })
-
-        if (response.data.username) {
-            setUserEmail(response.data.username)
-        }
-    };
-
-    useEffect(() => {
-       init();
-    }, []);
 
     if (userEmail) {
         return <div style={{
@@ -60,7 +40,7 @@ function Appbar() {
                         variant={"contained"}
                         onClick={() => {
                             localStorage.setItem("token", null);
-                            window.location = "/";
+                            setUserEmail(null);
                         }}
                     >Logout</Button>
                 </div>

diff --git a/admin-client/src/components/Courses.jsx b/admin-client/src/components/Courses.jsx
@@ -15,6 +15,7 @@ function Courses() {
         })
         setCourses(response.data.courses)
     }
+
     useEffect(() => {
         init();
     }, []);

diff --git a/admin-client/src/components/Landing.jsx b/admin-client/src/components/Landing.jsx
@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import {useNavigate} from "react-router-dom";
 
 
-export const Landing = () => {
+export const Landing = ({userEmail}) => {
     const navigate = useNavigate()
     return <div>
         <Grid container style={{padding: "5vw"}}>
@@ -15,7 +15,7 @@ export const Landing = () => {
                     <Typography variant={"h5"}>
                         A place to learn, earn and grow
                     </Typography>
-                    <div style={{display: "flex", marginTop: 20}}>
+                    {!userEmail && <div style={{display: "flex", marginTop: 20}}>
                         <div style={{marginRight: 10}}>
                             <Button
                                 size={"large"}
@@ -34,7 +34,7 @@ export const Landing = () => {
                                 }}
                             >Signin</Button>
                         </div>
-                    </div>
+                    </div>}
                 </div>
                 <div>
                 </div>

diff --git a/admin-client/src/components/Signin.jsx b/admin-client/src/components/Signin.jsx
@@ -3,10 +3,12 @@ import TextField from "@mui/material/TextField";
 import {Card, Typography} from "@mui/material";
 import {useState} from "react";
 import axios from "axios";
+import {useNavigate} from "react-router-dom";
 
 function Signin() {
     const [email, setEmail] = useState("")
     const [password, setPassword] = useState("")
+    const navigate = useNavigate()
 
     return <div>
             <div style={{
@@ -57,7 +59,9 @@ function Signin() {
                         const data = res.data;
 
                         localStorage.setItem("token", data.token);
-                        window.location = "/"
+                        // window.location = "/"
+                        setUserEmail(email)
+                        navigate("/courses")
                     }}
 
                 > Signin</Button>

diff --git a/admin-client/src/components/Signup.jsx b/admin-client/src/components/Signup.jsx
@@ -4,10 +4,12 @@ import {Card, Typography} from "@mui/material";
 import {useState} from "react";
 import axios from "axios";
 import { BASE_URL } from "../config.js";
+import {useNavigate} from "react-router-dom";
 
-function Signup() {
+function Signup({setUserEmail}) {
     const [email, setEmail] = useState("")
     const [password, setPassword] = useState("")
+    const navigate = useNavigate()
 
     return <div>
             <div style={{
@@ -52,7 +54,9 @@ function Signup() {
                         })
                         let data = response.data;
                         localStorage.setItem("token", data.token);
-                        window.location = "/"
+                        // window.location = "/"
+                        setUserEmail(email)
+                        navigate("/courses")
                     }}
 
                 > Signup</Button>