refactor: Add FormattedDatesRange component

Author: siiick

packages/app-builder/src/components/PaginationButtons.tsx

@@ -26,13 +26,18 @@ type CursorPaginationsButtonsProps = PaginatedResponse<ItemWithId> & {
   hideBoundaries?: boolean;
 };
 
-function getStartAndEndFormatted(
-  startTs: string | undefined,
-  endTs: string | undefined,
-  language: string,
-) {
+function FormattedDatesRange({
+  startTs,
+  endTs,
+  language,
+}: {
+  startTs: string | undefined;
+  endTs: string | undefined;
+  language: string;
+}) {
+  const { t } = useTranslation(['common']);
   if (!startTs || !endTs) {
-    return { startFormatted: '', endFormatted: '' };
+    return null;
   }
 
   const startDate = new Date(startTs);
@@ -47,23 +52,73 @@ function getStartAndEndFormatted(
     isSameLocalDay &&
     startDate.getHours() === endDate.getHours() &&
     startDate.getMinutes() === endDate.getMinutes();
-  const isSameSecond = isSameMinute && startDate.getSeconds() === endDate.getSeconds();
-
-  const startFormatted = formatDateTime(startTs, {
-    language,
-    dateStyle: 'medium',
-    timeStyle: isSameMinute ? 'medium' : 'short',
-  });
-
-  const endFormatted = !isSameSecond
-    ? formatDateTime(endTs, {
-        language,
-        dateStyle: isSameLocalDay ? undefined : 'medium',
-        timeStyle: isSameMinute ? 'medium' : 'short',
-      })
-    : null;
-
-  return { startFormatted, endFormatted };
+
+  if (isSameMinute && startDate.getSeconds() === endDate.getSeconds())
+    return (
+      <Trans
+        t={t}
+        i18nKey="common:items_displayed_same_datetime"
+        components={{ StartToEnd: <span /> }}
+        values={{
+          date: formatDateTime(startDate, {
+            language,
+            dateStyle: 'medium',
+            timeStyle: undefined,
+          }),
+          time: formatDateTime(startDate, {
+            language,
+            dateStyle: undefined,
+            timeStyle: 'short',
+          }),
+        }}
+      />
+    );
+
+  if (isSameLocalDay || isSameMinute)
+    return (
+      <Trans
+        t={t}
+        i18nKey="common:items_displayed_same_date"
+        components={{ StartToEnd: <span /> }}
+        values={{
+          date: formatDateTime(startDate, {
+            language,
+            dateStyle: 'medium',
+            timeStyle: undefined,
+          }),
+          start: formatDateTime(startTs, {
+            language,
+            dateStyle: undefined,
+            timeStyle: isSameMinute ? 'medium' : 'short',
+          }),
+          end: formatDateTime(endTs, {
+            language,
+            dateStyle: undefined,
+            timeStyle: isSameMinute ? 'medium' : 'short',
+          }),
+        }}
+      />
+    );
+
+  return (
+    <Trans
+      t={t}
+      i18nKey="common:items_displayed_dates"
+      components={{ StartToEnd: <span /> }}
+      values={{
+        start: formatDateTime(startTs, {
+          language,
+          dateStyle: 'medium',
+          timeStyle: 'short',
+        }),
+        end: formatDateTime(endTs, {
+          language,
+          dateStyle: 'medium',
+          timeStyle: 'short',
+        }),
+      }}
+    />
+  );
 }
 
 export function CursorPaginationButtons({
@@ -73,7 +128,6 @@ export function CursorPaginationButtons({
   onPaginationChange,
   hideBoundaries,
 }: CursorPaginationsButtonsProps) {
-  const { t } = useTranslation(['common']);
   const language = useFormatLanguage();
 
   const startTs = items[0]?.createdAt;
@@ -95,38 +149,12 @@ export function CursorPaginationButtons({
     onPaginationChange(pagination);
   };
 
-  const { startFormatted, endFormatted } = getStartAndEndFormatted(startTs, endTs, language);
-
   const previousDisabled = !hasPreviousPage;
   const nextDisabled = !hasNextPage;
 
-  const sameSecondBoundaries = (
-    <span>
-      {t('common:items_displayed', {
-        time: startFormatted,
-      })}
-    </span>
-  );
-  const defaultBoundaries = (
-    <Trans
-      t={t}
-      i18nKey="common:items_displayed_datetime"
-      components={{ StartToEnd: <span /> }}
-      values={{
-        start: startFormatted,
-        end: endFormatted,
-      }}
-    />
-  );
-
   return (
     <div className="flex items-center justify-end gap-2">
-      {hideBoundaries || (startFormatted === '' && endFormatted === '')
-        ? null
-        : endFormatted === null
-          ? sameSecondBoundaries
-          : defaultBoundaries}
-
+      {hideBoundaries ? null : <FormattedDatesRange {...{ startTs, endTs, language }} />}
       <Button onClick={fetchPrevious} variant="secondary" disabled={previousDisabled}>
         <Icon icon="arrow-left" className="size-4" />
       </Button>

packages/app-builder/src/locales/ar/common.json

@@ -45,8 +45,9 @@
   "loading": "جارٍ التحميل...",
   "understand": "أعي ذلك",
   "global_error": "حدث خطأ ما.",
-  "items_displayed_datetime": "<StartToEnd>{{start}} من {{end}}</StartToEnd>",
-  "items_displayed": "عرض {{time}}",
+  "items_displayed_dates": "<StartToEnd>من {{start}} إلى {{end}}</StartToEnd>",
+  "items_displayed_same_date": "<StartToEnd>في {{date}} من {{start}} إلى {{end}}</StartToEnd>",
+  "items_displayed_same_datetime": "<StartToEnd>في {{date}} الساعة {{time}}</StartToEnd>",
   "page_displayed_of_total": "صفحة <PageCount>{{currentPage}} من {{pageCount}}</PageCount>",
   "help_center.to_navigate": "للانتقال",
   "help_center.to_switch_tabs": "للتبديل بين التبويبات",

packages/app-builder/src/locales/en/common.json

@@ -68,8 +68,9 @@
   "loading": "Loading...",
   "understand": "I understand",
   "global_error": "Something went wrong.",
-  "items_displayed_datetime": "<StartToEnd>{{start}} to {{end}}</StartToEnd>",
-  "items_displayed": "at {{time}}",
+  "items_displayed_dates": "<StartToEnd>From {{start}} to {{end}}</StartToEnd>",
+  "items_displayed_same_date": "<StartToEnd>On {{date}} from {{start}} to {{end}}</StartToEnd>",
+  "items_displayed_same_datetime": "<StartToEnd>On {{date}} at {{time}}</StartToEnd>",
   "page_displayed_of_total": "Page <PageCount>{{currentPage}} of {{pageCount}}</PageCount>",
   "help_center.to_navigate": "to navigate",
   "help_center.to_switch_tabs": "to switch tabs",

packages/app-builder/src/locales/fr/common.json

@@ -44,8 +44,9 @@
   "help_center.to_navigate": "naviguer",
   "help_center.to_switch_tabs": "pour changer d'onglet",
   "hide": "Cacher",
-  "items_displayed_datetime": "<StartToEnd>{{start}} à {{end}}</StartToEnd>",
-  "items_displayed": "à {{time}}",
+  "items_displayed_dates": "<StartToEnd>Du {{start}} au {{end}}<StartToEnd>",
+  "items_displayed_same_date": "<StartToEnd>Le {{date}} de {{start}} à {{end}}</StartToEnd>",
+  "items_displayed_same_datetime": "<StartToEnd>Le {{date}} à {{time}}</StartToEnd>",
   "loading": "Chargement...",
   "more_options": "Plus d'options",
   "or": "ou",