Fix szn filters in user page collected

[prxt6529]

Summary by CodeRabbit

• Bug Fixes
  • Filter selections are now preserved when navigating between different collection pages instead of being reset.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR updates Jest mocking strategies for collected-items filter tests and modifies the UserPageCollected component's state management to preserve the currently selected szn across filter refreshes when the initial szn ID matches, rather than always resetting filters.

Changes

Cohort / File(s)	Summary
Test mocking infrastructure __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx	Introduces new Jest mocks for TransferToggle, CommonSelect, UserPageCollectedFiltersCollection (as NativeDropdown), and NetworkCollection. Updates mock for user-page-collected-filters.helpers from static object export to function-based export that retrieves CollectedCollectionType and returns structured meta with MEMES, GRADIENTS, and NETWORK entries. Adjusts expected data-testid values accordingly.
State management logic components/user/collected/UserPageCollected.tsx	Replaces straightforward filter initialization effect with state-preserving update. New useEffect computes filters via getFilters and conditionally merges previous szn into new filters if its ID matches the newly computed initialSznId; otherwise replaces filters entirely. Maintains selected szn across parameter-driven refreshes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Test file mocking: Verify that all mock implementations (TransferToggle, CommonSelect, UserPageCollectedFiltersCollection, NetworkCollection) correctly align with actual component APIs and that the helper mock function properly reconstructs the meta structure.
• State preservation logic: Carefully review the conditional merge logic in UserPageCollected.tsx—ensure the szn ID comparison logic correctly identifies when to preserve vs. replace, and verify that the merged filter state doesn't create stale or inconsistent UI states.

Poem

🐰 With mocks aligned and filters bright,
The szn state now holds on tight!
When IDs match, old choices stay,
Fresh data flows the cleaner way.
A rabbit's work, precise and keen—
The smoothest filter flow you've seen! 🌟

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix szn filters in user page collected' directly relates to the main change, which preserves szn (season) filter state across parameter-driven refreshes in the UserPageCollected component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch szn-filter-grid-fix

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3cad4d8 and 4b8eafd.

📒 Files selected for processing (2)

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx (3 hunks)
• components/user/collected/UserPageCollected.tsx (1 hunks)

🧰 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}: Replace <img> elements with <Image /> from next/image to satisfy @next/next/no-img-element ESLint rule
Use <Link href="/path"> from Next.js for internal navigation instead of plain HTML links to satisfy @next/next/no-html-link-for-pages ESLint rule

Files:

• components/user/collected/UserPageCollected.tsx
• __tests__/components/user/collected/filters/UserPageCollectedFilters.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 add readonly before props in React components

Files:

