Conversation
…o 396-table-number-check-in
There was a problem hiding this comment.
Pull request overview
Refactors the hacker “Table Number Check-in” modal to replace the previous single-flow UI with a multi-stage experience intended to work across desktop and mobile.
Changes:
- Replaces the old
TableNumberCheckinimplementation and SCSS module styling with a staged component flow (Init → Devpost → Loading → Confirm) using utility classes. - Updates the table lookup hook API (
useTableNumber) and how the team/devpost number is passed into the query. - Updates/removes legacy SVG assets and adds new UI assets/icons for the staged experience.
Reviewed changes
Copilot reviewed 7 out of 18 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| public/hackers/table-number-checkin/stars.svg | Removes unused legacy illustration asset. |
| public/hackers/table-number-checkin/sleeping-frog.svg | Removes unused legacy illustration asset. |
| public/hackers/table-number-checkin/mascots-hanging-out.svg | Removes unused legacy illustration asset. |
| public/hackers/table-number-checkin/diag-arrow.svg | Removes unused legacy icon asset. |
| public/hackers/table-number-checkin/map.svg | Adds new map icon for the confirm stage. |
| public/hackers/table-number-checkin/loading.svg | Adds new loading illustration for the loading stage. |
| public/hackers/table-number-checkin/end-of-hackathon.svg | Adds new illustration for the init stage. |
| public/hackers/table-number-checkin/check.svg | Adds new check icon for confirm action. |
| public/hackers/table-number-checkin/arrow-right.svg | Adds new arrow icon used in stage CTAs. |
| app/(pages)/_hooks/useTableNumber.ts | Changes table lookup to accept a string team number (currently impacts query behavior). |
| app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx | Replaces old modal rendering with staged components and new UI flow. |
| app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.module.scss | Removes legacy SCSS module styles. |
| app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx | Adds init stage UI/CTA. |
| app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx | Adds Devpost number entry stage. |
| app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx | Adds loading stage UI. |
| app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx | Adds confirmation stage UI including map link and confirmation CTA. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx
Outdated
Show resolved
Hide resolved
app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 17 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx
Outdated
Show resolved
Hide resolved
app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 17 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {stage === 'devpost' && ( | ||
| <DevpostStage | ||
| teamNumber={teamNumber} | ||
| error={error} | ||
| onChange={setTeamNumber} | ||
| onSubmit={handleTeamNumberSubmit} | ||
| onBack={() => setHasClickedNext(false)} | ||
| /> |
There was a problem hiding this comment.
error from useTableNumber is used to switch DevpostStage copy, but there’s no way to clear it when navigating back to the init screen or resetting the flow. This can cause the Devpost stage to show the error state immediately on re-entry even before a new lookup attempt. Consider adding a resetError/clearError helper to useTableNumber (or local hasSubmitted state to gate the error UI) and call it in handleReset/onBack/onNext transitions.
| lookupDelayTimeoutRef.current = setTimeout(() => { | ||
| void (async () => { | ||
| try { | ||
| await fetchTableNumber(Number(teamNumber)); | ||
| } catch { | ||
| // avoid unhandled rejections | ||
| } finally { | ||
| setIsDelayingLookup(false); | ||
| lookupDelayTimeoutRef.current = null; | ||
| } |
There was a problem hiding this comment.
fetchTableNumber can throw (e.g., if getManyTeams rejects) and in that case the hook never reaches setLoading(false). This component catches and suppresses the error, which can leave loading stuck true and keep the UI in the loading stage indefinitely. Consider updating useTableNumber.fetchTableNumber to use try/finally to always clear loading, and optionally propagate a controlled error state instead of swallowing exceptions here.
Summary