Skip to content

Commit e0cb210

Browse files
siyagoyalsiyagoyal
committed
Uses update endpoint from the frontend to update clue count, stage, and show stage pop up
1 parent 10383bd commit e0cb210

File tree

2 files changed

+159
-130
lines changed

2 files changed

+159
-130
lines changed

‎app/dashboard/page.tsx‎

Lines changed: 122 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export default function Dashboard() {
154154
team_id: '',
155155
isLeader: false,
156156
});
157-
const [pendingTeamInvites, setpendingTeamInvites] = useState<any>()
157+
const [pendingTeamInvites, setpendingTeamInvites] = useState<any>();
158158
const [pointsData, setPointsData] = useState<{
159159
balance: number;
160160
total_points: number;
@@ -171,6 +171,11 @@ export default function Dashboard() {
171171
const [teamMember2Errors, setTeamMember2Errors] = useState<string>();
172172
const [teamMember3Errors, setTeamMember3Errors] = useState<string>();
173173
const [pendingteam, setpendingteam] = useState<string>();
174+
const [showStagePopup, setShowStagePopup] = useState(false);
175+
const [prevStage, setPrevStage] = useState<number>(() => {
176+
const saved = localStorage.getItem('stagePopup');
177+
return saved ? parseInt(saved) : 0;
178+
});
174179

175180
const [
176181
displayTeamFormFinalSubmissionWarning,
@@ -410,23 +415,23 @@ export default function Dashboard() {
410415
};
411416

412417
async function fetchTeam() {
413-
try {
414-
setpendingteam(userData?.team_info?.pending_invites[0]?.team_id);
415-
const resp = await ReadConfirmed();
416-
console.log('TEAM');
417-
setTeamInfo(resp.response);
418-
console.log(teamInfo);
419-
const l = await isLeaderCheck(teamInfo?.leader_email)
420-
setTeamStatus({
421-
...teamStatus,
422-
isLeader: l,
423-
});
424-
const resp2 = await ReadPendingOnTeam();
425-
setpendingTeamInvites(resp2.response)
426-
} catch (error) {
427-
console.error('Error fetching or parsing schools data:', error);
428-
}
418+
try {
419+
setpendingteam(userData?.team_info?.pending_invites[0]?.team_id);
420+
const resp = await ReadConfirmed();
421+
console.log('TEAM');
422+
setTeamInfo(resp.response);
423+
console.log(teamInfo);
424+
const l = await isLeaderCheck(teamInfo?.leader_email);
425+
setTeamStatus({
426+
...teamStatus,
427+
isLeader: l,
428+
});
429+
const resp2 = await ReadPendingOnTeam();
430+
setpendingTeamInvites(resp2.response);
431+
} catch (error) {
432+
console.error('Error fetching or parsing schools data:', error);
429433
}
434+
}
430435

431436
const updateTeam = async () => {
432437
let memberstoadd: string[] = [];
@@ -450,7 +455,7 @@ export default function Dashboard() {
450455

451456
if (resp.response != '') {
452457
// Only update the display data after successful submission
453-
fetchTeam()
458+
fetchTeam();
454459
setSubmittingPreEventTeamForm('Saved!');
455460
} else {
456461
setSubmittingPreEventTeamForm('Failed');
@@ -465,8 +470,6 @@ export default function Dashboard() {
465470
}
466471
};
467472

468-
469-
470473
useEffect(() => {
471474
fetchTeam();
472475
}, [userData]);
@@ -585,6 +588,16 @@ export default function Dashboard() {
585588
}
586589
}, [teamInfo]);
587590

591+
useEffect(() => {
592+
if (userData?.stage != null) {
593+
if (userData.stage > prevStage) {
594+
setShowStagePopup(true);
595+
localStorage.setItem('stagePopup', userData.stage.toString());
596+
}
597+
setPrevStage(userData.stage);
598+
}
599+
}, [userData?.stage]);
600+
588601
if (!userData || !userData.role) {
589602
return <HackerDashboardSkeleton />;
590603
}
@@ -824,19 +837,21 @@ export default function Dashboard() {
824837
<Button
825838
onClick={() => {
826839
TeamDisband(teamInfo?.team_id);
827-
fetchTeam()
840+
fetchTeam();
828841
}}
829842
type="button"
830843
className="text-red-400"
831844
>
832845
Disband Team
833846
</Button>
834847
)}
835-
{
836-
pendingTeamInvites && <p>Pending invites sent to
837-
{" " + pendingTeamInvites} </p>
838-
}
839-
{false && teamInfo?.team_id && !(teamStatus.isLeader) && (
848+
{pendingTeamInvites && (
849+
<p>
850+
Pending invites sent to
851+
{' ' + pendingTeamInvites}{' '}
852+
</p>
853+
)}
854+
{false && teamInfo?.team_id && !teamStatus.isLeader && (
840855
<Button
841856
onClick={() => {
842857
LeaveTeam(teamInfo.team_id);
@@ -871,8 +886,7 @@ export default function Dashboard() {
871886
<Button
872887
onClick={() => {
873888
removeMember(teamInfo.members[0]);
874-
fetchTeam()
875-
889+
fetchTeam();
876890
}}
877891
type="button"
878892
className="text-red-400"
@@ -890,8 +904,7 @@ export default function Dashboard() {
890904
<Button
891905
onClick={() => {
892906
removeMember(teamInfo.members[1]);
893-
fetchTeam()
894-
907+
fetchTeam();
895908
}}
896909
type="button"
897910
className="text-red-400"
@@ -909,8 +922,7 @@ export default function Dashboard() {
909922
<Button
910923
onClick={() => {
911924
removeMember(teamInfo.members[2]);
912-
fetchTeam()
913-
925+
fetchTeam();
914926
}}
915927
type="button"
916928
className="text-red-400"
@@ -960,7 +972,7 @@ export default function Dashboard() {
960972
id="team_member_2"
961973
value={teamFormData.team_member_2}
962974
className={teamMember2Errors ? 'border-red-500' : ''}
963-
disabled={!teamStatus.isLeader && teamInfo?.team_id}
975+
disabled={!teamStatus.isLeader && teamInfo?.team_id}
964976
onChange={(e) => {
965977
const email = e.target.value;
966978
setTeamFormData({
@@ -990,7 +1002,7 @@ export default function Dashboard() {
9901002
id="team_member_3"
9911003
value={teamFormData.team_member_3}
9921004
className={teamMember3Errors ? 'border-red-500' : ''}
993-
disabled={!teamStatus.isLeader && teamInfo?.team_id}
1005+
disabled={!teamStatus.isLeader && teamInfo?.team_id}
9941006
onChange={(e) => {
9951007
const email = e.target.value;
9961008
setTeamFormData({
@@ -1075,34 +1087,35 @@ export default function Dashboard() {
10751087
</Card>
10761088
) : (
10771089
<Card>
1078-
<CardHeader>
1079-
<CardTitle>Pending invite {userData?.team_info?.pending_invites[0]?.invited_by}</CardTitle>
1090+
<CardHeader>
1091+
<CardTitle>
1092+
Pending invite{' '}
1093+
{userData?.team_info?.pending_invites[0]?.invited_by}
1094+
</CardTitle>
10801095
</CardHeader>
10811096
<CardContent>
1082-
<Button
1083-
onClick={() => {
1084-
InviteAccept(pendingteam ?? '');
1085-
setpendingteam('');
1086-
fetchTeam()
1087-
1088-
}}
1089-
type="button"
1090-
className="text-green-400"
1091-
>
1092-
Accept invite
1093-
</Button>
1094-
<Button
1095-
onClick={() => {
1096-
InviteDecline(pendingteam ?? '');
1097-
setpendingteam('');
1098-
fetchTeam()
1099-
1100-
}}
1101-
type="button"
1102-
className="text-red-400"
1103-
>
1104-
Decline invite
1105-
</Button>
1097+
<Button
1098+
onClick={() => {
1099+
InviteAccept(pendingteam ?? '');
1100+
setpendingteam('');
1101+
fetchTeam();
1102+
}}
1103+
type="button"
1104+
className="text-green-400"
1105+
>
1106+
Accept invite
1107+
</Button>
1108+
<Button
1109+
onClick={() => {
1110+
InviteDecline(pendingteam ?? '');
1111+
setpendingteam('');
1112+
fetchTeam();
1113+
}}
1114+
type="button"
1115+
className="text-red-400"
1116+
>
1117+
Decline invite
1118+
</Button>
11061119
</CardContent>
11071120
</Card>
11081121
)}
@@ -1128,41 +1141,41 @@ export default function Dashboard() {
11281141
)}
11291142

11301143
{!(userData?.registration_status === 'unregistered') && (
1131-
<>
1132-
<Card className="w-full max-w-2xl">
1133-
<CardHeader>
1134-
<div className="flex flex-col ">
1135-
<div className="flex flex-col">
1136-
<CardTitle>{`QR Code - Shirt Size ${userData?.shirt_size}`}</CardTitle>
1137-
<CardDescription>
1138-
Use this QR code to check-in or scan-in for events!
1139-
</CardDescription>
1144+
<>
1145+
<Card className="w-full max-w-2xl">
1146+
<CardHeader>
1147+
<div className="flex flex-col ">
1148+
<div className="flex flex-col">
1149+
<CardTitle>{`QR Code - Shirt Size ${userData?.shirt_size}`}</CardTitle>
1150+
<CardDescription>
1151+
Use this QR code to check-in or scan-in for events!
1152+
</CardDescription>
1153+
</div>
11401154
</div>
1141-
</div>
1142-
</CardHeader>
1143-
<CardContent>
1144-
<div className="flex flex-col items-center justify-center space-y-4 rounded-md bg-white p-4">
1145-
<QRCode value={userData?.email} size={256} />
1146-
</div>
1147-
</CardContent>
1148-
</Card>
1155+
</CardHeader>
1156+
<CardContent>
1157+
<div className="flex flex-col items-center justify-center space-y-4 rounded-md bg-white p-4">
1158+
<QRCode value={userData?.email} size={256} />
1159+
</div>
1160+
</CardContent>
1161+
</Card>
11491162

1150-
{/* Clue Counter Card */}
1151-
<Card className="w-full max-w-2xl mt-6">
1152-
<CardHeader>
1153-
<CardTitle>Clue Progress</CardTitle>
1154-
<CardDescription>
1155-
Your current clue count and stage progress
1156-
</CardDescription>
1157-
</CardHeader>
1158-
<CardContent>
1159-
<div className="flex justify-between text-lg font-semibold">
1160-
<span>Clue Count: {userData?.clueCount ?? 0}</span>
1161-
<span>Stage: {userData?.stage ?? 0}</span>
1162-
</div>
1163-
</CardContent>
1164-
</Card>
1165-
</>
1163+
{/* Clue Counter Card */}
1164+
<Card className="mt-6 w-full max-w-2xl">
1165+
<CardHeader>
1166+
<CardTitle>Clue Progress</CardTitle>
1167+
<CardDescription>
1168+
Your current clue count and stage progress
1169+
</CardDescription>
1170+
</CardHeader>
1171+
<CardContent>
1172+
<div className="flex justify-between text-lg font-semibold">
1173+
<span>Clue Count: {userData?.clue_count ?? 0}</span>
1174+
<span>Stage: {userData?.stage ?? 0}</span>
1175+
</div>
1176+
</CardContent>
1177+
</Card>
1178+
</>
11661179
)}
11671180

11681181
<Card className="w-full max-w-2xl">
@@ -1738,6 +1751,22 @@ export default function Dashboard() {
17381751
)}
17391752
</form>
17401753
</Card>
1754+
{showStagePopup && (
1755+
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
1756+
<div className="max-w-sm rounded-xl bg-white p-6 text-center shadow-xl">
1757+
<h2 className="mb-2 text-xl font-bold">Stage Updated!</h2>
1758+
<p className="mb-4">
1759+
You’ve advanced to stage {userData?.stage}.
1760+
</p>
1761+
<button
1762+
className="rounded-md bg-blue-600 px-4 py-2 text-white"
1763+
onClick={() => setShowStagePopup(false)}
1764+
>
1765+
Got it
1766+
</button>
1767+
</div>
1768+
</div>
1769+
)}
17411770
</div>
17421771
</main>
17431772
);

0 commit comments

Comments
 (0)