forked from trent_larson/crowd-funder-for-time-pwa
Add notification utility helpers and update PlatformServiceMixin
Created notification utility approaches to consolidate verbose $notify calls: - Simple function utility (src/utils/notify.ts) - recommended approach - Vue 3 composable (src/composables/useNotifications.ts) - Utility class with mixin (src/utils/notificationUtils.ts) Updated ClaimView.vue to demonstrate usage, reducing notification code by ~70%. Enhanced PlatformServiceMixin with improved caching and database methods. Updated ShareMyContactInfoView.vue with mixin improvements. Provides consistent timeouts, standardized patterns, and type safety. Ready for migration alongside mixin updates.
This commit is contained in:
140
src/composables/useNotifications.ts
Normal file
140
src/composables/useNotifications.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
import { inject } from 'vue';
|
||||
import { NotificationIface } from '../constants/app';
|
||||
|
||||
/**
|
||||
* Vue 3 composable for notifications
|
||||
* Provides a concise API for common notification patterns
|
||||
*/
|
||||
|
||||
export const NOTIFICATION_TIMEOUTS = {
|
||||
BRIEF: 1000, // Very brief toasts ("Sent..." messages)
|
||||
SHORT: 2000, // Short notifications (clipboard copies, quick confirmations)
|
||||
STANDARD: 3000, // Standard notifications (success messages, general info)
|
||||
LONG: 5000, // Longer notifications (errors, warnings, important info)
|
||||
VERY_LONG: 7000, // Very long notifications (complex operations)
|
||||
MODAL: -1, // Modal confirmations (no auto-dismiss)
|
||||
} as const;
|
||||
|
||||
export function useNotifications() {
|
||||
// Inject the notify function from the app
|
||||
const notify = inject<(notification: NotificationIface, timeout?: number) => void>('$notify');
|
||||
|
||||
if (!notify) {
|
||||
throw new Error('useNotifications must be used within a component that has $notify available');
|
||||
}
|
||||
|
||||
return {
|
||||
// Direct access to the original notify function
|
||||
notify,
|
||||
|
||||
// Success notifications
|
||||
success: (text: string, timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
text,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Error notifications
|
||||
error: (text: string, timeout = NOTIFICATION_TIMEOUTS.LONG) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Warning notifications
|
||||
warning: (text: string, timeout = NOTIFICATION_TIMEOUTS.LONG) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "warning",
|
||||
title: "Warning",
|
||||
text,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Info notifications
|
||||
info: (text: string, timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Info",
|
||||
text,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Toast notifications (brief)
|
||||
toast: (title: string, text?: string, timeout = NOTIFICATION_TIMEOUTS.BRIEF) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "toast",
|
||||
title,
|
||||
text,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Clipboard copy notifications
|
||||
copied: (item: string, timeout = NOTIFICATION_TIMEOUTS.SHORT) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "toast",
|
||||
title: "Copied",
|
||||
text: `${item} was copied to the clipboard.`,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Sent brief notification
|
||||
sent: (timeout = NOTIFICATION_TIMEOUTS.BRIEF) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "toast",
|
||||
title: "Sent...",
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Confirmation modal
|
||||
confirm: (text: string, onYes: () => Promise<void>, timeout = NOTIFICATION_TIMEOUTS.MODAL) => {
|
||||
notify({
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: "Confirm",
|
||||
text,
|
||||
onYes,
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Standard confirmation messages
|
||||
confirmationSubmitted: (timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
text: "Confirmation submitted.",
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Common error patterns
|
||||
genericError: (timeout = NOTIFICATION_TIMEOUTS.LONG) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text: "Something went wrong.",
|
||||
}, timeout);
|
||||
},
|
||||
|
||||
// Common success patterns
|
||||
genericSuccess: (timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
text: "Operation completed successfully.",
|
||||
}, timeout);
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user