From 83184f7721af97ee6d1500b3c33930dbdb94c20f Mon Sep 17 00:00:00 2001
From: Kishore <42832651+kishore03109@users.noreply.github.com>
Date: Thu, 14 Sep 2023 16:59:54 +0800
Subject: [PATCH] fix(announcement): interface bugs

---
 src/hooks/useDrag.tsx                         | 12 ++---
 .../components/Homepage/AnnouncementBody.tsx  | 45 ++++++++-----------
 .../homepage/AnnouncementsSection.tsx         |  8 ++--
 src/types/homepage.ts                         | 14 +++---
 4 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/hooks/useDrag.tsx b/src/hooks/useDrag.tsx
index 26bedd9f9e..422118a289 100644
--- a/src/hooks/useDrag.tsx
+++ b/src/hooks/useDrag.tsx
@@ -364,7 +364,7 @@ export const onCreate = <E,>(
     case "announcement": {
       const announcementKeyExist = !_.isEmpty(
         frontMatter.sections.find((section) =>
-          EditorHomepageFrontmatterSection.isAnnouncementBlock(section)
+          EditorHomepageFrontmatterSection.isAnnouncements(section)
         )
       )
       if (!announcementKeyExist) {
@@ -373,13 +373,13 @@ export const onCreate = <E,>(
       }
 
       const announcementBlockIndex = frontMatter.sections.findIndex((section) =>
-        EditorHomepageFrontmatterSection.isAnnouncementBlock(section)
+        EditorHomepageFrontmatterSection.isAnnouncements(section)
       )
       const announcementBlockSection: AnnouncementBlockFrontmatterSection = frontMatter
         .sections[announcementBlockIndex] as AnnouncementBlockFrontmatterSection
 
       const announcements = createElement(
-        announcementBlockSection.announcementBlock.announcements,
+        announcementBlockSection.announcements.announcement_items,
         val as AnnouncementOption
       )
 
@@ -476,7 +476,7 @@ export const onDelete = (
     case "announcement": {
       const announcementKeyExist = !_.isEmpty(
         frontMatter.sections.find((section) =>
-          EditorHomepageFrontmatterSection.isAnnouncementBlock(section)
+          EditorHomepageFrontmatterSection.isAnnouncements(section)
         )
       )
       if (!announcementKeyExist) {
@@ -485,13 +485,13 @@ export const onDelete = (
       }
 
       const announcementBlockIndex = frontMatter.sections.findIndex((section) =>
-        EditorHomepageFrontmatterSection.isAnnouncementBlock(section)
+        EditorHomepageFrontmatterSection.isAnnouncements(section)
       )
       const announcementBlockSection: AnnouncementBlockFrontmatterSection = frontMatter
         .sections[announcementBlockIndex] as AnnouncementBlockFrontmatterSection
 
       const newAnnouncementOptions = deleteElement(
-        announcementBlockSection.announcementBlock.announcements,
+        announcementBlockSection.announcements.announcement_items,
         indexToDelete
       )
       const newAnnouncementErrors = deleteElement(
diff --git a/src/layouts/components/Homepage/AnnouncementBody.tsx b/src/layouts/components/Homepage/AnnouncementBody.tsx
index 1c36fc240e..67b516cd86 100644
--- a/src/layouts/components/Homepage/AnnouncementBody.tsx
+++ b/src/layouts/components/Homepage/AnnouncementBody.tsx
@@ -5,7 +5,6 @@ import {
   Input,
   FormErrorMessage,
   Button,
-  DateRangePicker,
   DatePicker,
   Textarea,
 } from "@opengovsg/design-system-react"
@@ -16,17 +15,12 @@ import { useEditableContext } from "contexts/EditableContext"
 
 import { Editable } from "layouts/components/Editable"
 
-import { Announcement } from "types/announcements"
 import { AnnouncementOption } from "types/homepage"
 
 const MAX_ANNOUNCEMENTS = 5
 
-interface AnnouncementBodyFormFields {
-  button: string
-  url: string
-}
-interface AnnouncementBodyProps extends AnnouncementBodyFormFields {
-  errors: AnnouncementBodyFormFields & {
+interface AnnouncementBodyProps {
+  errors: {
     announcements: AnnouncementOption[]
   }
   announcements: Partial<AnnouncementOption>[]
@@ -34,8 +28,6 @@ interface AnnouncementBodyProps extends AnnouncementBodyFormFields {
 
 export const AnnouncementBody = ({
   errors,
-  button,
-  url,
   announcements = [],
 }: AnnouncementBodyProps) => {
   const {
@@ -45,8 +37,6 @@ export const AnnouncementBody = ({
     onDelete,
     onDisplay,
   } = useEditableContext()
-  console.log("in announcement body")
-  console.log({ errors, button, url, announcements })
   return (
     <Box w="full">
       <DragDropContext onDragEnd={onDragEnd}>
@@ -73,15 +63,15 @@ export const AnnouncementBody = ({
                       title: announcementTitle,
                       date: announcementDate,
                       announcementContent,
-                      linkText: announcementLinkText,
-                      linkUrl: announcementLinkUrl,
+                      link_text: announcementLinkText,
+                      link_url: announcementLinkUrl,
                     },
                     announcementIndex
                   ) => {
                     return (
                       <Editable.DraggableAccordionItem
                         title={announcementTitle || "New announcement"}
-                        draggableId={`announcement-${announcementIndex}-draggable`}
+                        draggableId={`announcements-${announcementIndex}-draggable`}
                         index={announcementIndex}
                         isInvalid={_.some(
                           errors.announcements[announcementIndex]
@@ -98,7 +88,7 @@ export const AnnouncementBody = ({
                             <FormLabel>Title</FormLabel>
                             <Input
                               placeholder="Announcement title"
-                              id={`announcement-${announcementIndex}-title`}
+                              id={`announcements-${announcementIndex}-title`}
                               value={announcementTitle}
                               onChange={onChange}
                             />
@@ -115,13 +105,12 @@ export const AnnouncementBody = ({
                             <FormLabel>Date</FormLabel>
                             <DatePicker
                               placeholder="announcement description"
-                              id={`announcement-${announcementIndex}-date`}
+                              id={`announcements-${announcementIndex}-date`}
                               inputValue={announcementDate}
                               onInputValueChange={(value) => {
-                                console.log(value)
                                 onChange({
                                   target: {
-                                    id: `announcement-${announcementIndex}-date`,
+                                    id: `announcements-${announcementIndex}-date`,
                                     value,
                                   },
                                 })
@@ -141,7 +130,7 @@ export const AnnouncementBody = ({
                             <FormLabel>Announcement</FormLabel>
                             <Textarea
                               placeholder="This is a space for your announcement. This text appears next to the announcement title. You can link a relevant page if you need to elaborate on your announcement."
-                              id={`announcement-${announcementIndex}-announcementContent`}
+                              id={`announcements-${announcementIndex}-announcement`}
                               value={announcementContent}
                               onChange={onChange}
                             />
@@ -154,36 +143,40 @@ export const AnnouncementBody = ({
                           </FormControl>
                           <FormControl
                             isInvalid={
-                              !!errors.announcements[announcementIndex].linkText
+                              !!errors.announcements[announcementIndex]
+                                .link_text
                             }
                             isRequired
                           >
                             <FormLabel optionalIndicator>Link text</FormLabel>
                             <Input
                               placeholder="Learn more"
-                              id={`announcement-${announcementIndex}-linkText`}
+                              id={`announcement-${announcementIndex}-link_text`}
                               value={announcementLinkText}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
-                              {errors.announcements[announcementIndex].linkText}
+                              {
+                                errors.announcements[announcementIndex]
+                                  .link_text
+                              }
                             </FormErrorMessage>
                           </FormControl>
                           <FormControl
                             isInvalid={
-                              !!errors.announcements[announcementIndex].linkUrl
+                              !!errors.announcements[announcementIndex].link_url
                             }
                             isRequired
                           >
                             <FormLabel optionalIndicator>Link URL</FormLabel>
                             <Input
                               placeholder="Insert /page-url or https:  "
-                              id={`announcement-${announcementIndex}-linkUrl`}
+                              id={`announcement-${announcementIndex}-link_url`}
                               value={announcementLinkUrl}
                               onChange={onChange}
                             />
                             <FormErrorMessage>
-                              {errors.announcements[announcementIndex].linkUrl}
+                              {errors.announcements[announcementIndex].link_url}
                             </FormErrorMessage>
                           </FormControl>
                           <Button
diff --git a/src/templates/homepage/AnnouncementsSection.tsx b/src/templates/homepage/AnnouncementsSection.tsx
index bf1e562535..599a5d6c26 100644
--- a/src/templates/homepage/AnnouncementsSection.tsx
+++ b/src/templates/homepage/AnnouncementsSection.tsx
@@ -4,13 +4,13 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { AnnouncementsSection } from "types/homepage"
+import { AnnouncementBlockSection } from "types/homepage"
 
 type TemplateAnnouncementsSectionProps = Omit<
-  AnnouncementsSection,
+  AnnouncementBlockSection,
   "announcement_items"
 > & {
-  announcementItems: AnnouncementsSection["announcement_items"]
+  announcementItems: AnnouncementBlockSection["announcement_items"]
   sectionIndex: number
 }
 
@@ -124,7 +124,7 @@ export const TemplateAnnouncementsSection = forwardRef<
                                 "announcements-announcement-col-px-desktop",
                               ])}
                             >
-                              <p>{announcement.announcement}</p>
+                              <p>{announcement.announcementContent}</p>
                               {announcement.link_text && announcement.link_url && (
                                 <div className={editorStyles["mt-4"]}>
                                   <div
diff --git a/src/types/homepage.ts b/src/types/homepage.ts
index 54535e09f8..a81ecd08b7 100644
--- a/src/types/homepage.ts
+++ b/src/types/homepage.ts
@@ -70,7 +70,7 @@ export interface ResourcesSection {
 export interface AnnouncementBlockSection {
   title?: string
   subtitle?: string
-  announcement_items?: AnnouncementOption[]
+  announcement_items: AnnouncementOption[]
 }
 
 export interface HomepageDto {
@@ -87,7 +87,7 @@ export interface HomepageDto {
         | InfobarSection
         | InfopicSection
         | ResourcesSection
-        | AnnouncementsSection
+        | AnnouncementBlockSection
       )[]
     }
     pageBody?: string
@@ -120,8 +120,8 @@ export type InfobarFrontmatterSection = {
   infobar: InfobarSection
 }
 
-export type AnnouncementsFrontmatterSection = {
-  announcements: AnnouncementsSection
+export type AnnouncementBlockFrontmatterSection = {
+  announcements: AnnouncementBlockSection
 }
 
 export type EditorHomepageFrontmatterSection =
@@ -129,7 +129,7 @@ export type EditorHomepageFrontmatterSection =
   | ResourcesFrontmatterSection
   | InfopicFrontmatterSection
   | InfobarFrontmatterSection
-  | AnnouncementsFrontmatterSection
+  | AnnouncementBlockFrontmatterSection
 
 export const EditorHomepageFrontmatterSection = {
   isHero: (
@@ -150,8 +150,8 @@ export const EditorHomepageFrontmatterSection = {
     !!(section as InfobarFrontmatterSection).infobar,
   isAnnouncements: (
     section: EditorHomepageFrontmatterSection
-  ): section is AnnouncementsFrontmatterSection =>
-    !!(section as AnnouncementsFrontmatterSection).announcements,
+  ): section is AnnouncementBlockFrontmatterSection =>
+    !!(section as AnnouncementBlockFrontmatterSection).announcements,
   isAnnouncement: (
     section: PossibleEditorSections
   ): section is AnnouncementOption =>