fix: Rework catchError

Zenoo · Zenoo · commit f7b542f568b1 · 2022-12-19T16:34:41.000+01:00
diff --git a/client/public/static/i18n/en/common.json b/client/public/static/i18n/en/common.json
@@ -4,6 +4,7 @@
   "giveAdminRights": "Give admin rights",
   "cancel": "Cancel",
   "save": "Save",
+  "saved": "Saved",
   "minimize": "Minimize",
   "maximize": "Maximize",
   
diff --git a/client/public/static/i18n/en/table.json b/client/public/static/i18n/en/table.json
@@ -1,7 +1,9 @@
 {
   "updateSuccess": "Update Success",
   "updateError": "Update Error",
-  "add": "Add new object",
+  "add": "Add",
+  "edit": "Edit",
+  "delete": "Delete",
   "createdSuccessfully": "Created Successfully",
   "globalExport": "Download global CSV",
   "import": "Import",
diff --git a/client/public/static/i18n/en/user.json b/client/public/static/i18n/en/user.json
@@ -8,5 +8,6 @@
   "phone": "Phone",
   "password": "Password",
   "passwordConfirm": "Confirm Password",
-  "giveAdminRights": "Give admin rights"
+  "giveAdminRights": "Give admin rights",
+  "newUserAdded": "New user added"
 }
diff --git a/client/public/static/i18n/fr/common.json b/client/public/static/i18n/fr/common.json
@@ -4,6 +4,7 @@
   "giveAdminRights": "Donner les droits admin",
   "cancel": "Annuler",
   "save": "Sauvegarder",
+  "saved": "Sauvegardé",
   "minimize": "Minimiser",
   "maximize": "Maximiser",
   
diff --git a/client/public/static/i18n/fr/table.json b/client/public/static/i18n/fr/table.json
@@ -1,7 +1,9 @@
 {
   "updateSuccess": "Mise à jour réussie",
   "updateError": "Erreur de mise à jour",
-  "add": "Ajouter un nouvel oubjet",
+  "add": "Ajouter",
+  "edit": "Modifier",
+  "delete": "Supprimer",
   "createdSuccessfully": "Créé avec succès",
   "globalExport": "Télécharger le CSV global",
   "import": "Importer",
diff --git a/client/public/static/i18n/fr/user.json b/client/public/static/i18n/fr/user.json
@@ -7,5 +7,6 @@
   "phone": "Téléphone",
   "password": "Mot de passe",
   "passwordConfirm": "Confirmer le mot de passe",
-  "giveAdminRights": "Donner les droits d'administrateur"
+  "giveAdminRights": "Donner les droits d'administrateur",
+  "newUserAdded": "Nouvel utilisateur ajouté"
 }
diff --git a/client/src/components/Datatable.tsx b/client/src/components/Datatable.tsx
@@ -1,8 +1,9 @@
 import { Box } from '@mui/material';
-import { DataGrid, DataGridProps, GridColumns, GridFilterItem, GridLinkOperator } from '@mui/x-data-grid';
-import React, { useCallback, useEffect, useState } from 'react';
+import { DataGrid, DataGridProps, enUS, frFR, GridColumns, GridFilterItem, GridLinkOperator } from '@mui/x-data-grid';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAlert } from '../hooks/useAlert';
+import { useLanguage } from '../hooks/useLanguage';
 import { GlobalCsvExport } from './DatatableGlobalExport';
 import DatatableToolbar from './DatatableToolbar';
 
