diff --git a/src/routes/home/MyQuizzes/myQuizzes.css b/src/routes/home/MyQuizzes/myQuizzes.css index a489fc5ff0028d3dc232ff14593f7470a733b341..1cd6fa162c9349de5d01377bc4c1c954089a5103 100644 --- a/src/routes/home/MyQuizzes/myQuizzes.css +++ b/src/routes/home/MyQuizzes/myQuizzes.css @@ -13,18 +13,41 @@ padding-bottom: 2vmin; } -/* Liste */ +/* List */ .container-mq .scrollable-list { height: 45%; width: 80%; overflow-y: auto; - /* Ajoute une scrollbar verticale si nécessaire */ border: 4px solid #F3F3F3; padding: 0; border-radius: 10px; background-color: #FFFFFF; } +/* Login container*/ +.container-mq .login-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 3vmin; + margin: 2vmin; + +} + +.container-mq .login-container p { + font-size: 3vmin; + font-weight: bold; + color: #2B73FE; + text-transform: uppercase; +} + +.container-mq .login-container .blueButton { + width: 40%; + font-size: 3vmin; + text-transform: uppercase; +} + .container-mq .inputRecherche { width: 80%; } diff --git a/src/routes/home/MyQuizzes/myQuizzes.tsx b/src/routes/home/MyQuizzes/myQuizzes.tsx index 2120ee8a6247350a68d9ec72000ab5763511ab2e..0aedba7ec23e6c353e7ffd7eed6bf605bc70c01d 100644 --- a/src/routes/home/MyQuizzes/myQuizzes.tsx +++ b/src/routes/home/MyQuizzes/myQuizzes.tsx @@ -9,6 +9,7 @@ import { Quiz } from "../../../models/Quiz"; import HttpError from "../../../services/HttpError"; import { useNavigate } from "react-router-dom"; import { Run } from "../../../models/Run"; +import { useUserService } from "../../../services/UserService"; interface paqProps { loading: () => void; @@ -20,15 +21,18 @@ export function MyQuizzes({ loading }: paqProps) { const [liste, setListe] = useState<ListModel[]>([]); const [runList, setRunList] = useState<Run[] | null>(); const [run, setRun] = useState<Run | null>(); + const { getInformationsUser } = useUserService(); const { getUserRuns } = useQuizService(); const navigate = useNavigate(); - + const [isConnected, setIsConnected] = useState<boolean>(false); const fetchuserRun = async () => { const response = await getUserRuns(); if (response instanceof HttpError) { console.error("Error while fetching user runs:", response); + setIsConnected(false); return; } + setIsConnected(true); setRunList(response.runs); const tempList: ListModel[] = response.runs.map((run) => { return { @@ -69,17 +73,31 @@ export function MyQuizzes({ loading }: paqProps) { navigate("/quiz/" + selected, { state: { quizId: run.quizId } }); }; + const login = async () => { + navigate("/profile"); + } + return ( <div className="container-mq"> <p className="title">My recent quiz</p> <input type="search" className="inputRecherche" /> - <div className="scrollable-list"> - {isLoading ? ( - <div className="center-loading-spinner-container" /> - ) : ( - <List list={liste} selected={selected} setSelected={setSelected} isLoading={false} /> - )} - </div> + {isConnected ? + <div className="scrollable-list"> + {isLoading ? ( + <div className="center-loading-spinner-container" /> + ) : ( + <List list={liste} selected={selected} setSelected={setSelected} isLoading={false} /> + )} + </div> + : + <div className="scrollable-list"> + <div className="login-container"> + <p>You need to login</p> + <button className="blueButton" onClick={login}>Log in</button> + </div> + </div> + } + <input type="submit" value="PLAY" className="blueButton" onClick={handlePlay} /> </div> );