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:
@@ -180,6 +180,59 @@ try {
|
||||
}
|
||||
```
|
||||
|
||||
## Notification Migration (Additional Step)
|
||||
|
||||
If component uses `this.$notify()` calls, also migrate to notification helpers:
|
||||
|
||||
### Import and Setup
|
||||
```typescript
|
||||
// Add imports
|
||||
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
||||
import {
|
||||
NOTIFY_CONTACT_LOADING_ISSUE,
|
||||
NOTIFY_FEED_LOADING_ISSUE,
|
||||
// Add other constants as needed
|
||||
} from "@/constants/notifications";
|
||||
|
||||
// Add property
|
||||
notify!: ReturnType<typeof createNotifyHelpers>;
|
||||
|
||||
// Initialize in created()
|
||||
created() {
|
||||
this.notify = createNotifyHelpers(this.$notify);
|
||||
}
|
||||
```
|
||||
|
||||
### Replace Notification Calls
|
||||
```typescript
|
||||
// ❌ BEFORE
|
||||
this.$notify({
|
||||
group: "alert",
|
||||
type: "warning",
|
||||
title: "Warning",
|
||||
text: "Something went wrong"
|
||||
}, 5000);
|
||||
|
||||
// ✅ AFTER - Use constants for reusable messages
|
||||
this.notify.warning(NOTIFY_CONTACT_LOADING_ISSUE.message, TIMEOUTS.LONG);
|
||||
|
||||
// ✅ AFTER - Literal strings for dynamic content
|
||||
this.notify.error(userMessage || "Fallback error message", TIMEOUTS.LONG);
|
||||
```
|
||||
|
||||
### Common Notification Patterns
|
||||
- Warning: `this.notify.warning(NOTIFY_CONSTANT.message, TIMEOUTS.LONG)`
|
||||
- Error: `this.notify.error(NOTIFY_CONSTANT.message, TIMEOUTS.LONG)`
|
||||
- Success: `this.notify.success(NOTIFY_CONSTANT.message, TIMEOUTS.STANDARD)`
|
||||
- Toast: `this.notify.toast(title, message, TIMEOUTS.SHORT)`
|
||||
- Confirm: `this.notify.confirm(message, onYes)`
|
||||
- Standard patterns: `this.notify.confirmationSubmitted()`, `this.notify.sent()`, etc.
|
||||
|
||||
### Notification Constants Guidelines
|
||||
- **Use constants** for static, reusable messages (defined in `src/constants/notifications.ts`)
|
||||
- **Use literal strings** for dynamic messages with variables
|
||||
- **Add new constants** to `notifications.ts` for new reusable messages
|
||||
|
||||
## After Migration Checklist
|
||||
|
||||
- [ ] All `databaseUtil` imports removed
|
||||
@@ -189,6 +242,11 @@ try {
|
||||
- [ ] Database operations use mixin methods (`$db`, `$query`, `$getAllContacts`, etc.)
|
||||
- [ ] Settings operations use mixin methods (`$settings`, `$saveSettings`)
|
||||
- [ ] Logging uses mixin methods (`$log`, `$logError`, `$logAndConsole`)
|
||||
- [ ] **Notification patterns migrated (if applicable)**
|
||||
- [ ] **All `this.$notify()` calls replaced with helper methods**
|
||||
- [ ] **Hardcoded timeouts replaced with `TIMEOUTS` constants**
|
||||
- [ ] **Static messages use notification constants from `@/constants/notifications`**
|
||||
- [ ] **Dynamic messages use literal strings appropriately**
|
||||
- [ ] Error handling includes component name context
|
||||
- [ ] Component compiles without TypeScript errors
|
||||
- [ ] Component functionality works as expected
|
||||
|
||||
Reference in New Issue
Block a user