Merge pull request #119 from PranavBhatP/fix-issue-45

Fix issue #45 - Enhance error toast messages

frontend/src/components/categories/CategoryDialog.tsx

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

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

@@ -49,8 +49,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

@@ -41,8 +41,8 @@ export const ContextVarDialog: FC<ContextVarDialogProps> = ({
   const { t } = useTranslate();
   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

@@ -33,8 +33,8 @@ export const RoleDialog: FC<RoleDialogProps> = ({
   const { t } = useTranslate();
   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

@@ -27,7 +27,6 @@ import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
-import { TTranslationKeys } from "@/i18n/i18n.types";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
@@ -58,12 +57,7 @@ export const Roles = () => {
   );
   const { mutateAsync: deleteRole } = useDelete(EntityType.ROLE, {
     onError: (error) => {
-      toast.error(
-        t(
-          (error.message as TTranslationKeys) ||
-            "message.internal_server_error",
-        ),
-      );
+      toast.error(error);
     },
     onSuccess() {
       deleteDialogCtl.closeDialog();

frontend/src/components/translations/index.tsx

@@ -55,8 +55,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

@@ -5,13 +5,14 @@
  * 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).
  */
-
 import {
   OptionsObject,
   enqueueSnackbar,
   SnackbarProvider as ToastProvider,
 } from "notistack";
 
+import { useTranslation } from "react-i18next";
+
 export { ToastProvider };
 
 const TOAST_COMMON_STYLE = {
@@ -38,25 +39,39 @@ const TOAST_WARNING_STYLE = {
   backgroundColor: "#fdf6ec",
 };
 
-export const useToast = () => ({
-  toast: {
-    error: (message: string, options?: OptionsObject<"error">) =>
-      enqueueSnackbar(message, {
-        variant: "error",
-        ...options,
-        style: { ...TOAST_ERROR_STYLE, ...options?.style },
-      }),
-    success: (message: string, options?: OptionsObject<"success">) =>
-      enqueueSnackbar(message, {
-        variant: "success",
-        ...options,
-        style: { ...TOAST_SUCCESS_STYLE, ...options?.style },
-      }),
-    warning: (message: string, options?: OptionsObject<"warning">) =>
-      enqueueSnackbar(message, {
-        variant: "warning",
-        ...options,
-        style: { ...TOAST_WARNING_STYLE, ...options?.style },
-      }),
-  },
-});
+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: (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",
+          ...options,
+          style: { ...TOAST_SUCCESS_STYLE, ...options?.style },
+        }),
+      warning: (message: string, options?: OptionsObject<"warning">) =>
+        enqueueSnackbar(message, {
+          variant: "warning",
+          ...options,
+          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",