refactor: extract react hook from function

felixmosh · May 23, 2024 · 193a8af · 193a8af
1 parent 41a1aad
commit 193a8af
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.tsx b/packages/ui/src/components/JobCard/Timeline/Timeline.tsx
@@ -1,34 +1,31 @@
-import { formatDistance, getYear, isToday, differenceInMilliseconds, format } from 'date-fns';
+import { formatDistance, isToday, differenceInMilliseconds, format, isSameYear } from 'date-fns';
 import enLocale from 'date-fns/locale/en-US';
 import { TFunction } from 'i18next';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { dateFnsLocale } from '../../../services/i18n';
 import s from './Timeline.module.css';
-import { AppJob, Status } from '@bull-board/api/typings/app';
+import { AppJob, DateFormats, Status } from '@bull-board/api/typings/app';
 import { STATUSES } from '@bull-board/api/src/constants/statuses';
 import { useUIConfig } from '../../../hooks/useUIConfig';
 
 type TimeStamp = number | Date;
 
-const formatDate = (ts: TimeStamp, locale: string) => {
-  const uiConfig = useUIConfig();
-  const dateFormats = uiConfig.dateFormats || {};
-
+const formatDate = (ts: TimeStamp, locale: string, customDateFormats: DateFormats) => {
   let options: Intl.DateTimeFormatOptions;
 
   if (isToday(ts)) {
-    if (dateFormats?.short) {
-      return format(new Date(ts), dateFormats.short)
+    if (customDateFormats?.short) {
+      return format(new Date(ts), customDateFormats.short);
     }
     options = {
       hour: 'numeric',
       minute: 'numeric',
       second: 'numeric',
     };
-  } else if (getYear(ts) === getYear(new Date())) {
-    if (dateFormats?.common) {
-      return format(new Date(ts), dateFormats.common)
+  } else if (isSameYear(ts, new Date())) {
+    if (customDateFormats?.common) {
+      return format(new Date(ts), customDateFormats.common);
     }
     options = {
       month: 'numeric',
@@ -38,8 +35,8 @@ const formatDate = (ts: TimeStamp, locale: string) => {
       second: '2-digit',
     };
   } else {
-    if (dateFormats?.full) {
-      return format(new Date(ts), dateFormats.full)
+    if (customDateFormats?.full) {
+      return format(new Date(ts), customDateFormats.full);
     }
     options = {
       year: 'numeric',
@@ -71,17 +68,22 @@ const formatDuration = (finishedTs: TimeStamp, processedTs: TimeStamp, t: TFunct
 
 export const Timeline = function Timeline({ job, status }: { job: AppJob; status: Status }) {
   const { t, i18n } = useTranslation();
+  const uiConfig = useUIConfig();
+  const dateFormats = uiConfig.dateFormats || {};
+
   return (
     <div className={s.timelineWrapper}>
       <ul className={s.timeline}>
         <li>
           <small>{t('JOB.ADDED_AT')}</small>
-          <time>{formatDate(job.timestamp || 0, i18n.language)}</time>
+          <time>{formatDate(job.timestamp || 0, i18n.language, dateFormats)}</time>
         </li>
         {!!job.delay && job.delay > 0 && status === STATUSES.delayed && (
           <li>
             <small>{t('JOB.WILL_RUN_AT')}</small>
-            <time>{formatDate((job.timestamp || 0) + job.opts.delay, i18n.language)}</time>
+            <time>
+              {formatDate((job.timestamp || 0) + job.opts.delay, i18n.language, dateFormats)}
+            </time>
             {job.delay !== job.opts.delay && <small>{t('JOB.DELAY_CHANGED')} </small>}
           </li>
         )}
@@ -92,11 +94,9 @@ export const Timeline = function Timeline({ job, status }: { job: AppJob; status
               {formatDuration(job.processedOn, job.timestamp || 0, t)}
             </small>
             <small>{t('JOB.PROCESS_STARTED_AT')}</small>
-            <time>{formatDate(job.processedOn, i18n.language)}</time>
+            <time>{formatDate(job.processedOn, i18n.language, dateFormats)}</time>
             {!!job.processedBy && (
-              <small>
-                {t('JOB.PROCESSED_BY', { processedBy: job.processedBy })}
-              </small>
+              <small>{t('JOB.PROCESSED_BY', { processedBy: job.processedBy })}</small>
             )}
           </li>
         )}
@@ -106,7 +106,7 @@ export const Timeline = function Timeline({ job, status }: { job: AppJob; status
             <small>
               {t(job.isFailed && status !== STATUSES.active ? `JOB.FAILED_AT` : 'JOB.FINISHED_AT')}
             </small>
-            <time>{formatDate(job.finishedOn, i18n.language)}</time>
+            <time>{formatDate(job.finishedOn, i18n.language, dateFormats)}</time>
           </li>
         )}
       </ul>