Skip to content

Commit

Permalink
Merge pull request #60 from xenosf/ui-fix
Browse files Browse the repository at this point in the history 
FIx UI
  • Loading branch information
@xenosf
xenosf authored Nov 13, 2024
2 parents 356b9ef + be88d69 commit 5ecb9f3
Show file tree
Hide file tree
Showing 5 changed files with 174 additions and 200 deletions.
2 changes: 1 addition & 1 deletion client/src/components/HomePage/BasicCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function BasicCard({
return (
<Card
sx={{
minWidth: 275,
minWidth: 300,
flex: "1 1 auto",
display: "flex",
flexDirection: "column",
Expand Down
11 changes: 5 additions & 6 deletions client/src/components/HomePage/HomePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,15 @@ function HomePage() {
justifyContent: "center",
}}
>

<Grid2 item xs={12} md={7} container spacing={2} direction="column">
<Grid2 item xs={12} md={5} container spacing={2} direction="column">
<Grid2 item sx={{display: "flex", alignItems: "center", justifyContent:"center"}}>
<Grid2 item sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<QueueCard />
</Grid2>
</Grid2>

<Grid2 item xs={12} md={7} container spacing={2}>
<Grid2 item size={4} sx={{display: "flex"}}>
<Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 4 }} sx={{ display: "flex" }}>
<BasicCard
title="View All Questions"
description="View all the questions you can attempt."
Expand All @@ -31,7 +30,7 @@ function HomePage() {
/>
</Grid2>

<Grid2 item size={4} sx={{display: "flex"}}>
<Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 4 }} sx={{ display: "flex" }}>
<BasicCard
title="Past Question Attempts"
description="View your previous question attempts and
Expand All @@ -42,7 +41,7 @@ function HomePage() {
/>
</Grid2>

<Grid2 item size={4} sx={{display: "flex"}}>
<Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 4 }} sx={{ display: "flex" }}>
<BasicCard
title="Previous Matches"
description="Enjoyed collaborating with someone? View
Expand All @@ -59,4 +58,4 @@ function HomePage() {
);
}

export default HomePage;
export default HomePage;
280 changes: 126 additions & 154 deletions client/src/components/HomePage/QueueCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand All @@ -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();
Expand Down Expand Up @@ -172,118 +167,78 @@ function QueueCard() {
}, [activeStep, questionCategories]);

