Repository navigation
fix(dashboard): load guild selector data across authenticated shell - #162
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for regal-bunny-0c8efe ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe frontend shell now initializes guild selection on authenticated routes globally, populating the server selector immediately after login. This change replaces the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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: 1
🧹 Nitpick comments (1)
packages/frontend/src/components/Layout/Layout.test.tsx (1)
94-98: Exercise the bootstrap side effect, not the mocked hook call.Because
useGuildSelectionis mocked at Line 8, Line 97 only proves thatLayoutinvokes the mock. The actual bootstrap lives insidepackages/frontend/src/hooks/useGuildSelection.ts, so this test would still pass iffetchGuilds()stopped running there. Please keep the real hook for this case and assert the fetch/select side effect at the store or API boundary instead.As per coding guidelines, "Test behavior, not implementation details."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/components/Layout/Layout.test.tsx` around lines 94 - 98, The test currently only verifies the mocked hook was invoked; instead restore the real hook implementation for this spec (remove or jest.unmock the test-level mock of useGuildSelection) so the bootstrap side effect in useGuildSelection runs, then renderLayout('/') and assert the observable effect of that bootstrap (e.g., that fetchGuilds was called or that the guild store/state was populated) rather than checking useGuildSelection was called; update assertions to check fetchGuilds or the store/API boundary (e.g., mock the network call and expect it to be requested or assert the store contains the selected guild) and keep renderLayout/Layout in the test to trigger the behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@CHANGELOG.md`:
- Around line 32-34: Update the changelog entry that reads "Frontend shell now
initializes guild selection on all authenticated routes, so the server selector
is populated right after login instead of only after visiting pages that
manually triggered guild loading" to include the related PR or issue reference
(for example append " (PR `#162`)" or a linked issue ID) so the entry follows repo
conventions; edit CHANGELOG.md and add the exact PR/issue identifier next to
that bullet.
---
Nitpick comments:
In `@packages/frontend/src/components/Layout/Layout.test.tsx`:
- Around line 94-98: The test currently only verifies the mocked hook was
invoked; instead restore the real hook implementation for this spec (remove or
jest.unmock the test-level mock of useGuildSelection) so the bootstrap side
effect in useGuildSelection runs, then renderLayout('/') and assert the
observable effect of that bootstrap (e.g., that fetchGuilds was called or that
the guild store/state was populated) rather than checking useGuildSelection was
called; update assertions to check fetchGuilds or the store/API boundary (e.g.,
mock the network call and expect it to be requested or assert the store contains
the selected guild) and keep renderLayout/Layout in the test to trigger the
behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1942d793-03ff-4db7-a619-a831ddbc020d
📒 Files selected for processing (4)
CHANGELOG.mdREADME.mdpackages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Quality Gates
- GitHub Check: SonarCloud Scan
🧰 Additional context used
📓 Path-based instructions (20)
{CHANGELOG.md,README.md}
📄 CodeRabbit inference engine (.cursor/rules/agent-rules.mdc)
ALWAYS update CHANGELOG.md and README.md as changes are made.
Files:
README.mdCHANGELOG.md
README.md
📄 CodeRabbit inference engine (.cursor/rules/templates-examples.mdc)
README.md must be updated if behavior changed
Update README.md if behavior changed
Files:
README.md
CHANGELOG.md
📄 CodeRabbit inference engine (.cursor/rules/templates-examples.mdc)
CHANGELOG.md must be updated with all changes in pull requests
Always update CHANGELOG.md with all code changes
Update CHANGELOG.md with all changes, include breaking changes documentation, and reference issues and PRs
Files:
CHANGELOG.md
{CHANGELOG.md,docs/**}
📄 CodeRabbit inference engine (.cursor/rules/lucky-project.mdc)
Update
CHANGELOG.mdand relevantdocs/files when behavior or setup changes
Files:
CHANGELOG.md
**/*.{js,jsx,ts,tsx,vue,html}
📄 CodeRabbit inference engine (.cursor/rules/accessibility-openness.mdc)
Provide accessible UI components using semantic HTML and ARIA attributes where necessary
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/dependency-injection.mdc)
**/*.{ts,tsx,js,jsx}: Prefer constructor injection for classes that require dependencies
Avoid global mutable singletons unless necessary
Use explicit interfaces for external dependencies to make testing easier
**/*.{ts,tsx,js,jsx}: Include required references in PRs/code for non-trivial logic: TypeScript (official docs), MDN (JavaScript reference), and official docs for any runtime/framework/libraries used (e.g., Node.js, React) as applicable.
Before assuming behavior of an API, include the doc link and a ≤25-word quote when the change relies on it.
**/*.{ts,tsx,js,jsx}: Prefer named exports for clear usage and easier refactors in TypeScript/JavaScript
Keep import order consistent: external first, then internal modules
Remove dead code and unused imports
**/*.{ts,tsx,js,jsx}: Use PascalCase naming convention for React/UI components
Use camelCase naming convention for variables and functions
Use UPPER_SNAKE_CASE naming convention for constants
Maintain consistent import grouping and ordering within the project, keeping third-party imports separate from local imports
For external data sources (HTTP, database), always validate and sanitize input using type guards or schema validators
**/*.{ts,tsx,js,jsx}: Use Prettier with no semicolons, single quotes, 4-space indent, 80 character width
Files must not exceed 250 lines and this is enforcedImplement TypeScript typecheck and linter in CI quality checks
**/*.{ts,tsx,js,jsx}: Use TypeScript for enhanced type safety
Implement error handling and error logging
Avoid commenting code unless extremely necessary - code should explain itself with descriptive names
Leave NO todos, placeholders or missing pieces in the code
Variables and functions must use camelCase
Constants must use UPPER_SNAKE_CASE
Use arrow functions for methods and computed properties
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Maintain consistent import grouping/order: external imports first, then...
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
**/*.{js,jsx,ts,tsx}: Never throw strings. ThrowError(or typed subclasses) with descriptive messages
Include causal error ascausewhen available for better debugging
Define clear, stable error codes (e.g.,ERR_AUTH_EXPIRED,ERR_NETWORK_TIMEOUT)
Provide optional metadata (e.g.,details,retryable,status,correlationId) in error objects
Use domain error classes per area (e.g.,AuthenticationError,ValidationError,NetworkError)
Log errors with structure (message, code, stack, cause, correlationId, user context where appropriate)
MarkretryablevsnonRetryableerrors where helpful for operations
Set timeouts and handle aborts/cancellations; avoid dangling requests in API/network code
Implement backoff for transient failures; avoid infinite retries
Map HTTP status → domain errors; 4xx vs 5xx behave differently (e.g., retry for 5xx/network)
**/*.{js,jsx,ts,tsx}: Use functional components with hooks in React/React Native. Avoid class components.
Keep components focused on a single responsibility; extract complex logic into custom hooks.
Keep state local when possible. Use Context/Zustand/Redux only when necessary for state management.
If props or state traverse more than 3 levels, consider using context or a feature-scoped store instead of prop drilling.
Use performance optimization techniques:React.memo,useMemo,useCallback,Suspense(web), and virtualization for long lists; avoid unnecessary re-renders.
Web accessibility: use semantic HTML, labels, focus management, keyboard navigation, andaria-*attributes as needed.
React Native accessibility: use accessibility props (accessible,accessibilityLabel), proper roles and labels.
Identify and extract repetitive UI components proactively tocomponents/with clear props and minimal coupling.
Web styles: prefer co-located styles or design system tokens; avoid global style leakage.
React Native styles: preferStyleSheet.create, design tokens, and theme providers; avoid in...
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
**/*.{jsx,tsx}: Use toasts/snackbars for transient errors; avoid blocking modals for non-critical issues in React/React Native UI
Debounce/suppress duplicate toasts to prevent spam
Provide retry/refresh actions when meaningful (e.g., network failure) in error UI
Use error boundaries for render-time exceptions; show fallback UI in React
Respect accessibility: toasts should be announced (aria-live on web; accessibility hints on React Native)
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend.mdc)
**/*.{test,spec}.{js,jsx,ts,tsx}: Test behavior, not implementation. Prefer Testing Library utilities for testing React/React Native components.
For React Native tests: mock native modules and test component interactions and accessibility labels.
Files:
packages/frontend/src/components/Layout/Layout.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/pattern.mdc)
Introduce interfaces at module boundaries to enable testing and substitutions
**/*.{ts,tsx}: Avoid usinganytype in TypeScript. If unavoidable, useunknownwith type guards and justify with a code comment
Preferinterfacefor defining public object shapes in TypeScript, usetypefor unions and utility types
Use TypeScript utility types such asPartial,Pick,Omit,Readonly, andRecordwhen appropriate
UseI{Name}naming convention for interfaces in TypeScript
UseT{Name}naming convention for type aliases and utility types in TypeScript
**/*.{ts,tsx}: Functions must be less than 50 lines with cyclomatic complexity less than 10
Do not useanytypes - ESLint enforces this at error level
**/*.{ts,tsx}: Prefer types over interfaces for most cases
Don't ever useany- type safety always
Avoid enums; use const objects instead
For complex types, create a separate file to declare them and import them
Avoid usinganytype; if unavoidable, useunknownwith type guards and justify with code comment
Preferinterfacefor public API shapes; usetypefor unions and utility types
Use TypeScript utility types (Partial, Pick, Omit, Readonly, Record)
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{test,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/pattern.mdc)
**/*.{test,spec}.{ts,tsx,js,jsx}: Test behavior, not implementation details
Prefer unit tests for core logic; add integration tests at meaningful boundaries
Files:
packages/frontend/src/components/Layout/Layout.test.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/testing-quality.mdc)
**/*.{test,spec}.{js,ts,jsx,tsx}: Use Jest + a React testing library for unit and component tests as applicable
Test behavior, not implementation details
Files:
packages/frontend/src/components/Layout/Layout.test.tsx
packages/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/frontend/src/**/*.{ts,tsx}: Frontend errors are created by Axios interceptor and should be of typeApiErrorwith status and details from backend
Frontend uses path alias@/mapped tosrc/- use this alias for all imports from the src directoryDo not depend on
@lucky/sharedpackage in frontend code; make API calls to backend via configured base URL (env)
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/documentation.mdc)
**/*.{js,ts,tsx,jsx}: Minimize comments in code; explain the 'why' when non-obvious, let code express the 'what' through clear naming
Document trade-offs briefly when deviating from ideal patterns
**/*.{js,ts,tsx,jsx}: Store secrets, ports, and hosts in environment variables (.env,.env.example) and never hardcode them
Avoid redundant or decorative AI comments; code should be self-explanatory and only commented when logic is non-obvious; prefer refactoring over lengthy comments
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
packages/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/lucky-frontend.mdc)
Organize UI components in
packages/frontend/src/components/directory
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
packages/frontend/src/{components,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/lucky-frontend.mdc)
Use React functional components and hooks; keep components small and focused
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
packages/frontend/src/{components,pages}/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/lucky-frontend.mdc)
Follow existing styling approach (e.g., Tailwind if present); avoid inline styles for layout and theming
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
packages/frontend/**
📄 CodeRabbit inference engine (.cursor/rules/lucky-project.mdc)
The
frontendpackage uses React with Vite and must not depend on the shared package
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
**/*.{spec,test}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/quality.mdc)
**/*.{spec,test}.{ts,tsx,js,jsx}: Use Jest for unit and integration tests
Test behavior, not implementation details
Run unit, integration tests, and coverage report in CI quality checks
Files:
packages/frontend/src/components/Layout/Layout.test.tsx
**/[A-Z]*.{ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
Components must use PascalCase naming
Files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
🧠 Learnings (6)
📚 Learning: 2026-03-09T20:20:56.345Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/lucky-frontend.mdc:0-0
Timestamp: 2026-03-09T20:20:56.345Z
Learning: Applies to packages/frontend/src/**/*.{ts,tsx} : Do not depend on `lucky/shared` package in frontend code; make API calls to backend via configured base URL (env)
Applied to files:
README.md
📚 Learning: 2026-03-09T20:21:58.981Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/subagent-frontend.mdc:0-0
Timestamp: 2026-03-09T20:21:58.981Z
Learning: Keep frontend code scoped to `packages/frontend`; communicate with backend via `services/api.ts` using the configured env base URL; do not access shared database or Redis directly
Applied to files:
README.md
📚 Learning: 2026-03-09T20:21:08.600Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/lucky-project.mdc:0-0
Timestamp: 2026-03-09T20:21:08.600Z
Learning: Applies to packages/backend/** : The `backend` package depends on `shared` and contains Express API with auth and guild routes
Applied to files:
CHANGELOG.md
📚 Learning: 2026-03-09T20:20:56.345Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/lucky-frontend.mdc:0-0
Timestamp: 2026-03-09T20:20:56.345Z
Learning: Applies to packages/frontend/src/{components,pages}/**/*.{ts,tsx} : Use React functional components and hooks; keep components small and focused
Applied to files:
packages/frontend/src/components/Layout/Layout.test.tsxpackages/frontend/src/components/Layout/Layout.tsx
📚 Learning: 2026-03-09T20:22:47.441Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-09T20:22:47.441Z
Learning: For unit tests and Jest ESM mocks, use the `testing-lucky` skill
Applied to files:
packages/frontend/src/components/Layout/Layout.test.tsx
📚 Learning: 2026-03-09T20:20:38.683Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/lucky-backend-api.mdc:0-0
Timestamp: 2026-03-09T20:20:38.683Z
Learning: Applies to packages/backend/src/routes/**/*.{ts,tsx} : Structure routes in `packages/backend/src/routes/` directory with separate files for auth, guilds, toggles, and index routes
Applied to files:
packages/frontend/src/components/Layout/Layout.tsx
|
Size Change: 0 B Total Size: 293 kB ℹ️ View Unchanged
|
|
|
…162) * fix(frontend): load guild selection in shared layout * chore(frontend): address dashboard fix review feedback
This branch was successfully deployed
1 participant
Summary
/Layoutso guild list is fetched immediately after loginProduction Reproduction Evidence
GET /api/guildsreturns admin guilds with mixedhasBotvalues for the authenticated sessionNo admin servers found) before this fix because global guild bootstrap was missingValidation
npm run test --workspace=packages/frontend -- src/components/Layout/Layout.test.tsx src/components/Layout/Sidebar.test.tsx src/services/api.test.ts src/pages/LastFm.test.tsxnpm run type:check --workspace=packages/frontendnpm run lint --workspace=packages/frontendnpm run build:frontendSummary by CodeRabbit
Release Notes