Update CreateCause.tsx #5154
Update CreateCause.tsx #5154
Conversation
add localStorage.setItem( 'causeProjectsCount', String(cause.data.createCause.activeProjectsCount ?? 0), );
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughA new side effect is added to the cause creation flow: after a cause is successfully created via GraphQL mutation, the number of active projects linked to the new cause is saved to localStorage under the key 'causeProjectsCount'. The success page component reads this count from localStorage on mount and passes it as a prop to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CreateCauseComponent
p
8000
articipant GraphQLServer
participant localStorage
participant SuccessPageComponent
participant ProjectCardAlt
User->>CreateCauseComponent: Submit new cause form
CreateCauseComponent->>GraphQLServer: createCause mutation
GraphQLServer-->>CreateCauseComponent: Mutation response (includes activeProjectsCount)
CreateCauseComponent->>localStorage: Save activeProjectsCount as 'causeProjectsCount'
CreateCauseComponent->>CreateCauseComponent: Clear form storage
CreateCauseComponent->>User: Redirect to success page
User->>SuccessPageComponent: Load success page
SuccessPageComponent->>localStorage: Read 'causeProjectsCount'
SuccessPageComponent->>SuccessPageComponent: Set projectsCount state
SuccessPageComponent->>ProjectCardAlt: Render with isNew=true, projectsCount=state value
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/views/causes/create/CreateCause.tsx (1)
185-188: Use consistent StorageLabel pattern for localStorage operations.The code correctly stores the active projects count, but uses a hardcoded string
'causeProjectsCount'instead of following the establishedStorageLabelpattern used elsewhere in the file (e.g., line 36:StorageLabel.CREATE_CAUSE_FORM).Consider adding the key to the
StorageLabelenum and using it consistently:- localStorage.setItem( - 'causeProjectsCount', - String(cause.data.createCause.activeProjectsCount ?? 0), - ); + localStorage.setItem( + StorageLabel.CAUSE_PROJECTS_COUNT, + String(cause.data.createCause.activeProjectsCount ?? 0), + );This would require adding
CAUSE_PROJECTS_COUNTto theStorageLabelenum definition.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/views/causes/create/CreateCause.tsx(1 hunks)
⏰ 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: build
Update SuccessfulCauseCreation.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/views/causes/create/SuccessfulCauseCreation.tsx(2 hunks)
🧰 Additional context used
🪛 ESLint
src/components/views/causes/create/SuccessfulCauseCreation.tsx
[error] 36-36: Delete ↹
(prettier/prettier)
⏰ 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: build
🔇 Additional comments (2)
src/components/views/causes/create/SuccessfulCauseCreation.tsx (2)
39-45: LGTM! Consider localStorage cleanup strategy.The localStorage reading logic is implemented correctly with proper error handling. The value is safely parsed as an integer and the existence check prevents errors.
The commented removal line suggests you may want to keep the value in localStorage for other components. Consider documenting this decision or implementing a cleanup strategy if the value should be removed after use.
81-87: LGTM! Props correctly passed to ProjectCard.The JSX changes properly implement the feature requirements:
CardWrapperprovides appropriate styling for the card layoutisNew={true}correctly identifies this as a newly created causeprojectsCount={projectsCount}passes the value read from localStorageThe implementation aligns well with the PR objectives to display the project count for the newly created cause.
| const router = useRouter(); | ||
| const [projectsCount, setProjectsCount] = useState(0); |
There was a problem hiding this comment.
Fix missing imports and remove unused variable.
This code has several issues:
- Missing imports for
useRouteranduseState useRouteris declared but never used- Formatting issue flagged by ESLint
Apply this diff to fix the imports and remove the unused variable:
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';And remove the unused useRouter declaration:
- const router = useRouter();
- const [projectsCount, setProjectsCount] = useState(0);
+ const [projectsCount, setProjectsCount] = useState(0);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const router = useRouter(); | |
| const [projectsCount, setProjectsCount] = useState(0); | |
| // Before: | |
| import React, { useEffect } from 'react'; | |
| // ... | |
| // replace with: | |
| import React, { useEffect, useState } from 'react'; | |
| // ... | |
| function SuccessfulCauseCreation() { | |
| // removed unused router | |
| const [projectsCount, setProjectsCount] = useState(0); | |
| // ... | |
| } |
🧰 Tools
🪛 ESLint
[error] 36-36: Delete ↹
(prettier/prettier)
🤖 Prompt for AI Agents
In src/components/views/causes/create/SuccessfulCauseCreation.tsx around lines
36 to 37, the code is missing imports for useRouter and useState, and the
useRouter variable is declared but never used. Fix this by adding the necessary
imports for useState from React and removing the import and declaration of
useRouter since it is unused. Also, ensure the code formatting complies with
ESLint rules by adjusting spacing and indentation as needed.
add
localStorage.setItem(
'causeProjectsCount',
String(cause.data.createCause.activeProjectsCount ?? 0),
);
Summary by CodeRabbit