# 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.