#704 incomplete recurrence info (#707)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>

src/components/Event/components/DateTimeSummary.tsx

@@ -12,6 +12,7 @@ import { getTimezoneOffset } from "@/utils/timezone";
 import { RepetitionObject } from "@/features/Events/EventsTypes";
 import { LONG_DATE_FORMAT } from "../utils/dateTimeFormatters";
 import { SectionPreviewRow } from "./SectionPreviewRow";
+import { makeRecurrenceString } from "@/features/Events/EventPreview/utils/makeRecurrenceString";
 
 interface DateTimeSummaryProps {
   startDate: string;
@@ -99,21 +100,15 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
       return t("event.repeat.doesNotRepeat");
     }
 
-    const interval = rep.interval || 1;
-    const freqMap: { [key: string]: string } = {
-      daily: t("event.repeat.frequency.days"),
-      weekly: t("event.repeat.frequency.weeks"),
-      monthly: t("event.repeat.frequency.months"),
-      yearly: t("event.repeat.frequency.years"),
-    };
-
-    const freqText = freqMap[rep.freq] || rep.freq;
-
-    if (interval === 1) {
-      return `${t("event.repeat.every")} ${freqText}`;
-    }
-
-    return `${t("event.repeat.every")} ${interval} ${freqText}`;
+    return (
+      makeRecurrenceString({
+        repetition: rep,
+        t,
+        startText: rep.interval === 1 ? t("event.repeat.every") : "",
+        joinChar: "",
+        enableStrForOneTimeInterval: true,
+      }) || ""
+    );
   };
 
   // Format date text: show both start and end date if showEndDate is true

src/features/Events/EventPreview/EventPreviewDetails.tsx

@@ -244,7 +244,14 @@ export function EventPreviewDetails({
               <RepeatIcon />
             </Box>
           }
-          text={makeRecurrenceString(event, t)}
+          text={makeRecurrenceString({
+            repetition: event.repetition,
+            t,
+            startText: `${t("eventPreview.recurrentEvent")} · ${t(
+              `eventPreview.freq.${event.repetition.freq}`,
+              event.repetition.freq
+            )}`,
+          })}
         />
       )}
 

src/features/Events/EventPreview/utils/makeRecurrenceString.ts

@@ -1,17 +1,25 @@
-import { CalendarEvent } from "../../EventsTypes";
+import { RepetitionObject } from "../../EventsTypes";
 
-export function makeRecurrenceString(
-  event: CalendarEvent,
-  t: (k: string, p?: string | object) => string
-): string | undefined {
-  if (!event.repetition) return;
+const WEEK_DAYS = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
 
-  const recur: string[] = [
-    `${t("eventPreview.recurrentEvent")} · ${t(
-      `eventPreview.freq.${event.repetition.freq}`,
-      event.repetition.freq
-    )}`,
-  ];
+interface MakeRecurrenceStringParams {
+  repetition: RepetitionObject;
+  t: (k: string, p?: string | object) => string;
+  startText: string;
+  joinChar?: string;
+  enableStrForOneTimeInterval?: boolean;
+}
+
+export function makeRecurrenceString({
+  repetition,
+  t,
+  startText,
+  joinChar,
+  enableStrForOneTimeInterval,
+}: MakeRecurrenceStringParams): string | undefined {
+  if (!repetition) return;
+
+  const recur: string[] = [startText];
 
   const recurType: Record<string, string> = {
     daily: t("event.repeat.frequency.days"),
@@ -20,45 +28,51 @@ export function makeRecurrenceString(
     yearly: t("event.repeat.frequency.years"),
   };
 
-  if (event.repetition.interval && event.repetition.interval > 1) {
+  const interval = repetition.interval ?? 1;
+
+  if (interval === 1 && enableStrForOneTimeInterval) {
+    recur.push(recurType[repetition.freq]);
+  }
+
+  if (interval > 1) {
     recur.push(
       t("eventPreview.everyInterval", {
-        interval: event.repetition.interval,
-        unit: recurType[event.repetition.freq] ?? event.repetition.freq,
+        interval,
+        unit: recurType[repetition.freq] ?? repetition.freq,
       })
     );
   }
 
-  if (event.repetition.byday) {
+  if (repetition.byday) {
+    const weekDaysByOrder = WEEK_DAYS.filter((day) =>
+      repetition.byday?.includes(day)
+    );
     recur.push(
       t("eventPreview.recurrenceOnDays", {
-        days: event.repetition.byday
+        days: weekDaysByOrder
           .map((s) => t(`eventPreview.onDays.${s}`))
           .join(", "),
       })
     );
   }
 
-  if (event.repetition.occurrences) {
+  if (repetition.occurrences) {
     recur.push(
       t("eventPreview.forOccurrences", {
-        count: event.repetition.occurrences,
+        count: repetition.occurrences,
       })
     );
   }
-  if (event.repetition.endDate) {
+  if (repetition.endDate) {
     recur.push(
       t("eventPreview.until", {
-        date: new Date(event.repetition.endDate).toLocaleDateString(
-          t("locale"),
-          {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          }
-        ),
+        date: new Date(repetition.endDate).toLocaleDateString(t("locale"), {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        }),
       })
     );
   }
-  return recur.join(", ");
+  return recur.filter(Boolean).join(`${joinChar ?? ","} `);
 }

src/locales/en.json

@@ -318,7 +318,7 @@
       "SU": "sunday"
     },
     "recurrenceOnDays": "on %{days}",
-    "everyInterval": "every %{interval} %{unit}",
+    "everyInterval": "Every %{interval} %{unit}",
     "forOccurrences": "for %{count} occurrences",
     "until": "until %{date}",
     "days": "days",

src/locales/fr.json

@@ -319,7 +319,7 @@
       "SU": "dimanche"
     },
     "recurrenceOnDays": "le %{days}",
-    "everyInterval": "tous les %{interval} %{unit}",
+    "everyInterval": "Tous les %{interval} %{unit}",
     "forOccurrences": "pour %{count} occurrences",
     "until": "jusqu'au %{date}",
     "days": "jours",

src/locales/ru.json

@@ -319,7 +319,7 @@
       "SU": "ВС"
     },
     "recurrenceOnDays": "по %{days}",
-    "everyInterval": "каждые %{interval} %{unit}",
+    "everyInterval": "Каждые %{interval} %{unit}",
     "forOccurrences": "в течение %{count} повторений",
     "until": "до %{date}",
     "days": "дни",

src/locales/vi.json

@@ -317,7 +317,7 @@
       "SU": "chủ nhật"
     },
     "recurrenceOnDays": "vào %{days}",
-    "everyInterval": "mỗi %{interval} %{unit}",
+    "everyInterval": "Mỗi %{interval} %{unit}",
     "forOccurrences": "trong %{count} lần",
     "until": "đến %{date}",
     "days": "ngày",