Skip to content

Commit

Permalink
fix(announcement): interface bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@kishore03109
kishore03109 committed Sep 14, 2023
1 parent 7418aa2 commit 83184f7
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 43 deletions.
12 changes: 6 additions & 6 deletions src/hooks/useDrag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
)

Expand Down Expand Up @@ -476,7 +476,7 @@ export const onDelete = (
case "announcement": {
const announcementKeyExist = !_.isEmpty(
frontMatter.sections.find((section) =>
EditorHomepageFrontmatterSection.isAnnouncementBlock(section)
EditorHomepageFrontmatterSection.isAnnouncements(section)
)
)
if (!announcementKeyExist) {
Expand All @@ -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(
Expand Down
45 changes: 19 additions & 26 deletions src/layouts/components/Homepage/AnnouncementBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
Input,
FormErrorMessage,
Button,
DateRangePicker,
DatePicker,
Textarea,
} from "@opengovsg/design-system-react"
Expand All @@ -16,26 +15,19 @@ 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>[]
}

export const AnnouncementBody = ({
errors,
button,
url,
announcements = [],
}: AnnouncementBodyProps) => {
const {
Expand All @@ -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}>
Expand All @@ -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]
Expand All @@ -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}
/>
Expand All @@ -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,
},
})
Expand All @@ -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}
/>
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/templates/homepage/AnnouncementsSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -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
Expand Down
14 changes: 7 additions & 7 deletions src/types/homepage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export interface ResourcesSection {
export interface AnnouncementBlockSection {
title?: string
subtitle?: string
announcement_items?: AnnouncementOption[]
announcement_items: AnnouncementOption[]
}

export interface HomepageDto {
Expand All @@ -87,7 +87,7 @@ export interface HomepageDto {
| InfobarSection
| InfopicSection
| ResourcesSection
| AnnouncementsSection
| AnnouncementBlockSection
)[]
}
pageBody?: string
Expand Down Expand Up @@ -120,16 +120,16 @@ export type InfobarFrontmatterSection = {
infobar: InfobarSection
}

export type AnnouncementsFrontmatterSection = {
announcements: AnnouncementsSection
export type AnnouncementBlockFrontmatterSection = {
announcements: AnnouncementBlockSection
}

export type EditorHomepageFrontmatterSection =
| HeroFrontmatterSection
| ResourcesFrontmatterSection
| InfopicFrontmatterSection
| InfobarFrontmatterSection
| AnnouncementsFrontmatterSection
| AnnouncementBlockFrontmatterSection

export const EditorHomepageFrontmatterSection = {
isHero: (
Expand All @@ -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 =>
Expand Down

0 comments on commit 83184f7

Please sign in to comment.