Robust tab visibility and gating#428
Conversation
|
@legend4tech is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughFilters hackathon tabs against currentHackathon.enabledTabs, maps UI tab ids to backend keys, prevents rendering of disabled tab components, redirects URL-requested disabled tabs to Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant Router as Router
participant HackClient as HackathonPageClient
participant Tabs as TabComponents
Browser->>Router: Navigate with ?tab=someTab
Router->>HackClient: provide query param
HackClient->>HackClient: compute filteredTabs = tabs ∩ enabledTabs
alt requested tab in filteredTabs
HackClient->>Tabs: render requested tab component
else requested tab NOT in filteredTabs
HackClient->>Router: router.replace(?tab=overview)
HackClient->>Tabs: render overview tab component
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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)/hackathons/[slug]/HackathonPageClient.tsx:
- Around line 170-185: The filtering currently skips when enabledTabs is an
empty array and compares tab.id to enabledTabs entries which are actually tab
keys; update the logic in the currentHackathon.enabledTabs branch so that you
run the filter whenever enabledTabs is not null/undefined (i.e., check
currentHackathon?.enabledTabs !== undefined rather than length>0), and inside
tabs.filter use the actual tab key property (e.g., tab.key or whichever field
holds values like "joinATeamTab"/"winnersTab") instead of tab.id, casting to
EnabledTab as needed so an empty array will hide all non-overview tabs and
enabledTabs entries correctly match tab identifiers.
In `@package.json`:
- Line 150: package.json currently lists "eslint" at 9.39.2 which conflicts with
the new "@eslint/js@10.0.1" peer requirement; update the "eslint" dependency in
package.json to a v10 range (e.g. "eslint": "^10.0.0") so it satisfies
`@eslint/js`'s peer dependency, then run npm/yarn install and verify
eslint.config.mjs imports work as expected; reference the "eslint" entry in
package.json and the "@eslint/js" dependency when making the change.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
app/(landing)/hackathons/[slug]/HackathonPageClient.tsxpackage.json
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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)/hackathons/[slug]/HackathonPageClient.tsx:
- Around line 300-314: The useEffect handling searchParams currently ignores the
case when there is no 'tab' param, which can leave activeTab stale; update the
effect in HackathonPageClient (the useEffect that reads searchParams and uses
hackathonTabs) to setActiveTab('overview') when tabFromUrl is null or empty, and
ensure the URL is synchronized by creating a URLSearchParams copy, setting
tab=overview and calling router.replace(`?${queryParams.toString()}`, { scroll:
false }); keep the existing branch that validates tabFromUrl against
hackathonTabs and the fallback for unrecognised/disabled tabs.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
app/(landing)/hackathons/[slug]/HackathonPageClient.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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)/hackathons/[slug]/HackathonPageClient.tsx:
- Around line 174-177: The tabIdToEnabledKey mapping is incomplete and must
include UI ids that differ from backend keys; update the tabIdToEnabledKey
Record used in HackathonPageClient.tsx (currently containing 'team-formation'
and 'winners') to also map 'resources' -> 'resourcesTab', 'participants' ->
'participantsTab', 'announcements' -> 'announcementsTab', 'submission' ->
'submissionTab', and 'discussions' -> 'discussionTab' so the fallback logic
(around the existing enabledTabs lookup) correctly finds the backend enabledTabs
keys.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
app/(landing)/hackathons/[slug]/HackathonPageClient.tsx
Benjtalkshow
left a comment
Benjtalkshow
left a comment
There was a problem hiding this comment.
Remove the pnpm-lock.yaml. The codebase uses npm
GM GM |
2 participants
Robust Tab Visibility & Gating
Closes #403
What changed
Ensured that tabs not explicitly enabled in
enabledTabsare completely hidden from every navigation surface and are entirely unreachable whether through normal navigation, direct URL entry, browser history, or stale deep links.How it works
Navigation Filtering
hackathonTabsuseMemo to filter the tabs array againstcurrentHackathon.enabledTabsbefore returningoverviewis always kept as the default fallback tabenabledTabsis undefined/null (not configured), all tabs show as before , no existing behaviour brokencurrentHackathon.enabledTabsis included in the memo's dependency array so tabs update dynamically when the configuration changes without a hard reloadComponent Guards
isTabVisible()helper that checks if a tab ID exists in the filteredhackathonTabsarrayHackathonResources,AnnouncementsTab,SubmissionTab,HackathonDiscussions,TeamFormationTab,WinnersTab,HackathonParticipants) in anisTabVisible()check — disabled tab components never mount at all, not even partiallyHackathonResourcesrender that existed in the original codeDeep Link Gating
useEffectto callsetActiveTab('overview')androuter.replacewhen the URL tab is not in the filtered listrouter.replace(notpush) so the disabled tab URL does not persist in browser historytabIdsstring fromhackathonTabsinstead of passing the array directly into theuseEffectdependency arrayMobile Navigation
HackathonNavTabsrenders only what is passed via thetabsprop — no internal tab listHackathonPageClientpasses the already-filteredhackathonTabsas the prop, mobile and desktop navigation are automatically in sync with zero extra changes neededFiles changed
app/(landing)/hackathons/[slug]/HackathonPageClient.tsxSummary by CodeRabbit
New Features
Bug Fixes