dynamic name, loading shimmer

src/components/StudentProfile/StudentProfile.tsx

@@ -1,10 +1,13 @@
 import styles from "./StudentProfile.module.scss";
 import profilePlaceholderImage from "../../assets/images/profilePlaceholderImage.jpg";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import { TEST_ACTION_TYPES } from "../../utils/actions";
+import { AuthContext } from "../../utils/auth/AuthContext";
+import { useNavigate } from "react-router-dom";
+import { AUTH_TOKEN } from "src/utils/constants";
+import { TestsContext } from "../../utils/contexts/TestsContext";
 
 interface Props {
-  name: string;
-  exam: string;
   image?: string;
 }
 
@@ -15,12 +18,39 @@ type RemainingTime = {
 };
 
 const StudentProfile = (props: Props) => {
-  const { name, exam, image } = props;
+  const { currentUser, userDetails } = useContext(AuthContext);
+  const { state, dispatch } = useContext(TestsContext);
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(false);
+  const { image } = props;
+  const [Name, SetName] = useState<string>("");
+  const [Exam, SetExam] = useState<string>("");
   const [timer, setTimer] = useState<RemainingTime>({
     hours: "03",
     minutes: "00",
     seconds: "00",
   });
+  const [alertModal, setAlertModal] = useState<{
+    open: boolean;
+    title: string;
+    message: string;
+  }>({ open: false, title: "", message: "" });
+
+  function handleScreen() {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+  }
+
+  useEffect(()=>{
+    console.log(userDetails);
+    SetName(userDetails?.name);
+    SetExam(userDetails?.exam);
+  },[userDetails])
 
   useEffect(() => {
     let remTime = localStorage.getItem("remainingTime");
@@ -53,23 +83,50 @@ const StudentProfile = (props: Props) => {
       if (distance < 0) {
         clearInterval(x);
         setTimer({ hours: "00", minutes: "00", seconds: "00" });
+        if (!currentUser) return alert("No valid user found");
+        setLoading(true);
+        dispatch({
+          type: TEST_ACTION_TYPES.SUBMIT_TEST,
+          payload: {
+            test,
+            user: {
+              id: currentUser.id,
+              type: currentUser.userType,
+              instituteId: currentUser.instituteId,
+            },
+            token: localStorage.getItem(AUTH_TOKEN),
+            cb: (error: any) => {
+              if (error) {
+                return setAlertModal({
+                  open: true,
+                  title: "Error",
+                  message: error,
+                });
+              }
+              handleScreen();
+              navigate("/result");
+              setLoading(false);
+            },
+          },
+        });
       }
     }, 1000); // update every one second
+
   }, []);
 
   return (
     <div className={styles.container}>
       <div className={styles.imageContainer}>
-        <img src={image ? image : profilePlaceholderImage} alt={name} />
+        <img src={image ? image : profilePlaceholderImage} alt={userDetails.name} />
       </div>
       <div className={styles.textContainer}>
         <p>
           <span>Name : </span>
-          <span className={styles.fieldAnswerTextual}>{name}</span>
+          <span className={styles.fieldAnswerTextual}>{userDetails.name}</span>
         </p>
         <p>
           <span>Exam : </span>
-          <span className={styles.fieldAnswerTextual}>{exam}</span>
+          <span className={styles.fieldAnswerTextual}>{userDetails.exam}</span>
         </p>
         <p>
           <span>Time Remaining : </span>

src/components/TestInfo/TestInfo.tsx

@@ -13,12 +13,14 @@ const TestInfo: React.FC<Props> = ({
   testInfoRightComp: RightComp,
   onChangeLanguage,
 }) => {
+
+
+
+
   return (
     <div className={styles.container}>
       {LeftComp || (
         <StudentProfile
-          name="Deepak Kewadia"
-          exam="JEE ADVANCED 2022"
           image={currentUserImage}
         />
       )}

src/pages/Home/Home.tsx

@@ -288,6 +288,9 @@ const Home = () => {
         onClickViewQuestionPaper={() => setQuestionPaperModal(true)}
         onChangeLanguage={(e: any) => setLanguage(e.target.value)}
       />
+      {questions.length === 0 && (
+        <Loader/>
+      )}
       <section className={styles.mainContainer}>
         <main
           className={clsx(

src/utils/auth/AuthContext.tsx

@@ -1,14 +1,16 @@
 import { useState, createContext, useEffect } from "react";
-import { ICurrentUser, IAuthContext } from "../interfaces";
-import { decodeToken } from "react-jwt";
+import { ICurrentUser, IAuthContext, IUserDetails } from "../interfaces";
+import { decodeToken, isExpired } from "react-jwt";
 import { AUTH_TOKEN } from "../constants";
+import { API_USERS } from "../api/config";
 
 interface ProviderProps {
   children: React.ReactNode;
 }
 
 const defaultAuthContext = {
   currentUser: null,
+  userDetails: null,
   setCurrentUser: () => {},
   keyRequiredForTest: false,
   setKeyRequiredForTest: () => {},
@@ -18,25 +20,52 @@ export const AuthContext = createContext<IAuthContext>(defaultAuthContext);
 
 const AuthContextProvider = (props: ProviderProps) => {
   const [currentUser, setCurrentUser] = useState<ICurrentUser | null>(null);
+  const [userDetails, setuserDetails] = useState<any>(null);
   const [keyRequiredForTest, setKeyRequiredForTest] = useState<boolean>(false);
 
   useEffect(() => {
     const user = localStorage.getItem(AUTH_TOKEN);
+    async function getUserDetails(id: string, userType: string) {
+      // console.log(id);
+      const res = await API_USERS().get(`/${userType}/single`, {
+        params: { id },
+      });
+      console.log({ id, res });
+      setuserDetails(res.data);
+    }
     if (user) {
       let decoded = decodeToken(user) as any;
+      // console.log({ decoded });
+      if (isExpired(user)) {
+        localStorage.removeItem(AUTH_TOKEN);
+        setCurrentUser(null);
+        return;
+      }
+      let newRoles: any = {};
+      decoded?.roles?.forEach((role: any) => {
+        newRoles[role.id] = {
+          id: role.id,
+          permissions: [],
+        };
+      });
+      // console.log({ hello: newRoles });
+      // console.log({ decoded });
       setCurrentUser({
         email: decoded.email,
         id: decoded.id,
         userType: decoded.userType,
         instituteId: decoded.instituteId,
       });
+
+      getUserDetails(decoded.id, decoded.userType);
     }
   }, []);
 
   return (
     <AuthContext.Provider
       value={{
         currentUser,
+        userDetails,
         setCurrentUser,
         keyRequiredForTest,
         setKeyRequiredForTest,

src/utils/interfaces.ts

@@ -128,6 +128,20 @@ export interface ITestStatus {
   answeredAndMarkedForReview: Array<string>;
 }
 
+export interface IUserDetails {
+  _id: string;
+  email: string;
+  userType: string;
+  institute: string;
+  batch: string;
+  roles: {
+    [key: string]: {
+      id: string;
+      permissions: string[];
+    };
+  };
+}
+
 export interface ICurrentUser {
   id: string;
   email: string;
@@ -137,6 +151,7 @@ export interface ICurrentUser {
 
 export interface IAuthContext {
   currentUser: ICurrentUser | null;
+  userDetails: any | null;
   setCurrentUser: React.Dispatch<React.SetStateAction<ICurrentUser | null>>;
   keyRequiredForTest: boolean;
   setKeyRequiredForTest: React.Dispatch<React.SetStateAction<boolean>>;