Skip to content

[FIX] Add error feedback and toast notification to CategoryFormModal - #286

Open
Siddh2024 wants to merge 1 commit into
rdodiya:gssoc_developfrom
Siddh2024:fix/283-category-form-error-feedback
Open

[FIX] Add error feedback and toast notification to CategoryFormModal#286
Siddh2024 wants to merge 1 commit into
rdodiya:gssoc_developfrom
Siddh2024:fix/283-category-form-error-feedback

Conversation

@Siddh2024

Copy link
Copy Markdown
Contributor

Description

Added user-facing error feedback to the category creation modal. Previously, API errors were silently swallowed with only a console.error call.

Changes Made

  • Added submitError state variable to track API error messages
  • Added inline error banner with AlertCircle icon that appears on failure
  • Added toast.success() on successful category creation
  • Added toast.error() with the API error message on failure
  • Error clears automatically when the user edits any field
  • Imported AlertCircle from lucide-react and toast from react-hot-toast

Testing

  1. Open Add Category modal
  2. Submit with valid data → toast.success shown, modal closes
  3. Force API error (e.g., network disconnect) → inline error banner + toast.error shown
  4. Edit a field → error clears automatically

Fixes #283

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR improves the admin “Add Category” modal UX by surfacing API failures to users (instead of only logging), and by confirming successful category creation via toast notification.

Changes:

  • Added submitError state and an inline error banner with AlertCircle when category creation fails.
  • Added toast.success() on successful category creation and toast.error() on failure with the extracted API message.
  • Automatically clears the displayed error when the user edits any field.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

});

const [submitting, setSubmitting] = useState(false);
const [submitError, setSubmitError] = useState("");
Comment on lines +85 to +88
<div className="flex items-start gap-3 p-4 bg-red-50 border border-red-200 rounded-xl">
<AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
<p className="text-sm text-red-700">{submitError}</p>
</div>
@rdodiya

rdodiya commented Jul 15, 2026

Copy link
Copy Markdown
Owner

Hi @Siddh2024 ,
Please review above points and apply fix

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.

[BUG] CategoryFormModal silently fails on API error — no user feedback

3 participants