fix issue #45: enhance error messages for user feedback

updated error toast notifications to display specific user feedback based on backend response

frontend/src/components/categories/CategoryDialog.tsx

@@ -35,8 +35,9 @@ export const CategoryDialog: FC<CategoryDialogProps> = ({
   const { t } = useTranslation();
   const { toast } = useToast();
   const { mutateAsync: createCategory } = useCreate(EntityType.CATEGORY, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+    onError: (error) => {
+      console.log(error);
+      toast.error(error);
     },
     onSuccess: () => {
       closeDialog();

frontend/src/components/content-types/ContentTypeDialog.tsx

@@ -50,8 +50,8 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   const { mutateAsync: createContentType } = useCreate(
     EntityType.CONTENT_TYPE,
     {
-      onError: () => {
-        toast.error(t("message.internal_server_error"));
+      onError: (error) => {
+        toast.error(error);
       },
       onSuccess: () => {
         closeDialog();

frontend/src/components/contents/ContentDialog.tsx

@@ -178,8 +178,8 @@ export const ContentDialog: FC<ContentDialogProps> = ({
       createContent(
         { ...params, entity: contentType.id },
         {
-          onError: () => {
-            toast.error(t("message.internal_server_error"));
+          onError: (error) => {
+            toast.error(error);
           },
           onSuccess: () => {
             closeDialog();

frontend/src/components/context-vars/ContextVarDialog.tsx

@@ -35,8 +35,8 @@ export const ContextVarDialog: FC<ContextVarDialogProps> = ({
   const { t } = useTranslation();
   const { toast } = useToast();
   const { mutateAsync: createContextVar } = useCreate(EntityType.CONTEXT_VAR, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+    onError: (error) => {
+      toast.error(error);
     },
     onSuccess() {
       closeDialog();

frontend/src/components/roles/RoleDialog.tsx

@@ -34,8 +34,8 @@ export const RoleDialog: FC<RoleDialogProps> = ({
   const { t } = useTranslation();
   const { toast } = useToast();
   const { mutateAsync: createRole } = useCreate(EntityType.ROLE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+    onError: (error) => {
+      toast.error(error);
     },
     onSuccess() {
       closeDialog();

frontend/src/components/roles/index.tsx

@@ -57,8 +57,8 @@ export const Roles = () => {
     },
   );
   const { mutateAsync: deleteRole } = useDelete(EntityType.ROLE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+    onError: (error) => {
+      toast.error(error);
     },
     onSuccess() {
       deleteDialogCtl.closeDialog();

frontend/src/components/translations/index.tsx

@@ -56,8 +56,8 @@ export const Translations = () => {
     },
   );
   const { mutateAsync: deleteTranslation } = useDelete(EntityType.TRANSLATION, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+    onError: (error) => {
+      toast.error(error);
     },
     onSuccess() {
       deleteDialogCtl.closeDialog();

frontend/src/hooks/useToast.ts

@@ -1,18 +1,11 @@
-/*
- * Copyright © 2024 Hexastack. All rights reserved.
- *
- * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
- * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
- * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
- * 3. SaaS Restriction: This software, or any derivative of it, may not be used to offer a competing product or service (SaaS) without prior written consent from Hexastack. Offering the software as a service or using it in a commercial cloud environment without express permission is strictly prohibited.
- */
-
 import {
   OptionsObject,
   enqueueSnackbar,
   SnackbarProvider as ToastProvider,
 } from "notistack";
 
+import { useTranslation } from "react-i18next";
+
 export { ToastProvider };
 
 const TOAST_COMMON_STYLE = {
@@ -39,14 +32,27 @@ const TOAST_WARNING_STYLE = {
   backgroundColor: "#fdf6ec",
 };
 
-export const useToast = () => ({
+export const useToast = () => {
+  const { t } = useTranslation();
+
+  const extractErrorMessage = (error: any) => {
+    if (error?.statusCode == 409) {
+      return t("message.duplicate_error");
+    }
+
+    return error?.message || t("message.internal_server_error");
+  };
+
+  return {
     toast: {
-    error: (message: string, options?: OptionsObject<"error">) =>
-      enqueueSnackbar(message, {
+      error: (error: any, options?: OptionsObject<"error">) => {
+        const errorMessage = extractErrorMessage(error);
+        enqueueSnackbar(errorMessage, {
           variant: "error",
           ...options,
           style: { ...TOAST_ERROR_STYLE, ...options?.style },
-      }),
+        });
+      },
       success: (message: string, options?: OptionsObject<"success">) =>
         enqueueSnackbar(message, {
           variant: "success",
@@ -60,4 +66,5 @@ export const useToast = () => ({
           style: { ...TOAST_WARNING_STYLE, ...options?.style },
         }),
     },
-});
+  };
+};

frontend/src/i18n/en/translation.json

@@ -1,5 +1,6 @@
 {
   "message": {
+    "duplicate_error": "Duplicate entry. Please choose a unique value.",
     "bad_request": "400 BAD REQUEST",
     "unable_to_process_request": "Unable to process request",
     "not_found": "404 NOT FOUND",

frontend/src/i18n/fr/translation.json

@@ -1,5 +1,6 @@
 {
   "message": {
+    "duplicate_error" : "Entrée en double. Veuillez choisir une valeur unique.",
     "bad_request": "400 MAUVAISE REQUÊTE",
     "unable_to_process_request": "Impossible de traiter la requête",
     "not_found": "404 RESSOURCE INTROUVABLE",