Localize All Tasks tab

CruGlobal · Nov 14, 2024 · 00c4ac0 · 00c4ac0
1 parent 249d00b
commit 00c4ac0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
@@ -33,7 +33,7 @@ import { useUserPreference } from 'src/hooks/useUserPreference';
 import theme from 'src/theme';
 import {
   TaskFilterTabsTypes,
-  taskFiltersTabs,
+  getTaskFiltersTabs,
 } from 'src/utils/tasks/taskFilterTabs';
 import {
   TaskFiltersQuery,
@@ -122,6 +122,8 @@ const TasksPage: React.FC = () => {
 
   //#region Filters
 
+  const taskFiltersTabs = useMemo(() => getTaskFiltersTabs(t), [t]);
+
   const [taskType, setTaskType] = useState<TaskFilterTabsTypes>(
     taskFiltersTabs[0].name,
   );
@@ -311,15 +313,15 @@ const TasksPage: React.FC = () => {
                         )})`,
                       }}
                     >
-                      {taskFiltersTabs.map((i) => (
+                      {taskFiltersTabs.map((tab) => (
                         <Button
                           variant={
-                            taskType === i.name ? 'contained' : 'outlined'
+                            taskType === tab.name ? 'contained' : 'outlined'
                           }
-                          onClick={() => setTaskTypeFilter(i.name)}
-                          key={`btn-${i.name}`}
+                          onClick={() => setTaskTypeFilter(tab.name)}
+                          key={`btn-${tab.name}`}
                         >
-                          {i.translated ? t(i.uiName) : i.uiName}
+                          {tab.uiName}
                         </Button>
                       ))}
                     </TaskCurrentHistoryButtonGroup>

diff --git a/src/utils/tasks/taskFilterTabs.ts b/src/utils/tasks/taskFilterTabs.ts
@@ -1,3 +1,5 @@
+import { TFunction } from 'react-i18next';
+
 export type TaskFilterTabsTypes =
   | 'All'
   | 'Overdue'
@@ -9,63 +11,56 @@ export type TaskFilterTabsTypes =
 interface TaskFilterTabsObject {
   name: TaskFilterTabsTypes;
   uiName: string;
-  translated: boolean;
   activeFiltersOptions: {
     completed: boolean | null;
     dateRange: string | null;
   };
 }
 
-export const taskFiltersTabs: TaskFilterTabsObject[] = [
+export const getTaskFiltersTabs = (t: TFunction): TaskFilterTabsObject[] => [
   {
     name: 'All',
-    uiName: 'All Tasks',
-    translated: false,
+    uiName: t('All Tasks'),
     activeFiltersOptions: {
       completed: null,
       dateRange: null,
     },
   },
   {
     name: 'Overdue',
-    uiName: 'Overdue',
-    translated: true,
+    uiName: t('Overdue'),
     activeFiltersOptions: {
       completed: false,
       dateRange: 'overdue',
     },
   },
   {
     name: 'Completed',
-    uiName: 'Completed',
-    translated: true,
+    uiName: t('Completed'),
     activeFiltersOptions: {
       completed: true,
       dateRange: null,
     },
   },
   {
     name: 'Today',
-    uiName: 'Today',
-    translated: true,
+    uiName: t('Today'),
     activeFiltersOptions: {
       completed: false,
       dateRange: 'today',
     },
   },
   {
     name: 'Upcoming',
-    uiName: 'Upcoming',
-    translated: true,
+    uiName: t('Upcoming'),
     activeFiltersOptions: {
       completed: false,
       dateRange: 'upcoming',
     },
   },
   {
     name: 'NoDueDate',
-    uiName: 'No Due Date',
-    translated: true,
+    uiName: t('No Due Date'),
     activeFiltersOptions: {
       completed: false,
       dateRange: 'no_date',