Skip to content

Commit f561eef

Browse files
DerCedDerCed
committed
Minor fixes
1 parent 41050e4 commit f561eef

File tree

6 files changed

+183
-118
lines changed

6 files changed

+183
-118
lines changed

‎src/components/LandingImage/LandingImage.jsx‎

Lines changed: 106 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,113 @@
1-
'use client'
2-
import {Box, Button, Card, Container, Stack, Typography} from "@mui/material";
3-
import {TypeAnimation} from "react-type-animation";
4-
import Countdown from "./Countdown.jsx";
5-
import {CalendarMonthOutlined, Camera, CameraAlt, LocationOn} from "@mui/icons-material";
6-
import {useEffect, useState} from "react";
7-
import {MeshContainer} from "./MeshContainer/MeshContainer";
1+
"use client";
2+
import { Button, Card, Container, Stack, Typography } from "@mui/material";
3+
import { TypeAnimation } from "react-type-animation";
4+
import { Article, CalendarMonthOutlined } from "@mui/icons-material";
5+
import { useEffect, useState } from "react";
6+
import { MeshContainer } from "./MeshContainer/MeshContainer";
87

98
function LandingImage() {
9+
const [timeLeft, setTimeLeft] = useState(calculateTimeDiff());
1010

11-
const [timeLeft, setTimeLeft] = useState(calculateTimeDiff())
11+
function calculateTimeDiff() {
12+
return new Date(new Date(2025, 2, 21) - new Date());
13+
}
1214

13-
function calculateTimeDiff() {
14-
return new Date(new Date(2025, 2, 21) - new Date())
15-
}
16-
17-
useEffect(() => {
18-
const i = setInterval(() => {
19-
setTimeLeft(calculateTimeDiff())
20-
}, 1000);
21-
return () => clearInterval(i);
22-
}, []); //dependency, if end changes remount
23-
24-
return (
25-
<MeshContainer>
26-
27-
<Container sx={{height: "100%", width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-around", minHeight: "60vh"}}>
28-
<img src={"/HackHPI_white.svg"} width={"150rem"} alt={"HackHPI Logo"}/>
29-
<div>
30-
<Typography sx={{color: "white"}} variant={"h2"} component={"h1"}>
31-
Medical Edition
32-
</Typography>
33-
<Typography variant={"h4"} component={"h2"}>
34-
<TypeAnimation
35-
preRenderFirstString={true}
36-
sequence={[
37-
500,
38-
'For better',
39-
500,
40-
'For better health', // initially rendered starting point
41-
1000,
42-
'For better diagnosis', // initially rendered starting point,
43-
1000,
44-
'For better treatments', // initially rendered starting point
45-
1000,
46-
`See you in ${Math.round(timeLeft / (24 * 60 * 60 * 1000))} Days!`,
47-
10000,
48-
]}
49-
speed={50}
50-
repeat={Infinity}
51-
/>
52-
</Typography>
53-
</div>
54-
<Stack direction={"row"} spacing={3} useFlexGap flexWrap="wrap">
55-
<Button
56-
variant={"contained"}
57-
sx={{
58-
borderWidth: "1rem",
59-
width: "13rem",
60-
height: "3.5rem",
61-
fontSize: "1rem",
62-
}}
63-
color={"primary"}
64-
startIcon={<CameraAlt/>}
65-
onClick={() => document.getElementById("images").scrollIntoView({
66-
behavior: "smooth",
67-
block: "start",
68-
inline: "nearest"
69-
})}
70-
>
71-
Images
72-
</Button>
73-
<Card sx={{height: "3.5rem", justifyContent: "center", display: "flex"}}>
74-
<Stack direction={"row"} alignItems={"center"} display={"flex"}
75-
sx={{height: "100%", paddingRight: "1.25rem", paddingLeft: "1.25rem",}} spacing={2}>
76-
<CalendarMonthOutlined sx={{fontSize: "1.5rem", color: "text.disabled"}}/>
77-
<Typography sx={{fontSize: "1rem"}} color={"text.disabled"} noWrap>
78-
21th - 22th March 2025
79-
</Typography>
80-
</Stack>
81-
</Card>
82-
</Stack>
83-
</Container>
84-
</MeshContainer>
85-
)
15+
useEffect(() => {
16+
const i = setInterval(() => {
17+
setTimeLeft(calculateTimeDiff());
18+
}, 1000);
19+
return () => clearInterval(i);
20+
}, []); //dependency, if end changes remount
8621

22+
return (
23+
<MeshContainer>
24+
<Container
25+
sx={{
26+
height: "100%",
27+
width: "100%",
28+
display: "flex",
29+
flexDirection: "column",
30+
justifyContent: "space-around",
31+
minHeight: "60vh",
32+
}}
33+
>
34+
<img src={"/HackHPI_white.svg"} width={"150rem"} alt={"HackHPI Logo"} />
35+
<div>
36+
<Typography sx={{ color: "white" }} variant={"h2"} component={"h1"}>
37+
Medical Edition
38+
</Typography>
39+
<Typography variant={"h4"} component={"h2"}>
40+
<TypeAnimation
41+
preRenderFirstString={true}
42+
sequence={[
43+
500,
44+
"For better",
45+
500,
46+
"For better health", // initially rendered starting point
47+
1000,
48+
"For better diagnosis", // initially rendered starting point,
49+
1000,
50+
"For better treatments", // initially rendered starting point
51+
1000,
52+
`See you in ${Math.round(timeLeft / (24 * 60 * 60 * 1000))} Days!`,
53+
10000,
54+
]}
55+
speed={50}
56+
repeat={Infinity}
57+
/>
58+
</Typography>
59+
</div>
60+
<Stack direction={"row"} spacing={3} useFlexGap flexWrap="wrap">
61+
<Button
62+
variant={"contained"}
63+
sx={{
64+
borderWidth: "1rem",
65+
width: "13rem",
66+
height: "3.5rem",
67+
fontSize: "1rem",
68+
}}
69+
color={"primary"}
70+
startIcon={<Article />}
71+
onClick={() =>
72+
document.getElementById("signupForm").scrollIntoView({
73+
behavior: "smooth",
74+
block: "start",
75+
inline: "nearest",
76+
})
77+
}
78+
>
79+
Registration
80+
</Button>
81+
<Card
82+
sx={{ height: "3.5rem", justifyContent: "center", display: "flex" }}
83+
>
84+
<Stack
85+
direction={"row"}
86+
alignItems={"center"}
87+
display={"flex"}
88+
sx={{
89+
height: "100%",
90+
paddingRight: "1.25rem",
91+
paddingLeft: "1.25rem",
92+
}}
93+
spacing={2}
94+
>
95+
<CalendarMonthOutlined
96+
sx={{ fontSize: "1.5rem", color: "text.disabled" }}
97+
/>
98+
<Typography
99+
sx={{ fontSize: "1rem" }}
100+
color={"text.disabled"}
101+
noWrap
102+
>
103+
21th - 22th March 2025
104+
</Typography>
105+
</Stack>
106+
</Card>
107+
</Stack>
108+
</Container>
109+
</MeshContainer>
110+
);
87111
}
88112

89-
export default LandingImage
113+
export default LandingImage;

‎src/components/Registration/GroupManager/GroupManager.jsx‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,78 @@ import {
33
Button,
44
Divider,
55
Grid,
6-
IconButton,
76
Stack,
87
TextField,
9-
Tooltip,
108
Typography,
119
} from "@mui/material";
1210
import { LoadingButton } from "@mui/lab";
1311
import { useMemo, useState } from "react";
1412
import { GroupRest } from "../../../rest/GroupRest";
15-
import { Clear } from "@mui/icons-material";
1613

1714
export function GroupManager(props) {
1815
const [loadingNewTeam, setLoadingNewTeam] = useState(false);
19-
const [fetchingExistingTeam, setFetchingNewTeam] = useState(false);
16+
const [fetchingExistingTeam, setFetchingExistingTeam] = useState(false);
2017
const [group, setGroup] = useState(false);
2118
const [groupInput, setGroupInput] = useState("");
19+
const [groupInputError, setGroupInputError] = useState(false);
2220
const groupRest = useMemo(() => new GroupRest(), []);
2321

2422
function createNewGroup() {
2523
setLoadingNewTeam(true);
24+
setGroupInputError(false)
2625
groupRest.createGroup(props.eventId).then((response) => {
2726
setLoadingNewTeam(false);
2827
setGroup(response.data);
2928
});
3029
}
3130

31+
function getGroup() {
32+
setFetchingExistingTeam(true);
33+
setGroupInputError(false)
34+
groupRest
35+
.getGroup(props.eventId, groupInput)
36+
.then((response) => {
37+
setFetchingExistingTeam(false);
38+
setGroup(response.data);
39+
})
40+
.catch((error) => {
41+
setFetchingExistingTeam(false);
42+
setGroupInput("");
43+
setGroupInputError(true);
44+
});
45+
}
46+
3247
function renderGroupSelection() {
3348
return (
3449
<Box sx={{ pt: 5, pb: 5 }}>
35-
<TextField
36-
fullWidth
37-
label={"Enter team name (e.g. chalk-increase-vague)"}
38-
value={groupInput}
39-
onChange={(event) => setGroupInput(event.target.value)}
40-
/>
50+
<Stack direction="row" spacing={2}>
51+
<TextField
52+
fullWidth
53+
label={"Enter team name (e.g. chalk-increase-vague)"}
54+
value={groupInput}
55+
onChange={(event) => setGroupInput(event.target.value)}
56+
error={groupInputError}
57+
helperText={
58+
groupInputError ? "Did not find specified group" : undefined
59+
}
60+
/>
61+
<LoadingButton
62+
variant={"outlined"}
63+
disabled={loadingNewTeam}
64+
loading={fetchingExistingTeam}
65+
onClick={getGroup}
66+
>
67+
Join
68+
</LoadingButton>
69+
</Stack>
4170
<Divider sx={{ pt: 2, pb: 2 }}> or </Divider>
4271
<Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
4372
<LoadingButton
4473
variant={"outlined"}
4574
color={"primary"}
4675
onClick={createNewGroup}
4776
loading={loadingNewTeam}
77+
disabled={fetchingExistingTeam}
4878
>
4979
Create new Team
5080
</LoadingButton>

0 commit comments

Comments
 (0)