forked from jsnbuchanan/crowd-funder-for-time-pwa
Fix HomeView notification migration to use proper constants pattern
- Add NOTIFY_CONTACT_LOADING_ISSUE, NOTIFY_FEED_LOADING_ISSUE, and NOTIFY_CONFIRMATION_ERROR constants to notifications.ts - Update HomeView.vue to import and use notification constants instead of literal strings - Update migration templates to document constants vs literal strings pattern - Add comprehensive documentation for notification constants usage Ensures consistency with established pattern used in ActivityListItem.vue and other migrated components. Linter passes without errors.
This commit is contained in:
119
docs/migration-testing/HOMEVIEW_NOTIFICATION_CONSTANTS.md
Normal file
119
docs/migration-testing/HOMEVIEW_NOTIFICATION_CONSTANTS.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# HomeView.vue Notification Constants Migration
|
||||
|
||||
## Overview
|
||||
This document describes the proper pattern for using notification constants in TimeSafari migrations, demonstrated through the HomeView.vue migration.
|
||||
|
||||
## Pattern: Constants vs Literal Strings
|
||||
|
||||
### Use Constants For
|
||||
- **Static, reusable messages** that appear in multiple components
|
||||
- **Standard user-facing notifications** with consistent wording
|
||||
- **Error messages** that are used across the application
|
||||
|
||||
### Use Literal Strings For
|
||||
- **Dynamic messages** with variables or user input
|
||||
- **Contextual error messages** that include specific details
|
||||
- **Messages that are truly one-off** and unlikely to be reused
|
||||
|
||||
## Implementation Example
|
||||
|
||||
### 1. Define Constants in `src/constants/notifications.ts`
|
||||
```typescript
|
||||
export const NOTIFY_CONTACT_LOADING_ISSUE = {
|
||||
title: "Contact Loading Issue",
|
||||
message: "Some contact information may be unavailable.",
|
||||
};
|
||||
|
||||
export const NOTIFY_FEED_LOADING_ISSUE = {
|
||||
title: "Feed Loading Issue",
|
||||
message: "Some feed data may be unavailable. Pull to refresh.",
|
||||
};
|
||||
|
||||
export const NOTIFY_CONFIRMATION_ERROR = {
|
||||
title: "Error",
|
||||
message: "There was a problem submitting the confirmation.",
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Import Constants in Component
|
||||
```typescript
|
||||
import {
|
||||
NOTIFY_CONTACT_LOADING_ISSUE,
|
||||
NOTIFY_FEED_LOADING_ISSUE,
|
||||
NOTIFY_CONFIRMATION_ERROR,
|
||||
} from "@/constants/notifications";
|
||||
```
|
||||
|
||||
### 3. Use Constants in Notification Calls
|
||||
```typescript
|
||||
// ✅ CORRECT - Using constants for static messages
|
||||
this.notify.warning(
|
||||
NOTIFY_CONTACT_LOADING_ISSUE.message,
|
||||
TIMEOUTS.LONG
|
||||
);
|
||||
|
||||
// ✅ CORRECT - Using literal strings for dynamic messages
|
||||
this.notify.error(
|
||||
userMessage || "There was an error loading your data. Please try refreshing the page.",
|
||||
TIMEOUTS.LONG
|
||||
);
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### Consistency
|
||||
- Ensures consistent wording across the application
|
||||
- Reduces typos and variations in messaging
|
||||
- Makes UI text easier to review and update
|
||||
|
||||
### Maintainability
|
||||
- Changes to notification text only need to be made in one place
|
||||
- Easier to track which messages are used where
|
||||
- Better support for future internationalization
|
||||
|
||||
### Type Safety
|
||||
- TypeScript can catch missing constants at compile time
|
||||
- IDE autocompletion helps prevent errors
|
||||
- Structured approach to notification management
|
||||
|
||||
## Migration Checklist
|
||||
|
||||
When migrating notifications to use constants:
|
||||
|
||||
1. **Identify reusable messages** in the component
|
||||
2. **Add constants** to `src/constants/notifications.ts`
|
||||
3. **Import constants** in the component
|
||||
4. **Replace literal strings** with constant references
|
||||
5. **Preserve dynamic messages** as literal strings
|
||||
6. **Test notifications** to ensure they still work correctly
|
||||
|
||||
## Examples From HomeView.vue
|
||||
|
||||
| Type | Message | Constant Used |
|
||||
|------|---------|---------------|
|
||||
| Warning | "Some contact information may be unavailable." | `NOTIFY_CONTACT_LOADING_ISSUE.message` |
|
||||
| Warning | "Some feed data may be unavailable. Pull to refresh." | `NOTIFY_FEED_LOADING_ISSUE.message` |
|
||||
| Error | "There was a problem submitting the confirmation." | `NOTIFY_CONFIRMATION_ERROR.message` |
|
||||
| Dynamic | `userMessage \|\| "fallback message"` | *(literal string - dynamic content)* |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use descriptive constant names** that clearly indicate the message purpose
|
||||
2. **Group related constants** together in the notifications file
|
||||
3. **Include both title and message** in constant objects for consistency
|
||||
4. **Document why** certain messages remain as literal strings (dynamic content)
|
||||
5. **Consider future reusability** when deciding whether to create a constant
|
||||
|
||||
## Integration with Existing Pattern
|
||||
|
||||
This approach builds on the existing notification helper pattern:
|
||||
- Still uses `createNotifyHelpers()` for method abstraction
|
||||
- Still uses `TIMEOUTS` constants for consistent timing
|
||||
- Adds message constants for better content management
|
||||
- Maintains compatibility with existing notification infrastructure
|
||||
|
||||
## Author
|
||||
Matthew Raymer
|
||||
|
||||
## Date
|
||||
2024-01-XX
|
||||
Reference in New Issue
Block a user