crowd-funder-for-time-pwa/docs/migration-testing/HOMEVIEW_NOTIFICATION_CONSTANTS.md

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

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

import {
  NOTIFY_CONTACT_LOADING_ISSUE,
  NOTIFY_FEED_LOADING_ISSUE,
  NOTIFY_CONFIRMATION_ERROR,
} from "@/constants/notifications";

3. Use Constants in Notification Calls

// ✅ 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