✨(frontend) create hook useTransRole

Create the hook useTransRole to get a translated
role.

src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts

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

src/frontend/apps/impress/src/features/docs/doc-management/hooks/useTransRole.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+
+import { Role } from '../types';
+
+export const useTransRole = () => {
+  const { t } = useTranslation();
+
+  const translatedRoles = {
+    [Role.ADMIN]: t('Administrator'),
+    [Role.READER]: t('Reader'),
+    [Role.OWNER]: t('Owner'),
+    [Role.EDITOR]: t('Editor'),
+  };
+
+  const transRole = (role: Role) => {
+    return translatedRoles[role];
+  };
+
+  return transRole;
+};

src/frontend/apps/impress/src/features/docs/doc-management/index.ts

@@ -1,4 +1,5 @@
 export * from './api';
 export * from './components';
+export * from './hooks';
 export * from './types';
 export * from './utils';

src/frontend/apps/impress/src/features/docs/members/members-add/components/ChooseRole.tsx

@@ -1,7 +1,6 @@
 import { Radio, RadioGroup } from '@openfun/cunningham-react';
-import { useTranslation } from 'react-i18next';
 
-import { Role } from '@/features/docs/doc-management';
+import { Role, useTransRole } from '@/features/docs/doc-management';
 
 interface ChooseRoleProps {
   currentRole: Role;
@@ -16,21 +15,14 @@ export const ChooseRole = ({
   currentRole,
   setRole,
 }: ChooseRoleProps) => {
-  const { t } = useTranslation();
+  const transRole = useTransRole();
-
-  const translatedRoles = {
-    [Role.ADMIN]: t('Administrator'),
-    [Role.READER]: t('Reader'),
-    [Role.OWNER]: t('Owner'),
-    [Role.EDITOR]: t('Editor'),
-  };
 
   return (
     <RadioGroup>
       {Object.values(Role).map((role) => (
         <Radio
           key={role}
-          label={translatedRoles[role]}
+          label={transRole(role)}
           value={role}
           name="role"
           onChange={(evt) => setRole(evt.target.value as Role)}

src/frontend/apps/impress/src/features/docs/members/members-grid/components/MemberGrid.tsx

@@ -3,7 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Card, TextErrors } from '@/components';
-import { Doc, Role, currentDocRole } from '@/features/docs/doc-management';
+import {
+  Doc,
+  currentDocRole,
+  useTransRole,
+} from '@/features/docs/doc-management/';
 
 import { useDocAccesses } from '../api';
 import { PAGE_SIZE } from '../conf';
@@ -43,6 +47,7 @@ function formatSortModel(
 
 export const MemberGrid = ({ doc }: MemberGridProps) => {
   const { t } = useTranslation();
+  const transRole = useTransRole();
   const pagination = usePagination({
     pageSize: PAGE_SIZE,
   });
@@ -57,13 +62,6 @@ export const MemberGrid = ({ doc }: MemberGridProps) => {
     ordering,
   });
 
-  const translatedRoles = {
-    [Role.ADMIN]: t('Administrator'),
-    [Role.READER]: t('Reader'),
-    [Role.OWNER]: t('Owner'),
-    [Role.EDITOR]: t('Editor'),
-  };
-
   /*
    * Bug occurs from the Cunningham Datagrid component, when applying sorting
    * on null values. Sanitize empty values to ensure consistent sorting functionality.
@@ -71,7 +69,7 @@ export const MemberGrid = ({ doc }: MemberGridProps) => {
   const accesses =
     data?.results?.map((access) => ({
       ...access,
-      localizedRole: translatedRoles[access.role],
+      localizedRole: transRole(access.role),
       email: access.user.email,
     })) || [];