feat: add clear input button to reset form fields#669
Conversation
Added a clear input button to reset form fields and local storage values.Added a 'Clear Input' button that resets all form fields to their default values: - Clears the text input field - Resets difficulty to Easy Difficulty - Resets number of questions to 10 - Resets Wikipedia toggle to off - Clears Google Doc URL field - Removes selected question type from localStorage Fixes issue AOSSIE-Org#668
📝 WalkthroughWalkthroughA "Clear Input" button and associated Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
eduaid_web/src/pages/Text_Input.jsx (1)
233-241: Addtype="button"and accessibility affordances.Minor hardening for the new button:
- Explicitly set
type="button"to prevent any accidental form-submit behavior if this subtree is ever wrapped in a<form>.- Consider an
aria-label(the visible text is fine, but a confirmation step could be worth considering since clicking this destroys all user-entered content with no undo).Proposed diff
<button + type="button" onClick={handleClear} className="bg-[`#7600F2`] text-white text-lg sm:text-xl px-6 py-2 rounded-xl border border-[`#00CBE7`] hover:bg-[`#7600F2`]/80 transition-all" > Clear Input </button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@eduaid_web/src/pages/Text_Input.jsx` around lines 233 - 241, The Clear Input button lacks an explicit type and accessibility affordances: update the JSX button element that calls handleClear to include type="button" and an appropriate aria-label (e.g., "Clear input") and/or aria-describedby for additional context; to prevent accidental data loss, either add a confirmation step by wrapping the onClick to call a small confirm wrapper (e.g., prompt/confirm before invoking handleClear) or implement the confirmation inside the handleClear handler itself so users must confirm before the handler clears user-entered content.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@eduaid_web/src/pages/Text_Input.jsx`:
- Around line 48-55: handleClear is removing selectedQuestionType from
localStorage which is set on Question_Type.jsx and required later (sendToBackend
-> getEndpoint and Output.jsx); either stop deleting that key in handleClear so
it remains available, or add a guard in handleSaveToLocalStorage/sendToBackend
to detect a missing selectedQuestionType and prompt the user to pick one before
proceeding. Also, if fileContent should be part of the cleared form state, reset
fileContent in handleClear to keep form state consistent. Refer to handleClear,
selectedQuestionType, handleSaveToLocalStorage, sendToBackend, getEndpoint, and
fileContent when making the change.
---
Nitpick comments:
In `@eduaid_web/src/pages/Text_Input.jsx`:
- Around line 233-241: The Clear Input button lacks an explicit type and
accessibility affordances: update the JSX button element that calls handleClear
to include type="button" and an appropriate aria-label (e.g., "Clear input")
and/or aria-describedby for additional context; to prevent accidental data loss,
either add a confirmation step by wrapping the onClick to call a small confirm
wrapper (e.g., prompt/confirm before invoking handleClear) or implement the
confirmation inside the handleClear handler itself so users must confirm before
the handler clears user-entered content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fdfb6b35-7a9a-4927-8c90-5ffc013ef6ad
📒 Files selected for processing (1)
eduaid_web/src/pages/Text_Input.jsx
| const handleClear = () => { | ||
| setText(""); | ||
| setDifficulty("Easy Difficulty"); | ||
| setNumQuestions(10); | ||
| setIsToggleOn(0); | ||
| setDocUrl(""); | ||
| localStorage.removeItem("selectedQuestionType"); | ||
| }; |
There was a problem hiding this comment.
Clearing selectedQuestionType may leave the app in a broken state.
handleClear removes selectedQuestionType from localStorage, but this value is set on a different page (Question_Type.jsx) and is required downstream. If a user clicks "Clear Input" and then "Next" without navigating back to re-select a question type, sendToBackend will be called with questionType === null, producing a request to /null (see Line 79 and getEndpoint at Line 96), and the subsequent Output page initializes its state from this same key (eduaid_web/src/pages/Output.jsx:8-12), breaking the Q&A formatting logic at lines 123-153.
Consider either:
- Not clearing
selectedQuestionTypeinhandleClear(it's set on a separate screen and arguably isn't part of "the input form" being cleared), or - Guarding
handleSaveToLocalStorageagainst a missingselectedQuestionTypeand prompting the user to pick one.
Also note that fileContent state is not reset here — if it's intended to be part of the cleared form state, it should be included for consistency.
Proposed minimal fix
const handleClear = () => {
setText("");
setDifficulty("Easy Difficulty");
setNumQuestions(10);
setIsToggleOn(0);
setDocUrl("");
- localStorage.removeItem("selectedQuestionType");
+ setFileContent("");
};🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@eduaid_web/src/pages/Text_Input.jsx` around lines 48 - 55, handleClear is
removing selectedQuestionType from localStorage which is set on
Question_Type.jsx and required later (sendToBackend -> getEndpoint and
Output.jsx); either stop deleting that key in handleClear so it remains
available, or add a guard in handleSaveToLocalStorage/sendToBackend to detect a
missing selectedQuestionType and prompt the user to pick one before proceeding.
Also, if fileContent should be part of the cleared form state, reset fileContent
in handleClear to keep form state consistent. Refer to handleClear,
selectedQuestionType, handleSaveToLocalStorage, sendToBackend, getEndpoint, and
fileContent when making the change.
|
Hi maintainers, |
1 participant
Summary
Added a Clear Input button to reset the form fields to their default values.
Changes made
Issue
Fixes #668
Testing
AI Usage Disclosure
AI tools used: Perplexity
Checklist
Summary by CodeRabbit