OV-7: error handling

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

@@ -0,0 +1,35 @@
+import {
+    type Middleware,
+    isRejected,
+    isRejectedWithValue,
+} from '@reduxjs/toolkit';
+import { type ServerValidationErrorResponse } from 'shared';
+
+import { toastService } from '../services/services.js';
+
+const toastId = 'redux-store-error';
+
+const errorMiddleware: Middleware = () => {
+    return (next) => (action) => {
+        let message: string = '';
+        if (isRejectedWithValue(action)) {
+            message += JSON.stringify(action.payload);
+        } else if (isRejected(action)) {
+            const error = action.error as ServerValidationErrorResponse;
+            message += `${error.message}\n`;
+            if (error.details) {
+                for (const errorDetail of error.details) {
+                    message += `\t- ${errorDetail.message}\n`;
+                }
+            }
+        }
+
+        if (message !== '' && !toastService.isActive(toastId)) {
+            toastService.error(message, toastId, 'An error occurred.');
+        }
+
+        return next(action);
+    };
+};
+
+export { errorMiddleware };

frontend/src/bundles/common/middlewares/middlewares.ts

@@ -0,0 +1 @@
+export { errorMiddleware } from './error-handling.middleware.js';

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 };

frontend/src/framework/store/store.package.ts

@@ -12,6 +12,8 @@ import { reducer as usersReducer } from '~/bundles/users/store/users.js';
 import { userApi } from '~/bundles/users/users.js';
 import { type Config } from '~/framework/config/config.js';
 
+import { errorMiddleware } from '../../bundles/common/middlewares/error-handling.middleware.js';
+
 type RootReducer = {
     auth: ReturnType<typeof authReducer>;
     users: ReturnType<typeof usersReducer>;
@@ -39,11 +41,12 @@ class Store {
                 users: usersReducer,
             },
             middleware: (getDefaultMiddleware) => {
-                return getDefaultMiddleware({
+                const middlewares = getDefaultMiddleware({
                     thunk: {
                         extraArgument: this.extraArguments,
                     },
                 });
+                return [...middlewares, errorMiddleware] as Tuple;
             },
         });
     }