Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix #61

Merged
merged 1 commit into from
Nov 14, 2024
Merged

fix #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 37 additions & 8 deletions client/src/components/HomePage/HomePage.js
View file
Open in desktop
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
Open in desktop
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
Loading