return (
<Card
variant="outlined"
sx={{
display: "flex",
flexDirection: "column",
flex: "1 1 auto",
maxWidth: "30vw",
height: "30vh",
borderRadius: "16px",
}}
>
<CardContent>
<Stepper activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</CardContent>
<Divider />
<CardContent sx={{ flex: "1 1 auto" }}>
{activeStep === 0 && (
<Box
sx={{
display: "flex",
justifyContent: "center", // Centers horizontally
alignItems: "center", // Centers vertically
height: "100%", // Ensures full height for vertical centering
}}
>
<ToggleButtonGroup
value={difficulty}
onChange={handleDifficultyChange}
exclusive
<Grid
size={{ xs: 12, s: 10, sm: 8, md: 6, lg: 4 }}>
<Card
variant="outlined"
sx={{
display: "flex",
flexDirection: "column",
flex: "1 1 auto",
borderRadius: "16px",
}}
>
<CardContent>
<Stepper activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</CardContent>
<Divider />
<CardContent sx={{ flex: "1 1 auto" }}>
{activeStep === 0 && (
<Box
sx={{
display: "flex",
justifyContent: "center", // Centers horizontally
alignItems: "center", // Centers vertically
height: "100%", // Ensures full height for vertical centering
}}
>
<ToggleButton
value={DIFFICULTY.easy}
aria-label={DIFFICULTY.easy}
>
Easy
</ToggleButton>
<ToggleButton
value={DIFFICULTY.medium}
aria-label={DIFFICULTY.medium}
>
Medium
</ToggleButton>
<ToggleButton
value={DIFFICULTY.hard}
aria-label={DIFFICULTY.hard}
>
Hard
</ToggleButton>
</ToggleButtonGroup>
</Box>
)}
{activeStep === 1 && (
<Box>
{loading ? (
<CircularProgress />
) : (
<CustomToggleGroup
value={topic}
onChange={handleTopicChange}
exclusive
>
{questionCategories.map((category, index) => {
return (
<ToggleButton key={`cat${index}`} value={category}>
{category}
</ToggleButton>
);
})}
</CustomToggleGroup>
)}
</Box>
)}
{activeStep === 2 && (
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
{queueLoading && (
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
<Typography variant="h4">Finding You A Match! :D</Typography>
<Divider />
<CircularWithValueLabel value={progress} />
<Divider />
<Button color="error" variant="contained" onClick={handleEnd}>
Cancel
</Button>
</Box>
)}
{!queueLoading && queueState.status === "timeout" && (
<Typography variant="h4">No Match Found! D:</Typography>
)}
{queueLoading ||
(collaborationSocket.connected && (
<ToggleButtonGroup value={difficulty} onChange={handleDifficultyChange} exclusive>
<ToggleButton value={DIFFICULTY.easy} aria-label={DIFFICULTY.easy}>
Easy
</ToggleButton>
<ToggleButton value={DIFFICULTY.medium} aria-label={DIFFICULTY.medium}>
Medium
</ToggleButton>
<ToggleButton value={DIFFICULTY.hard} aria-label={DIFFICULTY.hard}>
Hard
</ToggleButton>
</ToggleButtonGroup>
</Box>
)}
{activeStep === 1 && (
<Box>
{loading ? (
<CircularProgress />
) : (
<CustomToggleGroup value={topic} onChange={handleTopicChange} exclusive>
{questionCategories.map((category, index) => {
return (
<ToggleButton key={`cat${index}`} value={category}>
{category}
</ToggleButton>
);
})}
</CustomToggleGroup>
)}
</Box>
)}
{activeStep === 2 && (
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
{queueLoading && (
<Box
sx={{
display: "flex",
Expand All @@ -293,44 +248,61 @@ function QueueCard() {
height: "100%",
}}
>
<BlurredButton variant="contained">Start</BlurredButton>
<p>Please end all ongoing session before matching again!</p>
<Typography variant="h4">Finding You A Match! :D</Typography>
<Divider />
<CircularWithValueLabel value={progress} />
<Divider />
<Button color="error" variant="contained" onClick={handleEnd}>
Cancel
</Button>
</Box>
))}
{!queueLoading &&
queueState.status === "timeout" &&
!collaborationSocket.connected && (
<Button variant="contained" onClick={handleStartQueue}>
Retry
</Button>
)}
{!queueLoading &&
queueState.status !== "timeout" &&
!collaborationSocket.connected && (
<div>
{!queueLoading && queueState.status === "timeout" && (
<Typography variant="h4">No Match Found! D:</Typography>
)}
{queueLoading ||
(collaborationSocket.connected && (
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
<BlurredButton variant="contained">Start</BlurredButton>
<p>Please end all ongoing session before matching again!</p>
</Box>
))}
{!queueLoading &&
queueState.status === "timeout" &&
!collaborationSocket.connected && (
<Button variant="contained" onClick={handleStartQueue}>
Start
Retry
</Button>
</div>
)}
</Box>
)}
{error && <Typography color="error">{error}</Typography>}
</CardContent>
<CardActions sx={{ justifyContent: "space-between" }}>
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
{activeStep < steps.length - 1 && (
<Button onClick={handleNext}>Next</Button>
)}
</CardActions>
</Card>
)}
{!queueLoading &&
queueState.status !== "timeout" &&
!collaborationSocket.connected && (
<div>
<Button variant="contained" onClick={handleStartQueue}>
Start
</Button>
</div>
)}
</Box>
)}
{error && <Typography color="error">{error}</Typography>}
</CardContent>
<CardActions sx={{ justifyContent: "space-between" }}>
<Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
Back
</Button>
{activeStep < steps.length - 1 && <Button onClick={handleNext}>Next</Button>}
</CardActions>
</Card>
</Grid>
);
}

Expand Down
Loading

0 comments on commit 5ecb9f3

Please sign in to comment.