fix(NotificationsHub): toast show messages based on locale

src/components/NotificationsHub/NotificationHub.map.ts

@@ -1,5 +1,3 @@
-import { tr } from './NotificationsHub.i18n';
-
 type NamespacedAction<T extends string, A extends string> = `${T}${A}`;
 type CUDNamespacedAction<T extends string> = NamespacedAction<T, 'Create' | 'Update' | 'Delete'>;
 type SubscribeNamespacesAction<T extends string> = NamespacedAction<T, 'Watch' | 'Unwatch' | 'Star' | 'Unstar'>;
@@ -33,107 +31,112 @@ export type NotificationMap = Record<
 > &
     SimpliestNotificationMessages;
 
-export const notificationKeyMap: NotificationMap = {
-    goalsCreate: {
-        success: tr('Voila! Goal is here 🎉'),
-        pending: tr('We are creating new goal'),
-    },
-    goalsUpdate: {
-        success: tr('Voila! Goal is up to date 🎉'),
-        pending: tr('We are updating the goal'),
-    },
-    goalsDelete: {
-        success: tr('Deleted successfully 🎉'),
-        pending: tr('We are deleting the goal'),
-    },
-    goalsStar: {
-        success: tr('Voila! You are stargizer now 🎉'),
-        pending: tr('We are calling owner'),
-    },
-    goalsUnstar: {
-        success: tr('So sad! Goal will miss you'),
-        pending: tr('We are calling owner'),
-    },
-    goalsWatch: {
-        success: tr('Voila! You are watcher now 🎉'),
-        pending: tr('We are calling owner'),
-    },
-    goalsUnwatch: {
-        success: tr('So sad! Goal will miss you'),
-        pending: tr('We are calling owner'),
-    },
-    commentCreate: {
-        success: tr('Voila! Comment is here 🎉'),
-        pending: tr('We are publishing your comment'),
-    },
-    commentUpdate: {
-        success: tr('Comment updated'),
-        pending: tr('We are updating your comment'),
-    },
-    commentDelete: {
-        success: tr('Comment removed'),
-        pending: tr('We are deleting your comment'),
-    },
-    projectCreate: {
-        success: tr("Voila! It's here 🎉"),
-        pending: tr('We are creating something new'),
-    },
-    projectUpdate: {
-        success: tr('Voila! Successfully updated 🎉'),
-        pending: tr('We are updating project settings'),
-    },
-    projectTransfer: {
-        success: tr('So sad! Project will miss you'),
-        pending: tr('We are calling owner'),
-    },
-    projectStar: {
-        success: tr('Voila! You are stargizer now 🎉'),
-        pending: tr('We are calling owner'),
-    },
-    projectUnstar: {
-        success: tr('So sad! Project will miss you'),
-        pending: tr('We are calling owner'),
-    },
-    projectUnwatch: {
-        success: tr('So sad! Project will miss you'),
-        pending: tr('We are calling owner'),
-    },
-    projectWatch: {
-        success: tr('Voila! You are watcher now 🎉'),
-        pending: tr('We are calling owner'),
-    },
-    tagCreate: {
-        success: tr('Voila! Tag is here 🎉'),
-        pending: tr('We are creating new tag'),
-    },
-    userInvite: {
-        success: tr('Voila! Users invited 🎉'),
-        pending: tr('We are creating invite'),
-    },
-    filterCreate: {
-        success: tr('Voila! Saved successfully 🎉! Use and share it with teammates 😉'),
-        pending: tr('We are saving your filter...'),
-    },
-    filterDelete: {
-        success: tr('Deleted successfully 🎉'),
-        pending: tr('We are deleting your filter...'),
-    },
-    filterStar: {
-        success: tr('Voila! You are stargizer now 🎉'),
-        pending: tr('We are calling owner'),
-    },
-    filterUnstar: {
-        success: tr('So sad! We will miss you'),
-        pending: tr('We are calling owner'),
-    },
-    userSettingsUpdate: {
-        success: tr('Voila! Successfully updated 🎉'),
-        pending: tr('We are updating user settings'),
-    },
-    sentFeedback: {
-        success: tr('Feedback sent 🎉'),
-        pending: tr('Feedback is formed'),
-    },
-    clearLSCache: tr('Local cache cleared successfully'),
-    error: tr('Something went wrong 😿'),
+type NotificationKeyMapFn = (key: Namespaces) => NotificationMap[Namespaces];
+
+export const getNotificicationKeyMap: NotificationKeyMapFn = (key) => {
+    const notification: NotificationMap = {
+        goalsCreate: {
+            success: 'Voila! Goal is here 🎉',
+            pending: 'We are creating new goal',
+        },
+        goalsUpdate: {
+            success: 'Voila! Goal is up to date 🎉',
+            pending: 'We are updating the goal',
+        },
+        goalsDelete: {
+            success: 'Deleted successfully 🎉',
+            pending: 'We are deleting the goal',
+        },
+        goalsStar: {
+            success: 'Voila! You are stargizer now 🎉',
+            pending: 'We are calling owner',
+        },
+        goalsUnstar: {
+            success: 'So sad! Goal will miss you',
+            pending: 'We are calling owner',
+        },
+        goalsWatch: {
+            success: 'Voila! You are watcher now 🎉',
+            pending: 'We are calling owner',
+        },
+        goalsUnwatch: {
+            success: 'So sad! Goal will miss you',
+            pending: 'We are calling owner',
+        },
+        commentCreate: {
+            success: 'Voila! Comment is here 🎉',
+            pending: 'We are publishing your comment',
+        },
+        commentUpdate: {
+            success: 'Comment updated',
+            pending: 'We are updating your comment',
+        },
+        commentDelete: {
+            success: 'Comment removed',
+            pending: 'We are deleting your comment',
+        },
+        projectCreate: {
+            success: "Voila! It's here 🎉",
+            pending: 'We are creating something new',
+        },
+        projectUpdate: {
+            success: 'Voila! Successfully updated 🎉',
+            pending: 'We are updating project settings',
+        },
+        projectTransfer: {
+            success: 'So sad! Project will miss you',
+            pending: 'We are calling owner',
+        },
+        projectStar: {
+            success: 'Voila! You are stargizer now 🎉',
+            pending: 'We are calling owner',
+        },
+        projectUnstar: {
+            success: 'So sad! Project will miss you',
+            pending: 'We are calling owner',
+        },
+        projectUnwatch: {
+            success: 'So sad! Project will miss you',
+            pending: 'We are calling owner',
+        },
+        projectWatch: {
+            success: 'Voila! You are watcher now 🎉',
+            pending: 'We are calling owner',
+        },
+        tagCreate: {
+            success: 'Voila! Tag is here 🎉',
+            pending: 'We are creating new tag',
+        },
+        userInvite: {
+            success: 'Voila! Users invited 🎉',
+            pending: 'We are creating invite',
+        },
+        filterCreate: {
+            success: 'Voila! Saved successfully 🎉! Use and share it with teammates 😉',
+            pending: 'We are saving your filter...',
+        },
+        filterDelete: {
+            success: 'Deleted successfully 🎉',
+            pending: 'We are deleting your filter...',
+        },
+        filterStar: {
+            success: 'Voila! You are stargizer now 🎉',
+            pending: 'We are calling owner',
+        },
+        filterUnstar: {
+            success: 'So sad! We will miss you',
+            pending: 'We are calling owner',
+        },
+        userSettingsUpdate: {
+            success: 'Voila! Successfully updated 🎉',
+            pending: 'We are updating user settings',
+        },
+        sentFeedback: {
+            success: 'Feedback sent 🎉',
+            pending: 'Feedback is formed',
+        },
+        clearLSCache: 'Local cache cleared successfully',
+        error: 'Something went wrong 😿',
+    };
+    return notification[key];
 };

src/components/NotificationsHub/NotificationsHub.tsx

@@ -3,6 +3,8 @@ import toast from 'react-hot-toast';
 
 import type { NotificationsEventPromiseData } from '../../utils/dispatchNotification';
 
+import { I18nKey, tr } from './NotificationsHub.i18n';
+
 declare global {
     interface WindowEventMap {
         notifyPromise: CustomEvent<NotificationsEventPromiseData>;
@@ -13,17 +15,17 @@ declare global {
 
 const NotificationsHub: React.FC = () => {
     const promiseListener = async (e: WindowEventMap['notifyPromise']) => {
-        const id = toast.loading(e.detail.events.onPending);
+        const id = toast.loading(tr(e.detail.events.onPending as I18nKey));
 
         await e.detail.promise
             .then((data) => {
                 toast.dismiss(id);
-                toast.success(e.detail.events.onSuccess);
+                toast.success(tr(e.detail.events.onSuccess as I18nKey));
                 return [data, null];
             })
             .catch((error) => {
                 toast.dismiss(id);
-                toast.error(e.detail.events.onError);
+                toast.error(tr(e.detail.events.onError as I18nKey));
                 return [null, error];
             });
     };

src/utils/dispatchNotification.ts

@@ -1,4 +1,7 @@
-import { SimpliestNotificationMessages, notificationKeyMap } from '../components/NotificationsHub/NotificationHub.map';
+import {
+    getNotificicationKeyMap,
+    SimpliestNotificationMessages,
+} from '../components/NotificationsHub/NotificationHub.map';
 
 export interface NotificationsEventPromiseData {
     promise: Promise<unknown>;
@@ -19,15 +22,15 @@ export const dispatchPromisedNotificationsEvent = (
 export const dispatchErrorNotification = (key: keyof SimpliestNotificationMessages) => {
     window.dispatchEvent(
         new CustomEvent('notifyError', {
-            detail: notificationKeyMap[key],
+            detail: getNotificicationKeyMap(key),
         }),
     );
 };
 
 export const dispatchSuccessNotification = (key: keyof SimpliestNotificationMessages) => {
     window.dispatchEvent(
         new CustomEvent('notifySuccess', {
-            detail: notificationKeyMap[key],
+            detail: getNotificicationKeyMap(key),
         }),
     );
 };

src/utils/notifyPromise.ts

@@ -1,4 +1,4 @@
-import { NotificationNamespaces, notificationKeyMap } from '../components/NotificationsHub/NotificationHub.map';
+import { getNotificicationKeyMap, NotificationNamespaces } from '../components/NotificationsHub/NotificationHub.map';
 
 import { NotificationsEventPromiseData, dispatchPromisedNotificationsEvent } from './dispatchNotification';
 
@@ -12,9 +12,9 @@ export const notifyPromise: NotifyPromise = (promise, eventsOrNamespace) => {
 
     if (typeof eventsOrNamespace === 'string') {
         events = {
-            onSuccess: notificationKeyMap[eventsOrNamespace].success,
-            onPending: notificationKeyMap[eventsOrNamespace].pending,
-            onError: notificationKeyMap[eventsOrNamespace].error ?? notificationKeyMap.error,
+            onSuccess: getNotificicationKeyMap(eventsOrNamespace).success,
+            onPending: getNotificicationKeyMap(eventsOrNamespace).pending,
+            onError: getNotificicationKeyMap(eventsOrNamespace).error ?? getNotificicationKeyMap('error'),
         };
     } else {
         events = eventsOrNamespace;