OV-7: + toast service

frontend/src/bundles/common/middlewares/error-handling.middleware.ts

@@ -1,16 +1,12 @@
-import { createStandaloneToast } from '@chakra-ui/react';
 import {
     type Middleware,
     isRejected,
     isRejectedWithValue,
 } from '@reduxjs/toolkit';
 import { type ServerValidationErrorResponse } from 'shared';
 
-import { theme } from '~/framework/theme/theme.js';
+import { toastService } from '../services/services.js';
 
-import { stringToReactNode } from '../helpers/helpers.js';
-
-const { toast } = createStandaloneToast({ theme: theme });
 const toastId = 'redux-store-error';
 
 const errorMiddleware: Middleware = () => {
@@ -28,16 +24,8 @@ const errorMiddleware: Middleware = () => {
             }
         }
 
-        if (message !== '' && !toast.isActive(toastId)) {
-            toast({
-                id: toastId,
-                title: 'An error occurred.',
-                description: stringToReactNode(message),
-                status: 'error',
-                duration: 7000,
-                isClosable: true,
-                position: 'top-right',
-            });
+        if (message !== '' && !toastService.isActive(toastId)) {
+            toastService.error(message, toastId, 'An error occurred.');
         }
 
         return next(action);

frontend/src/bundles/common/services/services.ts

@@ -0,0 +1 @@
+export { type ToastService, toastService } from './toast/toast.js';

frontend/src/bundles/common/services/toast/toast.service.ts

@@ -0,0 +1,92 @@
+import { type createStandaloneToast } from '@chakra-ui/react';
+
+type Constructor = {
+    toast: ReturnType<typeof createStandaloneToast>['toast'];
+};
+
+class ToastService {
+    private toast: ReturnType<typeof createStandaloneToast>['toast'];
+
+    public constructor({ toast }: Constructor) {
+        this.toast = toast;
+    }
+
+    public warn = (message: string, toastId: string, title: string): void => {
+        this.toast({
+            id: toastId,
+            title: title,
+            description: message,
+            status: 'warning',
+            duration: 7000,
+            isClosable: true,
+            position: 'top-right',
+            variant: 'solid',
+        });
+    };
+
+    public loading = (
+        message: string,
+        toastId: string,
+        title: string,
+    ): void => {
+        this.toast({
+            id: toastId,
+            title: title,
+            description: message,
+            status: 'loading',
+            duration: 7000,
+            isClosable: true,
+            position: 'top-right',
+            variant: 'solid',
+        });
+    };
+
+    public error = (message: string, toastId: string, title: string): void => {
+        this.toast({
+            id: toastId,
+            title: title,
+            description: message,
+            status: 'error',
+            duration: 7000,
+            isClosable: true,
+            position: 'top-right',
+            variant: 'solid',
+        });
+    };
+
+    public success = (
+        message: string,
+        toastId: string,
+        title: string,
+    ): void => {
+        this.toast({
+            id: toastId,
+            title: title,
+            description: message,
+            status: 'success',
+            duration: 7000,
+            isClosable: true,
+            position: 'top-right',
+            variant: 'solid',
+        });
+    };
+
+    public info = (message: string, toastId: string, title: string): void => {
+        this.toast({
+            id: toastId,
+            title: title,
+            description: message,
+            status: 'info',
+            duration: 7000,
+            isClosable: true,
+            position: 'top-right',
+            variant: 'solid',
+        });
+    };
+
+    public isActive = (toastId: string): boolean => {
+        return this.toast.isActive(toastId);
+    };
+}
+
+export { ToastService };

frontend/src/bundles/common/services/toast/toast.ts

@@ -0,0 +1,12 @@
+import { createStandaloneToast } from '@chakra-ui/react';
+
+import { theme } from '~/framework/theme/theme.js';
+
+import { ToastService } from './toast.service.js';
+
+const { toast } = createStandaloneToast({ theme: theme });
+
+const toastService = new ToastService({ toast });
+
+export { ToastService } from './toast.service.js';
+export { toastService };