@@ -43,6 +44,7 @@ const Datatable = <DataType extends WithId, Model>({
 }: DatatableProps<DataType, Model>) => {
   const Alert = useAlert();
   const { t } = useTranslation('table');
+  const { language } = useLanguage();
 
   const [isLoading, setLoading] = useState(true);
   const [page, setPage] = useState(0);
@@ -53,6 +55,8 @@ const Datatable = <DataType extends WithId, Model>({
   const [filtersOperator, setFiltersOperator] = useState<GridLinkOperator>(GridLinkOperator.And);
   const [data, setData] = useState<DataType[]>([]);
 
+  const localeText = useMemo(() => (language === 'fr' ? frFR : enUS).components.MuiDataGrid.defaultProps.localeText, [language]);
+
   const tableOptions: Omit<DataGridProps, 'columns' | 'rows'> = {
     autoHeight: true,
     checkboxSelection: true,
@@ -199,6 +203,7 @@ const Datatable = <DataType extends WithId, Model>({
         }}
       >
         <DataGrid
+          localeText={localeText}
           experimentalFeatures={{ newEditingApi: true }}
           columns={columns}
           components={{
diff --git a/client/src/components/DatatableGlobalExport.tsx b/client/src/components/DatatableGlobalExport.tsx
@@ -27,12 +27,12 @@ const DatatableGlobalExport = (props: DatatableGlobalExportProps) => {
     Loader.open();
     const blob = await globalCsvExport.fetcher(
       globalCsvExport.title,
-    ).catch(catchError(Alert, t));
+    ).catch(catchError(Alert));
 
     Loader.close();
 
     if (!blob) {
-      Alert.open('error', t('InternalServerError'));
+      Alert.open('error', 'Internal Server Error');
       return;
     }
 
@@ -47,7 +47,7 @@ const DatatableGlobalExport = (props: DatatableGlobalExportProps) => {
 
     // Hide the export menu after the export
     hideMenu?.();
-  }, [Alert, globalCsvExport, hideMenu, t, Loader]);
+  }, [Alert, globalCsvExport, hideMenu, Loader]);
 
   return (
     <MenuItem
diff --git a/client/src/components/DatatableToolbar.tsx b/client/src/components/DatatableToolbar.tsx
@@ -41,7 +41,7 @@ const DatatableToolbar = ({
 
     await importMethod(data).then(() => {
       Alert.open('success', t('importSuccess'));
-    }).catch(catchError(Alert, t));
+    }).catch(catchError(Alert));
 
     reload();
     Loader.close();
@@ -60,7 +60,7 @@ const DatatableToolbar = ({
         empty().then(() => {
           Alert.open('success', t('emptySuccess'));
           reload();
-        }).catch(catchError(Alert, t)).finally(() => {
+        }).catch(catchError(Alert)).finally(() => {
           Loader.close();
         });
       },
diff --git a/client/src/components/forms/UserForm.tsx b/client/src/components/forms/UserForm.tsx
@@ -63,8 +63,8 @@ const UserForm = ({ data }: Props) => {
           update: personData,
         },
       }).then(() => {
-        Alert.open('success', 'Saved');
-      }).catch(catchError(Alert, t));
+        Alert.open('success', t('common:saved'));
+      }).catch(catchError(Alert));
     } else { // Addition
       processedData.password = formData.password;
       await UserRoutes.insert({
@@ -74,10 +74,10 @@ const UserForm = ({ data }: Props) => {
           create: personData,
         },
       }).then(() => {
-        Alert.open('success', 'New user added');
+        Alert.open('success', t('newUserAdded'));
         navigate('/app/admin/user/list');
         reset();
-      }).catch(catchError(Alert, t));
+      }).catch(catchError(Alert));
     }
     Loader.close();
   };
diff --git a/client/src/layouts/DashboardLayout/DashboardLayout.tsx b/client/src/layouts/DashboardLayout/DashboardLayout.tsx
@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate } from 'react-router-dom';
 import Loader from '../../components/Loader';
 import { useAlert } from '../../hooks/useAlert';
@@ -14,7 +13,6 @@ const DashboardLayout = () => {
   const navigate = useNavigate();
   const auth = useAuth();
   const Alert = useAlert();
-  const { t } = useTranslation();
 
   const [isMobileNavOpen, setMobileNavOpen] = useState(false);
   const onMobileNavOpen = useCallback(() => setMobileNavOpen(true), []);
@@ -30,13 +28,13 @@ const DashboardLayout = () => {
           localStorage.removeItem('user');
           localStorage.removeItem('token');
           navigate('/login', { replace: true });
-          catchError(Alert, t)(error);
+          catchError(Alert)(error);
         });
       } else {
         navigate('/login', { replace: true });
       }
     }
