[DOP-21437] add i18next (#78)

* [DOP-21437] add i18next

* fix after review

---------

Co-authored-by: Zabilsya <[email protected]>

Author: Zabilsya

package.json

@@ -26,10 +26,12 @@
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
     "dotenv-webpack": "8.1.0",
+    "i18next": "24.2.2",
     "rc-picker": "4.9.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.13",
+    "react-i18next": "15.4.1",
     "react-router-dom": "6.22.3"
   },
   "devDependencies": {

src/app/config/antd/constants.ts

@@ -1,8 +1,11 @@
 import { ConfigProvider } from 'antd';
 import React, { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { VALIDATE_MESSAGES } from './constants';
+import { getValidateMessages } from './utils';
 
 export const AntdConfigProvider = ({ children }: PropsWithChildren) => {
-  return <ConfigProvider form={{ validateMessages: VALIDATE_MESSAGES }}>{children}</ConfigProvider>;
+  const { t } = useTranslation('error');
+
+  return <ConfigProvider form={{ validateMessages: getValidateMessages(t) }}>{children}</ConfigProvider>;
 };

src/app/config/antd/index.tsx

@@ -0,0 +1,8 @@
+import { TFunction } from 'i18next';
+
+export const getValidateMessages = (t: TFunction<'error'>) => {
+  return {
+    required: `${t('fieldIsRequired')}!`,
+    pattern: { mismatch: `${t('fieldPatternInvalid')} \${pattern}` },
+  };
+};

src/app/config/antd/utils/getValidateMessages/index.ts

@@ -0,0 +1 @@
+export * from './getValidateMessages';

src/app/config/antd/utils/index.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Result } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 import { BackHome } from './BackHome';
 
 export const AccessError = () => {
-  return <Result status="403" title="403" subTitle="Sorry, you don't have access to this page." extra={<BackHome />} />;
+  const { t } = useTranslation('error');
+
+  return <Result status="403" title="403" subTitle={t('access')} extra={<BackHome />} />;
 };

src/app/config/errorBoundary/errors/AccessError.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Button } from 'antd';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 import { isAuthenticated } from '../../router';
 import { useErrorBoundaryContext } from '../hooks';
 
 export const BackHome = () => {
+  const { t } = useTranslation('error');
   const navigate = useNavigate();
   const { resetErrorBoundary } = useErrorBoundaryContext();
 
@@ -19,7 +21,7 @@ export const BackHome = () => {
 
   return (
     <Button type="primary" onClick={handleClick}>
-      Back Home
+      {t('backHome')}
     </Button>
   );
 };

src/app/config/errorBoundary/errors/BackHome.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Result } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 import { BackHome } from './BackHome';
 
 export const NotFoundError = () => {
-  return (
-    <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." extra={<BackHome />} />
-  );
+  const { t } = useTranslation('error');
+
+  return <Result status="404" title="404" subTitle={t('notFound')} extra={<BackHome />} />;
 };

src/app/config/errorBoundary/errors/NotFoundError.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Result } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 import { BackHome } from './BackHome';
 
 export const ServerError = () => {
-  return <Result status="500" title="500" subTitle="Sorry, something went wrong." extra={<BackHome />} />;
+  const { t } = useTranslation('error');
+
+  return <Result status="500" title="500" subTitle={t('internalServer')} extra={<BackHome />} />;
 };

src/app/config/errorBoundary/errors/ServerError.tsx

@@ -1,13 +1,15 @@
 import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
 import { notification } from 'antd';
 import { getErrorMessage } from '@shared/config';
+import { useTranslation } from 'react-i18next';
 
 import { connectionService } from '../../connectionService';
 import { DeleteConnectionRequest } from '../../types';
 import { ConnectionQueryKey } from '../../keys';
 
 /** Hook for deleting connection */
 export const useDeleteConnection = (data: DeleteConnectionRequest): UseMutationResult => {
+  const { t } = useTranslation('error');
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -16,12 +18,12 @@ export const useDeleteConnection = (data: DeleteConnectionRequest): UseMutationR
       queryClient.invalidateQueries({ queryKey: [ConnectionQueryKey.GET_CONNECTIONS] });
       queryClient.removeQueries({ queryKey: [ConnectionQueryKey.GET_CONNECTION, data.id] });
       notification.success({
-        message: 'Connection was deleted successfully',
+        message: t('deleteConnectionSuccess', { ns: 'connection' }),
       });
     },
     onError: (error) => {
       notification.error({
-        message: getErrorMessage(error),
+        message: getErrorMessage(error, t),
       });
     },
   });