Fix: Conditionally enable Submit button in Edit profile page #9589
Conversation
WalkthroughThe pull request introduces a new state variable Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Form/Form.tsx (2)
129-137: Consider tracking actual differences from initial valuesCurrently, any change enables the submit button, even if the user reverts a field to its original value. Consider comparing with initial values to determine if there are actual changes to submit.
onChange: ({ name, value }: FieldChangeEvent<T[keyof T]>) => { dispatch({ type: "set_field", name, value, error: validate?.(value), }); - setIsChanged(true); + // Compare current form state with initial values + const hasChanges = Object.keys(state.form).some( + (key) => state.form[key] !== formVals.current[key] + ); + setIsChanged(hasChanges); },
Line range hint
15-41: Consider adding prop to override change detectionSince this is a generic Form component, some forms might need to keep the submit button enabled regardless of changes (e.g., forms with computed values or special business rules).
Consider adding an optional prop like
alwaysEnableSubmit?: booleanto allow overriding this behavior when needed:type Props<T extends FormDetails> = { className?: string; defaults: T; asyncGetDefaults?: (() => Promise<T>) | false; validate?: (form: T) => FormErrors<T>; onSubmit: (form: T) => Promise<FormErrors<T> | void>; onCancel?: () => void; noPadding?: true; disabled?: boolean; + alwaysEnableSubmit?: boolean; submitLabel?: string; cancelLabel?: string; // ... rest of the props };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Form/Form.tsx(4 hunks)
🔇 Additional comments (3)
src/components/Form/Form.tsx (3)
50-50: LGTM: State initialization is clean and well-placed
The new isChanged state is appropriately initialized and well-named to track form modifications.
95-95: LGTM: Proper state reset on cancellation
The isChanged state is appropriately reset after form cancellation.
157-157: LGTM: Submit button condition properly implemented
The disabled condition correctly combines the existing disabled state with the form changed state.
Let's verify the test coverage for this new functionality:
|
Duplicate #9526 Please refrain from opening PRs for issues that aren't assigned to you 👍 Other one is switching over to Shadcn form; cc: @rithviknishad |
Proposed Changes
Video of Solution:
Screencast.from.2024-12-27.13-42-44.webm
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit