fix: trigger contributions refetch after redeeming code #2341
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
npm warn config production Use WalkthroughThe pull request introduces modifications to the Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/features/user/Profile/ProfileCard/RedeemModal/index.tsx (1)
69-69: Refetch contributions after successful redemption.
Refetching upon successful unit addition is essential to keep the user’s data in sync. However, consider surroundingrefetchContributions()with a try/catch block in case of errors or network failures, and handle user feedback accordingly.if (res.units > 0) { const cloneUser = { ...user }; cloneUser.score.received = cloneUser.score.received + res.units; setUser(cloneUser); - refetchContributions(); + try { + await refetchContributions(); + } catch (error) { + console.error('Failed to refetch contributions:', error); + // Optionally display a user-facing error message + } }src/features/common/Layout/MyForestContext.tsx (1)
41-41: Consider replacinganywith a more specific type.
Static analysis flags the usage ofTRPCClientErrorBase<any>as it resorts toany. If possible, please narrow it to an explicit error shape or a generic type param provided by your TRPC definitions.- TRPCClientErrorBase<any> + TRPCClientErrorBase<YourExplicitErrorType>🧰 Tools
🪛 GitHub Check: CodeFactor
[warning] 41-41: src/features/common/Layout/MyForestContext.tsx#L41
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/features/common/Layout/MyForestContext.tsx(6 hunks)src/features/user/Profile/ProfileCard/RedeemModal/index.tsx(3 hunks)
🧰 Additional context used
🪛 GitHub Check: CodeFactor
src/features/common/Layout/MyForestContext.tsx
[warning] 41-41: src/features/common/Layout/MyForestContext.tsx#L41
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
🔇 Additional comments (4)
src/features/user/Profile/ProfileCard/RedeemModal/index.tsx (2)
20-20: Good addition of the useMyForest import.
This import integrates the contributions refetch feature into the redeem process, aligning with the PR's objective of ensuring data is updated after redemption.
42-42: Destructuring refetchContributions from context.
This step makes it straightforward to invoke a data refetch after the code is redeemed, helping avoid stale data in the UI. Good job!
src/features/common/Layout/MyForestContext.tsx (2)
33-43: Robust type definitions for refetchContributions.
Declaring the return type as QueryObserverResult<...> clearly communicates the structure of the returned data. Ensure all child components appropriately handle any potential errors, as indicated by TRPCClientErrorBase<any>.
🧰 Tools
🪛 GitHub Check: CodeFactor
[warning] 41-41: src/features/common/Layout/MyForestContext.tsx#L41
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
Line range hint 213-231: Context value now supports refreshing contributions.
By exposing _contributions.refetch, you allow components to efficiently refresh the data. This is a neat way to ensure real-time updates after the redemption flow, fulfilling the primary objective of this PR.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/features/common/Layout/MyForestContext.tsx (1)
33-43: Consider improving type safety for error handling.While the
RefetchContributionstype correctly models the refetch function's return type, we could improve type safety by replacinganywith a more specific error type if available from your TRPC router.- TRPCClientErrorBase<any> + TRPCClientErrorBase<{ + code: string; + message: string; + // Add other specific error properties from your TRPC router + }>🧰 Tools
🪛 GitHub Check: CodeFactor
[warning] 41-41: src/features/common/Layout/MyForestContext.tsx#L41
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/features/common/Layout/MyForestContext.tsx(5 hunks)
🧰 Additional context used
🪛 GitHub Check: CodeFactor
src/features/common/Layout/MyForestContext.tsx
[warning] 41-41: src/features/common/Layout/MyForestContext.tsx#L41
Unexpected any. Specify a different type. (@typescript-eslint/no-explicit-any)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
src/features/common/Layout/MyForestContext.tsx (3)
16-17: LGTM! Necessary type imports added.The new type imports from
@tanstack/react-queryand@trpc/clientare correctly added to support the refetch functionality.
57-57: LGTM! Interface properly extended.The
MyForestContextInterfaceis correctly extended with therefetchContributionsproperty using the new type.
213-213: LGTM! Refetch function correctly exposed and memoized.The implementation properly exposes the TRPC query's refetch function through the context and correctly includes it in the dependency array. This change enables the desired functionality of refetching contributions data after code redemption.
Let's verify that the refetch function is properly used in the redeem flow:
Also applies to: 231-231
✅ Verification successful
Verified: refetchContributions is properly integrated in the redeem flow
The function is correctly consumed in
src/features/user/Profile/ProfileCard/RedeemModal/index.tsxand called after successful code redemption to refresh the contributions data.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for usage of refetchContributions in the redeem-related code rg -l "refetchContributions.*RedeemModal" --type ts --type tsxLength of output: 92
Script:
#!/bin/bash # First locate the RedeemModal component echo "=== Finding RedeemModal component ===" rg -l "RedeemModal" --type typescript --type typescriptreact echo -e "\n=== Finding refetchContributions usage ===" rg "refetchContributions" --type typescript --type typescriptreactLength of output: 383
Script:
#!/bin/bash echo "=== Finding RedeemModal component ===" fd -e ts -e tsx | xargs rg -l "RedeemModal" echo -e "\n=== Finding refetchContributions usage ===" fd -e ts -e tsx | xargs rg "refetchContributions" -C 2Length of output: 2344
|
@sunilsabatp Made the following changes:
LGTM now. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/features/user/Profile/ProfileCard/RedeemModal/index.tsx (1)
69-70: Consider handling potential race condition.While the placement of refetch calls is logical, there might be a race condition if the backend hasn't fully processed the score update before the refetch calls are made. Consider one of these approaches:
- Add a small delay before refetching:
if (res.units > 0) { const cloneUser = { ...user }; cloneUser.score.received = cloneUser.score.received + res.units; setUser(cloneUser); - refetchContributions(); - refetchLeaderboard(); + setTimeout(() => { + refetchContributions(); + refetchLeaderboard(); + }, 1000); }
- Or better, consider making these operations sequential using async/await if the backend provides a way to verify the update:
if (res.units > 0) { const cloneUser = { ...user }; cloneUser.score.received = cloneUser.score.received + res.units; - setUser(cloneUser); - refetchContributions(); - refetchLeaderboard(); + await setUser(cloneUser); + await refetchContributions(); + await refetchLeaderboard(); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/features/common/Layout/MyForestContext.tsx(4 hunks)src/features/user/Profile/ProfileCard/RedeemModal/index.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/features/common/Layout/MyForestContext.tsx
🔇 Additional comments (3)
src/features/user/Profile/ProfileCard/RedeemModal/index.tsx (3)
20-20: LGTM! Import statement is well-placed.The import of
useMyForestis correctly positioned and follows the project's import structure.
42-42: LGTM! Hook usage follows React best practices.The destructuring of
refetchContributionsandrefetchLeaderboardfromuseMyForestis properly placed at the component's top level, adhering to React's rules of hooks.
Line range hint
48-102: LGTM! Robust error handling and security measures.The implementation includes:
- Proper authentication checks
- Comprehensive error handling with localized messages
- Secure API calls with authentication tokens
Fixes #
This fix ensures that the contributions data is
refetchedafter a redeem code is successfully processed. Previously, the contributions might not have been updated in real time, leading to stale or inconsistent data in the application.