Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@guowei42
guowei42 committed Nov 14, 2024
1 parent 0164240 commit 9304f5a
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 146 deletions.
45 changes: 37 additions & 8 deletions client/src/components/HomePage/HomePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,36 @@ 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" }}>
<QueueCard />
</Grid2>
<Grid2
item
xs={12}
md={7}
container
spacing={2}
direction="column"
sx={{
alignItems: "center",
justifyContent: "center",
}}
>
<Grid2
item
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "30vw",
}}
>
<QueueCard />
</Grid2>

<Grid2 item xs={12} md={7} container spacing={2}>
<Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 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 @@ -30,7 +51,11 @@ function HomePage() {
/>
</Grid2>

<Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 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 @@ -41,7 +66,11 @@ function HomePage() {
/>
</Grid2>

<Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 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 Down
280 changes: 154 additions & 126 deletions client/src/components/HomePage/QueueCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ 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 @@ -86,10 +85,14 @@ 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 @@ -108,7 +111,9 @@ 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 @@ -167,78 +172,118 @@ function QueueCard() {
}, [activeStep, questionCategories]);

return (
<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
}}
<Card
variant="outlined"
sx={{
display: "flex",
flexDirection: "column",
flex: "1 1 auto",
borderRadius: "16px",
height: "40vh",
width: "100%",
}}
>
<CardContent>
<Stepper activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</CardContent>
<Divider />
<CardContent sx={{ flex: "1 1 auto", overflowY: "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
>
<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 && (
<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 && (
<Box
sx={{
display: "flex",
Expand All @@ -248,61 +293,44 @@ function QueueCard() {
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>
<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}>
Retry
</Button>
)}
{!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 && (
{!queueLoading &&
queueState.status !== "timeout" &&
!collaborationSocket.connected && (
<div>
<Button variant="contained" onClick={handleStartQueue}>
Retry
Start
</Button>
)}
{!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>
</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>
);
}

Expand Down
Loading

0 comments on commit 9304f5a

Please sign in to comment.