Skip to content

Commit 32fe751

Browse files
jayantkagerijayantkageri
authored
Handle Edgecase in Timer component (#92)
* add condition * add whatsapp * add const * Handle Edge Case
1 parent b9a4ff8 commit 32fe751

1 file changed

Lines changed: 93 additions & 39 deletions

File tree

‎components/registration/deadline-timer.tsx‎

Lines changed: 93 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,13 @@ interface DeadlineTimerProps {
3939
onRsvpExpiredChange?: (expired: boolean) => void;
4040
}
4141

42-
function ShellWrap({ children, glow }: { children: React.ReactNode; glow?: boolean }) {
42+
function ShellWrap({
43+
children,
44+
glow,
45+
}: {
46+
children: React.ReactNode;
47+
glow?: boolean;
48+
}) {
4349
return (
4450
<div className="relative w-full rounded-lg card-surface border border-[var(--border-soft)]">
4551
<HudFrame cornerSize="md" intensity="strong" />
@@ -48,7 +54,15 @@ function ShellWrap({ children, glow }: { children: React.ReactNode; glow?: boole
4854
);
4955
}
5056

51-
const TimeBox = ({ value, label, big = false }: { value: number; label: string; big?: boolean }) => (
57+
const TimeBox = ({
58+
value,
59+
label,
60+
big = false,
61+
}: {
62+
value: number;
63+
label: string;
64+
big?: boolean;
65+
}) => (
5266
<div
5367
className={[
5468
"flex flex-col items-center justify-center flex-1 min-w-0",
@@ -112,14 +126,17 @@ export function DeadlineTimer({
112126
rsvpStatus = "pending",
113127
onRsvpExpiredChange,
114128
}: DeadlineTimerProps) {
115-
const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(null);
129+
const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(
130+
null,
131+
);
116132
const [deadline, setDeadline] = useState<Date | null>(null);
117133
const [isExpired, setIsExpired] = useState(false);
118134
const [isLoading, setIsLoading] = useState(true);
119135
const [serverOffset, setServerOffset] = useState(0);
120136
const [error, setError] = useState(false);
121137
const [rsvpDeadline, setRsvpDeadline] = useState<Date | null>(null);
122-
const [rsvpTimeRemaining, setRsvpTimeRemaining] = useState<TimeRemaining | null>(null);
138+
const [rsvpTimeRemaining, setRsvpTimeRemaining] =
139+
useState<TimeRemaining | null>(null);
123140
const [isRsvpExpired, setIsRsvpExpired] = useState(false);
124141

125142
// Report the RSVP deadline's live expiry status up so the status strip
@@ -226,16 +243,19 @@ export function DeadlineTimer({
226243
teamStatus === "shortlisted" ||
227244
teamStatus === "rsvped";
228245
const hasRejectedEvaluation = evaluations.some((e) => e.tier === "rejected");
229-
const notSelected = isExpired && hasTeam && !isShortlisted && isShortlistAnnounced();
246+
const notSelected =
247+
isExpired && hasTeam && !isShortlisted && isShortlistAnnounced();
230248

231249
const getHeaderIcon = () => {
232250
if (notSelected) return <XCircle className="w-4 h-4 text-ink-muted" />;
233251
if (isExpired && hasTeam && isEvaluated) {
234-
if (hasRejectedEvaluation) return <XCircle className="w-4 h-4 text-ink-muted" />;
252+
if (hasRejectedEvaluation)
253+
return <XCircle className="w-4 h-4 text-ink-muted" />;
235254
if (isShortlisted) return <Trophy className="w-4 h-4 text-brand" />;
236255
return <AlertTriangle className="w-4 h-4 text-[var(--warning)]" />;
237256
}
238-
if (isExpired) return <AlertTriangle className="w-4 h-4 text-[var(--warning)]" />;
257+
if (isExpired)
258+
return <AlertTriangle className="w-4 h-4 text-[var(--warning)]" />;
239259
if (submitted) return <CheckCircle2 className="w-4 h-4 text-brand" />;
240260
return <Clock className="w-4 h-4 text-ink-secondary" />;
241261
};
@@ -275,10 +295,12 @@ export function DeadlineTimer({
275295
notSelected ? (
276296
<>
277297
<p className="text-[14px] text-ink-secondary font-body text-center max-w-[42ch]">
278-
Unfortunately, your team wasn&apos;t shortlisted for PBCTF 5.0.
298+
Unfortunately, your team wasn&apos;t shortlisted for PBCTF
299+
5.0.
279300
</p>
280301
<p className="text-[12.5px] text-ink-muted font-body text-center max-w-[42ch]">
281-
Thank you for participating. We&apos;d love to have you at our{" "}
302+
Thank you for participating. We&apos;d love to have you at
303+
our{" "}
282304
<a
283305
href="https://pointblank.club/events"
284306
target="_blank"
@@ -294,10 +316,12 @@ export function DeadlineTimer({
294316
hasRejectedEvaluation ? (
295317
<>
296318
<p className="text-[14px] text-ink-secondary font-body text-center max-w-[42ch]">
297-
Unfortunately, your team was not selected for the next round.
319+
Unfortunately, your team was not selected for the next
320+
round.
298321
</p>
299322
<p className="text-[12.5px] text-ink-muted font-body text-center max-w-[42ch]">
300-
Thank you for participating. We&apos;d love to have you at our{" "}
323+
Thank you for participating. We&apos;d love to have you at
324+
our{" "}
301325
<a
302326
href="https://pointblank.club/events"
303327
target="_blank"
@@ -312,55 +336,83 @@ export function DeadlineTimer({
312336
) : isShortlisted ? (
313337
<>
314338
{rsvpStatus === "confirmed" && (
315-
<RsvpStatusBadge status="confirmed" message="RSVP Confirmed. See you at the event." />
339+
<RsvpStatusBadge
340+
status="confirmed"
341+
message="RSVP Confirmed. See you at the event."
342+
/>
316343
)}
317344
{rsvpStatus === "declined" && (
318-
<RsvpStatusBadge status="declined" message="You have declined participation." />
319-
)}
320-
{(rsvpStatus === "confirmed" || rsvpStatus === "declined") && !isRsvpExpired && (
321-
<p className="text-[11.5px] text-ink-muted font-body text-center max-w-[44ch]">
322-
Changed your mind? You can update above until the RSVP deadline.
323-
</p>
345+
<RsvpStatusBadge
346+
status="declined"
347+
message="You have declined participation."
348+
/>
324349
)}
350+
{(rsvpStatus === "confirmed" ||
351+
rsvpStatus === "declined") &&
352+
!isRsvpExpired && (
353+
<p className="text-[11.5px] text-ink-muted font-body text-center max-w-[44ch]">
354+
Changed your mind? You can update above until the RSVP
355+
deadline.
356+
</p>
357+
)}
325358
{rsvpStatus === "pending" && (
326359
<p className="text-[12.5px] text-ink-secondary font-body text-center max-w-[44ch]">
327-
Use the status panel above to confirm or decline your participation.
360+
Use the status panel above to confirm or decline your
361+
participation.
328362
</p>
329363
)}
330364

331365
{/* Once confirmed there's nothing left to act on, so the
332366
countdown only matters while a response can still change. */}
333-
{rsvpStatus !== "confirmed" && rsvpTimeRemaining && !isRsvpExpired && (
334-
<div className="w-full mt-1">
335-
<p className="font-mono text-[10px] text-ink-muted text-center mb-2.5 uppercase tracking-[0.2em]">
336-
RSVP Deadline
337-
</p>
338-
<div className="flex justify-center gap-2 w-full">
339-
<TimeBox value={rsvpTimeRemaining.days} label="Days" />
340-
<TimeBox value={rsvpTimeRemaining.hours} label="Hours" />
341-
<TimeBox value={rsvpTimeRemaining.minutes} label="Mins" />
342-
<TimeBox value={rsvpTimeRemaining.seconds} label="Secs" />
367+
{rsvpStatus !== "confirmed" &&
368+
rsvpTimeRemaining &&
369+
!isRsvpExpired && (
370+
<div className="w-full mt-1">
371+
<p className="font-mono text-[10px] text-ink-muted text-center mb-2.5 uppercase tracking-[0.2em]">
372+
RSVP Deadline
373+
</p>
374+
<div className="flex justify-center gap-2 w-full">
375+
<TimeBox
376+
value={rsvpTimeRemaining.days}
377+
label="Days"
378+
/>
379+
<TimeBox
380+
value={rsvpTimeRemaining.hours}
381+
label="Hours"
382+
/>
383+
<TimeBox
384+
value={rsvpTimeRemaining.minutes}
385+
label="Mins"
386+
/>
387+
<TimeBox
388+
value={rsvpTimeRemaining.seconds}
389+
label="Secs"
390+
/>
391+
</div>
343392
</div>
344-
</div>
345-
)}
393+
)}
346394

347395
{isRsvpExpired && (
348396
<p className="text-[12px] text-[var(--warning)] font-medium font-body text-center max-w-[44ch] mt-1">
349397
RSVP deadline has passed
350398
{rsvpDeadline
351-
? ` (${new Date(rsvpDeadline).toLocaleString("en-IN", {
352-
dateStyle: "medium",
353-
timeStyle: "short",
354-
timeZone: "Asia/Kolkata",
355-
})} IST)`
399+
? ` (${new Date(rsvpDeadline).toLocaleString(
400+
"en-IN",
401+
{
402+
dateStyle: "medium",
403+
timeStyle: "short",
404+
timeZone: "Asia/Kolkata",
405+
},
406+
)} IST)`
356407
: ""}
357408
</p>
358409
)}
359410
</>
360411
) : (
361412
<>
362413
<p className="text-[12.5px] text-ink-muted font-body text-center max-w-[44ch]">
363-
The registration deadline has passed. No new registrations are being accepted.
414+
The registration deadline has passed. No new registrations
415+
are being accepted.
364416
</p>
365417
<p className="text-[14px] text-ink-secondary font-medium font-body text-center">
366418
Results will be out soon.
@@ -370,7 +422,8 @@ export function DeadlineTimer({
370422
) : (
371423
<>
372424
<p className="text-[12.5px] text-ink-muted font-body text-center max-w-[44ch]">
373-
The registration deadline has passed. No new registrations are being accepted.
425+
The registration deadline has passed. No new registrations
426+
are being accepted.
374427
</p>
375428
<p className="text-[14px] text-ink-secondary font-medium font-body text-center">
376429
Results will be out soon.
@@ -379,7 +432,8 @@ export function DeadlineTimer({
379432
)
380433
) : (
381434
<p className="text-[12.5px] text-ink-muted font-body text-center max-w-[44ch]">
382-
The submission deadline has passed. No new submissions are being accepted.
435+
The submission deadline has passed. No new submissions are being
436+
accepted.
383437
</p>
384438
)}
385439
</div>

0 commit comments

Comments
 (0)