Skip to content

Fix react query lint errors#1687

Merged
simo6529 merged 9 commits intomainfrom
fix-react-query-lint-errors
Dec 31, 2025
Merged

Fix react query lint errors#1687
simo6529 merged 9 commits intomainfrom
fix-react-query-lint-errors

Conversation

@simo6529
Copy link
Copy Markdown
Collaborator

@simo6529 simo6529 commented Dec 30, 2025

Summary by CodeRabbit

  • Refactor

    • Simplified public context API: profile-proxy modify now accepts only a profileProxyId and some update methods are now async (returning Promise).
    • Centralized context construction and narrowed optimistic updates/invalidation to targeted drops/waves/discussions, reducing redundant refreshes.
  • Style

    • Minor formatting and template simplifications across proxy-related components.

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

Signed-off-by: Simo <simo@6529.io>
Signed-off-by: Simo <simo@6529.io>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Dec 30, 2025

📝 Walkthrough

Walkthrough

ReactQueryWrapper's context construction was moved into a builder, handle extraction was consolidated, several invalidation helpers were removed, optimistic drop updates were narrowed, and the context method onProfileProxyModify now accepts only { profileProxyId }. Proxy components updated to the new call shape.

Changes

Cohort / File(s) Summary
Context API refactoring
components/react-query-wrapper/ReactQueryWrapper.tsx
Adds createReactQueryContextValue() and getHandlesFromProfile(); moves context value construction out of inline render and memoizes it; widens waitAndInvalidateDrops and addOptimisticDrop to return Promise<void>; removes multiple specialized invalidation helpers and simplifies addOptimisticDrop optimistic updates; changes onProfileProxyModify signature to accept only { profileProxyId }.
Proxy API consumers & UI tweaks
components/user/proxy/create/ProxyCreate.tsx, components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx, components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx, components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx, components/user/proxy/proxy/create-action/ProxyCreateAction.tsx
Updated all onProfileProxyModify() invocations to pass only { profileProxyId } (removed grantedToHandle / createdByHandle); removed some local effect/state in credit/time edits and replaced with derived isChangedAndValid; minor formatting/className simplifications.

Sequence Diagram(s)

(No sequence diagrams generated — changes are refactor/API-surface adjustments without a multi-actor control flow that benefits from a sequence view.)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

  • ragnep
  • prxt6529

Poem

🐇 I nibbled through context, trimmed each thread,

