4.5 KiB

Raw Blame History

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

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

notify!: ReturnType<typeof createNotifyHelpers>;

3. Added Initialization in created()

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)

this.$notify({
  group: "alert",
  type: "warning", 
  title: "Contact Loading Issue",
  text: "Some contact information may be unavailable."
}, 5000);

After (Modern Pattern)

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.

4.5 KiB Raw Blame History