Conversation
WalkthroughAdds a Community app route: a per-route Next.js layout with static metadata, a client-side Community page rendering multiple UI sections, a new data module exporting content arrays, and a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 2❌ Failed checks (2 warnings)
✅ 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 |
There was a problem hiding this comment.
1 issue found across 4 files
Confidence score: 3/5
- There is a concrete user-facing bug risk: three of four explore card links in
frontend/src/app/community/page.tsxpoint to non-existent routes, leading to 404s. - Given the high severity and high confidence issue, this carries some merge risk despite the narrow scope.
- Pay close attention to
frontend/src/app/community/page.tsx- incorrectexploreCardslink paths causing 404s.
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="frontend/src/app/community/page.tsx">
<violation number="1" location="frontend/src/app/community/page.tsx:43">
P1: Three of the four explore card links will result in 404 pages. The `exploreCards` data uses paths like `/community/chapters`, `/community/members`, `/community/organizations`, but these routes don't exist — the actual routes are `/chapters`, `/members`, and `/organizations` (as correctly used in the hero section above). The hrefs in `utils/communityData.ts` need to be updated to match the existing route structure.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@frontend/src/app/community/page.tsx`:
- Around line 20-33: The Link components in community page.tsx (the CTA Links
rendered via the Link component) use hrefs "/chapters" and "/members" which are
inconsistent with the cards in communityData.ts that point to
"/community/chapters" and "/community/members"; update all Link hrefs in the
page (both the top CTAs and the final CTA block rendered by the Link elements
around the Explore Chapters/Meet Members buttons) to use the same
"/community/chapters" and "/community/members" paths so routing is consistent
with the communityData links.
- Line 1: Remove the unnecessary "use client" directive from the top of the
community page component (frontend/src/app/community/page.tsx) so Next.js can
treat the exported page component as a Server Component; locate the top-level
string literal "'use client'" and delete it (the exported page component has no
client-side hooks like useState/useEffect or event handlers), leaving the
component code unchanged otherwise to enable server-side rendering and improve
performance/SEO.
In `@frontend/src/utils/communityData.ts`:
- Around line 1-66: The file only contains static UI copy (exploreCards,
engagementWays, journeySteps) and misses the Community Overview Stats required
by issue `#3862`; add a new exported data structure (e.g., communityStats)
containing keys like totalMembers, activeChapters, and organizations with
initial hardcoded numeric values, and optionally add an exported async helper
(e.g., fetchCommunityStats) that will later fetch real numbers—place these next
to the existing exports so components can import either the static
communityStats or the fetchCommunityStats function to populate the stats
section.
- Line 8: The exploreCards entries currently use the wrong paths with a
`/community` prefix; update the href values in the exploreCards data for the
chapter, member, and organization cards so they point to '/chapters',
'/members', and '/organizations' respectively (leave the snapshots entry as
'/community/snapshots'); locate the exploreCards array in
frontend/src/utils/communityData.ts and change the href strings for the items
labeled for chapters, members, and organizations to remove the '/community'
prefix.
There was a problem hiding this comment.
1 issue found across 1 file (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="frontend/src/utils/communityData.ts">
<violation number="1" location="frontend/src/utils/communityData.ts:32">
P1: Broken link: The Snapshots route is at `/community/snapshots` (see `frontend/src/app/community/snapshots/`), not `/snapshots`. This change will result in a 404 for the Snapshots card. The other three href changes are correct since those routes exist at the top level, but this one should be reverted.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/utils/communityData.ts`:
- Line 32: Update the incorrect route string in
frontend/src/utils/communityData.ts by changing the href value currently set to
'/snapshots' to the correct path '/community/snapshots'; locate the object/entry
in communityData.ts that contains the href property and replace the string so
navigation points to the existing /community/snapshots page.
|
Hi @arkid15r the stats idea i proposed is already implemented on the home page adding the same thing again in the community section would make it redundant the same applies to Recent Issues, New Chapters, and Recent Pull Requests these are already present on the Home page. |
arkid15r
left a comment
There was a problem hiding this comment.
I don't think we have a clear understanding of what this page should look like atm but it's a good start. Perhaps, this page contents will migrate to the main page later, maybe in a bit remixed way. But now it should not just duplicate the main page content and be lightweight -- similar to what you implemented.
As for the feedback:
- we don't use colored icons
- the page has too many buttons/calls to action
- I saw the committees included in one of the parallel PRs
I'm attaching other PRs screenshots for UI ideas
|
Hi @arkid15r i have updated it could you please review Thanks! |
arkid15r
left a comment
There was a problem hiding this comment.
Please run the checks and add tests.
b54742f to
ac9da44
Compare
|
There was a problem hiding this comment.
🧹 Nitpick comments (3)
frontend/src/app/community/page.tsx (2)
130-131: Consider extracting the Slack invite URL to a constants file.Hardcoded URLs are easy to miss when they change. A shared constant (e.g., in a
constants/urls.ts) would make it easier to update and reuse across the codebase.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/app/community/page.tsx` around lines 130 - 131, The Slack invite URL is hardcoded in the anchor href inside the Community page component (page.tsx); extract this string into a shared constant (e.g., export const SLACK_INVITE_URL from a new constants/urls.ts), import SLACK_INVITE_URL in the Community page and replace the literal "https://owasp.org/slack/invite" with that constant, and update any other occurrences to use the same constant so the URL is maintained in one place.
5-5: Confusing import alias:exploreCards as NAV_SECTIONS.The source export is
exploreCards— renaming it toNAV_SECTIONSimplies a navigation-config role that doesn't match the card-rendering context. Use the original name or pick an alias that reflects its purpose (e.g.,resourceCards).Proposed fix
-import { exploreCards as NAV_SECTIONS, engagementWays, journeySteps } from 'utils/communityData' +import { exploreCards, engagementWays, journeySteps } from 'utils/communityData'Then replace
NAV_SECTIONSwithexploreCardsat line 45.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/app/community/page.tsx` at line 5, The import alias `exploreCards as NAV_SECTIONS` is misleading; change the import to keep the original name or a clearer alias (e.g., `resourceCards`) so it reflects card data rather than navigation; update the import statement that currently aliases to NAV_SECTIONS and replace all usages of NAV_SECTIONS in this module (e.g., the render where NAV_SECTIONS is used around line 45) to the chosen name (`exploreCards` or `resourceCards`) so the symbol meaning is consistent.frontend/__tests__/unit/pages/Community.test.tsx (1)
11-18:react-icons/fa6mock is unnecessary.Since
utils/communityDatais fully mocked below (lines 51–77), the real module — and itsfa6imports — is never loaded. This mock block is dead code.Proposed fix
-jest.mock('react-icons/fa6', () => ({ - FaLocationDot: () => <span data-testid="icon-location" />, - FaFolder: () => <span data-testid="icon-folder" />, - FaPeopleGroup: () => <span data-testid="icon-people" />, - FaBuilding: () => <span data-testid="icon-building" />, - FaUsers: () => <span data-testid="icon-users" />, - FaHandshakeAngle: () => <span data-testid="icon-handshake" />, -})) -🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/__tests__/unit/pages/Community.test.tsx` around lines 11 - 18, Remove the unused mock for 'react-icons/fa6' (the jest.mock call that defines FaLocationDot, FaFolder, FaPeopleGroup, FaBuilding, FaUsers, FaHandshakeAngle) because utils/communityData is fully mocked elsewhere so the real module is never imported; simply delete that jest.mock('react-icons/fa6', ...) block to eliminate dead code and rely on the existing mock for utils/communityData.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@frontend/__tests__/unit/pages/Community.test.tsx`:
- Around line 84-95: The test "renders the main page title and intro" currently
asserts link hrefs for "Chapters", "Members", and "Organizations" as
'/chapters', '/members', '/organizations' but the app uses the community-scoped
routes; update the expected hrefs in the Community.test.tsx assertions for the
rendered CommunityPage component to '/community/chapters', '/community/members',
and '/community/organizations' respectively so getByRole('link', { name:
/Chapters|Members|Organizations/i }) checks match the actual routes.
In `@frontend/src/app/community/page.tsx`:
- Line 1: Remove the unnecessary client directive by deleting the top-line "'use
client'" in the community page component (frontend/src/app/community/page.tsx);
ensure the component (the default export in page.tsx) contains no client-only
hooks or event handlers and can safely be a Server Component so Next.js will
render it server-side for better performance and SEO.
- Around line 19-28: The Link hrefs in the community page (the Link elements in
frontend/src/app/community/page.tsx) use /chapters, /members, /organizations
while the explore cards in communityData.ts use the /community/* prefixed
routes; make them consistent by updating either the Link hrefs in page.tsx or
the route fields in communityData.ts so both use the same base path (e.g.,
change the Link hrefs to /community/chapters, /community/members,
/community/organizations or update communityData entries to remove the
/community prefix), and verify the Explore card rendering uses the same property
names (the route/path field) you adjusted.
---
Nitpick comments:
In `@frontend/__tests__/unit/pages/Community.test.tsx`:
- Around line 11-18: Remove the unused mock for 'react-icons/fa6' (the jest.mock
call that defines FaLocationDot, FaFolder, FaPeopleGroup, FaBuilding, FaUsers,
FaHandshakeAngle) because utils/communityData is fully mocked elsewhere so the
real module is never imported; simply delete that jest.mock('react-icons/fa6',
...) block to eliminate dead code and rely on the existing mock for
utils/communityData.
In `@frontend/src/app/community/page.tsx`:
- Around line 130-131: The Slack invite URL is hardcoded in the anchor href
inside the Community page component (page.tsx); extract this string into a
shared constant (e.g., export const SLACK_INVITE_URL from a new
constants/urls.ts), import SLACK_INVITE_URL in the Community page and replace
the literal "https://owasp.org/slack/invite" with that constant, and update any
other occurrences to use the same constant so the URL is maintained in one
place.
- Line 5: The import alias `exploreCards as NAV_SECTIONS` is misleading; change
the import to keep the original name or a clearer alias (e.g., `resourceCards`)
so it reflects card data rather than navigation; update the import statement
that currently aliases to NAV_SECTIONS and replace all usages of NAV_SECTIONS in
this module (e.g., the render where NAV_SECTIONS is used around line 45) to the
chosen name (`exploreCards` or `resourceCards`) so the symbol meaning is
consistent.



Proposed change
Implemented a Community Overview stats section to provide basic context and make the Community page more informative.
Resolves #3862
Screencast.from.2026-02-16.18-36-15.webm
Co-authored by: @Mr-Rahul-Paul
Checklist
make check-testlocally: all warnings addressed, tests passed