Pulled handles close, and lightened what we spread.
Optimism tightened, fewer hops to make,
Small calls now dance for stability's sake.
A quiet thump — the wrapper wakes.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Title check ⚠️ Warning The title 'Fix react query lint errors' is vague and does not accurately reflect the substantive changes in the pull request, which involve significant API refactoring (modifying onProfileProxyModify signature, changing return types to Promise, extracting helper functions) rather than simply fixing lint errors. Use a more specific title that describes the main changes, such as 'Refactor ReactQueryWrapper API: simplify onProfileProxyModify and convert async operations to Promises' to accurately convey the scope of modifications.
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 (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ 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 9da2b26 and 750969d.

📒 Files selected for processing (3)
  • components/react-query-wrapper/ReactQueryWrapper.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.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 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/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.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

**/*.{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/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.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/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.tsx
**/*.{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/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.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/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.tsx
**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript with React functional components and hooks

Files:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.tsx
**/*.{tsx,ts,jsx,js}

📄 CodeRabbit inference engine (AGENTS.md)

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

Files:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:52.994Z
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.
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
📚 Learning: 2025-12-30T14:32:19.339Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.339Z
Learning: Applies to proxy.ts : Rename `middleware.ts` to `proxy.ts` for request boundary logic and export `proxy` function (Next.js 16+)

Applied to files:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
📚 Learning: 2025-12-30T14:32:19.339Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.339Z
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:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.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/react-query-wrapper/ReactQueryWrapper.tsx
📚 Learning: 2025-12-30T14:32:19.339Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.339Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks

Applied to files:

  • components/react-query-wrapper/ReactQueryWrapper.tsx
🧬 Code graph analysis (1)
components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)
helpers/time.ts (1)
  • Time (4-445)
⏰ 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 (8)
components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx (2)

32-33: Good refactor: derived state computed during render.

Replacing useEffect + state with a computed boolean during render is the correct pattern. The validation logic creditAmount !== original && creditAmount > 0 is clear and correct.


46-49: Signature simplification aligns with context type changes.

The onProfileProxyModify call now passes only profileProxyId, which matches the updated ReactQueryWrapperContext type definition.

components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)

37-40: Validation logic now correctly accounts for isEndTimeDisabled.

The condition properly handles both scenarios:

  • When disabled: always valid (second disjunct isEndTimeDisabled)
  • When enabled: requires non-null endTime >= current time

This addresses the previous review concern about button enablement matching submit behavior.

components/react-query-wrapper/ReactQueryWrapper.tsx (5)

219-233: Good extraction: getHandlesFromProfile defined outside the component.

Defining this helper at module scope avoids unnecessary recreation on each render and improves readability.


235-237: Clean factory function extraction for context value creation.

Moving the context value construction into createReactQueryContextValue improves maintainability and testability. The function properly captures queryClient and returns the full context interface.


340-351: Simplified onProfileProxyModify signature.

The function now accepts only { profileProxyId }, removing the previously required createdByHandle and grantedToHandle. The invalidation logic targets the proxy and profile proxies queries correctly.


834-844: Return types updated to Promise<void> to match async behavior.

Both addOptimisticDrop and waitAndInvalidateDrops are now properly typed as returning Promise<void>, which accurately reflects their async implementations. This aligns with the context type definitions on lines 171-172.

Also applies to: 846-849


1023-1026: Correct useMemo usage with stable queryClient dependency.

The queryClient from useQueryClient() is typically a stable reference, so the memoized context value will not be recreated unnecessarily. This pattern properly centralizes context creation while maintaining referential stability.


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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
components/react-query-wrapper/ReactQueryWrapper.tsx (1)

340-351: Update test file to match new onProfileProxyModify signature.

All production call sites correctly use the simplified signature with only profileProxyId. However, __tests__/components/react-query-wrapper/ReactQueryWrapper.test.tsx has outdated type definitions and test calls that still reference the removed createdByHandle and grantedToHandle parameters (lines 17 and 162). Update the type definition and test invocation to match the new signature:

  • Line 17: Remove createdByHandle and grantedToHandle from type
  • Line 162: Change call to ctx.onProfileProxyModify({ profileProxyId: 'p1' })
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2f8a1d1 and 6643df3.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (6)
  • components/react-query-wrapper/ReactQueryWrapper.tsx
  • components/user/proxy/create/ProxyCreate.tsx
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/create-action/ProxyCreateAction.tsx
💤 Files with no reviewable changes (2)
  • components/user/proxy/proxy/create-action/ProxyCreateAction.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/proxy/create/ProxyCreate.tsx
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.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/proxy/create/ProxyCreate.tsx
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.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/proxy/create/ProxyCreate.tsx
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.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/proxy/create/ProxyCreate.tsx
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/react-query-wrapper/ReactQueryWrapper.tsx
🧠 Learnings (7)
📓 Common learnings
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
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
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.271Z
Learning: TypeScript + React functional components with hooks; follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)
📚 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 @(proxy.ts|src/proxy.ts) : Use `middleware.ts` renamed to `proxy.ts` with Node runtime for request-boundary logic; ensure the file and exported function are named `proxy`

Applied to files:

  • components/user/proxy/create/ProxyCreate.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 {proxy,middleware}.ts : Rename `middleware.ts` to `proxy.ts` at project root for request-boundary logic; export `proxy` function

Applied to files:

  • components/user/proxy/create/ProxyCreate.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/react-query-wrapper/ReactQueryWrapper.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/react-query-wrapper/ReactQueryWrapper.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:

  • components/react-query-wrapper/ReactQueryWrapper.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: TypeScript + React functional components with hooks; follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)

Applied to files:

  • components/react-query-wrapper/ReactQueryWrapper.tsx
🧬 Code graph analysis (2)
components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx (1)
components/distribution-plan-tool/common/CircleLoader.tsx (1)
  • CircleLoader (9-39)
components/react-query-wrapper/ReactQueryWrapper.tsx (1)
generated/models/ApiIdentity.ts (1)
  • ApiIdentity (17-185)
⏰ 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 (8)
components/react-query-wrapper/ReactQueryWrapper.tsx (4)

219-233: LGTM! Clean helper extraction.

The getHandlesFromProfile helper centralizes handle extraction logic and properly normalizes to lowercase. The optional chaining on profile.wallets?.forEach handles potentially undefined wallets array correctly.


235-237: Good refactor to extract context value creation.

Extracting the context value creation into a standalone factory function improves readability and separates concerns. The function accepts QueryClient as a parameter, making the dependencies explicit.


974-1003: LGTM! Context value return object is complete.

The returned object includes all methods defined in ReactQueryWrapperContextType. The structure matches the interface definition at lines 125-186.


1023-1026: Appropriate use of useMemo for context value.

Memoizing the context value with queryClient as the dependency prevents unnecessary re-renders of context consumers. Since queryClient from useQueryClient() is typically stable across renders, this is an effective optimization.

components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx (1)

191-198: LGTM!

The Restore button implementation is correct. The formatting adjustment aligns the JSX properly within the conditional block.

components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (2)

73-75: LGTM!

The onProfileProxyModify call correctly uses the simplified signature with only profileProxyId. The guard condition above ensures handles exist before proceeding.


142-145: Minor formatting change.

The className template literal formatting is acceptable, though the multi-line ternary could be simplified to a single line for readability.

components/user/proxy/create/ProxyCreate.tsx (1)

86-88: LGTM!

The onProfileProxyModify call correctly uses the simplified signature. The guard condition above ensures handles exist before this code path executes.

Signed-off-by: Simo <simo@6529.io>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)
components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx (1)

46-61: Success feedback is lost when handles are missing.

The guard on lines 47-52 returns early if either handle is missing, preventing both onProfileProxyModify and the success toast from executing. However, since this code runs in the onSuccess callback, the mutation has already succeeded on the backend. Users receive no confirmation when handles are absent, creating a confusing partial-success state.

🔎 Recommended fix

Show the success message regardless of whether cache invalidation succeeds:

    onSuccess: () => {
+      setToast({
+        message: "Action credit updated successfully!",
+        type: "success",
+      });
+      setViewMode();
+
      if (
        !profileProxy.granted_to?.handle ||
        !profileProxy.created_by?.handle
      ) {
        return;
      }
      onProfileProxyModify({
        profileProxyId: profileProxy.id,
      });
-      setToast({
-        message: "Action credit updated successfully!",
-        type: "success",
-      });
-      setViewMode();
    },
components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx (1)

100-117: Success feedback is lost when handles are missing.

Identical issue to ProfileProxyCreditEdit.tsx: the guard on lines 101-106 returns early if either handle is missing, preventing both cache invalidation and user feedback. Since this runs in onSuccess, the mutation already succeeded on the backend, but users see no confirmation.

🔎 Recommended fix

Move user feedback before the guard:

    onSuccess: (_, variables) => {
+      setToast({
+        message: "Action status changed",
+        type: "success",
+      });
+      if (variables.action === AcceptActionRequestActionEnum.Accept) {
+        onSuccessFullProxyAcceptance();
+      }
+
      if (
        !profileProxy.granted_to?.handle ||
        !profileProxy.created_by?.handle
      ) {
        return;
      }
      onProfileProxyModify({
        profileProxyId: profileProxy.id,
      });
-      setToast({
-        message: "Action status changed",
-        type: "success",
-      });
-      if (variables.action === AcceptActionRequestActionEnum.Accept) {
-        onSuccessFullProxyAcceptance();
-      }
    },
components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)

58-73: Success feedback is lost when handles are missing.

Identical issue to the other proxy components: the guard on lines 59-64 prevents user feedback when handles are missing, even though the mutation succeeded.

🔎 Recommended fix
    onSuccess: () => {
+      setToast({
+        message: "Action end time updated successfully!",
+        type: "success",
+      });
+      setViewMode();
+
      if (
        !profileProxy.granted_to?.handle ||
        !profileProxy.created_by?.handle
      ) {
        return;
      }
      onProfileProxyModify({
        profileProxyId: profileProxy.id
      });
-      setToast({
-        message: "Action end time updated successfully!",
-        type: "success",
-      });
-      setViewMode();
    },
🧹 Nitpick comments (1)
components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)

3-3: LGTM with a simplification suggestion.

Removing useEffect and computing isChangedAndValid during render is the correct approach. However, the IIFE pattern is unnecessarily complex for this simple validation.

🔎 Optional simplification
-  const isChangedAndValid = (() => {
-    if (profileProxyAction.end_time === endTime) {
-      return false;
-    }
-    if (endTime && endTime < Time.currentMillis()) {
-      return false;
-    }
-    return true;
-  })();
+  const isChangedAndValid =
+    profileProxyAction.end_time !== endTime &&
+    (!endTime || endTime >= Time.currentMillis());

Based on learnings, unnecessary Effects should be removed and state should be computed during render.

Also applies to: 37-45

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6643df3 and 090cdd7.

📒 Files selected for processing (3)
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.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/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.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/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.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/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
🧠 Learnings (3)
📓 Common learnings
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
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
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.271Z
Learning: TypeScript + React functional components with hooks; follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)
📚 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/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.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} : Remove unnecessary Effects; if Effect only derives state, compute during render instead

Applied to files:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
🧬 Code graph analysis (1)
components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx (1)
components/distribution-plan-tool/common/CircleLoader.tsx (1)
  • CircleLoader (9-39)
⏰ 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 (3)
components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx (1)

3-3: LGTM! Effect removed in favor of derived state.

The removal of useEffect and computing isChangedAndValid directly during render aligns with React 19 best practices and eliminates unnecessary side effects.

Based on learnings, unnecessary Effects should be removed and state should be computed during render when possible.

Also applies to: 32-33

components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx (1)

177-184: Cosmetic formatting adjustment.

This is purely a whitespace/indentation change with no functional impact.

components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)

134-137: Cosmetic formatting adjustment.

This className reformatting has no functional impact.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx (1)

101-113: Button should be disabled when form is invalid, not just visually dimmed.

The button applies tw-opacity-50 when !isChangedAndValid but the disabled attribute on line 103 only checks submitting. Users can still click the dimmed button and trigger a mutation with unchanged/invalid data.

🔎 Proposed fix
             <button
               onClick={onSubmit}
-              disabled={submitting}
+              disabled={submitting || !isChangedAndValid}
               type="button"
               className={`${!isChangedAndValid
                   ? "tw-opacity-50"
                   : "hover:tw-bg-primary-600 hover:tw-border-primary-600"
                 } tw-w-full tw-flex tw-items-center tw-justify-center tw-relative tw-bg-primary-500 tw-px-3 tw-py-2 tw-text-xs tw-font-semibold tw-text-white tw-border tw-border-solid tw-border-primary-500 tw-rounded-lg tw-transition tw-duration-300 tw-ease-out`}>
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 090cdd7 and 9da2b26.

📒 Files selected for processing (3)
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.tsx
  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • components/user/proxy/proxy/action/ProxyActionAcceptanceButton.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 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/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.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

**/*.{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/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.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/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
**/*.{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/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.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/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript with React functional components and hooks

Files:

  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
**/*.{tsx,ts,jsx,js}

📄 CodeRabbit inference engine (AGENTS.md)

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

Files:

  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:52.994Z
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.
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
📚 Learning: 2025-12-30T14:32:19.339Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.339Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Remove unnecessary Effects; if the Effect only derives state, compute during render instead

Applied to files:

  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
📚 Learning: 2025-12-30T14:31:52.993Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:52.993Z
Learning: Applies to **/*.{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.

Applied to files:

  • components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx
📚 Learning: 2025-12-30T14:32:19.339Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.339Z
Learning: Applies to proxy.ts : Rename `middleware.ts` to `proxy.ts` for request boundary logic and export `proxy` function (Next.js 16+)

Applied to files:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
📚 Learning: 2025-12-30T14:32:19.339Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.339Z
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:

  • components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx
🧬 Code graph analysis (1)
components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)
helpers/time.ts (1)
  • Time (4-445)
⏰ 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 (2)
components/user/proxy/proxy/action/utils/credit/ProfileProxyCreditEdit.tsx (1)

32-33: Good refactor: derived state instead of useEffect.

Computing isChangedAndValid during render rather than syncing via useEffect is the correct pattern per React guidelines. This eliminates an unnecessary effect and simplifies the component.

components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx (1)

3-3: LGTM: Effect removal aligns with React 19.2 best practices.

The removal of useEffect correctly eliminates unnecessary state synchronization in favor of computed values at render time, which is the recommended pattern for React 19.2 and the React Compiler.

Based on learnings, this aligns with modernization efforts.

Comment thread components/user/proxy/proxy/action/utils/time/ProfileProxyEndTimeEdit.tsx Outdated
Signed-off-by: Simo <simo@6529.io>
Signed-off-by: Simo <simo@6529.io>
@sonarqubecloud
Copy link
Copy Markdown

@simo6529 simo6529 merged commit a2ed680 into main Dec 31, 2025
9 checks passed
@simo6529 simo6529 deleted the fix-react-query-lint-errors branch December 31, 2025 10:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants