Conversation
…sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources.
…ment, and dynamic tab visibility.
…ance messaging features across hackathon components
|
@Benjtalkshow is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR refactors participant and submission filtering by introducing client-side filtering layers with debounced search, React Table pagination integration, and normalizes submission status values from lowercase to UPPERCASE across the codebase. It removes the 'WITHDRAWN' status option and enriches type definitions for richer context and stronger typing. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can disable poems in the walkthrough.Disable the |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
hooks/hackathon/use-organizer-submissions.ts (1)
54-104:⚠️ Potential issue | 🟠 MajorAdd
filters.statusandfilters.typetofetchSubmissionscallback dependencies, then depend onfetchSubmissionsin the effect.
fetchSubmissionscloses overfilters(lines 62-65) but theuseCallbackdependency array (line 98) omitsfilters.statusandfilters.type. When these filter fields change, the effect (lines 102-104) re-runs but calls a stale callback closure that still reads the previous filter values, causing the API request to use outdated filters. Additionally, the effect callsfetchSubmissionsbut doesn't include it in its dependency array (line 104).🔧 Suggested dependency fix
const fetchSubmissions = useCallback( async (page = 1, filterOverrides?: OrganizerSubmissionFilters) => { @@ - [hackathonId, initialLimit, debouncedSearch, pagination.limit] + [ + hackathonId, + initialLimit, + debouncedSearch, + pagination.limit, + filters.status, + filters.type, + ] ); // Sync with backend on filter/pagination changes useEffect(() => { - fetchSubmissions(1); - }, [debouncedSearch, filters.status, filters.type, pagination.limit]); + void fetchSubmissions(1); + }, [fetchSubmissions]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@hooks/hackathon/use-organizer-submissions.ts` around lines 54 - 104, fetchSubmissions is closing over filters (specifically filters.status and filters.type) but its useCallback deps only list hackathonId, initialLimit, debouncedSearch, and pagination.limit, and the useEffect calls fetchSubmissions without depending on the callback; update the useCallback dependency array for fetchSubmissions to include filters.status and filters.type (in addition to the existing deps) so it captures the latest filter values, and update the useEffect dependency array to depend on fetchSubmissions (instead of listing debouncedSearch/filters individually) or include fetchSubmissions alongside debouncedSearch, filters.status, filters.type, and pagination.limit so the effect invokes the latest callback.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@app/`(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx:
- Around line 76-98: Remove the "as any" casts in the filteredSubmissions
computation and where filters/updateFilters are cast; instead import and use the
proper submission type (e.g., ParticipantSubmission) returned by
useOrganizerSubmissions, update the property accesses in the filter callback to
match that type's real shape (replace subData.projectName /
subData.participant?.name / subData.participant?.username /
subData.participationType with the actual field names on ParticipantSubmission),
and update the filters types to use the typed filters from
useOrganizerSubmissions (remove casts around filters and updateFilters); in
short, fix the type/shape mismatch by aligning the filter logic in
filteredSubmissions and the call sites with the real API model rather than
silencing TypeScript with any.
In `@lib/api/organization.ts`:
- Line 280: Remove the noisy debug stack trace in getOrganization by deleting
the console.trace('org') call; if you need lightweight diagnostics instead,
replace it with a structured logger call (e.g., logger.debug or
processLogger.debug) that logs a simple message or relevant metadata without
emitting a full stack trace, ensuring the change is applied inside the
getOrganization function where console.trace was used.
---
Outside diff comments:
In `@hooks/hackathon/use-organizer-submissions.ts`:
- Around line 54-104: fetchSubmissions is closing over filters (specifically
filters.status and filters.type) but its useCallback deps only list hackathonId,
initialLimit, debouncedSearch, and pagination.limit, and the useEffect calls
fetchSubmissions without depending on the callback; update the useCallback
dependency array for fetchSubmissions to include filters.status and filters.type
(in addition to the existing deps) so it captures the latest filter values, and
update the useEffect dependency array to depend on fetchSubmissions (instead of
listing debouncedSearch/filters individually) or include fetchSubmissions
alongside debouncedSearch, filters.status, filters.type, and pagination.limit so
the effect invokes the latest callback.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8a056d48-9e53-425e-ae5e-9539b935cbf8
📒 Files selected for processing (6)
app/(landing)/organizations/[id]/hackathons/[hackathonId]/participants/page.tsxapp/(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsxcomponents/organization/hackathons/submissions/SubmissionsManagement.tsxhooks/hackathon/use-organizer-submissions.tshooks/use-hackathons.tslib/api/organization.ts
app/(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx (1)
94-119: React Table configuration is unnecessary overhead.The
useReactTableinstance is created solely to pass toDataTablePagination, but:
columns: []means no column definitions- The table doesn't render any rows itself
SubmissionsManagementhandles the actual data displaySince pagination is already managed by
useOrganizerSubmissions(viagoToPage,updateLimit, andpaginationstate), consider using the existing pagination controls withinSubmissionsManagementor creating a simpler pagination component that doesn't require a full React Table instance.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx around lines 94 - 119, The useReactTable call (useReactTable) creating an empty table for DataTablePagination is unnecessary; remove the table creation and instead wire DataTablePagination (or SubmissionsManagement) directly to the existing pagination controls from useOrganizerSubmissions: pass pagination.page, pagination.totalPages, pagination.limit and the handlers goToPage and updateLimit (or implement a small Pagination component that calls goToPage/updateLimit) so you can delete the table variable and any references to columns: [], getCoreRowModel, manualPagination and onPaginationChange; ensure SubmissionsManagement receives or renders the simple pagination props instead of relying on a React Table instance.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@app/`(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx:
- Around line 75-119: The frontend is filtering only the current page
(filteredSubmissions via useMemo over allSubmissions) causing pagination
mismatch (pagination.totalPages stays backend total); remove the client-side
filtering and feed the table the backend-provided data directly so server-side
filters are authoritative: delete the filteredSubmissions useMemo and change
useReactTable data from filteredSubmissions to allSubmissions (keep pagination
state and onPaginationChange), and ensure filters from the UI are passed to the
existing useOrganizerSubmissions/getHackathonSubmissions so the backend returns
properly filtered pages.
---
Nitpick comments:
In
`@app/`(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx:
- Around line 94-119: The useReactTable call (useReactTable) creating an empty
table for DataTablePagination is unnecessary; remove the table creation and
instead wire DataTablePagination (or SubmissionsManagement) directly to the
existing pagination controls from useOrganizerSubmissions: pass pagination.page,
pagination.totalPages, pagination.limit and the handlers goToPage and
updateLimit (or implement a small Pagination component that calls
goToPage/updateLimit) so you can delete the table variable and any references to
columns: [], getCoreRowModel, manualPagination and onPaginationChange; ensure
SubmissionsManagement receives or renders the simple pagination props instead of
relying on a React Table instance.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 250aa6f7-316f-4bbd-a599-4372b209126d
📒 Files selected for processing (9)
app/(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsxcomponents/hackathons/submissions/SubmissionDetailModal.tsxcomponents/organization/cards/Participant.tsxcomponents/organization/hackathons/ParticipantsGrid.tsxcomponents/organization/hackathons/ParticipantsTable.tsxhooks/hackathon/use-organizer-submissions.tshooks/hackathon/use-register-hackathon.tshooks/use-submission-actions.tslib/api/hackathons.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- hooks/hackathon/use-organizer-submissions.ts
| // Frontend-side filtering | ||
| const filteredSubmissions = useMemo(() => { | ||
| return allSubmissions.filter(sub => { | ||
| const search = filters.search?.toLowerCase() || ''; | ||
| const matchesSearch = search | ||
| ? (sub.projectName || '').toLowerCase().includes(search) || | ||
| (sub.participant?.name || '').toLowerCase().includes(search) || | ||
| (sub.participant?.username || '').toLowerCase().includes(search) | ||
| : true; | ||
|
|
||
| const matchesStatus = !filters.status || sub.status === filters.status; | ||
|
|
||
| const matchesType = | ||
| !filters.type || sub.participationType === filters.type; | ||
|
|
||
| return matchesSearch && matchesStatus && matchesType; | ||
| }); | ||
| }, [allSubmissions, filters.search, filters.status, filters.type]); | ||
|
|
||
| const table = useReactTable({ | ||
| data: filteredSubmissions, | ||
| columns: [], | ||
| getCoreRowModel: getCoreRowModel(), | ||
| manualPagination: true, | ||
| pageCount: pagination.totalPages, | ||
| state: { | ||
| pagination: { | ||
| pageIndex: pagination.page - 1, | ||
| pageSize: pagination.limit, | ||
| }, | ||
| }, | ||
| onPaginationChange: updater => { | ||
| if (typeof updater === 'function') { | ||
| const newState = updater({ | ||
| pageIndex: pagination.page - 1, | ||
| pageSize: pagination.limit, | ||
| }); | ||
| if (newState.pageSize !== pagination.limit) { | ||
| updateLimit(newState.pageSize); | ||
| } else { | ||
| goToPage(newState.pageIndex + 1); | ||
| } | ||
| } | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Frontend filtering only operates on the current page, not the full dataset.
The current implementation has a fundamental mismatch between filtering and pagination:
allSubmissionscontains only the current page's data from the backend (e.g., 10 items)filteredSubmissionsfilters within this single pagepagination.totalPagesreflects the backend's total (e.g., 50 pages)DataTablePaginationdisplays "Page 1 of 50" even when filtered results are empty
This creates confusing UX where users search for a term, see "0 results" on the current page, but pagination still shows 50 pages available. Navigating to another page fetches fresh backend data, making the filter appear to reset.
The backend already supports server-side filtering via getHackathonSubmissions(hackathonId, page, limit, filters). The useOrganizerSubmissions hook already passes filters.search, filters.status, and filters.type to the API. The frontend filtering layer here is redundant and creates the pagination mismatch.
Consider removing the frontend filteredSubmissions layer and relying entirely on the existing server-side filtering:
🔧 Suggested approach
- // Frontend-side filtering
- const filteredSubmissions = useMemo(() => {
- return allSubmissions.filter(sub => {
- const search = filters.search?.toLowerCase() || '';
- const matchesSearch = search
- ? (sub.projectName || '').toLowerCase().includes(search) ||
- (sub.participant?.name || '').toLowerCase().includes(search) ||
- (sub.participant?.username || '').toLowerCase().includes(search)
- : true;
-
- const matchesStatus = !filters.status || sub.status === filters.status;
-
- const matchesType =
- !filters.type || sub.participationType === filters.type;
-
- return matchesSearch && matchesStatus && matchesType;
- });
- }, [allSubmissions, filters.search, filters.status, filters.type]);
// ... in render:
<SubmissionsManagement
- submissions={filteredSubmissions}
+ submissions={allSubmissions}
// ... rest of props
/>This ensures filtering and pagination are both handled server-side, providing accurate page counts and complete dataset filtering.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@app/`(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx
around lines 75 - 119, The frontend is filtering only the current page
(filteredSubmissions via useMemo over allSubmissions) causing pagination
mismatch (pagination.totalPages stays backend total); remove the client-side
filtering and feed the table the backend-provided data directly so server-side
filters are authoritative: delete the filteredSubmissions useMemo and change
useReactTable data from filteredSubmissions to allSubmissions (keep pagination
state and onPaginationChange), and ensure filters from the UI are passed to the
existing useOrganizerSubmissions/getHackathonSubmissions so the backend returns
properly filtered pages.
There was a problem hiding this comment.
Yea but the backend doesnt have filters implemented. We only implemented pagination and page size
There was a problem hiding this comment.
@Benjtalkshow, thanks for the clarification — that context makes the frontend filtering approach make total sense.
There is still a smaller residual issue worth noting: when filters are active, useReactTable still receives pageCount: pagination.totalPages (the server's unfiltered total). This means if a filter reduces the visible results to, say, 3 items on the current page, the pagination control will still display "Page 1 of 50" — because the backend total hasn't changed.
A minimal fix would be to compute a local page count based on the filtered results for display purposes:
const filteredPageCount = Math.max(1, Math.ceil(filteredSubmissions.length / pagination.limit));
const table = useReactTable({
data: filteredSubmissions,
columns: [],
getCoreRowModel: getCoreRowModel(),
manualPagination: true,
pageCount: filters.search || filters.status || filters.type
? filteredPageCount // local estimate when filters are active
: pagination.totalPages, // server total when no filters
// ...rest unchanged
});This keeps the server-driven pagination when there are no active filters, and falls back to a locally-derived page count when filters narrow the results. It's not perfect (since filtering only covers the loaded page), but it avoids the confusing "0 results — Page 1 of 50" display.
That said, this is a known trade-off with client-side filtering over paginated data. If the datasets stay small enough to load all at once in the future, a full client-side approach (no server pagination + useMemo filter) would eliminate the ambiguity entirely.
✏️ Learnings added
Learnt from: Benjtalkshow
Repo: boundlessfi/boundless PR: 488
File: app/(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx:75-119
Timestamp: 2026-03-16T13:16:41.680Z
Learning: In the `app/(landing)/organizations/[id]/hackathons/[hackathonId]/submissions/page.tsx` file and related submissions hooks/components, the backend API (`getHackathonSubmissions`) only supports pagination and page size — it does NOT support server-side filtering (search, status, type). Frontend filtering via `useMemo` over `allSubmissions` is intentional and necessary as a workaround for this backend limitation.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
* feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>
* fix: fix prize teirs place * fix: fix prize teirs place * Pr 486 (#488) * feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com> * Pr 486 (#490) * feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type * fix: enhanced filtering for organizations * fix: fix coderabbit corrections --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com> --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>
* fix: fix prize teirs place * fix: fix prize teirs place * Pr 486 (#488) * feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com> * Pr 486 (#490) * feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type * fix: enhanced filtering for organizations * fix: fix coderabbit corrections --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com> * fix: sync production with main changes --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>
* Pr 486 (#488) * feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com> * Pr 486 (#490) * feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources. * fix: update coderabit * feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility. * feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components * fix: fix pagination issues in particiapants and submissions page for organizers * fix: remove any type * fix: enhanced filtering for organizations * fix: fix coderabbit corrections --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com> --------- Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>
Summary by CodeRabbit
New Features
Improvements