-  }, [Alert, auth, navigate, t]);
+  }, [Alert, auth, navigate]);
 
   return auth.authed ? (
     <Box sx={{
diff --git a/client/src/layouts/TableLayout.tsx b/client/src/layouts/TableLayout.tsx
@@ -59,8 +59,8 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
 }: TableLayoutProps<DataType, Model>) => {
   const Loader = useLoader();
   const Alert = useAlert();
-  const { t } = useTranslation();
   const { authed } = useAuth();
+  const { t } = useTranslation();
 
   const [selectedRows, setSelectedRows] = useState<GridRowId[]>([]);
   const [deleted, setDeleted] = useState(0);
@@ -78,12 +78,12 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
         })),
         count: response.count,
       })).catch((response: string) => {
-        catchError(Alert, t)(response);
+        catchError(Alert)(response);
         return ({ data: [], count: 0 });
       });
     }
     return Promise.resolve({ data: [], count: 0 });
-  }, [Alert, authed, deleted, getter, include, mapper, t]);
+  }, [Alert, authed, deleted, getter, include, mapper]);
 
   // Update actions table on setter call
   const handleSetter = useCallback((
@@ -130,11 +130,11 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
         setNewRecord((prev) => prev + 1);
         Loader.close();
       }).catch((response: string) => {
-        catchError(Alert, t)(response);
+        catchError(Alert)(response);
         Loader.close();
       });
     }
-  }, [Alert, Loader, deleted, remove, selectedRows, t]);
+  }, [Alert, Loader, deleted, remove, selectedRows]);
 
   return (
     <Box sx={sx}>
@@ -148,7 +148,7 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
               color="primary"
               onClick={handleAdd}
             >
-              Add
+              {t('add')}
             </Button>
           )}
           {edit && (
@@ -157,7 +157,7 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
               onClick={handleEdit}
               color="warning"
             >
-              Edit
+              {t('edit')}
             </Button>
           )}
           {remove && (
@@ -166,7 +166,7 @@ const TableLayout = <DataType extends WithId, Model extends WithId>({
               onClick={handleDelete}
               color="error"
             >
-              Delete
+              {t('delete')}
             </Button>
           )}
         </ButtonGroup>
diff --git a/client/src/routes.tsx b/client/src/routes.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Navigate } from 'react-router-dom';
-import HomeView from './HomeView';
+import HomeView from './views/HomeView';
 import AdminLayout from './layouts/AdminLayout';
 import DashboardLayout from './layouts/DashboardLayout/DashboardLayout';
 import MainLayout from './layouts/MainLayout/MainLayout';
diff --git a/client/src/utils/catchError.ts b/client/src/utils/catchError.ts
@@ -1,8 +1,7 @@
-import { TFunction } from 'react-i18next';
 import { AlertContextInterface } from '../hooks/useAlert';
 import { ErrorType } from './fetcher';
 
-const catchError = (Alert: AlertContextInterface, t: TFunction) => (error: ErrorType) => {
+const catchError = (Alert: AlertContextInterface) => (error: ErrorType) => {
   const errorData = typeof error === 'string'
     ? error
     : error.message
@@ -11,14 +10,10 @@ const catchError = (Alert: AlertContextInterface, t: TFunction) => (error: Error
         : error.message
       : error.statusText;
   const errorMessage = errorData.includes('<!DOCTYPE html>')
-    ? `${t('common:InternalServerError')}: ${errorData.match(/<strong>(.*)<\/strong>/)?.[1] || 'null'}`
+    ? `Internal Server Error: ${errorData.match(/<strong>(.*)<\/strong>/)?.[1] || 'null'}`
     : errorData;
 
-  if (typeof error !== 'string' && error.statusText === 'Service Unavailable') {
-    Alert.open('warning', t('common:processingRequest.pleaseComeBackFewMinutes'));
-  } else {
-    Alert.open('error', errorMessage);
-  }
+  Alert.open('error', errorMessage);
 };
 
 export default catchError;
diff --git a/client/src/views/HomeView.tsx b/client/src/views/HomeView.tsx
@@ -1,6 +1,6 @@
 import { Card, CardContent } from '@mui/material';
 import React from 'react';
-import Page from './components/Page';
+import Page from '../components/Page';
 
 const HomeView = () => (
   <Page
diff --git a/client/src/views/account/AccountView/ProfileDetails.tsx b/client/src/views/account/AccountView/ProfileDetails.tsx
@@ -52,7 +52,7 @@ const ProfileDetails = ({ ...rest }) => {
     if (data.password) {
       if (data.passwordConfirm) {
         Loader.open();
-        await UserRoutes.changePassword(auth.user.id, data.password).catch(catchError(Alert, t));
+        await UserRoutes.changePassword(auth.user.id, data.password).catch(catchError(Alert));
       }
     }
 
@@ -61,8 +61,8 @@ const ProfileDetails = ({ ...rest }) => {
       person: { update: processedData }
     }, { person: true }).then((newData) => {
       auth.updateData(newData);
-      Alert.open('success', 'Saved');
-    }).catch(catchError(Alert, t));
+      Alert.open('success', t('common:saved'));
+    }).catch(catchError(Alert));
     Loader.close();
   };
 
diff --git a/client/src/views/auth/LoginView.tsx b/client/src/views/auth/LoginView.tsx
@@ -43,7 +43,7 @@ const LoginView = () => {
       Loader.close();
       navigate('/app/home', { replace: true });
     }).catch((response: string) => {
-      catchError(Alert, t)(response);
+      catchError(Alert)(response);
       Loader.close();
     });
   };