• components/user/collected/UserPageCollected.tsx
• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,jsx,ts,tsx}: Code must satisfy ESLint (Next's Core Web Vitals + React Hooks)
Use framework APIs: internal links should use <Link>, images should use next/image, and adopt Next's ESLint rules (Core Web Vitals)

**/*.{js,jsx,ts,tsx}: Code must satisfy ESLint (Next's Core Web Vitals + React Hooks rules)
Follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)

Files:

• components/user/collected/UserPageCollected.tsx
• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Must pass tsc --noEmit type checking
Prefer direct named imports for React hooks and types (import { useMemo, useRef, FC, etc. } from "react") over React. namespace usage (React.useMemo, React.useRef, etc.)
If the react-hooks/exhaustive-deps lint rule is triggered: if the Effect only derives state, remove the Effect and compute during render; if listening to an external system and needing fresh props/state, wrap non-reactive logic in useEffectEvent

**/*.{ts,tsx}: Must pass tsc --noEmit for TypeScript type checking
Prefer Server Components over Client Components; use Server Functions/Server Actions ('use server') for mutations
Remove unnecessary Effects; if Effect only derives state, compute during render instead
Use useEffectEvent for non-reactive logic inside Effects to avoid unnecessary re-runs
Use framework APIs: <Link> for internal links, next/image for images, adopt Next's ESLint rules
Use 'use cache' directive and Cache Components features for explicit opt-in caching in Next.js 16
Use TypeScript and React functional components with hooks
When parsing Seize URLs or similar, fail fast if base origin is unavailable; do not fall back to placeholder origins
Replace <img> elements with <Image /> from next/image
Use <Link href="/path"> for internal navigation instead of plain HTML links
Move data fetches to Server Components; handle mutations through Server Functions/Server Actions with 'use server' directive

Files:

• components/user/collected/UserPageCollected.tsx
• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

**/@(__tests__|*.test).{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Tests should live in __tests__/ or ComponentName.test.tsx; mock external dependencies and APIs in tests

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

**/__tests__/**/*.{ts,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

Place tests in __tests__/ directory or as ComponentName.test.tsx alongside components

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

Mock external dependencies and APIs in tests

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

__tests__/**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (tests/AGENTS.md)

Use Jest + ts-jest for TypeScript testing

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

__tests__/**/*.{ts,tsx}

📄 CodeRabbit inference engine (tests/AGENTS.md)

Functions must have ≤ 15 cognitive complexity; extract deep ternaries (>3 levels) and break down complex logic

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

__tests__/**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (tests/AGENTS.md)

__tests__/**/*.{ts,tsx,js}: Prefer for...of loops over forEach as it allows break/continue and works with async/await
Use array.at(-1) and array.at(-2) instead of index-based array access for negative indexing
Use String.prototype.replaceAll() instead of replace() for global string replacements
Use globalThis.fetch() instead of direct fetch() calls
Organize imports with one import per module in order: external → internal → types, with no duplicates
Use element.remove() instead of parent.removeChild(element) for DOM manipulation
Catch errors only when meaningful; no empty catch blocks; log errors with context
Avoid double negatives in code; prefer explicit logic and remove redundant annotations; use optional chaining (?.)

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

__tests__/**/{components,contexts,hooks}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (tests/AGENTS.md)

Use semantic HTML elements (<label>, <output>) over ARIA attributes when possible; every form control must have a label

Files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

🧠 Learnings (10)

📚 Learning: 2025-12-05T10:55:30.871Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.871Z
Learning: Applies to **/*.{ts,tsx} : Remove unnecessary Effects; if Effect only derives state, compute during render instead

Applied to files:

• components/user/collected/UserPageCollected.tsx

📚 Learning: 2025-12-03T14:52:34.271Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.271Z
Learning: Fix with modernization (no `// eslint-disable` unless explicitly instructed); prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions

Applied to files:

• components/user/collected/UserPageCollected.tsx
• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

📚 Learning: 2025-12-05T10:55:30.871Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.871Z
Learning: Applies to **/*.{ts,tsx} : Use `useEffectEvent` for non-reactive logic inside Effects to avoid unnecessary re-runs

Applied to files:

• components/user/collected/UserPageCollected.tsx

📚 Learning: 2025-12-03T14:52:34.271Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.271Z
Learning: Applies to **/*.{ts,tsx} : If the `react-hooks/exhaustive-deps` lint rule is triggered: if the Effect only derives state, remove the Effect and compute during render; if listening to an external system and needing fresh props/state, wrap non-reactive logic in `useEffectEvent`

Applied to files:

• components/user/collected/UserPageCollected.tsx

📚 Learning: 2025-12-05T10:55:30.871Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.871Z
Learning: Applies to **/*.test.{ts,tsx} : Mock external dependencies and APIs in tests

Applied to files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

📚 Learning: 2025-12-05T10:55:43.476Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.476Z
Learning: Applies to __tests__/**/__tests__/**/components/**/*.test.{ts,tsx} : Use testing-library/react + user-event for React component tests

Applied to files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

📚 Learning: 2025-12-03T14:52:34.271Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.271Z
Learning: Applies to **/@(__tests__|*.test).{ts,tsx} : Tests should live in `__tests__/` or `ComponentName.test.tsx`; mock external dependencies and APIs in tests

Applied to files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

📚 Learning: 2025-12-05T10:55:43.476Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.476Z
Learning: Applies to __tests__/**/__tests__/**/*.test.{ts,tsx,js} : Keep tests independent, deterministic, and fast with production-like data

Applied to files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

📚 Learning: 2025-12-05T10:55:43.476Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.476Z
Learning: Applies to __tests__/**/*.{ts,tsx,js} : Avoid double negatives in code; prefer explicit logic and remove redundant annotations; use optional chaining (`?.`)

Applied to files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

📚 Learning: 2025-12-05T10:55:30.871Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.871Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React functional components with hooks

Applied to files:

• __tests__/components/user/collected/filters/UserPageCollectedFilters.test.tsx

⏰ 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)