Checkpoint 100xDevs-hkirat#3 => State management using reciol

Author: hkirat

admin-client/src/App.jsx

@@ -6,47 +6,75 @@ 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 { userState } from "./store/atoms/user.js";
+import {
+    RecoilRoot,
+    useSetRecoilState
+} from 'recoil';
 import axios from "axios";
 import {BASE_URL} from "./config.js";
+import {useEffect} from "react";
 
 function App() {
-    const [userEmail, setUserEmail] = useState(null)
+    return (
+        <RecoilRoot>
+            <div style={{width: "100vw",
+                height: "100vh",
+                backgroundColor: "#eeeeee"}}
+            >
+                    <Router>
+                        <Appbar />
+                        <InitUser />
+                        <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 />} />
+                        </Routes>
+                    </Router>
+            </div>
+        </RecoilRoot>
+    );
+}
+
 
+function InitUser() {
+    const setUser = useSetRecoilState(userState);
     const init = async() => {
-        const response = await axios.get(`${BASE_URL}/admin/me`, {
-            headers: {
-                "Authorization": "Bearer " + localStorage.getItem("token")
+        try {
+            const response = await axios.get(`${BASE_URL}/admin/me`, {
+                headers: {
+                    "Authorization": "Bearer " + localStorage.getItem("token")
+                }
+            })
+
+            if (response.data.username) {
+                setUser({
+                    isLoading: false,
+                    userEmail: response.data.username
+                })
+            } else {
+                setUser({
+                    isLoading: false,
+                    userEmail: null
+                })
             }
-        })
+        } catch (e) {
 
-        if (response.data.username) {
-            setUserEmail(response.data.username)
+            setUser({
+                isLoading: false,
+                userEmail: null
+            })
         }
     };
 
     useEffect(() => {
         init();
     }, []);
-    return (
-        <div style={{width: "100vw",
-            height: "100vh",
-            backgroundColor: "#eeeeee"}}
-        >
-                <Router>
-                    <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 setUserEmail={setUserEmail} />} />
-                        <Route path={"/signup"} element={<Signup setUserEmail={setUserEmail} />} />
-                        <Route path={"/"} element={<Landing userEmail={userEmail} />} />
-                    </Routes>
-                </Router>
-
-        </div>
-    );
+
+    return <></>
 }
 
 export default App;

admin-client/src/components/Appbar.jsx

@@ -1,9 +1,20 @@
 import {Typography} from "@mui/material";
 import Button from "@mui/material/Button";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { isUserLoading } from "../store/selectors/isUserLoading";
+import {useSetRecoilState, useRecoilValue} from "recoil";
+import { userState } from "../store/atoms/user.js";
+import { userEmailState } from "../store/selectors/userEmail"
 
-function Appbar({userEmail, setUserEmail}) {
+function Appbar({}) {
     const navigate = useNavigate()
+    const userLoading = useRecoilValue(isUserLoading);
+    const userEmail = useRecoilValue(userEmailState);
+    const setUser = useSetRecoilState(userState);
+
+    if (userLoading) {
+        return <></>
+    }
 
     if (userEmail) {
         return <div style={{
@@ -40,7 +51,10 @@ function Appbar({userEmail, setUserEmail}) {
                         variant={"contained"}
                         onClick={() => {
                             localStorage.setItem("token", null);
-                            setUserEmail(null);
+                            setUser({
+                                isLoading: false,
+                                userEmail: null
+                            })
                         }}
                     >Logout</Button>
                 </div>

admin-client/src/components/Course.jsx

@@ -5,40 +5,48 @@ import { Typography, TextField, Button } from "@mui/material";
 import axios from "axios";
 import {Loading} from "./Loading";
 import { BASE_URL } from "../config.js";
+import { courseState } from "../store/atoms/course";
+import {useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
+import { courseTitle, coursePrice, isCourseLoading, courseImage } from "../store/selectors/course";
 
 function Course() {
     let { courseId } = useParams();
-    const [course, setCourse] = useState(null);
-    
+    const setCourse = useSetRecoilState(courseState);
+    const courseLoading = useRecoilValue(isCourseLoading);
+
     useEffect(() => {
         axios.get(`${BASE_URL}/admin/course/${courseId}`, {
             method: "GET",
             headers: {
                 "Authorization": "Bearer " + localStorage.getItem("token")
             }
         }).then(res => {
-            setCourse(res.data.course);
+            setCourse({isLoading: false, course: res.data.course});
+        })
+        .catch(e => {
+            setCourse({isLoading: false, course: null});
         });
     }, []);
 
-    if (!course) {
+    if (courseLoading) {
         return <Loading />
     }
 
     return <div>
-        <GrayTopper title={course.title}/>
+        <GrayTopper />
         <Grid container>
             <Grid item lg={8} md={12} sm={12}>
-                <UpdateCard course={course} setCourse={setCourse} />
+                <UpdateCard />
             </Grid>
             <Grid item lg={4} md={12} sm={12}>
-                <CourseCard course={course} />
+                <CourseCard />
             </Grid>
         </Grid>
     </div>
 }
 
-function GrayTopper({title}) {
+function GrayTopper() {
+    const title = useRecoilValue(courseTitle);
     return <div style={{height: 250, background: "#212121", top: 0, width: "100vw", zIndex: 0, marginBottom: -250}}>
         <div style={{ height: 250, display: "flex", justifyContent: "center", flexDirection: "column"}}>
             <div>
@@ -50,11 +58,13 @@ function GrayTopper({title}) {
     </div>
 }
 
-function UpdateCard({course, setCourse}) {
-    const [title, setTitle] = useState(course.title);
-    const [description, setDescription] = useState(course.description);
-    const [image, setImage] = useState(course.imageLink);
-    const [price, setPrice] = useState(course.price);
+function UpdateCard() {
+    const [courseDetails, setCourse] = useRecoilState(courseState);
+
+    const [title, setTitle] = useState(courseDetails.course.title);
+    const [description, setDescription] = useState(courseDetails.course.description);
+    const [image, setImage] = useState(courseDetails.course.imageLink);
+    const [price, setPrice] = useState(courseDetails.course.price);
 
     return <div style={{display: "flex", justifyContent: "center"}}>
     <Card varint={"outlined"} style={{maxWidth: 600, marginTop: 200}}>
@@ -106,7 +116,7 @@ function UpdateCard({course, setCourse}) {
             <Button
                 variant="contained"
                 onClick={async () => {
-                    axios.put(`${BASE_URL}/admin/courses/` + course._id, {
+                    axios.put(`${BASE_URL}/admin/courses/` + courseDetails.course._id, {
                         title: title,
                         description: description,
                         imageLink: image,
@@ -119,13 +129,13 @@ function UpdateCard({course, setCourse}) {
                         }
                     });
                     let updatedCourse = {
-                        _id: course._id,
+                        _id: courseDetails.course._id,
                         title: title,
                         description: description,
                         imageLink: image,
                         price
                     };
-                    setCourse(updatedCourse);
+                    setCourse({course: updatedCourse, isLoading: false});
                 }}
             > Update course</Button>
         </div>
@@ -134,7 +144,9 @@ function UpdateCard({course, setCourse}) {
 }
 
 function CourseCard(props) {
-    const course = props.course;
+    const title = useRecoilValue(courseTitle);
+    const imageLink = useRecoilValue(courseImage);
+
     return <div style={{display: "flex",  marginTop: 50, justifyContent: "center", width: "100%"}}>
      <Card style={{
         margin: 10,
@@ -145,14 +157,14 @@ function CourseCard(props) {
         paddingBottom: 15,
         zIndex: 2
     }}>
-        <img src={course.imageLink} style={{width: 350}} ></img>
+        <img src={imageLink} style={{width: 350}} ></img>
         <div style={{marginLeft: 10}}>
-            <Typography variant="h5">{course.title}</Typography>
+            <Typography variant="h5">{title}</Typography>
             <Typography variant="subtitle2" style={{color: "gray"}}>
                 Price
             </Typography>
             <Typography variant="subtitle1">
-                <b>Rs {course.price} </b>
+                <b>Rs {price} </b>
             </Typography>
         </div>
     </Card>

admin-client/src/components/Landing.jsx

@@ -1,10 +1,14 @@
 import {Grid, Typography} from "@mui/material";
 import Button from "@mui/material/Button";
 import {useNavigate} from "react-router-dom";
+import {useRecoilValue} from "recoil";
+import { userEmailState } from "../store/selectors/userEmail"
+import {isUserLoading} from "../store/selectors/isUserLoading.js";
 
-
-export const Landing = ({userEmail}) => {
+export const Landing = () => {
     const navigate = useNavigate()
+    const userEmail = useRecoilValue(userEmailState);
+    const userLoading = useRecoilValue(isUserLoading);
     return <div>
         <Grid container style={{padding: "5vw"}}>
             <Grid item xs={12} md={6} lg={6}>
@@ -15,7 +19,7 @@ export const Landing = ({userEmail}) => {
                     <Typography variant={"h5"}>
                         A place to learn, earn and grow
                     </Typography>
-                    {!userEmail && <div style={{display: "flex", marginTop: 20}}>
+                    {!userLoading && !userEmail && <div style={{display: "flex", marginTop: 20}}>
                         <div style={{marginRight: 10}}>
                             <Button
                                 size={"large"}

admin-client/src/components/Signin.jsx

@@ -4,11 +4,14 @@ import {Card, Typography} from "@mui/material";
 import {useState} from "react";
 import axios from "axios";
 import {useNavigate} from "react-router-dom";
+import {useSetRecoilState} from "recoil";
+import {userState} from "../store/atoms/user.js";
 
 function Signin() {
     const [email, setEmail] = useState("")
     const [password, setPassword] = useState("")
     const navigate = useNavigate()
+    const setUser = useSetRecoilState(userState);
 
     return <div>
             <div style={{
@@ -57,10 +60,13 @@ function Signin() {
                             }
                         });
                         const data = res.data;
-                        
+
                         localStorage.setItem("token", data.token);
                         // window.location = "/"
-                        setUserEmail(email)
+                        setUser({
+                            userEmail: email,
+                            isLoading: false
+                        })
                         navigate("/courses")
                     }}
 

admin-client/src/components/Signup.jsx

@@ -5,11 +5,14 @@ import {useState} from "react";
 import axios from "axios";
 import { BASE_URL } from "../config.js";
 import {useNavigate} from "react-router-dom";
+import {useSetRecoilState} from "recoil";
+import {userState} from "../store/atoms/user.js";
 
-function Signup({setUserEmail}) {
+function Signup() {
     const [email, setEmail] = useState("")
     const [password, setPassword] = useState("")
     const navigate = useNavigate()
+    const setUser = useSetRecoilState(userState);
 
     return <div>
             <div style={{
@@ -55,7 +58,7 @@ function Signup({setUserEmail}) {
                         let data = response.data;
                         localStorage.setItem("token", data.token);
                         // window.location = "/"
-                        setUserEmail(email)
+                        setUser({userEmail: email, isLoading: false})
                         navigate("/courses")
                     }}
 

admin-client/src/store/atoms/course.js

@@ -0,0 +1,9 @@
+import {atom} from "recoil";
+
+export const courseState = atom({
+  key: 'courseState',
+  default: {
+    isLoading: true,
+    course: null
+  },
+});

admin-client/src/store/atoms/user.js

@@ -0,0 +1,9 @@
+import {atom} from "recoil";
+
+export const userState = atom({
+  key: 'userState',
+  default: {
+    isLoading: true,
+    userEmail: null
+  },
+});