Conversation
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
📝 WalkthroughWalkthroughMigrates community member types to generated API models, adds NetworkPageLayout and mobile sort/dialog components, removes several sidebar components, simplifies sidebar layout logic, updates helpers and UI (xTDH/TDH), extends OpenAPI schemas, and adjusts/rewrites many related tests. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant NetworkPageLayout
participant NextSearchParams
participant ReduxStore
Browser->>NetworkPageLayout: mount (first render)
NetworkPageLayout->>NextSearchParams: read "group" param
NextSearchParams-->>NetworkPageLayout: group id (if present)
NetworkPageLayout->>ReduxStore: select activeGroupId
alt group present and different
NetworkPageLayout->>ReduxStore: dispatch setActiveGroupId(group)
end
NetworkPageLayout-->>Browser: render children (after init)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 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
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: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
components/groups/select/GroupsSelectActiveGroup.tsx (1)
60-66: Remove unnecessary Effect for derived state.The
membersCountstate and its syncinguseEffectare unnecessary. Themembers?.countvalue can be used directly in the render, eliminating both the state and the effect.♻️ Proposed fix
- const [membersCount, setMembersCount] = useState<number | null>(null); - - useEffect(() => { - if (members) { - setMembersCount(members.count); - } - }, [members]);Then replace
membersCountwithmembers?.countin the JSX:- {typeof membersCount === "number" && ( + {typeof members?.count === "number" && ( ... - {membersCount} + {members.count}As per coding guidelines, Effects that only sync internal state should be removed in favor of computing during render.
components/utils/sidebar/SidebarLayout.tsx (1)
23-31: Missing dependencies in useEffect will trigger ESLint warning.The effect references
init,searchParams,activeGroupId, anddispatchbut has an empty dependency array. While theinitguard ensures one-time execution, this will fail thereact-hooks/exhaustive-depsrule.♻️ Suggested fix using a ref for one-time initialization
+import { useEffect, useState, useRef } from "react"; ... - const [init, setInit] = useState(false); + const hasInitialized = useRef(false); + const [init, setInit] = useState(false); useEffect(() => { - if (!init) { + if (!hasInitialized.current) { + hasInitialized.current = true; const group = searchParams?.get("group"); if (group && group !== activeGroupId) { dispatch(setActiveGroupId(group)); } setInit(true); } - }, []); + }, [searchParams, activeGroupId, dispatch]);As per coding guidelines, code must pass ESLint with React Hooks rules.
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx (1)
27-42: Missing required fields in test fixture.The
baseMemberfixture is missingxtdh_incomingandxtdh_outgoingfields that are required byApiCommunityMemberOverview. The component actively uses these fields in rendering, so the fixture must include them.Proposed fix
const baseMember: ApiCommunityMemberOverview = { display: 'Alice', detail_view_key: 'alice', level: 1, tdh: 10, tdh_rate: 0, xtdh: 0, xtdh_rate: 0, + xtdh_incoming: 0, + xtdh_outgoing: 0, combined_tdh: 10, combined_tdh_rate: 0, rep: 5, cic: 2, pfp: 'pfp.png', last_activity: 123, wallet: '0x123', };__tests__/components/community/members-table/CommunityMembersTable.test.tsx (1)
32-65: Test data is missing required fields fromApiCommunityMemberOverview.The test member objects are missing
xtdh_outgoingandxtdh_incomingfields that are required by theApiCommunityMemberOverviewtype.Suggested fix
const members: ApiCommunityMemberOverview[] = [ { display: 'Alice', detail_view_key: 'alice', level: 1, tdh: 10, tdh_rate: 0, xtdh: 0, xtdh_rate: 0, + xtdh_outgoing: 0, + xtdh_incoming: 0, combined_tdh: 10, combined_tdh_rate: 0, rep: 5, cic: 2, pfp: null, last_activity: null, wallet: '0x1', }, { display: 'Bob', detail_view_key: 'bob', level: 2, tdh: 20, tdh_rate: 0, xtdh: 0, xtdh_rate: 0, + xtdh_outgoing: 0, + xtdh_incoming: 0, combined_tdh: 20, combined_tdh_rate: 0, rep: 15, cic: 3, pfp: null, last_activity: null, wallet: '0x2', }, ];
🤖 Fix all issues with AI agents
In @__tests__/components/community/CommunityMembers.test.tsx:
- Around line 34-56: Add unit test files for the three mocked components
(CommunityMembersSortControls, CommunityMembersMobileSortContent,
MobileWrapperDialog) so changed test files meet the ≥80% line coverage rule:
create a simple render test for CommunityMembersSortControls and
CommunityMembersMobileSortContent that mounts the component and asserts it
renders (use their data-testid strings), and add a test for MobileWrapperDialog
that renders it open and closed, asserting children are rendered only when
isOpen is true; keep tests lightweight and focused so they exercise the
component files and raise coverage above 80%.
In @__tests__/components/community/members-table/CommunityMembersTable.test.tsx:
- Around line 67-71: The test's baseProps object is missing the required
activeSort prop for CommunityMembersTable; add an activeSort property to
baseProps with a valid ApiCommunityMembersSortOption value (e.g., one of the
enum/union members used by the component) so baseProps includes members, page,
pageSize, and activeSort; update any imports or types in the test to reference
ApiCommunityMembersSortOption if needed and ensure the value matches what
CommunityMembersTable expects.
In @components/community/CommunityMembers.tsx:
- Around line 247-251: The useEffect in CommunityMembers reads mobileFilterOpen
but omits it from the dependency array, causing a stale closure and linter
warning; update the effect to include mobileFilterOpen in the dependency array
(i.e., useEffect(() => { if (mobileFilterOpen) setMobileFilterOpen(false); },
[activeGroupId, mobileFilterOpen])) or refactor to avoid reading state inside
the effect (for example track previous activeGroupId via a ref and close the
filter only when the group actually changes) so the exhaustives-deps rule is
satisfied.
In @components/community/members-table/communityMembersSortConfig.ts:
- Around line 16-45: The xTDH entry in DROPDOWN_SORT_OPTIONS incorrectly sets
both primarySort and secondarySort to ApiCommunityMembersSortOption.XtdhRate;
update the xTDH object so primarySort is ApiCommunityMembersSortOption.Xtdh and
secondarySort remains ApiCommunityMembersSortOption.XtdhRate (so
getDropdownDisplayLabel and mobile selection produce distinct Value vs Rate
behavior), and if the backend does not actually support an Xtdh value sort then
instead either collapse the xTDH dropdown to a single option or change the
labels to avoid implying two separate criteria.
🧹 Nitpick comments (11)
components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
1-30: LGTM! Clean skeleton component implementation.The component follows React and TypeScript best practices:
- Uses functional component with typed props
- Properly uses
readonlymodifier- Self-explanatory code without comments
- Appropriate use of Tailwind CSS utilities
- Pulse animation for loading state
Consider adding ARIA attributes to improve accessibility for screen reader users:
♻️ Optional accessibility enhancement
export default function CommunityMembersTableSkeleton({ rows = 10, }: { readonly rows?: number; }) { return ( - <div className="tw-bg-iron-950 tw-rounded-lg sm:tw-border sm:tw-border-solid sm:tw-border-iron-700 tw-overflow-hidden"> + <div + className="tw-bg-iron-950 tw-rounded-lg sm:tw-border sm:tw-border-solid sm:tw-border-iron-700 tw-overflow-hidden" + role="status" + aria-label="Loading community members" + > <div className="tw-animate-pulse">__tests__/components/utils/sidebar/SidebarLayout.test.tsx (1)
84-108: Consider extracting the mock override to improve readability.The
require()inside the test to overrideuseSearchParamsworks but could be cleaner. Consider usingjest.mocked()or extracting the mock reference at module level.♻️ Optional improvement
+import { useSearchParams } from "next/navigation"; + jest.mock("next/navigation", () => ({ useSearchParams: jest.fn(() => new URLSearchParams()), })); + +const mockUseSearchParams = useSearchParams as jest.MockedFunction<typeof useSearchParams>; // Then in test: it("initializes with group from router query", () => { - const { useSearchParams } = require("next/navigation"); - useSearchParams.mockReturnValue( + mockUseSearchParams.mockReturnValue( new URLSearchParams({ group: "test-group-id" }) );openapi.yaml (2)
5574-5664: Check numeric types and sort enum coverage for community members (TDH/xTDH fields)The overall shape of
ApiCommunityMemberOverview,ApiCommunityMembersPage, andApiCommunityMembersSortOptionlooks good, but there are two details worth double‑checking:
- In
ApiCommunityMemberOverviewyou modeltdhasnumber+int64andtdh_rateasnumber+double, whereasApiIdentityandApiProfileMinusetdhasdoubleandtdh_rateasint64. This inversion may confuse generators or downstream consumers relying on consistent units between identity and community-member overviews.ApiCommunityMemberOverviewexposes bothxtdhandxtdh_rate, butApiCommunityMembersSortOptiononly includesxtdh_rate. The UI in this PR exposes an “xTDH” dropdown with separate “Value” and “Rate” options; currently both map toXtdhRatein the sort config, so there is no way to sort byxtdhvalue. Consider either:
- Adding an
xtdhentry toApiCommunityMembersSortOptionand wiring the “Value” option to that, or- Collapsing the UI to a single “xTDH rate” choice if the API only intends to support rate-based ordering.
8455-8511: Waveoutcomeswiring is internally consistent but “Old” naming may be confusingMaking
outcomesrequired onApiWaveand typing it asApiWaveOutcomeOld[](with inlinedistribution) while the newer/waves/{waveId}/outcomesendpoint returnsApiWaveOutcome[]plus separate distribution items is structurally sound. Two follow‑ups to keep in mind:
- Ensure the backend always returns
outcomes: []for waves without outcomes to honor the newrequiredcontract.- Consider whether
ApiWaveOutcomeOldshould be renamed to something likeApiWaveOutcomeWithDistributiononce legacy consumers are migrated, to avoid confusion between the “old” and “new” shapes.Also applies to: 8947-8971
components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
1-191: Mobile sort UI wiring looks correct; only minor nitsThe component correctly:
- Reflects
SortDirectionvia the Asc/Desc buttons and callsonDirectionChangewith the appropriate enum.- Uses
DROPDOWN_SORT_OPTIONS+SIMPLE_SORT_OPTIONSwithgetDropdownDisplayLabel/getDropdownActiveStateso active states and labels stay in sync.- Manages a single expanded dropdown via
expandedDropdownwithout introducing unnecessary effects.Minor nit you can ignore if it conflicts with your style rules: consider keying the expanded dropdown by a stable enum (e.g.
option.primarySort) instead ofoption.labelto avoid accidental collisions if labels ever change.components/community/CommunityMembers.tsx (2)
55-68: Consider replacingas anywith a type-safe validation.The
as anytype assertion bypasses TypeScript's type checking. A cleaner approach would use explicit type guards.Proposed improvement
const convertSortBy = useCallback( (sort: string | null): ApiCommunityMembersSortOption => { if (!sort) return defaultSortBy; + const normalizedSort = sort.toLowerCase(); + const validOptions = Object.values(ApiCommunityMembersSortOption) as string[]; - if ( - Object.values(ApiCommunityMembersSortOption).includes( - sort.toLowerCase() as any - ) - ) { - return sort.toLowerCase() as ApiCommunityMembersSortOption; + if (validOptions.includes(normalizedSort)) { + return normalizedSort as ApiCommunityMembersSortOption; } return defaultSortBy; }, [defaultSortBy] );
168-188: Unnecessaryasync/awaitpattern.
updateFieldsis synchronous (callsrouter.replacewhich is fire-and-forget). Theasynckeyword andawaitare unnecessary here.Simplified version
- const setSortBy = useCallback( - async (sortBy: ApiCommunityMembersSortOption): Promise<void> => { - const items: QueryUpdateInput[] = [ - { name: "sortBy", value: sortBy }, - { name: "page", value: "1" }, - ]; - await updateFields(items); - }, - [updateFields] - ); + const setSortBy = useCallback( + (sortBy: ApiCommunityMembersSortOption): void => { + const items: QueryUpdateInput[] = [ + { name: "sortBy", value: sortBy }, + { name: "page", value: "1" }, + ]; + updateFields(items); + }, + [updateFields] + ); - const setSortDirection = useCallback( - async (direction: SortDirection): Promise<void> => { - const items: QueryUpdateInput[] = [ - { name: "sortDirection", value: direction }, - { name: "page", value: "1" }, - ]; - await updateFields(items); - }, - [updateFields] - ); + const setSortDirection = useCallback( + (direction: SortDirection): void => { + const items: QueryUpdateInput[] = [ + { name: "sortDirection", value: direction }, + { name: "page", value: "1" }, + ]; + updateFields(items); + }, + [updateFields] + );components/community/members-table/CommunityMembersSortControls.tsx (1)
62-100: Prefer Tailwind classes over inline styles for consistency.The dropdown menu uses inline
styleattributes which breaks the Tailwind-first approach used elsewhere in the codebase. This makes the styles harder to maintain and inconsistent with the rest of the component.Proposed Tailwind-based approach
{isOpen && ( <div - className="tw-absolute tw-top-full tw-left-0 tw-mt-1 tw-z-50 tw-rounded-lg tw-shadow-xl tw-min-w-[120px] tw-overflow-hidden" - style={{ backgroundColor: '#1f1f1f', border: '1px solid #3a3a3a' }} + className="tw-absolute tw-top-full tw-left-0 tw-mt-1 tw-z-50 tw-rounded-lg tw-shadow-xl tw-min-w-[120px] tw-overflow-hidden tw-bg-iron-900 tw-border tw-border-solid tw-border-iron-700" > <button type="button" onClick={() => handleSelect(option.primarySort)} - className={`tw-w-full tw-text-left tw-px-4 tw-py-2.5 tw-text-sm tw-font-medium tw-border-0 tw-cursor-pointer ${ + className={`tw-w-full tw-text-left tw-px-4 tw-py-2.5 tw-text-sm tw-font-medium tw-border-0 tw-cursor-pointer tw-transition-colors tw-duration-150 ${ isPrimaryActive - ? "tw-text-primary-300" - : "tw-text-iron-300" + ? "tw-text-primary-300 tw-bg-primary-500/20" + : "tw-text-iron-300 tw-bg-transparent hover:tw-bg-iron-800" }`} - style={{ - backgroundColor: isPrimaryActive ? 'rgba(96, 165, 250, 0.2)' : 'transparent', - transition: 'background-color 0.15s' - }} - onMouseEnter={(e) => { if (!isPrimaryActive) e.currentTarget.style.backgroundColor = '#2a2a2a'; }} - onMouseLeave={(e) => { if (!isPrimaryActive) e.currentTarget.style.backgroundColor = 'transparent'; }} > {option.primaryLabel} </button> <button type="button" onClick={() => handleSelect(option.secondarySort)} - className={`tw-w-full tw-text-left tw-px-4 tw-py-2.5 tw-text-sm tw-font-medium tw-border-0 tw-cursor-pointer ${ + className={`tw-w-full tw-text-left tw-px-4 tw-py-2.5 tw-text-sm tw-font-medium tw-border-0 tw-cursor-pointer tw-transition-colors tw-duration-150 ${ isSecondaryActive - ? "tw-text-primary-300" - : "tw-text-iron-300" + ? "tw-text-primary-300 tw-bg-primary-500/20" + : "tw-text-iron-300 tw-bg-transparent hover:tw-bg-iron-800" }`} - style={{ - backgroundColor: isSecondaryActive ? 'rgba(96, 165, 250, 0.2)' : 'transparent', - transition: 'background-color 0.15s' - }} - onMouseEnter={(e) => { if (!isSecondaryActive) e.currentTarget.style.backgroundColor = '#2a2a2a'; }} - onMouseLeave={(e) => { if (!isSecondaryActive) e.currentTarget.style.backgroundColor = 'transparent'; }} > {option.secondaryLabel} </button> </div> )}__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (1)
24-41: Consider using proper typing instead ofas any.The member fixture uses
as anywhich bypasses type checking. Using the actualApiCommunityMemberOverviewtype would catch any mismatches between test data and the real model.Proposed improvement
+import type { ApiCommunityMemberOverview } from '@/generated/models/ApiCommunityMemberOverview'; -const member = { +const member: ApiCommunityMemberOverview = { display: 'Alice', detail_view_key: 'alice', level: 1, tdh: 100, tdh_rate: 10, xtdh: 55, xtdh_rate: 5, combined_tdh: 150, combined_tdh_rate: 15, xtdh_incoming: 20, xtdh_outgoing: 10, rep: 60, cic: 1, pfp: 'url', last_activity: 10, wallet: '0x1', -} as any; +};components/community/members-table/CommunityMembersTableRow.tsx (1)
37-43: Consider using<Image>fromnext/imageinstead of<img>.Per coding guidelines,
<img>elements should be replaced with<Image />fromnext/imagefor optimized image loading and compliance with@next/next/no-img-element.Suggested fix
+import Image from "next/image"; ... - <img - src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} - alt="Network Table Profile Picture" - className="tw-mx-auto tw-h-auto tw-max-h-full tw-w-auto tw-max-w-full tw-bg-transparent tw-object-contain" - /> + <Image + src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} + alt="Network Table Profile Picture" + className="tw-mx-auto tw-h-auto tw-max-h-full tw-w-auto tw-max-w-full tw-bg-transparent tw-object-contain" + width={32} + height={32} + unoptimized + />components/community/members-table/CommunityMembersMobileCard.tsx (1)
36-42: Consider using<Image>fromnext/imageinstead of<img>.Same as in
CommunityMembersTableRow.tsx, per coding guidelines,<img>elements should be replaced with<Image />fromnext/image.Suggested fix
+import Image from "next/image"; ... - <img - src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} - alt={`${member.display} avatar`} - className="tw-h-full tw-w-full tw-object-contain tw-mx-auto" - /> + <Image + src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} + alt={`${member.display} avatar`} + className="tw-h-full tw-w-full tw-object-contain tw-mx-auto" + width={40} + height={40} + unoptimized + />
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
components/community/CommunityMembers.tsx (2)
55-68: Consider simplifying the type validation.The
as anycast on Line 60 bypasses type safety. A more type-safe approach would use a type guard.Suggested refinement
const convertSortBy = useCallback( (sort: string | null): ApiCommunityMembersSortOption => { if (!sort) return defaultSortBy; + const normalizedSort = sort.toLowerCase(); if ( - Object.values(ApiCommunityMembersSortOption).includes( - sort.toLowerCase() as any - ) + Object.values(ApiCommunityMembersSortOption).includes(normalizedSort as ApiCommunityMembersSortOption) ) { - return sort.toLowerCase() as ApiCommunityMembersSortOption; + return normalizedSort as ApiCommunityMembersSortOption; } return defaultSortBy; }, [defaultSortBy] );
168-188: Async functions returningPromise<void>are unnecessary here.
updateFieldsis synchronous (callsrouter.replacewhich is sync). Theasync/awaitpattern adds no value and creates misleading function signatures.Suggested simplification
-const setSortBy = useCallback( - async (sortBy: ApiCommunityMembersSortOption): Promise<void> => { +const setSortBy = useCallback( + (sortBy: ApiCommunityMembersSortOption): void => { const items: QueryUpdateInput[] = [ { name: "sortBy", value: sortBy }, { name: "page", value: "1" }, ]; - await updateFields(items); + updateFields(items); }, [updateFields] ); -const setSortDirection = useCallback( - async (direction: SortDirection): Promise<void> => { +const setSortDirection = useCallback( + (direction: SortDirection): void => { const items: QueryUpdateInput[] = [ { name: "sortDirection", value: direction }, { name: "page", value: "1" }, ]; - await updateFields(items); + updateFields(items); }, [updateFields] );components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
9-12: Consider using indices for skeleton row keys.
getRandomObjectId()generates unique IDs, but for skeleton placeholders without identity, simple array indices suffice and avoid the ObjectId dependency. The current approach works correctly but adds unnecessary complexity.Simpler alternative
-import { getRandomObjectId } from "@/helpers/AllowlistToolHelpers"; -import { useMemo } from "react"; - export default function CommunityMembersTableSkeleton({ rows = 10, }: { readonly rows?: number; }) { - const rowKeys = useMemo( - () => Array.from({ length: rows }, () => getRandomObjectId()), - [rows] - ); - return ( <div className="tw-overflow-hidden tw-rounded-lg tw-bg-iron-950 sm:tw-border sm:tw-border-solid sm:tw-border-iron-700"> <div className="tw-animate-pulse"> <div className="tw-h-12 tw-border-b tw-border-iron-700 tw-bg-iron-900" /> - {rowKeys.map((key) => ( + {Array.from({ length: rows }, (_, index) => ( <div - key={key} + key={index} className="tw-flex tw-h-16 tw-items-center tw-gap-4 tw-border-b tw-border-iron-800 tw-px-6" >openapi.yaml (4)
258-309:/community-members/topendpoint looks good; consider minor schema reuseThe new endpoint is consistent with existing pagination/sort patterns and the response shape via
ApiCommunityMembersPagelooks correct.If you want to tighten things later, you could:
- Reuse
ApiPageSortDirectionforsort_directioninstead of an inline enum.- Switch
page/page_sizetotype: integer(still withformat: int64) to match many of the newer endpoints.
5597-5689: Community member overview/page/sort schemas are coherent; double-check TDH numeric format
ApiCommunityMemberOverview,ApiCommunityMembersPage, andApiCommunityMembersSortOptionare internally consistent; every sort option has a corresponding field on the overview, and pagination viaApiPageBaseis aligned with/community-members/top.- One thing to double-check: here
tdhisnumberwithformat: int64, while inApiProfileMin/ApiIdentitytdhis declared asnumberwithformat: double. If the backend actually emits non-integer TDH values, you might want to align these formats to avoid surprising client types.
5690-5721: Community metrics schemas are fine; consider clarifying time unitsThe
ApiCommunityMetric*shapes are straightforward and work well with/community-metrics. To avoid ambiguity for client implementors, it would help to:
- Either set
format: int64and add a short description thatperiod_start/period_endare epoch-millis, or- Switch them to
type: string,format: date-time, if that’s what the backend actually returns.This is non-blocking but will make the generated types less guessy.
8512-8585: Waveoutcomesexposure viaApiWaveOutcomeOldis probably intentional; confirm required-ness and canonical typeThe changes around waves look deliberate but introduce a couple of contracts worth explicitly confirming:
ApiWave.outcomesis now required and typed asApiWaveOutcomeOld[]. That implies the backend must always send at least an emptyoutcomesarray for every wave; previously waves may have had nooutcomesfield at all.- You now have two very similar outcome types:
ApiWaveOutcome(used by/waves/{waveId}/outcomes), withoutdistribution.ApiWaveOutcomeOld(used onApiWave.outcomes), which includesdistribution: ApiWaveOutcomeDistributionItem[].This makes sense if
ApiWaveOutcomeOldis purposely modelling the legacy “inline distribution” shape while newer endpoints normalize it, but it would help to:
- Ensure the backend is already returning
outcomeson allApiWavepayloads to avoid runtime mismatches with the updated spec.- Consider documenting (in code comments or API docs) which outcome type is recommended for new consumers and that
ApiWaveOutcomeOldis effectively a legacy/compatibility shape.Also applies to: 9003-9029
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
generated/models/ApiCommunityMembersSortOption.tsis excluded by!**/generated/**generated/models/ApiCommunityMetric.tsis excluded by!**/generated/**generated/models/ApiCommunityMetricSample.tsis excluded by!**/generated/**generated/models/ApiCommunityMetrics.tsis excluded by!**/generated/**generated/models/ObjectSerializer.tsis excluded by!**/generated/**
📒 Files selected for processing (6)
__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/CommunityMembers.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/communityMembersSortConfig.tsopenapi.yaml
🚧 Files skipped from review as they are similar to previous changes (2)
- components/community/members-table/communityMembersSortConfig.ts
- tests/components/community/members-table/CommunityMembersTable.test.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `useEffectEvent` for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Applied to files:
components/community/CommunityMembers.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use react-query for data fetching
Applied to files:
components/community/CommunityMembers.tsx
🧬 Code graph analysis (2)
components/community/members-table/CommunityMembersTableSkeleton.tsx (2)
helpers/AllowlistToolHelpers.ts (1)
getRandomObjectId(44-46)scripts/eslint-rule-summary.cjs (1)
key(164-164)
components/community/CommunityMembers.tsx (7)
helpers/Types.tsx (1)
Page(12-17)generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)components/community/members-table/CommunityMembersSortControls.tsx (1)
CommunityMembersSortControls(106-180)components/community/members-table/CommunityMembersTable.tsx (1)
CommunityMembersTable(7-48)components/utils/table/paginator/CommonTablePagination.tsx (1)
CommonTablePagination(1-82)components/mobile-wrapper-dialog/MobileWrapperDialog.tsx (1)
MobileWrapperDialog(10-141)components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
CommunityMembersMobileSortContent(99-192)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (12)
components/community/members-table/CommunityMembersTableHeader.tsx (3)
1-26: LGTM! Clean sort group definitions.Using
Setfor O(1) membership lookups is a good choice. The sort groups are well-organized and clearly map to the column headers they represent.
28-42: LGTM! Clean component setup.Props are correctly marked as
readonlyper coding guidelines. The derived active states are computed during render rather than using unnecessary effects, which aligns with best practices.
43-96: LGTM! Consistent header rendering.The conditional styling logic is clear and maintainable. Each column header correctly maps to its corresponding sort group for active state highlighting.
components/community/CommunityMembers.tsx (5)
1-28: LGTM! Imports are well-organized.Good migration to API-generated models (
ApiCommunityMemberOverview,ApiCommunityMembersSortOption). Using FontAwesome for icons aligns with coding guidelines.
224-240: Potential infinite loop risk withsetPagein effect dependencies.
setPageis included in dependencies but the effect callssetPage(1)orsetPage(pagesCount)conditionally. IfsetPagereference changes, this could cause re-runs. Verify thatsetPageis stable viauseCallback(it is, at Line 209), but the early return onisLoadingshould prevent issues.The logic appears safe due to the
isLoadingguard, but worth confirming this doesn't cause unnecessary renders during page transitions.
247-249: LGTM! Good UX pattern.Closing the mobile filter dialog when
activeGroupIdchanges ensures the dialog doesn't show stale state after a filter selection.
299-334: LGTM! Clean conditional rendering with skeleton fallback.The loading state is properly handled with
CommunityMembersTableSkeletonwhen data is not yet available, and pagination is conditionally rendered only when needed.
336-363: LGTM! Mobile dialogs are well-implemented.Both filter and sort mobile dialogs properly integrate with the existing state management. The sort dialog correctly closes after selection via the inline callback.
components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
14-37: LGTM! Clean skeleton UI structure.The skeleton layout appropriately mirrors the table structure with matching column widths. The
tw-animate-pulseprovides good loading feedback.openapi.yaml (3)
310-332:/community-metricsendpoint is well-specifiedRequired
intervalplus theApiCommunityMetricsresponse is clear and consistent with the rest of the spec. No issues from a client-generation perspective.
3283-3307:/tdh/consolidation/{identity}wiring toApiConsolidatedTdhlooks consistentThe path/param semantics and 200/404 responses align with existing identity-style endpoints. As long as the backend resolves handle / wallet / ENS / consolidation-key in the same order as other identity endpoints, this looks good.
5752-5873: Consolidated TDH + token TDH schemas look consistent with the rest of the TDH model
ApiConsolidatedTdhis wired correctly into/tdh/consolidation/{identity}and composes cleanly withApiTokenTdh/ApiTokenTdhRankfor the per-token breakdown.- The numeric formats (int64 vs double) align with how TDH and boosts are modelled elsewhere in the spec.
Note that
ApiConsolidatedTdhdoesn’t declare anyrequiredfields, so client code should treat all properties as optional/partial. That’s fine if intentional, just worth keeping in mind for generated types and UI guards.Also applies to: 8250-8281
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @__tests__/components/network/NetworkPageLayout.test.tsx:
- Line 29: The test declares "let store: any;" which defeats TypeScript safety;
replace "any" with the app's Redux store type (e.g., import the concrete
AppStore or RootState/AppDispatch types from your store module) or use the Redux
Store generic (Store<RootState, AnyAction>) and annotate the "store" variable
accordingly; update the test imports to pull the correct types (AppStore,
RootState, AppDispatch or redux's Store/AnyAction) and use that type for the
"store" variable so the test is strongly typed.
In @components/network/NetworkPageLayout.tsx:
- Around line 23-31: The useEffect currently has an empty dependency array but
reads reactive values (searchParams, activeGroupId) and local state (init),
violating hooks rules; update the effect to include searchParams, activeGroupId,
and dispatch in its dependency list and avoid repeated runs by replacing the
init boolean with a ref (e.g., initRef) or guard ref checked/updated inside the
effect; in practice change references to init/setInit to initRef.current and
only call dispatch(setActiveGroupId(group)) when group exists, differs from
activeGroupId, and the initRef indicates the effect hasn't run yet, ensuring
proper synchronization when searchParams changes without causing stale closures.
🧹 Nitpick comments (4)
app/network/activity/page.client.tsx (1)
33-33: Nitpick: className reordering has no functional impact.The reordering of TailwindCSS classes from
"tw-block tw-float-none tw-whitespace-nowrap"to"tw-float-none tw-block tw-whitespace-nowrap"doesn't affect styling since Tailwind class order is not significant. Consider whether this change is necessary.__tests__/components/network/NetworkPageLayoutApp.test.tsx (1)
1-26: LGTM! Tests cover essential behavior.The tests verify that the component renders children correctly and includes the expected layout classes. For this simple layout wrapper, the coverage is appropriate.
Optional enhancement: Consider testing additional classes like
tw-overflow-x-hiddenor responsive classes to ensure complete styling verification.__tests__/app/network/index.test.tsx (1)
39-58: Consider extracting the MobileWrapperDialog mock for clarity.The inline conditional rendering in the
MobileWrapperDialogmock (line 57) works correctly but could make debugging more difficult. Consider extracting this to a separate mock function above the jest.mock() calls for better readability.♻️ Suggested refactor
+const MobileWrapperDialogMock = ({ children, isOpen }: any) => + isOpen ? <div data-testid="mobile-dialog">{children}</div> : null; + jest.mock( "@/components/mobile-wrapper-dialog/MobileWrapperDialog", - () => ({ children, isOpen }: any) => isOpen ? <div data-testid="mobile-dialog">{children}</div> : null + () => MobileWrapperDialogMock );components/community/CommunityMembers.tsx (1)
169-189: Minor: Unnecessary async markers.Both
setSortByandsetSortDirectionare markedasyncand returnPromise<void>, butupdateFieldsis synchronous. While not harmful, theasynckeyword andPromisereturn type are unnecessary here.♻️ Optional cleanup
const setSortBy = useCallback( - async (sortBy: ApiCommunityMembersSortOption): Promise<void> => { + (sortBy: ApiCommunityMembersSortOption): void => { const items: QueryUpdateInput[] = [ { name: "sortBy", value: sortBy }, { name: "page", value: "1" }, ]; - await updateFields(items); + updateFields(items); }, [updateFields] ); const setSortDirection = useCallback( - async (direction: SortDirection): Promise<void> => { + (direction: SortDirection): void => { const items: QueryUpdateInput[] = [ { name: "sortDirection", value: direction }, { name: "page", value: "1" }, ]; - await updateFields(items); + updateFields(items); }, [updateFields] );
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
__tests__/app/network/index.test.tsx__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsxapp/network/page.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayout.tsxcomponents/network/NetworkPageLayoutApp.tsx
🧰 Additional context used
📓 Path-based instructions (13)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
__tests__/components/network/NetworkPageLayout.test.tsxapp/network/page.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsxapp/network/activity/page.client.tsx__tests__/app/network/index.test.tsxcomponents/network/NetworkPageLayout.tsxcomponents/community/CommunityMembers.tsxcomponents/network/NetworkPageLayoutApp.tsx
app/**/+(layout|page|route|error|loading|not-found|default).{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Routes in
app/should exportgenerateMetadatausing the helper functiongetAppMetadatafrom@/components/providers/metadatawith proper typing from 'next' package.
Files:
app/network/page.tsx
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
app/**/*.{ts,tsx}: Prefer Server Components with inline fetches for data reads; use Server Functions/Server Actions ('use server') for mutations
Use'use cache'directive at the top of Server Components, routes, or functions to opt-in caching (Next.js 16+)
Files:
app/network/page.tsxapp/network/activity/page.client.tsx
app/**/page.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Routes should export
generateMetadatausing thegetAppMetadatahelper for proper metadata
Files:
app/network/page.tsx
🧠 Learnings (15)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : All tests must live in `__tests__` directory, mirroring source folder structure (`components`, `contexts`, `hooks`, `utils`)
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/{__tests__,*.test.{tsx,ts}} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside the component
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/components/network/NetworkPageLayoutApp.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Use realistic production-like data in tests
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:44.885Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: app/api/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:44.885Z
Learning: Applies to app/api/**/*.{ts,tsx} : All changes to API routes must pass the commands listed in the top-level AGENTS.md: `npm run test` and `npm run lint`.
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to app/**/+(layout|page|route|error|loading|not-found|default).{ts,tsx} : Routes in `app/` should export `generateMetadata` using the helper function `getAppMetadata` from `@/components/providers/metadata` with proper typing from 'next' package.
Applied to files:
__tests__/components/network/NetworkPageLayout.test.tsxcomponents/network/NetworkPageLayoutApp.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `Element.remove()` method instead of `parentNode.removeChild(element)`
Applied to files:
__tests__/components/network/NetworkPageLayoutApp.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__mocks__/**/*.{ts,tsx,js} : Jest automatically picks up mocks from `__mocks__` directory
Applied to files:
__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/app/api/**/__tests__/**/*.{ts,tsx,js} : API integration tests should be placed in `app/api` directory
Applied to files:
__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `useEffectEvent` for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Applied to files:
components/community/CommunityMembers.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use react-query for data fetching
Applied to files:
components/community/CommunityMembers.tsx
🧬 Code graph analysis (5)
__tests__/components/network/NetworkPageLayout.test.tsx (3)
components/network/NetworkPageLayoutApp.tsx (1)
NetworkPageLayoutApp(5-17)hooks/useDeviceInfo.ts (1)
useDeviceInfo(23-105)components/network/NetworkPageLayout.tsx (1)
NetworkPageLayout(11-48)
app/network/page.tsx (3)
helpers/Types.tsx (1)
FullPageRequest(5-10)components/network/NetworkPageLayout.tsx (1)
NetworkPageLayout(11-48)components/community/CommunityMembers.tsx (1)
CommunityMembers(41-371)
__tests__/components/network/NetworkPageLayoutApp.test.tsx (1)
components/network/NetworkPageLayoutApp.tsx (1)
NetworkPageLayoutApp(5-17)
app/network/activity/page.client.tsx (3)
components/network/NetworkPageLayout.tsx (1)
NetworkPageLayout(11-48)components/profile-activity/ProfileActivityLogs.tsx (1)
ProfileActivityLogs(45-209)helpers/profile-logs.helpers.ts (1)
INITIAL_ACTIVITY_LOGS_PARAMS(32-42)
components/community/CommunityMembers.tsx (6)
helpers/Types.tsx (1)
Page(12-17)generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)components/community/members-table/CommunityMembersSortControls.tsx (1)
CommunityMembersSortControls(106-180)components/community/members-table/CommunityMembersTable.tsx (1)
CommunityMembersTable(7-48)components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
CommunityMembersTableSkeleton(4-38)components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
CommunityMembersMobileSortContent(99-192)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (19)
app/network/activity/page.client.tsx (1)
3-3: LGTM! Layout refactoring successfully applied.The replacement of
SidebarLayoutwithNetworkPageLayoutis clean and aligns with the PR objectives to migrate to the new layout architecture.Also applies to: 28-37
components/network/NetworkPageLayoutApp.tsx (2)
11-12: Verify duplicatetailwind-scopeclassName.Both the
<main>element and its nested<div>include thetailwind-scopeclassName. Typically, the scope wrapper is only needed on the outermost container. Confirm whether the duplication is intentional or if the inner occurrence can be removed.
5-16: LGTM! Clean and focused layout component.The component provides a straightforward layout wrapper with appropriate styling for the app mode. The implementation is simple, correctly typed, and follows React best practices.
__tests__/components/network/NetworkPageLayout.test.tsx (1)
1-109: LGTM! Comprehensive test coverage for NetworkPageLayout.The tests effectively cover all major code paths:
- Web layout rendering (default)
- App layout rendering when
isAppis true- Children rendering in both modes
- Group state initialization from URL parameters
The tests properly mock external dependencies and follow the Arrange-Act-Assert pattern as per coding guidelines.
__tests__/app/network/index.test.tsx (2)
27-30: LGTM! Layout mock updated correctly.The mock replacement from
SidebarLayouttoNetworkPageLayoutaligns with the PR's layout refactoring objectives.
121-121: Good addition of explicitdata: nullfor clarity.Explicitly setting
data: nullin the loading state mock improves test readability and makes the intent clear.app/network/page.tsx (3)
2-9: LGTM! Type migration to API-generated models.The migration from
CommunityMembersSortOptiontoApiCommunityMembersSortOptionaligns with the PR's objective to use generated API models. The interface structure is preserved with proper generic parameterization ofFullPageRequest.
11-17: LGTM! Layout wrapper updated.The replacement of
SidebarLayoutwithNetworkPageLayoutis clean. The new layout handles group synchronization logic internally (as seen in NetworkPageLayout.tsx).
19-25: LGTM! Metadata generation follows guidelines.The
generateMetadatafunction correctly uses thegetAppMetadatahelper as required by the coding guidelines for app routes.components/network/NetworkPageLayout.tsx (1)
33-47: LGTM! Layout rendering logic is clean.The conditional layout switching between app and standard modes is well-structured. The delayed rendering of children until initialization completes provides good UX (assuming the effect dependencies are fixed).
components/community/CommunityMembers.tsx (9)
5-27: LGTM! Imports updated for API models and new UI components.The migration to API-generated models (
ApiCommunityMemberOverview,ApiCommunityMembersSortOption) aligns with PR objectives. New sort control and mobile UI component imports are properly structured.
44-47: LGTM! Default sort values updated to API models.The
defaultSortBynow usesApiCommunityMembersSortOption.Level(with updated casing fromLEVELtoLevel), matching the API-generated enum format.
55-68: LGTM! Sort conversion updated for API models.The
convertSortByfunction correctly validates and converts string values toApiCommunityMembersSortOption, with proper fallback to default.
134-156: LGTM! Data fetching uses react-query with API models.The
useQueryhook is properly typed withPage<ApiCommunityMemberOverview>and useskeepPreviousDatafor smooth transitions. Follows the guideline to use react-query for data fetching.Based on learnings, ...
244-249: LGTM! Mobile dialog state management.The effect properly closes the mobile filter dialog when
activeGroupIdchanges, preventing stale filter UI. Dependencies are correct.
253-303: LGTM! Header UI with responsive mobile controls.The header includes properly styled mobile filter/sort buttons with:
- Conditional styling to show active filter state
- Appropriate icons (Heroicons and FontAwesome per guidelines)
- Accessibility labels
- Responsive visibility (sort button hidden on desktop)
304-339: LGTM! Responsive sort controls and table rendering.The implementation properly handles:
- Desktop sort controls (hidden on mobile)
- Conditional rendering between data and skeleton
- Pagination only shown when needed
- All components receive correctly typed props (
ApiCommunityMembersSortOption)
341-350: LGTM! Mobile filter dialog integration.The
MobileWrapperDialogwraps theGroupsSidebarfor mobile filter functionality with proper state management.
352-368: LGTM! Mobile sort dialog with smart UX.The sort dialog properly closes when a new sort field is selected but stays open when toggling direction, allowing users to adjust both without dismissing the dialog.
Signed-off-by: prxt6529 <prxt@6529.io>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In
@__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx:
- Around line 1-8: The test uses the type React.ReactNode without importing
React, which breaks TypeScript and project style; replace the namespace usage by
importing the named type and update the mock signature: add "import { ReactNode
} from 'react'" at the top and change the mocked default component prop type
from "children: React.ReactNode" to "children: ReactNode" (leave the rest of the
mock default export as-is).
In @__tests__/components/community/members-table/CommunityMembersTable.test.tsx:
- Around line 57-63: The test is mocking CommunityMembersMobileFilterBar and
asserting its presence even though CommunityMembersTable no longer imports or
renders it; remove the jest.mock call for
"@/components/community/members-table/CommunityMembersMobileFilterBar" and
delete the corresponding expect/assert that checks for the mobile filter bar in
CommunityMembersTable.test.tsx (the assertion that queries
data-testid="mobile-filter-bar"), so the test matches the current component
render path.
🧹 Nitpick comments (12)
components/community/members-table/CommunityMembersMobileSortContent.tsx (2)
1-11: Consider aligning with the “FontAwesome for icons” guideline (or document the exception).This component uses
CommonTableSortIcon(custom SVG) instead of FontAwesome; if the guideline is enforced, this will be a recurring exception worth standardizing.
13-45: Add an accessibility affordance for the active selection (aria-pressed).Since these are toggle-like choices, adding
aria-pressed={isActive}(and optionallyaria-labelincluding direction) improves SR/AT behavior with minimal cost.Proposed diff
<button key={option.value} type="button" onClick={() => onSort(option.value)} + aria-pressed={isActive} className={`tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-x-1.5 tw-py-3 tw-px-4 tw-rounded-lg tw-border tw-border-solid tw-text-sm tw-font-medium tw-transition ${ isActive ? "tw-border-primary-500 tw-bg-primary-500/20 tw-text-primary-300" : "tw-border-iron-600 tw-bg-iron-800 tw-text-iron-300 active:tw-bg-iron-700" }`} >__tests__/app/network/index.test.tsx (1)
12-15: Use more production-like react-query + pagination fixtures (keepPreviousData,next).
- If code calls
keepPreviousDataas a function, mocking it as a string can break silently later.- If
nextis treated as a page number / nullable cursor,next: truecan skew pagination behavior.Proposed diff (safer mocks/fixtures)
jest.mock("@tanstack/react-query", () => ({ useQuery: jest.fn(), - keepPreviousData: "keepPreviousData", + keepPreviousData: jest.fn((prev: unknown) => prev), })); @@ data: { count: 120, data: [], page: 1, - next: true, + next: 2, },Also applies to: 126-136
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (2)
6-12: These tests assert prop-wiring, not user-visible labels—confirm that’s the intent.Because the mock renders
{sort}directly, the test validates the enum value passed down, not the header text users see. That’s fine if you want a “wiring” test, but it won’t catch label regressions.Also applies to: 22-37
39-52: Add a keyboard-accessibility test (and ideally sort via a focusable control).Clicking a
thworks for pointer users, but it’s typically not keyboard-accessible unless there’s a focusable element inside. Consider assertingTab→Enter/Spacetriggers sort (which may require switching to abuttonin the header implementation). Based on learnings, tests should cover keyboard navigation.__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (1)
33-49: Consider typing the fixture instead ofas any(keeps mocks aligned with generated models).components/community/members-table/CommunityMembersTableRow.tsx (2)
41-45: Replace<img>with<Image />fromnext/image.As per coding guidelines, use
<Image />fromnext/imageinstead of raw<img>elements to comply with Next.js ESLint rule@next/next/no-img-element.Suggested fix
+import Image from "next/image"; ... - <img - src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} - alt="Network Table Profile Picture" - className="tw-mx-auto tw-h-auto tw-max-h-full tw-w-auto tw-max-w-full tw-bg-transparent tw-object-contain" - /> + <Image + src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} + alt="Network Table Profile Picture" + className="tw-mx-auto tw-h-auto tw-max-h-full tw-w-auto tw-max-w-full tw-bg-transparent tw-object-contain" + width={32} + height={32} + unoptimized + />
81-97: Consider using TailwindCSS classes instead of inline styles for tooltips.The inline
styleobjects on the<Tooltip>components (lines 84-88, 111-115) violate the coding guideline to use TailwindCSS for styling. Consider using theclassNameprop with Tailwind classes or a shared tooltip style constant.Example approach
- <Tooltip - id={`tdh-tooltip-${member.detail_view_key}`} - place="top" - style={{ - backgroundColor: "#1F2937", - color: "white", - padding: "8px 12px", - }} - > + <Tooltip + id={`tdh-tooltip-${member.detail_view_key}`} + place="top" + className="!tw-bg-iron-800 !tw-text-white !tw-px-3 !tw-py-2" + >Also applies to: 108-126
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx (1)
46-61: Add missing fields to test fixture for complete type coverage.The
baseMemberfixture is missingxtdh_outgoingandxtdh_incomingfields that exist inApiCommunityMemberOverview. While TypeScript may not enforce this due to thetypeimport, adding these fields ensures realistic production-like test data. Based on learnings, use realistic production-like data in tests.Suggested addition
const baseMember: ApiCommunityMemberOverview = { display: "Alice", detail_view_key: "alice", level: 1, tdh: 10, tdh_rate: 0, xtdh: 5, xtdh_rate: 0, + xtdh_outgoing: 0, + xtdh_incoming: 0, combined_tdh: 10, combined_tdh_rate: 0, rep: 5, cic: 2, pfp: "pfp.png", last_activity: 123, wallet: "0x123", };components/community/members-table/CommunityMembersMobileCard.tsx (1)
36-41: Replace<img>with<Image />fromnext/image.As per coding guidelines, use
<Image />fromnext/imageinstead of raw<img>elements.Suggested fix
+import Image from "next/image"; ... - <img - src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} - alt={`${member.display} avatar`} - className="tw-h-full tw-w-full tw-object-contain tw-mx-auto" - /> + <Image + src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} + alt={`${member.display} avatar`} + className="tw-h-full tw-w-full tw-object-contain tw-mx-auto" + width={44} + height={44} + unoptimized + />components/community/members-table/CommunityMembersTableHeaderSortableContent.tsx (1)
11-18: Consider using a stricter type for the TITLE mapping.Using
Record<string, string>loses type safety. A stricter type ensures all sort options have titles and prevents typos.Suggested improvement
-const TITLE: Record<string, string> = { +const TITLE: Record<ApiCommunityMembersSortOption, string> = { [ApiCommunityMembersSortOption.Display]: "Profile", [ApiCommunityMembersSortOption.Level]: "Level", [ApiCommunityMembersSortOption.Tdh]: "TDH", [ApiCommunityMembersSortOption.Xtdh]: "xTDH", [ApiCommunityMembersSortOption.Rep]: "REP", [ApiCommunityMembersSortOption.Cic]: "NIC", };__tests__/components/community/members-table/CommunityMembersTable.test.tsx (1)
65-98: Add missing fields to test fixtures for complete type coverage.Similar to the other test file, the member fixtures are missing
xtdh_outgoingandxtdh_incomingfields fromApiCommunityMemberOverview. Based on learnings, use realistic production-like data in tests.Add missing fields
{ display: "Alice", detail_view_key: "alice", level: 1, tdh: 10, tdh_rate: 0, xtdh: 0, xtdh_rate: 0, + xtdh_outgoing: 0, + xtdh_incoming: 0, combined_tdh: 10, combined_tdh_rate: 0, rep: 5, cic: 2, pfp: null, last_activity: null, wallet: "0x1", }, { display: "Bob", detail_view_key: "bob", level: 2, tdh: 20, tdh_rate: 0, xtdh: 0, xtdh_rate: 0, + xtdh_outgoing: 0, + xtdh_incoming: 0, combined_tdh: 20, combined_tdh_rate: 0, rep: 15, cic: 3, pfp: null, last_activity: null, wallet: "0x2", },
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
__tests__/app/network/index.test.tsx__tests__/components/community/CommunityMembers.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsxcomponents/community/CommunityMembers.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTable.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxhelpers/Helpers.tstsconfig.jest.jsontsconfig.json
🚧 Files skipped from review as they are similar to previous changes (1)
- helpers/Helpers.ts
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/community/members-table/CommunityMembersTableRow.tsx__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxcomponents/community/members-table/CommunityMembersMobileSortContent.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/community/members-table/CommunityMembersTableHeader.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxcomponents/community/members-table/CommunityMembersTableHeaderSortableContent.tsxcomponents/community/members-table/CommunityMembersTable.tsx__tests__/app/network/index.test.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/app/network/index.test.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/app/network/index.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/app/network/index.test.tsx
🧠 Learnings (26)
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__mocks__/**/*.{ts,tsx,js} : Jest automatically picks up mocks from `__mocks__` directory
Applied to files:
tsconfig.jest.json__tests__/components/community/CommunityMembers.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Include all required imports and ensure proper naming of key components
Applied to files:
tsconfig.jest.jsontsconfig.json
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{test,spec}.{js,ts,jsx,tsx} : Run `npm run test` to execute all Jest tests and enforce ≥80% line coverage for files changed since `main`. Tests must pass and coverage threshold must be met before completing any task.
Applied to files:
tsconfig.jest.json__tests__/components/community/CommunityMembers.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
tsconfig.jest.json__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsxtsconfig.json__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use one import per module with ordering: external → internal → types, no duplicates
Applied to files:
tsconfig.jest.json__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsxtsconfig.json
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Avoid double negatives in code; prefer explicit statements and use optional chaining (`?.`)
Applied to files:
tsconfig.jest.jsontsconfig.json
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Do not include any comments in the code; it should be self-explanatory
Applied to files:
tsconfig.jest.jsontsconfig.json
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
tsconfig.jest.json__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/CommunityMembers.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/{__tests__,*.test.{tsx,ts}} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside the component
Applied to files:
tsconfig.jest.json__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsxtsconfig.json
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use NextJS features that match the current version
Applied to files:
tsconfig.jest.jsontsconfig.json
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : All tests must live in `__tests__` directory, mirroring source folder structure (`components`, `contexts`, `hooks`, `utils`)
Applied to files:
tsconfig.jest.json__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsxtsconfig.json
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use TailwindCSS for styling in React components
Applied to files:
tsconfig.jest.json
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by running `npm run lint`
Applied to files:
tsconfig.jest.jsontsconfig.json
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Use realistic production-like data in tests
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxtsconfig.json__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Limit function cognitive complexity to 15 or less; extract deep ternaries (>3 levels)
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/CommunityMembers.test.tsxtsconfig.json
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/CommunityMembers.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{js,ts,jsx,tsx} : Enforce ≥ 80% line coverage for files changed since `main` by running `npm run test`
Applied to files:
__tests__/components/community/CommunityMembers.test.tsx
📚 Learning: 2025-11-25T08:37:21.058Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:21.058Z
Learning: Applies to __mocks__/**/__mocks__/** : Document expected behaviour in the mock file when it is not obvious
Applied to files:
__tests__/components/community/CommunityMembers.test.tsx
📚 Learning: 2025-11-25T08:37:21.058Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:21.058Z
Learning: Applies to __mocks__/**/__mocks__/** : Keep mock implementations minimal – enough to satisfy test scenarios
Applied to files:
__tests__/components/community/CommunityMembers.test.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use react-query for data fetching
Applied to files:
__tests__/components/community/CommunityMembers.test.tsxcomponents/community/CommunityMembers.tsx__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `useEffectEvent` for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Applied to files:
components/community/CommunityMembers.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
__tests__/app/network/index.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Prefer direct named imports from React (`useMemo`, `useRef`, `FC`) over `React.` namespace usage
Applied to files:
__tests__/app/network/index.test.tsx
🧬 Code graph analysis (9)
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx (2)
generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)components/community/members-table/CommunityMembersTableRow.tsx (1)
CommunityMembersTableRow(16-154)
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (1)
components/community/members-table/CommunityMembersMobileCard.tsx (1)
CommunityMembersMobileCard(12-99)
components/community/members-table/CommunityMembersMobileCard.tsx (6)
generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)helpers/image.helpers.ts (1)
getScaledImageUri(17-45)helpers/AllowlistToolHelpers.ts (2)
isEthereumAddress(60-67)isAutoGeneratedHandle(70-75)components/user/utils/level/UserLevel.tsx (1)
UserLevel(9-56)helpers/Helpers.ts (3)
getTimeAgoShort(606-640)formatLargeNumber(732-761)formatNumberWithCommasOrDash(152-155)components/user/utils/user-cic-type/UserCICTypeIcon.tsx (1)
UserCICTypeIcon(11-21)
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (1)
components/community/members-table/CommunityMembersTableHeader.tsx (1)
CommunityMembersTableHeader(8-124)
components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
components/user/utils/icons/CommonTableSortIcon.tsx (1)
CommonTableSortIcon(11-80)
components/community/members-table/CommunityMembersTableSkeleton.tsx (2)
helpers/AllowlistToolHelpers.ts (1)
getRandomObjectId(44-46)scripts/eslint-rule-summary.cjs (1)
key(164-164)
components/community/members-table/CommunityMembersTableHeader.tsx (1)
components/community/members-table/CommunityMembersTableHeaderSortableContent.tsx (1)
CommunityMembersTableHeaderSortableContent(20-67)
components/community/CommunityMembers.tsx (5)
helpers/Types.tsx (1)
Page(12-17)generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)components/utils/table/paginator/CommonTablePagination.tsx (1)
CommonTablePagination(1-82)components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
CommunityMembersTableSkeleton(4-67)components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
CommunityMembersMobileSortContent(13-51)
components/community/members-table/CommunityMembersTable.tsx (1)
generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (29)
tsconfig.json (4)
7-7:compilerOptions.libchange looks safe.Condensing the array is fine;
DOM/DOM.Iterable+ESNextmatches typical Next.js browser targets.
45-46: Confirm@/*path alias stays consistent across tooling.
paths: { "@/*": ["./*"] }is fine, but please ensure Jest/Vitest + ESLint import resolver (and any bundler/test config) still maps@/…the same way.
50-50: Be careful: settingcompilerOptions.typescan unintentionally drop other global types.Because
typesis explicitly set, TypeScript won’t automatically include other@types/*packages; please confirm this repo doesn’t rely on globals from e.g.@types/node,@types/jest, etc. (or that tests use a separate tsconfig).
64-65:excludenarrowing can expand the project unexpectedly (since it overrides TS defaults).With
include: ["**/*.ts", "**/*.tsx", …], tighteningexcludeto onlynode_modulesandgenerated/**could start picking up other non-source TS (if any) and slow/break typechecking. Worth re-running the repo’s typecheck/lint to confirm no surprises.tsconfig.jest.json (1)
8-14: Thegenerated/**exclusion is intentional and does not prevent tests from using generated types.Both
tsconfig.json(base config) andtsconfig.jest.jsonconsistently excludegenerated/**, which is a deliberate architectural choice. Excluding generated code from TypeScript's type-checking prevents strict analysis of auto-generated files while still allowing type imports to resolve properly. The extensive use of generated types across 38+ test files (e.g.,jwt-validation.utils.test.ts,groupMutations.test.ts, component tests) demonstrates this pattern works correctly in practice.Likely an incorrect or invalid review comment.
__tests__/components/community/CommunityMembers.test.tsx (2)
37-51: Mobile dialog mock behavior looks correct (renders children only when open).
20-21: The mock is correct and does not need changes. The component callsuseDebounce()as a function with three arguments—callback, delay, and dependencies—not with tuple destructuring. React-use'suseDebouncereturns void, and the current mock() => {}accurately reflects that behavior. All other usages in the codebase follow the same pattern. The proposed fix returning[false, jest.fn()]would incorrectly return a tuple, which would not match the real library's behavior.Likely an incorrect or invalid review comment.
__tests__/app/network/index.test.tsx (1)
25-30: Nice:NetworkPageLayoutmock is typed (keeps test doubles honest).__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (1)
50-65: Good coverage of the key mobile card fields (rank, link, TDH/xTDH/REP/NIC, last seen).components/community/members-table/CommunityMembersTableRow.tsx (1)
67-71: LGTM!The UserCICAndLevel component integration with the new size enum is clean and aligns with the API model migration.
__tests__/components/community/members-table/CommunityMembersTableRow.test.tsx (2)
63-82: LGTM!The test properly verifies profile member rendering with correct assertions for formatted values, links, and UI components. Good coverage of the main rendering behavior.
84-95: LGTM!The address member test correctly verifies the href construction for Ethereum address-style detail view keys.
components/community/members-table/CommunityMembersMobileCard.tsx (1)
68-96: LGTM!The metrics panel is well-structured with consistent formatting across TDH, xTDH, REP, and NIC values. The responsive layout and styling are appropriate for mobile display.
components/community/members-table/CommunityMembersTableHeaderSortableContent.tsx (1)
36-41: LGTM!The rotation state management with useEffect hooks is clear and correctly handles sort direction changes and hover interactions.
components/community/members-table/CommunityMembersTableSkeleton.tsx (2)
9-12: LGTM!Good use of
useMemoto generate stable keys that only regenerate when therowsprop changes. This prevents unnecessary re-renders while maintaining unique keys for each skeleton row.
14-66: LGTM!The responsive skeleton layout properly mirrors the actual table structure with appropriate placeholders for each column. The dual layout approach (desktop table vs mobile cards) maintains visual consistency during loading states.
components/community/members-table/CommunityMembersTable.tsx (2)
1-7: LGTM!Clean imports using type-only imports where appropriate, and proper separation of generated API types from local components.
35-44: LGTM!The table body correctly maps members to rows with proper rank calculation and uses
detail_view_keyas a stable unique key.components/community/members-table/CommunityMembersTableHeader.tsx (1)
1-124: LGTM! Clean migration to generated API models.The migration from
CommunityMembersSortOptiontoApiCommunityMembersSortOptionis implemented correctly throughout the component. The sortable header cells are properly wired with event handlers, state management is clean, and the integration withCommunityMembersTableHeaderSortableContentfollows a consistent pattern across all sortable columns.components/community/CommunityMembers.tsx (10)
5-27: LGTM! Import organization aligns with the API model migration.The imports correctly reflect the shift to generated API models and the addition of mobile dialog functionality.
43-67: LGTM! Type conversion logic is safe and well-validated.The
convertSortByfunction properly validates input before performing type assertions, ensuring type safety when converting URL parameters toApiCommunityMembersSortOption.
69-82: LGTM! Safe type conversion with validation.The
convertSortDirectionfunction correctly validates the input againstSortDirectionenum values before performing the type assertion on line 74.
155-175: LGTM! Data fetching properly typed with generated API models.The
useQueryhook is correctly typed withPage<ApiCommunityMemberOverview>and usesplaceholderData: keepPreviousDatafor smooth transitions during refetches.
212-228: LGTM! Effect correctly synchronizes URL parameters with Redux state.This effect properly handles the bidirectional sync between the active group in Redux state and the URL query parameter, resetting pagination when the group changes.
245-261: LGTM! Pagination management is correctly implemented.The effect properly calculates total pages and handles edge cases where the current page exceeds the available pages after data changes.
265-270: LGTM! Clean side effect for dialog state management.This effect appropriately closes the mobile filter dialog when the active group changes, providing good UX by preventing stale filter UI state.
274-324: LGTM! Well-structured header with mobile-responsive controls.The header section properly integrates filter and sort buttons with appropriate aria-labels for accessibility. The visual feedback for the active filter state (via
activeGroupIdcheck) is a nice touch.
325-355: LGTM! Clean conditional rendering and pagination integration.The main content area properly handles loading states with the skeleton component and conditionally renders pagination only when needed (multiple pages exist).
357-380: LGTM! Mobile dialogs are properly integrated.Both
MobileWrapperDialoginstances for filter and sort are correctly configured with appropriate titles, open/close handlers, and content components.
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx:
- Around line 1-9: Import userEvent from "@testing-library/user-event" in the
MobileWrapperDialog.test.tsx and use it to simulate user interactions: render
MobileWrapperDialog with the provided defaultProps (including the onClose mock),
use userEvent.click to click the dialog close button (e.g., the element with
aria-label or test id for close) and the backdrop element, and assert that
defaultProps.onClose was called for each interaction; update or add tests in the
describe block to perform these interaction assertions for MobileWrapperDialog.
- Around line 17-35: Add interaction and accessibility tests to
MobileWrapperDialog.test.tsx: create tests that render MobileWrapperDialog with
isOpen={true} and a jest.fn() onClose, then (1) use userEvent.setup() and click
the close button queried via getByRole("button", { name: "Close panel" }) and
assert onClose was called, (2) simulate pressing Escape via
user.keyboard("{Escape}") and assert onClose was called, (3) click the dialog
backdrop (query the backdrop element your component exposes, e.g., a test id or
role used by MobileWrapperDialog) and assert onClose was called, and (4) verify
keyboard accessibility by focusing the close button (closeButton.focus()) and
asserting it has focus; reuse defaultProps and the existing queries to locate
elements.
- Around line 1-36: Tests are missing coverage for MobileWrapperDialog props
tall, noPadding, onBeforeLeave, and onAfterLeave; add unit tests that render
MobileWrapperDialog with tall={true} to assert the dialog container has the
expected max-height class or style, with noPadding={true} to assert
padding-related className changes and that children render correctly without
padding, and mock functions for onBeforeLeave and onAfterLeave passed as props
to assert they are called during the dialog close transition (simulate
open→close and await transition hooks), using the existing defaultProps and
testing-library queries (getByTestId, getByRole, getByText) to increase line
coverage above 80%.
🧹 Nitpick comments (5)
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (2)
39-51: Expand test coverage to all sortable columns.The test correctly verifies the TDH column interaction, but the component has 5 sortable columns (Level, Tdh, Xtdh, Rep, Cic based on the component snippet). Consider adding test cases for the remaining sortable columns to ensure the migration to
ApiCommunityMembersSortOptionworks correctly for all columns.✅ Suggested test cases for complete coverage
expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Tdh); }); + + it("calls onSort when clicking Level column", () => { + const onSort = jest.fn(); + render( + <table> + <CommunityMembersTableHeader {...defaultProps} onSort={onSort} /> + </table> + ); + + const levelHeader = screen.getByText(ApiCommunityMembersSortOption.Level).closest("th")!; + fireEvent.click(levelHeader); + + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Level); + }); + + it("calls onSort when clicking Xtdh column", () => { + const onSort = jest.fn(); + render( + <table> + <CommunityMembersTableHeader {...defaultProps} onSort={onSort} /> + </table> + ); + + const xtdhHeader = screen.getByText(ApiCommunityMembersSortOption.Xtdh).closest("th")!; + fireEvent.click(xtdhHeader); + + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Xtdh); + }); + + it("calls onSort when clicking Rep column", () => { + const onSort = jest.fn(); + render( + <table> + <CommunityMembersTableHeader {...defaultProps} onSort={onSort} /> + </table> + ); + + const repHeader = screen.getByText(ApiCommunityMembersSortOption.Rep).closest("th")!; + fireEvent.click(repHeader); + + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Rep); + }); + + it("calls onSort when clicking Cic column", () => { + const onSort = jest.fn(); + render( + <table> + <CommunityMembersTableHeader {...defaultProps} onSort={onSort} /> + </table> + ); + + const cicHeader = screen.getByText(ApiCommunityMembersSortOption.Cic).closest("th")!; + fireEvent.click(cicHeader); + + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Cic); + });Based on learnings, one behavior per test with clear, descriptive test names.
14-51: Consider adding keyboard navigation tests.Based on learnings, tests should verify keyboard navigation and screen reader compatibility. Consider adding tests to ensure sortable column headers are keyboard accessible (e.g., can be focused with Tab and activated with Enter or Space).
♿ Example keyboard accessibility test
expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Tdh); }); + + it("supports keyboard navigation on sortable columns", () => { + const onSort = jest.fn(); + render( + <table> + <CommunityMembersTableHeader {...defaultProps} onSort={onSort} /> + </table> + ); + + const tdhHeader = screen.getByText(ApiCommunityMembersSortOption.Tdh).closest("th")!; + tdhHeader.focus(); + fireEvent.keyDown(tdhHeader, { key: "Enter", code: "Enter" }); + + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Tdh); + });Based on learnings, test accessibility with keyboard navigation.
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx (2)
24-43: Cover xTDH behavior + prefer role-based queries (anduserEvent) over clicking the inner span.This makes the test more resilient and actually validates the PR’s xTDH wiring (not just that the label exists). Also consider asserting call count.
Proposed diff
-import { render, screen, fireEvent } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; @@ - it("calls onSort when clicking an option", () => { + it("calls onSort when clicking an option", async () => { + const user = userEvent.setup(); const onSort = jest.fn(); render( <CommunityMembersMobileSortContent {...defaultProps} onSort={onSort} /> ); - fireEvent.click(screen.getByText("TDH")); + await user.click(screen.getByRole("button", { name: "TDH" })); - expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Tdh); + expect(onSort).toHaveBeenCalledTimes(1); + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Tdh); }); + + it("calls onSort when clicking xTDH", async () => { + const user = userEvent.setup(); + const onSort = jest.fn(); + render( + <CommunityMembersMobileSortContent {...defaultProps} onSort={onSort} /> + ); + + await user.click(screen.getByRole("button", { name: "xTDH" })); + + // Verify the enum member name in generated models (likely `Xtdh`). + expect(onSort).toHaveBeenCalledWith(ApiCommunityMembersSortOption.Xtdh); + });
45-50: UsetoHaveClass(and assert the button is found) for the active styling check.This improves failure messages and avoids relying on
classNamestring inspection.Proposed diff
it("shows active styling for selected option", () => { render(<CommunityMembersMobileSortContent {...defaultProps} />); - const levelButton = screen.getByText("Level").closest("button"); - expect(levelButton?.className).toContain("tw-border-primary-500"); + const levelButton = screen.getByRole("button", { name: "Level" }); + expect(levelButton).toHaveClass("tw-border-primary-500"); });Based on learnings, consider adding a small keyboard activation test (
Tab→Enter/Space) to validate accessibility expectations for mobile dialogs/buttons.__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx (1)
11-15: Remove redundantisOpenprop.Line 12 explicitly passes
isOpen={false}, butdefaultPropsalready setsisOpen: false. This is redundant.♻️ Proposed simplification
it("does not render children when closed", () => { - render(<MobileWrapperDialog {...defaultProps} isOpen={false} />); + render(<MobileWrapperDialog {...defaultProps} />); expect(screen.queryByTestId("child-content")).not.toBeInTheDocument(); });
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
🧠 Learnings (8)
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/{__tests__,*.test.{tsx,ts}} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside the component
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : All tests must live in `__tests__` directory, mirroring source folder structure (`components`, `contexts`, `hooks`, `utils`)
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
🧬 Code graph analysis (3)
__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx (1)
components/mobile-wrapper-dialog/MobileWrapperDialog.tsx (1)
MobileWrapperDialog(10-141)
__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx (1)
components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
CommunityMembersMobileSortContent(13-51)
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (1)
components/community/members-table/CommunityMembersTableHeader.tsx (1)
CommunityMembersTableHeader(8-124)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (3)
1-4: LGTM! Clean migration to generated API models.The imports correctly reference the new
ApiCommunityMembersSortOptionfrom generated models, aligning with the PR's migration objective.
6-12: Mock appropriately simplified for unit testing.The mock reduces the sortable content component to just rendering the sort key, which is sufficient for verifying the header's rendering logic without testing child component internals.
22-37: Well-structured header rendering test.The test properly wraps the component in a
<table>element and verifies all column headers, including both static (Rank, Profile, Last Seen) and dynamic sortable columns.__tests__/components/community/members-table/CommunityMembersMobileSortContent.test.tsx (1)
6-11: Thejest.mock()path correctly matches the component's import path. No issues found.
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In
@__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx:
- Around line 34-49: Replace the unsafe "as any" cast on the test fixture
"member" with the generated API type ApiCommunityMemberOverview: import the type
ApiCommunityMemberOverview from the API models and declare member with that type
(e.g., const member: ApiCommunityMemberOverview = { ... }); adjust the object
shape if TypeScript reports mismatches to match ApiCommunityMemberOverview
fields exactly so the test uses a correctly typed fixture.
- Around line 51-67: Add multiple focused tests for CommunityMembersMobileCard
to reach 80% coverage: split into separate it blocks that cover (1) rendering
rank badge and profile link (verify CommunityMembersMobileCard renders "#2" and
getByRole("link") href), (2) TDH/xTDH formatting and large/zero numeric edge
cases (render with zero and very large values), (3) absence of "Last Seen" when
member.last_activity is undefined (use a member copy with last_activity removed
and assert queryByText("Last Seen") is null), (4) profile-type branch for
isNotProfile by supplying an ethereum address in detail_view_key and asserting
the alternate UI path, and (5) keyboard accessibility to the link (focus the
link and assert document.activeElement or use userEvent.keyboard to Tab to it);
use descriptive test names and the existing test helpers/fixtures to locate the
member prop used by CommunityMembersMobileCard.
In @__tests__/components/community/members-table/CommunityMembersTable.test.tsx:
- Around line 102-118: Expand CommunityMembersTable.test.tsx to reach ≥80%
coverage by adding unit and accessibility tests: add tests that render
CommunityMembersTable with isLoading: true and assert a loading indicator
appears; mock and pass an onSort handler and assert it is called when clicking
the sortable header (use fireEvent or userEvent on the header element used in
the component, e.g., the element with test id "header"); add tests for sort
direction toggling by simulating repeated clicks and asserting the component
updates accordingly; add edge-case renders for empty members array and a
single-member array and assert rows/mobile-card counts (test ids "row" and
"mobile-card"); add keyboard navigation/a11y tests using userEvent.tab and key
events to verify focus moves through interactive elements and that ARIA
attributes exist and change as expected on sort controls; add screen-reader
announcement checks using an accessibility helper like jest-axe or by asserting
presence/updates of an ARIA live region if the component exposes one. Ensure
each test references CommunityMembersTable, baseProps, and the test ids ("row",
"mobile-card", "header") so they target the same UI elements.
🧹 Nitpick comments (3)
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (2)
6-12: Tighten the mock type annotation.The mock uses
{ sort: string }but the actual component expectssort: ApiCommunityMembersSortOption. Using the precise type improves type safety and catches potential mismatches during development.♻️ Proposed type improvement
jest.mock( "@/components/community/members-table/CommunityMembersTableHeaderSortableContent", () => ({ __esModule: true, - default: ({ sort }: { sort: string }) => <span>{sort}</span>, + default: ({ sort }: { readonly sort: ApiCommunityMembersSortOption }) => <span>{sort}</span>, }) );
57-60: Replace non-null assertion with explicit assertion.The non-null assertion operator (
!) on line 59 will throw an unclear error if the element isn't found. Use an explicit assertion to provide a more helpful failure message.♻️ Proposed safer assertion pattern
const tdhHeader = screen .getByText(ApiCommunityMembersSortOption.Tdh) - .closest("th")!; + .closest("th"); + expect(tdhHeader).not.toBeNull(); fireEvent.click(tdhHeader);__tests__/components/community/members-table/CommunityMembersTable.test.tsx (1)
21-37: Consider addingreadonlyto mock component props.The coding guidelines specify adding
readonlybefore props in React components. While these are test mocks, they're still functional components, so marking the props as readonly would align with the project's conventions.♻️ Optional refactor to add readonly
For
CommunityMembersTableRowmock:default: ({ rank, member, }: { - rank: number; - member: ApiCommunityMemberOverview; + readonly rank: number; + readonly member: ApiCommunityMemberOverview; }) => (For
CommunityMembersMobileCardmock:default: ({ rank, member, }: { - rank: number; - member: ApiCommunityMemberOverview; + readonly rank: number; + readonly member: ApiCommunityMemberOverview; }) => (As per coding guidelines.
Also applies to: 39-55
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx
✅ Files skipped from review due to trivial changes (1)
- tests/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
🧠 Learnings (15)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Use realistic production-like data in tests
Applied to files:
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{jsx,tsx} : Use `<Link href="/path">` from Next.js for internal navigation instead of raw `<a>` tags to comply with `next/next/no-html-link-for-pages`.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Prefer direct named imports from React (`useMemo`, `useRef`, `FC`) over `React.` namespace usage
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Fix issues with modernization aligned to React 19.2, React Compiler, and Next.js 16 conventions. Do not add `// eslint-disable` comments unless explicitly instructed.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `Element.remove()` method instead of `parentNode.removeChild(element)`
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,jsx} : Use internal links via `<Link>` component from Next.js instead of `<a>` tags
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Always add `readonly` before props in React components
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
🧬 Code graph analysis (2)
__tests__/components/community/members-table/CommunityMembersTableHeader.test.tsx (1)
components/community/members-table/CommunityMembersTableHeader.tsx (1)
CommunityMembersTableHeader(8-124)
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (1)
components/community/members-table/CommunityMembersMobileCard.tsx (1)
CommunityMembersMobileCard(12-99)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (1)
1-30: LGTM!The mock setup is well-structured. Using
data-testidattributes for component mocks and simplified return values for helper functions provides clean test isolation.__tests__/components/community/members-table/CommunityMembersTable.test.tsx (3)
1-5: LGTM! Imports align with API migration.The imports correctly use the generated API types (
ApiCommunityMemberOverview,ApiCommunityMembersSortOption) as intended by this PR's migration to OpenAPI models.
57-90: LGTM! Test data is realistic and complete.The test data includes all required fields from the new
ApiCommunityMemberOverviewtype, including the newly added fields (tdh_rate,xtdh,xtdh_rate,combined_tdh,combined_tdh_rate). The data is realistic and suitable for testing.Based on learnings, which emphasize using realistic production-like data in tests.
92-100: LGTM! Props correctly use new API types.The
basePropscorrectly usesApiCommunityMembersSortOption.Levelfrom the generated API models, aligning with the migration objectives.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
tests/testHelpers.ts (1)
8-8: Consider dot notation for static property access.Since
"testDelay"is a valid identifier and known at compile time, dot notation (metadata?.testDelay) would be more idiomatic and readable. Bracket notation is typically reserved for dynamic keys or properties with special characters.If this change is required by the type definition of
metadata(e.g., if it uses an index signature), then the current approach is correct.components/community/members-table/CommunityMembersMobileCard.tsx (1)
36-41: Replace<img>with<Image>fromnext/image.Per coding guidelines, use the Next.js
<Image>component instead of raw<img>elements to comply with@next/next/no-img-element.♻️ Suggested fix
+import Image from "next/image"; import Link from "next/link";- <img - src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} - alt={`${member.display} avatar`} - className="tw-h-full tw-w-full tw-object-contain tw-mx-auto" - /> + <Image + src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} + alt={`${member.display} avatar`} + className="tw-h-full tw-w-full tw-object-contain tw-mx-auto" + width={44} + height={44} + unoptimized + />components/community/members-table/CommunityMembersTableRow.tsx (2)
41-45: Replace<img>with<Image>fromnext/image.Per coding guidelines, use the Next.js
<Image>component instead of raw<img>elements.♻️ Suggested fix
+import Image from "next/image"; import Link from "next/link";- <img - src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} - alt="Network Table Profile Picture" - className="tw-mx-auto tw-h-auto tw-max-h-full tw-w-auto tw-max-w-full tw-bg-transparent tw-object-contain" - /> + <Image + src={getScaledImageUri(member.pfp, ImageScale.W_AUTO_H_50)} + alt="Network Table Profile Picture" + className="tw-mx-auto tw-h-auto tw-max-h-full tw-w-auto tw-max-w-full tw-bg-transparent tw-object-contain" + width={32} + height={32} + unoptimized + />
81-97: Consider extracting tooltip styles to a shared constant.The tooltip styling is duplicated between TDH and xTDH tooltips. Extract to reduce duplication.
♻️ Optional refactor
const TOOLTIP_STYLE = { backgroundColor: "#1F2937", color: "white", padding: "8px 12px", } as const;Then use
style={TOOLTIP_STYLE}in both Tooltip components.Also applies to: 108-126
__tests__/components/community/members-table/CommunityMembersTable.test.tsx (1)
176-192: Consider enhancing prop verification assertions.The tests verify the header renders but don't assert that
isLoadingorsortDirectionprops are actually passed with correct values. The mock could expose these for stronger assertions.♻️ Optional enhancement
Update the mock to display prop values:
default: ({ isLoading, sortDirection, // ...other props }: { isLoading: boolean; sortDirection: SortDirection; // ... }) => ( <thead data-testid="header" data-loading={isLoading} data-direction={sortDirection}> ... </thead> ),Then assert:
expect(screen.getByTestId("header")).toHaveAttribute("data-loading", "true")components/community/CommunityMembers.tsx (1)
372-378: Simplify callback wrapper.The arrow function wrapper is unnecessary since
setSortByalready matches the expected signature.♻️ Suggested simplification
<CommunityMembersMobileSortContent activeSort={params.sort} sortDirection={params.sort_direction} - onSort={(sort) => { - setSortBy(sort); - }} + onSort={setSortBy} />
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx__tests__/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsxcomponents/community/CommunityMembers.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/members-table/CommunityMembersTableRow.tsxtests/testHelpers.tstsconfig.json
🚧 Files skipped from review as they are similar to previous changes (2)
- tests/components/mobile-wrapper-dialog/MobileWrapperDialog.test.tsx
- tsconfig.json
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxtests/testHelpers.ts
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxtests/testHelpers.ts
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxtests/testHelpers.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxtests/testHelpers.ts
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/community/members-table/CommunityMembersTableRow.tsxcomponents/community/members-table/CommunityMembersMobileCard.tsxcomponents/community/CommunityMembers.tsx__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxtests/testHelpers.ts
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
**/*.{ts,js}
📄 CodeRabbit inference engine (AGENTS.md)
When parsing Seize URLs or similar, fail fast if base origin is unavailable instead of falling back to placeholder origins
Files:
tests/testHelpers.ts
🧠 Learnings (25)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `useEffectEvent` for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Applied to files:
components/community/CommunityMembers.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use react-query for data fetching
Applied to files:
components/community/CommunityMembers.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Use realistic production-like data in tests
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/{__tests__,*.test.{tsx,ts}} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside the component
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Limit function cognitive complexity to 15 or less; extract deep ternaries (>3 levels)
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsxtests/testHelpers.ts
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{jsx,tsx} : Use `<Link href="/path">` from Next.js for internal navigation instead of raw `<a>` tags to comply with `next/next/no-html-link-for-pages`.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Prefer direct named imports from React (`useMemo`, `useRef`, `FC`) over `React.` namespace usage
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Fix issues with modernization aligned to React 19.2, React Compiler, and Next.js 16 conventions. Do not add `// eslint-disable` comments unless explicitly instructed.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `Element.remove()` method instead of `parentNode.removeChild(element)`
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,jsx} : Use internal links via `<Link>` component from Next.js instead of `<a>` tags
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Always add `readonly` before props in React components
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:44.885Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: app/api/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:44.885Z
Learning: Applies to app/api/**/*.{ts,tsx} : Use TypeScript types for request parameters and responses; avoid `any` unless a 3rd-party payload truly has no shape guarantees.
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Avoid double negatives in code; prefer explicit statements and use optional chaining (`?.`)
Applied to files:
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsxtests/testHelpers.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/app/api/**/__tests__/**/*.{ts,tsx,js} : API integration tests should be placed in `app/api` directory
Applied to files:
__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{test,spec}.{js,ts,jsx,tsx} : Run `npm run test` to execute all Jest tests and enforce ≥80% line coverage for files changed since `main`. Tests must pass and coverage threshold must be met before completing any task.
Applied to files:
__tests__/components/community/members-table/CommunityMembersTable.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `Array.at()` method for negative indexing instead of `array[array.length - n]`
Applied to files:
tests/testHelpers.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `String.replaceAll()` instead of global regex for string replacement
Applied to files:
tests/testHelpers.ts
🔇 Additional comments (11)
components/community/members-table/CommunityMembersMobileCard.tsx (1)
68-96: LGTM!The metrics layout with TDH, xTDH, REP, and NIC is well-structured with consistent formatting. Zero-value handling correctly shows "-" placeholder.
__tests__/components/community/members-table/CommunityMembersMobileCard.test.tsx (4)
7-12: LGTM!The mock for
next/linkis properly typed withReactNodeand correctly simulates the Link behavior for testing. Good practice mocking external dependencies.
35-52: Well-structured test fixture.The
baseMemberfixture includes all requiredApiCommunityMemberOverviewfields with realistic production-like data. Good coverage of new xTDH-related fields.
86-105: LGTM!The formatting tests properly verify large number display and zero-value handling. Assertions correctly match the mock behavior and component logic.
138-148: Good accessibility coverage.The keyboard navigation test ensures the card's link is focusable via tab, which is important for accessibility compliance. Based on learnings, this aligns with testing keyboard navigation requirements.
components/community/members-table/CommunityMembersTableRow.tsx (1)
143-150: LGTM!The last activity rendering with
getTimeAgoShortis clean with proper conditional display.__tests__/components/community/members-table/CommunityMembersTable.test.tsx (2)
68-88: Well-designed factory function.The
createMemberfactory creates completeApiCommunityMemberOverviewobjects with all required fields, supporting consistent test data creation.
111-120: LGTM!Rank calculation tests correctly verify the pagination formula:
(page - 1) * pageSize + index + 1. Good coverage of both page 1 and page 2 scenarios.Also applies to: 148-154
components/community/CommunityMembers.tsx (3)
1-26: LGTM!Imports are well-organized with proper separation of types, components, and utilities. The migration to API-generated models (
ApiCommunityMemberOverview,ApiCommunityMembersSortOption) is correctly implemented.
268-270: LGTM!This Effect appropriately syncs the mobile filter dialog state with the Redux
activeGroupId. Closing the dialog on group selection is correct UX behavior.
357-379: LGTM!The mobile wrapper dialogs for filter and sort are well-structured with proper state management and component composition. Good separation of concerns between filter (GroupsSidebar) and sort (CommunityMembersMobileSortContent) functionality.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/community/CommunityMembers.tsx (1)
268-270: Consider closing the sort dialog when the group filter changes.The effect closes
mobileFilterOpenwhenactiveGroupIdchanges, but leavesmobileSortOpenopen. For consistency, consider also closing the sort dialog to prevent user confusion when the data context changes.♻️ Suggested enhancement
useEffect(() => { setMobileFilterOpen(false); + setMobileSortOpen(false); }, [activeGroupId]);
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
components/community/CommunityMembers.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/community/CommunityMembers.tsxcomponents/mobile-wrapper-dialog/MobileWrapperDialog.tsxcomponents/community/members-table/CommunityMembersTableSkeleton.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `useEffectEvent` for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Applied to files:
components/community/CommunityMembers.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use react-query for data fetching
Applied to files:
components/community/CommunityMembers.tsx
🧬 Code graph analysis (2)
components/community/CommunityMembers.tsx (5)
helpers/Types.tsx (1)
Page(12-17)generated/models/ApiCommunityMemberOverview.ts (1)
ApiCommunityMemberOverview(16-142)components/utils/table/paginator/CommonTablePagination.tsx (1)
CommonTablePagination(1-82)components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
CommunityMembersTableSkeleton(4-67)components/community/members-table/CommunityMembersMobileSortContent.tsx (1)
CommunityMembersMobileSortContent(13-51)
components/community/members-table/CommunityMembersTableSkeleton.tsx (1)
helpers/AllowlistToolHelpers.ts (1)
getRandomObjectId(44-46)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (12)
components/community/members-table/CommunityMembersTableSkeleton.tsx (4)
1-2: LGTM! Clean and correct imports.The imports follow the coding guidelines with direct named imports from React.
4-12: LGTM! Proper use ofreadonlyanduseMemo.The component signature follows guidelines with
readonlyprops, and theuseMemohook appropriately memoizes the row keys array to avoid unnecessary regeneration on each render.
14-37: LGTM! Well-structured responsive skeleton for large screens.The large screen layout uses TailwindCSS correctly, has proper responsive breakpoints, and includes appropriate skeleton placeholders for the table structure.
39-64: LGTM! Well-structured responsive skeleton for small screens.The mobile layout correctly complements the desktop version with appropriate hiding/showing breakpoints and card-based skeleton placeholders.
components/mobile-wrapper-dialog/MobileWrapperDialog.tsx (3)
131-135: LGTM!The conditional height vs. maxHeight logic correctly handles both fixed and flexible sizing scenarios.
54-109: LGTM!The transition timing standardization and performance optimizations (
tw-transform-gpu,tw-will-change-transform) improve consistency and rendering performance.
38-43: Add a comment explaining the counterintuitive height logic for Capacitor platforms.The
getHeightfunction returns a smaller height (100dvh - 10rem) whentall=trueon Capacitor (native mobile) but a larger height (100dvh - 4rem) whentall=trueon web. This is counterintuitive—requestingtalltypically implies requesting more vertical space, not less on the platform where screen real estate is most precious.Per the coding guidelines, code must be self-explanatory without comments. If this logic is intentional due to Capacitor's viewport constraints or system UI considerations, add a comment clarifying the design decision. If the condition is incorrect, it should be
if (tall && isCapacitor)instead.components/community/CommunityMembers.tsx (5)
1-46: LGTM!The migration to API-generated models (
ApiCommunityMemberOverview,ApiCommunityMembersSortOption) and the enum naming convention change fromLEVELtoLevelalign with OpenAPI/TypeScript generator patterns.
54-82: LGTM!The
convertSortByandconvertSortDirectionfunctions correctly normalize input case to match their respective enum conventions (lowercase forApiCommunityMembersSortOption, uppercase forSortDirection) with proper fallbacks.
84-175: LGTM!The query parameter handling, debouncing (200ms), and data fetching are correctly implemented with proper type safety using
ApiCommunityMemberOverviewandkeepPreviousDatafor smooth transitions.
177-261: LGTM!The
setSortByfunction and effects correctly manage URL state synchronization with proper dependency arrays and page reset logic.
325-382: LGTM!The table rendering with conditional pagination, loading skeleton, and mobile dialogs are correctly implemented. The filter dialog uses
tallandfixedHeightprops appropriately for full-screen sidebar display.
Signed-off-by: prxt6529 <prxt@6529.io>
|
2 participants
Summary by CodeRabbit
New Features
Refactor
Style
✏️ Tip: You can customize this high-level summary in your review settings.