From d2754b8791ce5ab7e4a243380b201c667cca71a7 Mon Sep 17 00:00:00 2001 From: "Xenos F." Date: Thu, 14 Nov 2024 04:40:04 +0800 Subject: [PATCH 1/4] Fix queue card clipping --- client/src/components/HomePage/QueueCard.js | 280 +++++++++----------- 1 file changed, 126 insertions(+), 154 deletions(-) diff --git a/client/src/components/HomePage/QueueCard.js b/client/src/components/HomePage/QueueCard.js index 0730f8df39..2873772689 100644 --- a/client/src/components/HomePage/QueueCard.js +++ b/client/src/components/HomePage/QueueCard.js @@ -14,6 +14,7 @@ import { Typography, styled, } from "@mui/material"; +import Grid from '@mui/material/Grid2'; import { toggleButtonGroupClasses } from "@mui/material/ToggleButtonGroup"; import axios from "axios"; import { useEffect, useState } from "react"; @@ -85,14 +86,10 @@ function QueueCard() { const getCategories = async () => { setLoading(true); try { - const response = await axios.get( - `${SVC_ENDPOINTS.question}/questions/categories/unique` - ); + const response = await axios.get(`${SVC_ENDPOINTS.question}/questions/categories/unique`); if (response.status === 200) { console.log(response.data.map((x) => x.category)); - setQuestionCategories( - Array.from(response.data.map((x) => x.category)).sort() - ); + setQuestionCategories(Array.from(response.data.map((x) => x.category)).sort()); } } catch (error) { console.log(error); @@ -111,9 +108,7 @@ function QueueCard() { clearInterval(timer); const timerId = setInterval(() => { - setProgress((prevProgress) => - prevProgress <= 0 ? 0 : Math.max(0, prevProgress - 10 / 3) - ); + setProgress((prevProgress) => (prevProgress <= 0 ? 0 : Math.max(0, prevProgress - 10 / 3))); }, 1000); setTimer(timerId); const cookies = new Cookies(); @@ -172,118 +167,78 @@ function QueueCard() { }, [activeStep, questionCategories]); return ( - - - - {steps.map((label) => ( - - {label} - - ))} - - - - - {activeStep === 0 && ( - - + + + + {steps.map((label) => ( + + {label} + + ))} + + + + + {activeStep === 0 && ( + - - Easy - - - Medium - - - Hard - - - - )} - {activeStep === 1 && ( - - {loading ? ( - - ) : ( - - {questionCategories.map((category, index) => { - return ( - - {category} - - ); - })} - - )} - - )} - {activeStep === 2 && ( - - {queueLoading && ( - - Finding You A Match! :D - - - - - - )} - {!queueLoading && queueState.status === "timeout" && ( - No Match Found! D: - )} - {queueLoading || - (collaborationSocket.connected && ( + + + Easy + + + Medium + + + Hard + + + + )} + {activeStep === 1 && ( + + {loading ? ( + + ) : ( + + {questionCategories.map((category, index) => { + return ( + + {category} + + ); + })} + + )} + + )} + {activeStep === 2 && ( + + {queueLoading && ( - Start -

Please end all ongoing session before matching again!

+ Finding You A Match! :D + + + +
- ))} - {!queueLoading && - queueState.status === "timeout" && - !collaborationSocket.connected && ( - )} - {!queueLoading && - queueState.status !== "timeout" && - !collaborationSocket.connected && ( -
+ {!queueLoading && queueState.status === "timeout" && ( + No Match Found! D: + )} + {queueLoading || + (collaborationSocket.connected && ( + + Start +

Please end all ongoing session before matching again!

+
+ ))} + {!queueLoading && + queueState.status === "timeout" && + !collaborationSocket.connected && ( -
- )} -
- )} - {error && {error}} -
- - - {activeStep < steps.length - 1 && ( - - )} - -
+ )} + {!queueLoading && + queueState.status !== "timeout" && + !collaborationSocket.connected && ( +
+ +
+ )} + + )} + {error && {error}} + + + + {activeStep < steps.length - 1 && } + + + ); } From 0ec7bd372240dac1a21449a33b804fe549e72b5a Mon Sep 17 00:00:00 2001 From: "Xenos F." Date: Thu, 14 Nov 2024 04:48:31 +0800 Subject: [PATCH 2/4] Fix card widths --- client/src/components/HomePage/BasicCard.js | 2 +- client/src/components/HomePage/HomePage.js | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/client/src/components/HomePage/BasicCard.js b/client/src/components/HomePage/BasicCard.js index 77f926e211..8b72419826 100644 --- a/client/src/components/HomePage/BasicCard.js +++ b/client/src/components/HomePage/BasicCard.js @@ -21,7 +21,7 @@ export default function BasicCard({ return ( - - + - + - + + Date: Thu, 14 Nov 2024 04:54:08 +0800 Subject: [PATCH 3/4] Tweak questions page UI --- .../components/QuestionPage/QuestionPage.js | 49 +++++++++---------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/client/src/components/QuestionPage/QuestionPage.js b/client/src/components/QuestionPage/QuestionPage.js index e23c1f5c7e..22149d03fc 100644 --- a/client/src/components/QuestionPage/QuestionPage.js +++ b/client/src/components/QuestionPage/QuestionPage.js @@ -1,11 +1,5 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; -import { - Box, - Button, - Stack, - ToggleButton, - ToggleButtonGroup, -} from "@mui/material"; +import { Box, Button, Stack, ToggleButton, ToggleButtonGroup, Grid2 } from "@mui/material"; import Accordion from "@mui/material/Accordion"; import AccordionDetails from "@mui/material/AccordionDetails"; import AccordionSummary from "@mui/material/AccordionSummary"; @@ -70,9 +64,7 @@ function QuestionPage() { - - Description: {wholeQuestion[1].description} - + Description: {wholeQuestion[1].description} Category: {wholeQuestion[1].categories} @@ -100,19 +92,19 @@ function QuestionPage() { }; const handleDeleteSuccess = (deletedQuestionId) => { - setQuestionList((prevList) => - prevList.filter((q) => q._id !== deletedQuestionId) - ); + setQuestionList((prevList) => prevList.filter((q) => q._id !== deletedQuestionId)); }; return ( - <> - + + View questions @@ -120,7 +112,14 @@ function QuestionPage() { Add question - + {formType === "add" ? ( setFormType("view")} /> ) : formType === "update" ? ( @@ -129,9 +128,7 @@ function QuestionPage() { selectedQuestion={selectedQuestion} onUpdateSuccess={(updatedQuestion) => { setQuestionList((prevList) => - prevList.map((q) => - q._id === updatedQuestion._id ? updatedQuestion : q - ) + prevList.map((q) => (q._id === updatedQuestion._id ? updatedQuestion : q)) ); }} onDeleteSuccess={handleDeleteSuccess} @@ -139,8 +136,8 @@ function QuestionPage() { ) : (
{accordionList}
)} -
- +
+
); } From be88d6939e47142b2ab06678056b82486f12d08c Mon Sep 17 00:00:00 2001 From: "Xenos F." Date: Thu, 14 Nov 2024 05:02:19 +0800 Subject: [PATCH 4/4] Make log in page usable on narrow screen --- client/src/components/Login/LoginWrapper.js | 32 ++++++++++++--------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/client/src/components/Login/LoginWrapper.js b/client/src/components/Login/LoginWrapper.js index 2f43e42d33..4d4b565be6 100644 --- a/client/src/components/Login/LoginWrapper.js +++ b/client/src/components/Login/LoginWrapper.js @@ -1,4 +1,4 @@ -import { Box, Stack, styled, TextField } from "@mui/material"; +import { Grid2, Box, styled, TextField } from "@mui/material"; import { ReactComponent as Background } from "../../assets/background.svg"; import { ReactComponent as Logo } from "../../assets/logo.svg"; @@ -11,8 +11,9 @@ export const LoginBox = styled(Box)({ position: "relative", flexDirection: "column", justifyContent: "space-evenly", - height: "580px", - width: "455px", + minHeight: "580px", + minWidth: "455px", + height: "100%", alignItems: "center", backgroundColor: "#E7E2E2", borderRadius: "10px", @@ -20,15 +21,20 @@ export const LoginBox = styled(Box)({ function LoginWrapper({ children }) { return ( - - {children} - - + + {children} + + + @@ -43,8 +49,8 @@ function LoginWrapper({ children }) { > - - +
+
); }