From ae1484b80816e0250f2ff01f7f2bd30087fe638a Mon Sep 17 00:00:00 2001 From: ashwath462 Date: Mon, 20 Nov 2023 20:46:40 +0530 Subject: [PATCH] dynamic name, loading shimmer --- .../StudentProfile/StudentProfile.tsx | 71 +++++++++++++++++-- src/components/TestInfo/TestInfo.tsx | 6 +- src/pages/Home/Home.tsx | 3 + src/utils/auth/AuthContext.tsx | 33 ++++++++- src/utils/interfaces.ts | 15 ++++ 5 files changed, 117 insertions(+), 11 deletions(-) diff --git a/src/components/StudentProfile/StudentProfile.tsx b/src/components/StudentProfile/StudentProfile.tsx index 050a3b3..abc1033 100755 --- a/src/components/StudentProfile/StudentProfile.tsx +++ b/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(false); + const { image } = props; + const [Name, SetName] = useState(""); + const [Exam, SetExam] = useState(""); const [timer, setTimer] = useState({ 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 (
- {name} + {userDetails.name}

Name : - {name} + {userDetails.name}

Exam : - {exam} + {userDetails.exam}

Time Remaining : diff --git a/src/components/TestInfo/TestInfo.tsx b/src/components/TestInfo/TestInfo.tsx index 572de7b..081f99b 100755 --- a/src/components/TestInfo/TestInfo.tsx +++ b/src/components/TestInfo/TestInfo.tsx @@ -13,12 +13,14 @@ const TestInfo: React.FC = ({ testInfoRightComp: RightComp, onChangeLanguage, }) => { + + + + return (

{LeftComp || ( )} diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 965922f..3dd5a56 100755 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -288,6 +288,9 @@ const Home = () => { onClickViewQuestionPaper={() => setQuestionPaperModal(true)} onChangeLanguage={(e: any) => setLanguage(e.target.value)} /> + {questions.length === 0 && ( + + )}
{}, keyRequiredForTest: false, setKeyRequiredForTest: () => {}, @@ -18,18 +20,44 @@ export const AuthContext = createContext(defaultAuthContext); const AuthContextProvider = (props: ProviderProps) => { const [currentUser, setCurrentUser] = useState(null); + const [userDetails, setuserDetails] = useState(null); const [keyRequiredForTest, setKeyRequiredForTest] = useState(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); } }, []); @@ -37,6 +65,7 @@ const AuthContextProvider = (props: ProviderProps) => { ; } +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>; keyRequiredForTest: boolean; setKeyRequiredForTest: React.Dispatch>;