feat: recurence date and refactor code

app/src/pages/save-the-date.tsx

@@ -49,7 +49,6 @@ const CELL_GROUP_STYLE = {
 export default function SaveTheDatePage(
   props: InferGetServerSidePropsType<typeof getServerSideProps>
 ) {
-  const tt = useTranslationTable();
   return (
     <div className={style.main}>
       begin-tag
@@ -70,35 +69,8 @@ export default function SaveTheDatePage(
                   }}
                 >
                   <tbody>
-                    {TranslatedSection(props.save_the_date, props.std_cells)}
-                    <tr
-                      style={{
-                        background:
-                          props.save_the_date.title_color || undefined,
-                        color:
-                          props.save_the_date.background_color || undefined,
-                      }}
-                    >
-                      <td>
-                        <center>
-                          <p style={{ marginTop: "1rem" }}>{tt["follow-us"]}</p>
-                          {props.socialLinks
-                            .filter((s) => s != null)
-                            .map((social) => (
-                              <a href={social.link || ""}>
-                                <img
-                                  src={directusImageUrl(social.logo || "")}
-                                  alt={social.media_name || ""}
-                                  style={{
-                                    height: "2rem",
-                                    margin: "0 0.5rem 1rem 0.5rem",
-                                  }}
-                                />
-                              </a>
-                            ))}
-                        </center>
-                      </td>
-                    </tr>
+                    {CellsSection(props.save_the_date, props.std_cells)}
+                    {SocialLinkSection(props.save_the_date, props.socialLinks)}
                   </tbody>
                 </table>
               </center>
@@ -111,10 +83,7 @@ export default function SaveTheDatePage(
   );
 }
 
-function TranslatedSection(
-  save_the_date: SaveTheDate,
-  cells: SaveTheDateCell[]
-) {
+function CellsSection(save_the_date: SaveTheDate, cells: SaveTheDateCell[]) {
   const language_code = locale(useRouter());
   const commissions_cells = cells.filter((cell) => cell.commission);
   const clic_cells = cells.filter((cell) => cell.commission == null);
@@ -124,14 +93,15 @@ function TranslatedSection(
 
   return (
     <>
+      {/* Header */}
       <tr>
         <td>
           <center>
             {save_the_date.image ? (
               <img
                 src={directusImageUrl(save_the_date.image)}
                 alt="CLIC"
-                style={{ width: "100%", height: "200px" }}
+                style={{ width: "100%", maxHeight: "200px" }}
               />
             ) : (
               <></>
@@ -168,6 +138,7 @@ function TranslatedSection(
         </tr>
       )}
 
+      {/* CLIC cells */}
       <tr>
         <td>
           <center>
@@ -178,6 +149,7 @@ function TranslatedSection(
         </td>
       </tr>
 
+      {/* Commissions cells */}
       <tr>
         <td>
           <center>
@@ -209,6 +181,7 @@ function TranslatedSection(
         </td>
       </tr>
 
+      {/* End cell */}
       <tr>
         <td
           style={{
@@ -226,20 +199,72 @@ function TranslatedSection(
   );
 }
 
-function StdCellComponent(cell: SaveTheDateCell) {
-  const language_code = locale(useRouter());
-  const translation = getTranslation(cell, language_code);
-  const dateParts = (cell.date || "00-01-0000").split("-").map(Number);
-  const myDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
+function SocialLinkSection(save_the_date: SaveTheDate, socials: SocialLink[]) {
+  const tt = useTranslationTable();
+  return (
+    <tr
+      style={{
+        background: save_the_date.title_color || undefined,
+        color: save_the_date.background_color || undefined,
+      }}
+    >
+      <td>
+        <center>
+          <p style={{ marginTop: "1rem" }}>{tt["follow-us"]}</p>
+          {socials
+            .filter((s) => s != null)
+            .map((social) => (
+              <a href={social.link || ""}>
+                <img
+                  src={directusImageUrl(social.logo || "")}
+                  alt={social.media_name || ""}
+                  style={{
+                    height: "2rem",
+                    margin: "0 0.5rem 1rem 0.5rem",
+                  }}
+                />
+              </a>
+            ))}
+        </center>
+      </td>
+    </tr>
+  );
+}
 
-  // Use Intl.DateTimeFormat to format the date as needed
-  const formattedDate = new Intl.DateTimeFormat("en-US", {
+function formatDate(
+  date: string | null | undefined,
+  recurrence: string | null | undefined
+): string {
+  const tt = useTranslationTable();
+  const [day, month, year] = (date || "00-01-0000").split("-").map(Number);
+  const myDate = new Date(day, month - 1, year);
+  const formattedDate = new Intl.DateTimeFormat(locale(useRouter()), {
     weekday: "long", // Full name of the day (e.g., Monday)
     day: "numeric", // Day of the month (e.g., 25)
     month: "long", // Full name of the month (e.g., December)
     year: "numeric", // Full year (e.g., 2023)
   }).format(myDate);
 
+  switch (recurrence) {
+    case "weekly":
+      return `${tt["weekly"]} ${new Intl.DateTimeFormat(locale(useRouter()), {
+        weekday: "long",
+      }).format(myDate)}`;
+    case "monthly":
+      return `${tt["monthly"]} ${formattedDate}`;
+    case "from":
+      return `${tt["from"]} ${formattedDate}`;
+    case "punctual":
+    default:
+      return formattedDate;
+  }
+}
+
+function StdCellComponent(cell: SaveTheDateCell) {
+  const language_code = locale(useRouter());
+  const translation = getTranslation(cell, language_code);
+  const formattedDate = formatDate(cell.date, cell.recurrence);
+
   return (
     <tr key={cell.id}>
       <td
@@ -361,6 +386,7 @@ export const getServerSideProps: GetServerSideProps<{
             "background_color",
             "text_color",
             "button_color",
+            "recurrence",
             { translations: ["*"], commission: ["name"] },
           ],
         })