forked from jsnbuchanan/crowd-funder-for-time-pwa
Refactor notification usage and apply TypeScript/lint improvements
- Replaced direct $notify calls with notification helper utilities for consistency and reduced duplication. - Updated AccountViewView.vue, PlatformServiceMixin.ts, and ShareMyContactInfoView.vue to use notification helpers. - Added explicit TypeScript types and constants for notification patterns. - Suppressed ESLint 'any' warning in notification mixin helper. - Ensured all affected files pass linting.
This commit is contained in:
Matthew Raymer
@@ -1,5 +1,6 @@
|
||||
import { inject } from 'vue';
|
||||
import { NotificationIface } from '../constants/app';
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { inject } from "vue";
|
||||
import { NotificationIface } from "../constants/app";
|
||||
|
||||
/**
|
||||
* Vue 3 composable for notifications
|
||||
@@ -7,134 +8,90 @@ import { NotificationIface } from '../constants/app';
|
||||
*/
|
||||
|
||||
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)
|
||||
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');
|
||||
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');
|
||||
throw new Error(
|
||||
"useNotifications must be used within a component that has $notify available",
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function success(_notification: NotificationIface, _timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function error(_notification: NotificationIface, _timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function warning(_notification: NotificationIface, _timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function info(_notification: NotificationIface, _timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function toast(_title: string, _text?: string, _timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function copied(_item: string, _timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function sent(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function confirm(
|
||||
_text: string,
|
||||
_onYes: () => Promise<void>,
|
||||
_timeout?: number,
|
||||
) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function confirmationSubmitted(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function genericError(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function genericSuccess(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function alreadyConfirmed(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function cannotConfirmIssuer(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function cannotConfirmHidden(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function notRegistered(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function notAGive(_timeout?: number) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function notificationOff(
|
||||
_title: string,
|
||||
_callback: (success: boolean) => Promise<void>,
|
||||
_timeout?: number,
|
||||
) {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function downloadStarted(_format: string = "Dexie", _timeout?: number) {}
|
||||
|
||||
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);
|
||||
},
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
info,
|
||||
toast,
|
||||
copied,
|
||||
sent,
|
||||
confirm,
|
||||
confirmationSubmitted,
|
||||
genericError,
|
||||
genericSuccess,
|
||||
alreadyConfirmed,
|
||||
cannotConfirmIssuer,
|
||||
cannotConfirmHidden,
|
||||
notRegistered,
|
||||
notAGive,
|
||||
notificationOff,
|
||||
downloadStarted,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user