forked from jsnbuchanan/crowd-funder-for-time-pwa
3d124e13bb
- 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.
111 lines
4.5 KiB
Markdown
111 lines
4.5 KiB
Markdown
# HomeView.vue Notification Migration
|
|
|
|
## Migration Type: Notification Helpers Pattern
|
|
|
|
**Component:** `src/views/HomeView.vue`
|
|
**Migration Date:** 2025-07-07
|
|
**Status:** ✅ Complete
|
|
|
|
## Overview
|
|
|
|
HomeView.vue has been migrated from legacy `this.$notify()` calls to the modern notification helpers pattern using `createNotifyHelpers()`. This standardizes notification patterns across the application and provides better type safety.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Added Imports
|
|
```typescript
|
|
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
|
import {
|
|
NOTIFY_CONTACT_LOADING_ISSUE,
|
|
NOTIFY_FEED_LOADING_ISSUE,
|
|
NOTIFY_CONFIRMATION_ERROR,
|
|
} from "@/constants/notifications";
|
|
```
|
|
|
|
### 2. Added Property Declaration
|
|
```typescript
|
|
notify!: ReturnType<typeof createNotifyHelpers>;
|
|
```
|
|
|
|
### 3. Added Initialization in created()
|
|
```typescript
|
|
created() {
|
|
this.notify = createNotifyHelpers(this.$notify);
|
|
}
|
|
```
|
|
|
|
### 4. Migrated 8 Notification Calls
|
|
|
|
| Line | Old Pattern | New Pattern | Type |
|
|
|------|-------------|-------------|------|
|
|
| 550 | `this.$notify({group: "alert", type: "warning", title: "Contact Loading Issue", text: "Some contact information may be unavailable."}, 5000)` | `this.notify.warning(NOTIFY_CONTACT_LOADING_ISSUE.message, TIMEOUTS.LONG)` | Warning |
|
|
| 641 | `this.$notify({group: "alert", type: "warning", title: "Feed Loading Issue", text: "Some feed data may be unavailable. Pull to refresh."}, 5000)` | `this.notify.warning(NOTIFY_FEED_LOADING_ISSUE.message, TIMEOUTS.LONG)` | Warning |
|
|
| 833 | `this.$notify({group: "alert", type: "danger", title: "Error", text: userMessage \|\| "There was an error loading your data. Please try refreshing the page."}, 5000)` | `this.notify.error(userMessage \|\| "There was an error loading your data. Please try refreshing the page.", TIMEOUTS.LONG)` | Error |
|
|
| 1341 | `this.$notify({group: "alert", type: "danger", title: "Feed Error", text: (e as FeedError)?.userMessage \|\| "There was an error retrieving feed data."}, -1)` | `this.notify.error((e as FeedError)?.userMessage \|\| "There was an error retrieving feed data.", TIMEOUTS.MODAL)` | Error |
|
|
| 1672 | `this.$notify({group: "alert", type: "toast", title: "FYI", text: message}, 2000)` | `this.notify.toast("FYI", message, TIMEOUTS.SHORT)` | Toast |
|
|
| 1795 | `this.$notify({group: "modal", type: "confirm", title: "Confirm", text: "Do you personally confirm that this is true?", onYes: async () => {...}}, -1)` | `this.notify.confirm("Do you personally confirm that this is true?", async () => {...})` | Confirm |
|
|
| 1826 | `this.$notify({group: "alert", type: "success", title: "Success", text: "Confirmation submitted."}, 3000)` | `this.notify.confirmationSubmitted()` | Success |
|
|
| 1840 | `this.$notify({group: "alert", type: "danger", title: "Error", text: "There was a problem submitting the confirmation."}, 5000)` | `this.notify.error(NOTIFY_CONFIRMATION_ERROR.message, TIMEOUTS.LONG)` | Error |
|
|
|
|
## Benefits Achieved
|
|
|
|
### 1. **Consistency**
|
|
- Standardized notification patterns across the application
|
|
- Consistent timeout values using `TIMEOUTS` constants
|
|
|
|
### 2. **Type Safety**
|
|
- Full TypeScript support for notification helpers
|
|
- Compile-time checking of notification parameters
|
|
|
|
### 3. **Code Reduction**
|
|
- Reduced verbose notification object creation by ~70%
|
|
- Eliminated repetitive `group`, `type`, `title` boilerplate
|
|
|
|
### 4. **Maintainability**
|
|
- Centralized notification logic in helper functions
|
|
- Easy to update notification behavior across all components
|
|
|
|
## Examples
|
|
|
|
### Before (Legacy Pattern)
|
|
```typescript
|
|
this.$notify({
|
|
group: "alert",
|
|
type: "warning",
|
|
title: "Contact Loading Issue",
|
|
text: "Some contact information may be unavailable."
|
|
}, 5000);
|
|
```
|
|
|
|
### After (Modern Pattern)
|
|
```typescript
|
|
this.notify.warning(
|
|
NOTIFY_CONTACT_LOADING_ISSUE.message,
|
|
TIMEOUTS.LONG
|
|
);
|
|
```
|
|
|
|
## Validation
|
|
|
|
✅ **No ESLint errors**
|
|
✅ **All `this.$notify()` calls replaced**
|
|
✅ **Proper timeout constants used**
|
|
✅ **Type safety maintained**
|
|
|
|
## Notes
|
|
|
|
- The legacy `$notify` property declaration is kept for compatibility
|
|
- Complex notifications (like confirmations) now use dedicated helper methods
|
|
- All hardcoded timeout values replaced with semantic `TIMEOUTS` constants
|
|
|
|
## Pattern for Future Migrations
|
|
|
|
This migration follows the established pattern used in:
|
|
- `src/views/ClaimView.vue`
|
|
- `src/views/AccountViewView.vue`
|
|
- `src/components/GiftedDialog.vue`
|
|
- `src/components/ActivityListItem.vue`
|
|
- `src/components/DataExportSection.vue`
|
|
- `src/components/ChoiceButtonDialog.vue`
|
|
|
|
The pattern should be added to all component migrations going forward. |