forked from jsnbuchanan/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:
136
src/utils/notify.ts
Normal file
136
src/utils/notify.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
import { NotificationIface } from '../constants/app';
|
||||
|
||||
/**
|
||||
* Simple notification utility functions
|
||||
* Provides the most concise API for common notification patterns
|
||||
*/
|
||||
|
||||
export type NotifyFunction = (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
// Standard timeouts
|
||||
export const 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;
|
||||
|
||||
/**
|
||||
* Create notification helpers for a given notify function
|
||||
*/
|
||||
export function createNotifyHelpers(notify: NotifyFunction) {
|
||||
return {
|
||||
// Success notifications
|
||||
success: (text: string, timeout?: number) =>
|
||||
notify({ group: "alert", type: "success", title: "Success", text }, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
// Error notifications
|
||||
error: (text: string, timeout?: number) =>
|
||||
notify({ group: "alert", type: "danger", title: "Error", text }, timeout || TIMEOUTS.LONG),
|
||||
|
||||
// Warning notifications
|
||||
warning: (text: string, timeout?: number) =>
|
||||
notify({ group: "alert", type: "warning", title: "Warning", text }, timeout || TIMEOUTS.LONG),
|
||||
|
||||
// Info notifications
|
||||
info: (text: string, timeout?: number) =>
|
||||
notify({ group: "alert", type: "info", title: "Info", text }, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
// Toast notifications (brief)
|
||||
toast: (title: string, text?: string, timeout?: number) =>
|
||||
notify({ group: "alert", type: "toast", title, text }, timeout || TIMEOUTS.BRIEF),
|
||||
|
||||
// Clipboard copy notifications
|
||||
copied: (item: string, timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "toast",
|
||||
title: "Copied",
|
||||
text: `${item} was copied to the clipboard.`
|
||||
}, timeout || TIMEOUTS.SHORT),
|
||||
|
||||
// Sent brief notification
|
||||
sent: (timeout?: number) =>
|
||||
notify({ group: "alert", type: "toast", title: "Sent..." }, timeout || TIMEOUTS.BRIEF),
|
||||
|
||||
// Confirmation modal
|
||||
confirm: (text: string, onYes: () => Promise<void>, timeout?: number) =>
|
||||
notify({
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: "Confirm",
|
||||
text,
|
||||
onYes
|
||||
}, timeout || TIMEOUTS.MODAL),
|
||||
|
||||
// Standard confirmation messages
|
||||
confirmationSubmitted: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
text: "Confirmation submitted."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
// Common error patterns
|
||||
genericError: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text: "Something went wrong."
|
||||
}, timeout || TIMEOUTS.LONG),
|
||||
|
||||
// Common success patterns
|
||||
genericSuccess: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
text: "Operation completed successfully."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
// Common confirmation patterns
|
||||
alreadyConfirmed: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Already Confirmed",
|
||||
text: "You already confirmed this claim."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
cannotConfirmIssuer: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Cannot Confirm",
|
||||
text: "You cannot confirm this because you issued this claim."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
cannotConfirmHidden: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Cannot Confirm",
|
||||
text: "You cannot confirm this because some people are hidden."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
notRegistered: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Not Registered",
|
||||
text: "Someone needs to register you before you can confirm."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
|
||||
notAGive: (timeout?: number) =>
|
||||
notify({
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Info",
|
||||
text: "This is not a giving action to confirm."
|
||||
}, timeout || TIMEOUTS.STANDARD),
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user