refactor(announcement): mutate at data level

isomerpages · Sep 20, 2023 · 352dda8 · 352dda8
1 parent 8b5b38b
commit 352dda8
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 26 deletions.
diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -11,7 +11,6 @@ import { DragDropContext } from "@hello-pangea/dnd"
 import { Button, Tag } from "@opengovsg/design-system-react"
 import update from "immutability-helper"
 import _ from "lodash"
-import moment from "moment-timezone"
 import { useEffect, createRef, useState } from "react"
 
 import { Footer } from "components/Footer"
@@ -984,20 +983,6 @@ const EditHomepage = ({ match }) => {
         return newSection
       })
 
-      // Modify announcements date time object
-      if (filteredFrontMatter.announcements) {
-        filteredFrontMatter.announcements.announcement_items = filteredFrontMatter.announcements.announcement_items.map(
-          (announcement) => {
-            return announcement.$set(
-              "date",
-              moment(announcement.date_time, "DD/MM/YYYY").format(
-                "DD MMMM YYYY"
-              )
-            )
-          }
-        )
-      }
-
       const params = {
         content: {
           frontMatter: filteredFrontMatter,

diff --git a/src/layouts/EditHomepage/constants.ts b/src/layouts/EditHomepage/constants.ts
@@ -1,3 +1,5 @@
+import moment from "moment"
+
 export const RESOURCES_SECTION = {
   title: "Resources",
   subtitle: "Add a preview and link to your Resource Room",
@@ -15,11 +17,14 @@ export type AnnouncementSectionType = {
 export const getDefaultAnnouncementSection = (): AnnouncementSectionType => {
   return {
     title: "Announcement",
-    date: new Date()
-      .toLocaleString("en-SG", {
-        timeZone: "Asia/Singapore",
-      })
-      .slice(0, "dd/mm/yyyy".length),
+    date: moment(
+      new Date()
+        .toLocaleString("en-SG", {
+          timeZone: "Asia/Singapore",
+        })
+        .slice(0, "dd/mm/yyyy".length),
+      "DD/MM/YYYY"
+    ).format("DD MMMM YYYY"),
     announcement: "Announcement content",
     link_text: "",
     link_url: "",

diff --git a/src/layouts/components/Homepage/AnnouncementBody.tsx b/src/layouts/components/Homepage/AnnouncementBody.tsx
@@ -9,6 +9,7 @@ import {
   Textarea,
 } from "@opengovsg/design-system-react"
 import _ from "lodash"
+import moment from "moment"
 import { BiPlus } from "react-icons/bi"
 
 import { useEditableContext } from "contexts/EditableContext"
@@ -108,12 +109,17 @@ export const AnnouncementBody = ({
                             <FormLabel>Date</FormLabel>
                             <DatePicker
                               id={`announcements-${announcementIndex}-date`}
-                              inputValue={announcementDate}
+                              inputValue={moment(
+                                announcementDate,
+                                "DD MMMM YYYY"
+                              ).format("DD/MM/YYYY")}
                               onInputValueChange={(value) => {
                                 onChange({
                                   target: {
                                     id: `announcement-${announcementIndex}-date`,
-                                    value,
+                                    value: moment(value, "DD/MM/YYYY").format(
+                                      "DD MMMM YYYY"
+                                    ),
                                   },
                                 })
                               }}

diff --git a/src/templates/homepage/AnnouncementsSection.tsx b/src/templates/homepage/AnnouncementsSection.tsx
@@ -1,4 +1,3 @@
-import moment from "moment-timezone"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
@@ -113,9 +112,7 @@ export const TemplateAnnouncementsSection = forwardRef<
                                   ]
                                 }
                               >
-                                {moment(announcement.date, "DD/MM/YYYY").format(
-                                  "DD MMMM YYYY"
-                                )}
+                                {announcement.date}
                               </p>
                             </div>
                             <div