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

Jump to bottom

FIx UI #60

Merged
merged 4 commits into from
Nov 13, 2024
Merged

FIx UI #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2754b8
Fix queue card clipping
xenosf Nov 13, 2024
0ec7bd3
Fix card widths
xenosf Nov 13, 2024
c514f7a
Tweak questions page UI
xenosf Nov 13, 2024
be88d69
Make log in page usable on narrow screen
xenosf Nov 13, 2024
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
2 changes: 1 addition & 1 deletion client/src/components/HomePage/BasicCard.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading