ekino · OlgaYasn · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
diff --git a/src/v6y-front-bo/src/commons/components/RenderVitalityTable.tsx b/src/v6y-front-bo/src/commons/components/RenderVitalityTable.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { buildCommonTableColumns, buildCommonTableDataSource } from '../config/VitalityTableConfig';
+import VitalityTable from './VitalityTable';
+
+interface RenderVitalityTableProps {
+    dataSource: unknown[];
+    columnKeys: string[];
+    columnOptions: {
+        enableEdit: boolean;
+        enableShow: boolean;
+        enableDelete: boolean;
+        deleteMetaQuery?: {
+            gqlMutation: string;
+            operation: string;
+        };
+    };
+}
+
+const RenderVitalityTable: React.FC<RenderVitalityTableProps> = ({
+    dataSource,
+    columnKeys,
+    columnOptions,
+}) => {
+    return (
+        <VitalityTable
+            dataSource={buildCommonTableDataSource(dataSource)}
+            columns={buildCommonTableColumns(dataSource, columnKeys, columnOptions)}
+        />
+    );
+};
+
+export default RenderVitalityTable;
diff --git a/src/v6y-front-bo/src/commons/components/VitalityTitle.tsx b/src/v6y-front-bo/src/commons/components/VitalityTitle.tsx
@@ -0,0 +1,16 @@
+import { Typography } from 'antd';
+import React from 'react';
+
+import { useTranslation } from '../../../src/infrastructure/adapters/translation/TranslationAdapter';
+
+interface VitalityTitleProps {
+    title: string;
+    level?: 1 | 2 | 3 | 4 | 5 | undefined;
+}
+
+const VitalityTitle: React.FC<VitalityTitleProps> = ({ title, level = 2 }) => {
+    const { translate } = useTranslation();
+    return <Typography.Title level={level}>{translate(title)}</Typography.Title>;
+};
+
+export default VitalityTitle;
diff --git a/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountCreateView.tsx b/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountCreateView.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { ApplicationType } from '@v6y/commons/src/types/ApplicationType';
-import { Typography } from 'antd';
 import { useEffect, useState } from 'react';
 
 import GetApplicationListByPageAndParams from '../../../commons/apis/getApplicationListByPageAndParams';
 import VitalityEmptyView from '../../../commons/components/VitalityEmptyView';
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import {
     accountCreateEditItems,
     accountCreateOrEditFormOutputAdapter,
@@ -30,11 +30,7 @@ export default function VitalityAccountCreateView() {
 
     return (
         <RefineSelectWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-accounts.titles.create')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-accounts.titles.create" />}
             createOptions={{
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error

diff --git a/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountDetailsView.tsx b/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountDetailsView.tsx
@@ -1,10 +1,10 @@
 import { HttpError, useParsed } from '@refinedev/core';
 import { AccountType } from '@v6y/commons';
 import Matcher from '@v6y/commons/src/core/Matcher';
-import { Typography } from 'antd';
 import * as React from 'react';
 
 import VitalityDetailsView from '../../../commons/components/VitalityDetailsView';
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import { formatAccountDetails } from '../../../commons/config/VitalityDetailsConfig';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineShowWrapper from '../../../infrastructure/components/RefineShowWrapper';
@@ -42,11 +42,7 @@ export default function VitalityAccountDetailsView() {
 
     return (
         <RefineShowWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-account.titles.show')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-account.titles.show" />}
             queryOptions={{
                 resource: 'getAccountDetailsByParams',
                 query: GetAccountDetailsByParams,

diff --git a/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountEditView.tsx b/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountEditView.tsx
@@ -2,12 +2,12 @@
 
 import { useParsed } from '@refinedev/core';
 import { ApplicationType } from '@v6y/commons/src/types/ApplicationType';
-import { Typography } from 'antd';
 import { useEffect, useState } from 'react';
 import React from 'react';
 
 import GetApplicationListByPageAndParams from '../../../commons/apis/getApplicationListByPageAndParams';
 import VitalityEmptyView from '../../../commons/components/VitalityEmptyView';
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import {
     accountCreateEditItems,
     accountCreateOrEditFormInAdapter,
@@ -35,11 +35,7 @@ export default function VitalityAccountEditView() {
 
     return (
         <RefineSelectWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-accounts.titles.edit')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-accounts.titles.edit" />}
             queryOptions={{
                 queryFormAdapter: accountCreateOrEditFormInAdapter,
                 query: GetAccountDetailsByParams,

diff --git a/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountListView.tsx b/src/v6y-front-bo/src/features/v6y-accounts/components/VitalityAccountListView.tsx
@@ -1,8 +1,4 @@
-import VitalityTable from '../../../commons/components/VitalityTable';
-import {
-    buildCommonTableColumns,
-    buildCommonTableDataSource,
-} from '../../../commons/config/VitalityTableConfig';
+import RenderVitalityTable from '../../../commons/components/RenderVitalityTable';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineTableWrapper from '../../../infrastructure/components/RefineTableWrapper';
 import DeleteAccount from '../apis/deleteAccount';
@@ -26,17 +22,18 @@ export default function VitalityAccountListView() {
                 query: GetAccountListByPageAndParams,
             }}
             renderTable={(dataSource) => (
-                <VitalityTable
-                    dataSource={buildCommonTableDataSource(dataSource)}
-                    columns={buildCommonTableColumns(dataSource, [], {
+                <RenderVitalityTable
+                    dataSource={dataSource}
+                    columnKeys={[]}
+                    columnOptions={{
                         enableEdit: true,
                         enableShow: true,
                         enableDelete: true,
                         deleteMetaQuery: {
                             gqlMutation: DeleteAccount,
                             operation: 'deleteAccount',
                         },
-                    })}
+                    }}
                 />
             )}
         />

diff --git a/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationCreateView.tsx b/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationCreateView.tsx
@@ -1,6 +1,6 @@
-import { Typography } from 'antd';
 import * as React from 'react';
 
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import {
     applicationCreateEditItems,
     applicationCreateOrEditFormOutputAdapter,
@@ -13,11 +13,7 @@ export default function VitalityApplicationCreateView() {
     const { translate } = useTranslation();
     return (
         <RefineCreateWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-applications.titles.create')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-applications.titles.create" />}
             createOptions={{
                 createFormAdapter: applicationCreateOrEditFormOutputAdapter,
                 createQuery: CreateOrEditApplication,

diff --git a/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationDetailsView.tsx b/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationDetailsView.tsx
@@ -1,10 +1,10 @@
 import { HttpError, useParsed } from '@refinedev/core';
 import { ApplicationType } from '@v6y/commons';
 import Matcher from '@v6y/commons/src/core/Matcher';
-import { Typography } from 'antd';
 import * as React from 'react';
 
 import VitalityDetailsView from '../../../commons/components/VitalityDetailsView';
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import { formatApplicationDetails } from '../../../commons/config/VitalityDetailsConfig';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineShowWrapper from '../../../infrastructure/components/RefineShowWrapper';
@@ -42,11 +42,7 @@ export default function VitalityApplicationDetailsView() {
 
     return (
         <RefineShowWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-applications.titles.show')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-applications.titles.show" />}
             queryOptions={{
                 resource: 'getApplicationDetailsInfoByParams',
                 query: GetApplicationDetails,

diff --git a/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationEditView.tsx b/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationEditView.tsx
@@ -1,7 +1,7 @@
 import { useParsed } from '@refinedev/core';
-import { Typography } from 'antd';
 import * as React from 'react';
 
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import {
     applicationCreateEditItems,
     applicationCreateOrEditFormInAdapter,
@@ -18,11 +18,7 @@ export default function VitalityApplicationEditView() {
 
     return (
         <RefineEditWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-applications.titles.edit')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-applications.titles.edit" />}
             queryOptions={{
                 queryFormAdapter: applicationCreateOrEditFormInAdapter as (
                     data: unknown,

diff --git a/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationListView.tsx b/src/v6y-front-bo/src/features/v6y-applications/components/VitalityApplicationListView.tsx
@@ -1,11 +1,7 @@
 import { ApplicationType } from '@v6y/commons';
 
 import GetApplicationListByPageAndParams from '../../../commons/apis/getApplicationListByPageAndParams';
-import VitalityTable from '../../../commons/components/VitalityTable';
-import {
-    buildCommonTableColumns,
-    buildCommonTableDataSource,
-} from '../../../commons/config/VitalityTableConfig';
+import RenderVitalityTable from '../../../commons/components/RenderVitalityTable';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineTableWrapper from '../../../infrastructure/components/RefineTableWrapper';
 import DeleteApplication from '../apis/deleteApplication';
@@ -28,17 +24,18 @@ export default function VitalityApplicationListView() {
                 query: GetApplicationListByPageAndParams,
             }}
             renderTable={(dataSource: ApplicationType[]) => (
-                <VitalityTable
-                    dataSource={buildCommonTableDataSource(dataSource)}
-                    columns={buildCommonTableColumns(dataSource, [], {
+                <RenderVitalityTable
+                    dataSource={dataSource}
+                    columnKeys={[]}
+                    columnOptions={{
                         enableEdit: true,
                         enableShow: true,
                         enableDelete: true,
                         deleteMetaQuery: {
                             gqlMutation: DeleteApplication,
                             operation: 'deleteApplication',
                         },
-                    })}
+                    }}
                 />
             )}
         />

diff --git a/src/v6y-front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpDetailsView.tsx b/src/v6y-front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpDetailsView.tsx
@@ -1,9 +1,9 @@
 import { HttpError, useParsed } from '@refinedev/core';
 import { AuditHelpType } from '@v6y/commons';
-import { Typography } from 'antd';
 import * as React from 'react';
 
 import VitalityDetailsView from '../../../commons/components/VitalityDetailsView';
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import { formatAuditHelpDetails } from '../../../commons/config/VitalityDetailsConfig';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineShowWrapper from '../../../infrastructure/components/RefineShowWrapper';
@@ -16,11 +16,7 @@ export default function VitalityAuditHelpDetailsView() {
 
     return (
         <RefineShowWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-audit-helps.titles.show')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-audit-helps.titles.show" />}
             queryOptions={{
                 resource: 'getAuditHelpDetailsByParams',
                 query: GetAuditHelpDetailsByParams,

diff --git a/src/v6y-front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpEditView.tsx b/src/v6y-front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpEditView.tsx
@@ -1,7 +1,7 @@
 import { useParsed } from '@refinedev/core';
-import { Typography } from 'antd';
 import * as React from 'react';
 
+import VitalityTitle from '../../../commons/components/VitalityTitle';
 import {
     auditHelpCreateEditItems,
     auditHelpCreateOrEditFormInAdapter,
@@ -18,11 +18,7 @@ export default function VitalityAuditHelpEditView() {
 
     return (
         <RefineEditWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-audit-helps.titles.edit')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-audit-helps.titles.edit" />}
             queryOptions={{
                 queryFormAdapter: auditHelpCreateOrEditFormInAdapter,
                 query: GetAuditHelpDetailsByParams,

diff --git a/src/v6y-front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpListView.tsx b/src/v6y-front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpListView.tsx
@@ -1,8 +1,4 @@
-import VitalityTable from '../../../commons/components/VitalityTable';
-import {
-    buildCommonTableColumns,
-    buildCommonTableDataSource,
-} from '../../../commons/config/VitalityTableConfig';
+import RenderVitalityTable from '../../../commons/components/RenderVitalityTable';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineTableWrapper from '../../../infrastructure/components/RefineTableWrapper';
 import GetAuditHelpListByPageAndParams from '../apis/getAuditHelpListByPageAndParams';
@@ -25,13 +21,14 @@ export default function VitalityAuditHelpListView() {
                 query: GetAuditHelpListByPageAndParams,
             }}
             renderTable={(dataSource) => (
-                <VitalityTable
-                    dataSource={buildCommonTableDataSource(dataSource)}
-                    columns={buildCommonTableColumns(dataSource, ['id'], {
+                <RenderVitalityTable
+                    dataSource={dataSource}
+                    columnKeys={['id']}
+                    columnOptions={{
                         enableEdit: true,
                         enableShow: true,
                         enableDelete: false,
-                    })}
+                    }}
                 />
             )}
         />

diff --git a/src/v6y-front-bo/src/features/v6y-auth/VitalityAuthForgotPasswordView.tsx b/src/v6y-front-bo/src/features/v6y-auth/VitalityAuthForgotPasswordView.tsx
@@ -1,21 +1,13 @@
 'use client';
 
+import VitalityTitle from '@/commons/components/VitalityTitle';
 import { AuthPage as AuthPageBase } from '@refinedev/antd';
-import { Typography } from 'antd';
-
-import { useTranslation } from '../../infrastructure/adapters/translation/TranslationAdapter';
 
 export const VitalityAuthForgotPasswordView = () => {
-    const { translate } = useTranslation();
-
     return (
         <AuthPageBase
             type="forgotPassword"
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-authentication.title')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-authentication.title" />}
         />
     );
 };
diff --git a/src/v6y-front-bo/src/features/v6y-auth/VitalityAuthUpdatePasswordView.tsx b/src/v6y-front-bo/src/features/v6y-auth/VitalityAuthUpdatePasswordView.tsx
@@ -1,21 +1,13 @@
 'use client';
 
+import VitalityTitle from '@/commons/components/VitalityTitle';
 import { AuthPage as AuthPageBase } from '@refinedev/antd';
-import { Typography } from 'antd';
-
-import { useTranslation } from '../../infrastructure/adapters/translation/TranslationAdapter';
 
 export const VitalityAuthUpdatePasswordView = () => {
-    const { translate } = useTranslation();
-
     return (
         <AuthPageBase
             type="updatePassword"
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-authentication.title')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-authentication.title" />}
         />
     );
 };