Created
February 24, 2025 10:30
-
-
Save creotip/06c13aceaf85b2e4dcd4f135be1d94f5 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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