@@ -58,7 +58,7 @@ const LoginView = () => {
         localStorage.removeItem('user');
         localStorage.removeItem('token');
         navigate('/login', { replace: true });
-        catchError(Alert, t)(error);
+        catchError(Alert)(error);
       }).finally(() => {
         Loader.close();
       });
@@ -75,7 +75,7 @@ const LoginView = () => {
       return;
     }
     Loader.open();
-    await UserRoutes.sendPasswordResetMail(login).catch(catchError(Alert, t));
+    await UserRoutes.sendPasswordResetMail(login).catch(catchError(Alert));
     Loader.close();
     Alert.open('success', t('passwordResetMailSent'));
   }, [Alert, Loader, login, t]);
@@ -105,7 +105,7 @@ const LoginView = () => {
 
     UserRoutes.resetPassword(login, code || '', formData.password).then(() => {
       Alert.open('success', t('passwordResetSuccess'));
-    }).catch(catchError(Alert, t)).finally(() => {
+    }).catch(catchError(Alert)).finally(() => {
       setResetDialogOpen(false);
       resetForm();
     });
@@ -118,7 +118,7 @@ const LoginView = () => {
       const code = url.searchParams.get('reset');
       const log = url.searchParams.get('login');
       if (code) {
-        const isValid = await UserRoutes.checkResetCodeValidity(log || '', code).catch(catchError(Alert, t));
+        const isValid = await UserRoutes.checkResetCodeValidity(log || '', code).catch(catchError(Alert));
         if (!isValid) {
           // Prefill login field
           setValue('login', log || '');
@@ -133,7 +133,7 @@ const LoginView = () => {
         setResetDialogOpen(true);
       }
     };
-    checkCode().catch(catchError(Alert, t));
+    checkCode().catch(catchError(Alert));
   }, [Alert, setValue, t]);
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,6 @@`
`8`	`8`	`"phone": "Phone",`
`9`	`9`	`"password": "Password",`
`10`	`10`	`"passwordConfirm": "Confirm Password",`
`11`		`- "giveAdminRights": "Give admin rights"`
	`11`	`+ "giveAdminRights": "Give admin rights",`
	`12`	`+ "newUserAdded": "New user added"`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,6 @@`
`7`	`7`	`"phone": "Téléphone",`
`8`	`8`	`"password": "Mot de passe",`
`9`	`9`	`"passwordConfirm": "Confirmer le mot de passe",`
`10`		`- "giveAdminRights": "Donner les droits d'administrateur"`
	`10`	`+ "giveAdminRights": "Donner les droits d'administrateur",`
	`11`	`+ "newUserAdded": "Nouvel utilisateur ajouté"`
`11`	`12`	`}`