Merge pull request #520 from AppQuality/fix-status-info-utils

fix(utils): fix status info utils to use TFunction instead of useTranslation hook to prevent crashes

Author: cannarocks

src/common/components/meta/StatusMeta.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { CampaignStatus } from 'src/types';
 import { Meta } from '../Meta';
 import { getStatusInfo } from '../utils/getStatusInfo';
@@ -10,7 +11,8 @@ interface StatusMetaArgs extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const StatusMeta = ({ status, counter, ...props }: StatusMetaArgs) => {
-  const statusInfo = getStatusInfo(status);
+  const { t } = useTranslation();
+  const statusInfo = getStatusInfo(status, t);
 
   return (
     <Meta

src/common/components/tag/StatusTag.tsx

@@ -1,4 +1,5 @@
 import { Tag } from '@appquality/unguess-design-system';
+import { useTranslation } from 'react-i18next';
 import { theme } from 'src/app/theme';
 import { CampaignStatus } from 'src/types';
 import { getStatusInfo } from '../utils/getStatusInfo';
@@ -17,7 +18,8 @@ export const StatusTag = ({
   isRound,
   ...props
 }: StatusTagArgs) => {
-  const statusInfo = getStatusInfo(status);
+  const { t } = useTranslation();
+  const statusInfo = getStatusInfo(status, t);
 
   return (
     <Tag

src/common/components/utils/getStatusInfo.tsx

@@ -7,17 +7,18 @@ import {
   CampaignFunctionalIcon,
 } from '@appquality/unguess-design-system';
 import { theme } from 'src/app/theme';
-import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 
 type StatusInfo = {
   icon?: React.ReactNode;
   text?: string;
   color?: string;
 };
 
-export const getStatusInfo = (status: CampaignStatus): StatusInfo => {
-  const { t } = useTranslation();
-
+export const getStatusInfo = (
+  status: CampaignStatus,
+  t: TFunction
+): StatusInfo => {
   switch (status.toLowerCase()) {
     case 'running':
       return {

src/pages/Dashboard/campaigns-list/table.tsx

@@ -39,25 +39,29 @@ export const TableList = ({
 
       const items = curr.map((campaign) => {
         const statusInfo = getStatusInfo(
-          campaign.status.name as CampaignStatus
+          campaign.status.name as CampaignStatus,
+          t
         );
+
+        const cpUrl = getLocalizeDashboardRoute({
+          campaignId: campaign.id,
+          cpFamily: campaign.family.name,
+          outputs: campaign.outputs || [],
+        });
+
+        const cpStartDate = new Date(campaign.start_date).toLocaleDateString();
+
         return {
           name: (
-            <Anchor
-              href={getLocalizeDashboardRoute({
-                campaignId: campaign.id,
-                cpFamily: campaign.family.name,
-                outputs: campaign.outputs || [],
-              })}
-            >
+            <Anchor href={cpUrl}>
               <Span isBold style={{ color: theme.palette.grey[800] }}>
                 {campaign.customer_title ?? campaign.title}
               </Span>
             </Anchor>
           ),
           type: campaign.family.name,
           testType: campaign.type.name,
-          startDate: new Date(campaign.start_date).toLocaleDateString(),
+          startDate: cpStartDate,
           status: (
             <Tooltip
               type="light"

src/pages/Dashboard/project-items/table.tsx

@@ -32,6 +32,8 @@ export const TableList = ({
     { name: t('__CAMPAIGNS_TABLE_COLUMN_STATUS'), field: 'status' },
   ];
 
+  if (!campaigns.length) return null;
+
   return (
     <Table isReadOnly style={{ backgroundColor: 'white' }}>
       <TableHead>
@@ -43,27 +45,26 @@ export const TableList = ({
       </TableHead>
       <TableBody>
         {campaigns.map((cp) => {
-          const statusInfo = getStatusInfo(cp.status.name as CampaignStatus);
+          const statusInfo = getStatusInfo(cp.status.name as CampaignStatus, t);
+          const cpUrl = getLocalizeDashboardRoute({
+            campaignId: cp.id,
+            cpFamily: cp.family.name,
+            outputs: cp.outputs || [],
+          });
+          const cpStartDate = new Date(cp.start_date).toLocaleDateString();
+
           return (
             <TableRow key={cp.id}>
               <TableCell>
-                <Anchor
-                  href={getLocalizeDashboardRoute({
-                    campaignId: cp.id,
-                    cpFamily: cp.family.name,
-                    outputs: cp.outputs || [],
-                  })}
-                >
+                <Anchor href={cpUrl}>
                   <Span isBold style={{ color: theme.palette.grey[800] }}>
                     {cp.customer_title ?? cp.title}
                   </Span>
                 </Anchor>
               </TableCell>
               <TableCell>{cp.family.name}</TableCell>
               <TableCell>{cp.type.name}</TableCell>
-              <TableCell>
-                {new Date(cp.start_date).toLocaleDateString()}
-              </TableCell>
+              <TableCell>{cpStartDate}</TableCell>
               <TableCell>
                 <Tooltip
                   type="light"