boost boosted drop

[simo6529]

Summary by CodeRabbit

• New Features

  • Boost button is now interactive with visual feedback (filled/outlined icon) reflecting boost status.
  • Added optional control to display or hide boost count.

• Improvements

  • Enhanced data synchronization for boost state changes to ensure UI consistency.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR enhances the boost feature by adding interactive boost functionality to BoostedDropCard with authentication context and mutation handling, introduces a configurable showCount prop to WaveDropActionsBoost for flexible display control, and updates useDropBoostMutation to use query invalidation instead of synchronous toast notifications for cache consistency.

Changes

Cohort / File(s)	Summary
Boost UI Components components/drops/view/BoostedDropCard.tsx, components/waves/drops/WaveDropActionsBoost.tsx	BoostedDropCard now integrates AuthContext and boost mutation logic with clickable boost button, memoized drop conversion, and conditional UI state (filled/outlined icon, disabled state). WaveDropActionsBoost adds optional showCount prop (default true) to gate boost count visibility.
Query Management hooks/drops/useDropBoostMutation.ts	Hook refactored to use QueryClient for async query invalidation (QueryKey.BOOSTED\_DROPS) on successful mutation instead of synchronous toast notifications, ensuring cache consistency.

Sequence Diagram

sequenceDiagram
    participant User
    participant BoostedDropCard
    participant useDropBoostMutation
    participant API
    participant QueryClient
    
    User->>BoostedDropCard: Click Boost Button
    BoostedDropCard->>BoostedDropCard: Check canBoost & isAuthenticated
    alt Can Boost
        BoostedDropCard->>useDropBoostMutation: Trigger boost mutation
        useDropBoostMutation->>API: Send boost request
        API-->>useDropBoostMutation: Success response
        useDropBoostMutation->>QueryClient: Invalidate BOOSTED_DROPS cache
        QueryClient-->>BoostedDropCard: Refetch updated data
        BoostedDropCard->>BoostedDropCard: Update isBoosted state
    else Cannot Boost
        BoostedDropCard->>BoostedDropCard: Button disabled
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #1710: Introduces mobile boost UI that integrates with useDropBoostMutation and AuthContext, directly complementing the boost feature enhancements.
• PR #1706: Implements follow-up changes to the same boost feature with related updates to BoostedDropCard and WaveDropActionsBoost behavior.
• PR #1713: Modifies BOOSTED\_DROPS query key structure (adding timeWindow), which impacts the query invalidation strategy introduced in useDropBoostMutation.

Suggested reviewers

• ragnep
• prxt6529

Poem

🐰 A boost of magic, click by click,
Where drops now dance with auth so slick!
Query caches, fresh and bright,
State flows smooth from left to right. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The pull request title 'boost boosted drop' is vague and generic, using non-descriptive terms that don't clearly convey the main objective of the changes.	Revise the title to be more descriptive and specific, such as 'Add boost functionality to boosted drops' or 'Implement drop boost interactions and state management' to better reflect the actual changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 001ac43 and 6a66ddb.

📒 Files selected for processing (3)

• components/drops/view/BoostedDropCard.tsx
• components/waves/drops/WaveDropActionsBoost.tsx
• hooks/drops/useDropBoostMutation.ts

🧰 Additional context used

📓 Path-based instructions (8)

**/*.{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 use useMemo instead.
Use useEffectEvent for 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. Configure cacheComponents: true in next.config.ts as needed.

**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
Use useEffectEvent when 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/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.tsx
• hooks/drops/useDropBoostMutation.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 add readonly before props in React components

**/*.{tsx,jsx}: Use internal links via <Link> component from Next.js instead of <a> tags
Replace <img> elements with <Image /> from next/image

Files:

• components/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.tsx

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

📄 CodeRabbit inference engine (GEMINI.md)

Run npm run lint to 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 running npm run lint
Do not add eslint-disable comments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions

Files:

• components/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.tsx
• hooks/drops/useDropBoostMutation.ts

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

**/*.{jsx,tsx}: Replace <img> elements with <Image /> from next/image to 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/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.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/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.tsx
• hooks/drops/useDropBoostMutation.ts

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript with React functional components and hooks

Files:

• components/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.tsx
• hooks/drops/useDropBoostMutation.ts

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

📄 CodeRabbit inference engine (AGENTS.md)

Prefer direct named imports from React (useMemo, useRef, FC) over React. namespace usage

Files:

• components/waves/drops/WaveDropActionsBoost.tsx
• components/drops/view/BoostedDropCard.tsx
• hooks/drops/useDropBoostMutation.ts

**/*.{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:

• hooks/drops/useDropBoostMutation.ts

🧠 Learnings (2)

📚 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 **/*.{ts,tsx,js,jsx} : Move data fetching from client Effects to Server Components; mutations go through Server Actions (`'use server'`)

Applied to files:

• hooks/drops/useDropBoostMutation.ts

📚 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:

• hooks/drops/useDropBoostMutation.ts

🧬 Code graph analysis (1)

components/drops/view/BoostedDropCard.tsx (3)

components/auth/Auth.tsx (1)

• AuthContext (106-116)

hooks/drops/useDropBoostMutation.ts (1)

• useDropBoostMutation (28-190)

helpers/waves/drop.helpers.ts (1)

• convertApiDropToExtendedDrop (110-123)

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

hooks/drops/useDropBoostMutation.ts (3)

12-14: LGTM: Clean integration of query invalidation.

The new imports properly support the transition from toast notifications to query-based cache invalidation.

---

31-31: LGTM: QueryClient properly initialized.

The queryClient hook is correctly placed at the component level for use in mutation callbacks.

---

100-108: Excellent: Query invalidation improves cache consistency.

Replacing synchronous toast updates with query invalidation is the correct pattern. This ensures the boosted drops list automatically refreshes with server data after a boost action, eliminating potential stale data issues.

The async/await usage is appropriate here since react-query's onSuccess properly handles promises.

components/waves/drops/WaveDropActionsBoost.tsx (2)

19-19: LGTM: Well-designed optional prop.

The showCount prop provides flexible control over boost count visibility while maintaining backward compatibility with the true default.

---

92-101: LGTM: Conditional rendering properly implemented.

The boost count display now respects the showCount prop while preserving the existing count visibility logic.

components/drops/view/BoostedDropCard.tsx (4)

3-13: LGTM: Imports properly organized.

All necessary dependencies are included for the new boost interaction functionality.

---

23-29: LGTM: Hook integration and memoization correctly implemented.

The component properly:

• Accesses authentication context for user state
• Integrates the shared boost mutation hook
• Converts the ApiDrop to ExtendedDrop using memoization to prevent unnecessary conversions

---

40-51: LGTM: Boost logic properly encapsulated.

The computed flags and callback correctly:

• Determine boost capability based on authentication and drop type
• Stop event propagation to prevent card navigation when boosting
• Include all necessary dependencies in the memoization

---

109-127: Excellent: Interactive boost button with proper accessibility.

The transformation from static display to interactive button is well-executed:

• Visual feedback for boosted state (filled vs outlined icon, background color)
• Proper disabled state handling
• Accessibility via aria-label
• Hover effects only when interaction is allowed

This aligns perfectly with the query invalidation in useDropBoostMutation to ensure the UI updates after boost actions.

---

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