Skip to content

Instantly share code, notes, and snippets.

@creotip
Created February 24, 2025 10:30
Show Gist options
  • Save creotip/06c13aceaf85b2e4dcd4f135be1d94f5 to your computer and use it in GitHub Desktop.
Save creotip/06c13aceaf85b2e4dcd4f135be1d94f5 to your computer and use it in GitHub Desktop.
# Notification Form Component
A React modal form for creating and editing notification preferences for alerts and reports.
## Structure and Flow
- ✅ Create and edit notifications through a modal interface
- ✅ Configure notification type, timing, and delivery methods
- ✅ Select custom views for targeted notifications
- ✅ Choose between daily and weekly scheduling
- ✅ Set up Slack channel and email delivery
- ✅ Form validation using react-hook-form and Zod
## Core Features
- Multiple notification types (digest report, new cases, PSV alerts)
- Daily or weekly scheduling with timezone support
- Slack and email delivery methods
- Custom view selection for filtering
## Edge Cases
### Form Validation Failures
If (no delivery method selected)
- Show validation errors under both Slack and email fields
- Error message: "Either Slack channel or email is required"
- Submit button disabled
If (invalid email format)
- Show validation error highlighting invalid addresses
- Error message: "Invalid email format: [invalid_emails]"
- Submit button disabled
- Handle multiple comma-separated emails independently
If (weekly schedule selected)
- Require at least one day selection
- Show validation error if no days selected
- Time selection becomes mandatory
- Submit button disabled until valid
If (custom views required)
- Show validation error for missing view selection
- Exception: PSV alerts don't require view selection
- Submit button disabled
- Clear error when valid selection made
### API Interactions
If (form submission fails)
- Keep modal open
- Preserve form values
- Show error toast: "Failed to create/update notification"
- Enable retry attempt
If (slack channels fail to load)
- Show empty state in channel selector
- Keep email input as fallback
- Allow form submission with email only
- Show loading state during retry
If (filter presets fail to load)
- Disable custom view selection
- Show error state in dropdown
- Block submission for types requiring views
- Provide refresh option
### User Interactions
If (user changes notification type)
- Reset custom view selection for PSV alerts
- Preserve delivery settings
- Update validation rules
- Show relevant fields only
If (switching between daily/weekly)
- Clear previous schedule settings
- Reset time selection
- Update validation schema
- Preserve delivery methods
If (editing scan notifications)
- Lock notification type
- Hide timing section
- Maintain delivery methods only
- Show modified validation rules
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment