Skip to content

Commit

Permalink
feat(edit homepage): add in announcement block
Browse files Browse the repository at this point in the history
  • Loading branch information
@kishore03109
kishore03109 committed Sep 14, 2023
1 parent 0a24251 commit eb2fc7f
Showing 1 changed file with 163 additions and 2 deletions.
165 changes: 163 additions & 2 deletions src/layouts/EditHomepage/EditHomepage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
validateSections,
validateHighlights,
validateDropdownElems,
validateAnnouncements,
} from "utils/validators"

import { HomepageStartEditingImage } from "assets"
Expand All @@ -40,6 +41,8 @@ import { EditableContextProvider } from "../../contexts/EditableContext"
import { useDrag, onCreate, onDelete } from "../../hooks/useDrag"
import { CustomiseSectionsHeader, Editable } from "../components/Editable"
import { AddSectionButton } from "../components/Editable/AddSectionButton"
import { AnnouncementBody } from "../components/Homepage/AnnouncementBody"
import { AnnouncementSection } from "../components/Homepage/AnnouncementSection"
import { HeroBody } from "../components/Homepage/HeroBody"
import { HeroDropdownSection } from "../components/Homepage/HeroDropdownSection"
import { HeroHighlightSection } from "../components/Homepage/HeroHighlightSection"
Expand All @@ -54,6 +57,8 @@ import {
INFOPIC_SECTION,
KEY_HIGHLIGHT_SECTION,
RESOURCES_SECTION,
ANNOUNCEMENT_BLOCK,
ANNOUNCEMENT_SECTION,
} from "./constants"
import { HomepagePreview } from "./HomepagePreview"
import { getErrorValues } from "./utils"
Expand Down Expand Up @@ -119,6 +124,11 @@ const enumSection = (type, isError) => {
? { infopic: getErrorValues(INFOPIC_SECTION) }
: { infopic: INFOPIC_SECTION }

case "announcementBlock":
return isError
? { announcementBlock: getErrorValues(ANNOUNCEMENT_BLOCK) }
: { announcementBlock: ANNOUNCEMENT_BLOCK }

default:
return isError
? { infobar: getErrorValues(INFOBAR_SECTION) }
Expand All @@ -139,6 +149,7 @@ const EditHomepage = ({ match }) => {
image: "",
notification: "",
sections: [],
announcementBlock: {},
})
const [originalFrontMatter, setOriginalFrontMatter] = useState({
title: "",
Expand All @@ -150,12 +161,14 @@ const EditHomepage = ({ match }) => {
})
const [sha, setSha] = useState(null)
const [displaySections, setDisplaySections] = useState([])
const [displayAnnouncements, setDisplayAnnouncements] = useState([])
const [displayHighlights, setDisplayHighlights] = useState([])
const [displayDropdownElems, setDisplayDropdownElems] = useState([])
const [errors, setErrors] = useState({
sections: [],
highlights: [],
dropdownElems: [],
announcements: [],
})
const [itemPendingForDelete, setItemPendingForDelete] = useState({
id: "",
Expand All @@ -172,6 +185,7 @@ const EditHomepage = ({ match }) => {
displayDropdownElems,
displayHighlights,
displaySections,
displayAnnouncements,
}
const onDrag = useDrag(homepageState)
const setHomepageState = ({
Expand Down Expand Up @@ -216,6 +230,7 @@ const EditHomepage = ({ match }) => {
const sectionsErrors = []
let dropdownElemsErrors = []
let highlightsErrors = []
const announcementErrors = []
const scrollRefs = []
frontMatter.sections.forEach((section) => {
scrollRefs.push(createRef())
Expand Down Expand Up @@ -267,6 +282,12 @@ const EditHomepage = ({ match }) => {
sectionsErrors.push({ infopic: getErrorValues(INFOPIC_SECTION) })
}

if (section.announcementBlock) {
sectionsErrors.push({
announcementBlock: getErrorValues(ANNOUNCEMENT_BLOCK),
})
}

// Minimize all sections by default
displaySections.push(false)
})
Expand All @@ -276,6 +297,7 @@ const EditHomepage = ({ match }) => {
sections: sectionsErrors,
highlights: highlightsErrors,
dropdownElems: dropdownElemsErrors,
announcements: announcementErrors,
}

setFrontMatter(frontMatter)
Expand Down Expand Up @@ -332,7 +354,7 @@ const EditHomepage = ({ match }) => {

// sectionIndex is the index of the section array in the frontMatter
const sectionIndex = parseInt(idArray[1], RADIX_PARSE_INT)
const sectionType = idArray[2] // e.g. "hero" or "infobar" or "resources"
const sectionType = idArray[2] // e.g. "hero" or "infobar" or "resources" or "announcement"
const field = idArray[3] // e.g. "title" or "subtitle"

const newSections = update(sections, {
Expand Down Expand Up @@ -441,6 +463,60 @@ const EditHomepage = ({ match }) => {
scrollTo(scrollRefs[0])
break
}
case "announcement": {
// The field that changed belongs to a hero highlight
const { sections } = frontMatter

const announcementBlockIndex = sections.findIndex(
(value) => Object.keys(value)[0] === "announcementBlock"
)
// announcementIndex is the index of the announcements array
const announcementIndex = parseInt(idArray[1], RADIX_PARSE_INT)
const field = idArray[2] // e.g. "title" or "url"

const newSections = update(sections, {
[announcementBlockIndex]: {
announcementBlock: {
announcements: {
[announcementIndex]: {
[field]: {
$set: value,
},
},
},
},
},
})

const newErrors = update(errors, {
announcements: {
[announcementIndex]: {
$set: validateAnnouncements(
errors.announcements[announcementIndex],
field,
value
),
},
},
})

// Additional validation that depends on other fields
const isLinkTextFilled = !!frontMatter.sections[
announcementBlockIndex
].announcementBlock.announcements[announcementIndex].linkText
if (field === "linkUrl" && !value && isLinkTextFilled) {
newErrors.announcements[announcementIndex].linkText =
"Please specify a URL for your link"
}

setFrontMatter({
...frontMatter,
sections: newSections,
})
setErrors(newErrors)
scrollTo(scrollRefs[0])
break
}
case "dropdownelem": {
// The field that changed is a dropdown element (i.e. dropdownelem)
const { sections } = frontMatter
Expand Down Expand Up @@ -582,6 +658,20 @@ const EditHomepage = ({ match }) => {
setDisplayHighlights(displayHighlights)
break
}
case "announcement": {
const val = ANNOUNCEMENT_SECTION
const err = getErrorValues(ANNOUNCEMENT_SECTION)
const updatedHomepageState = onCreate(
homepageState,
elemType,
val,
err
)
const newScrollRefs = update(scrollRefs, { $push: [createRef()] })
setHomepageState(updatedHomepageState)
setScrollRefs(newScrollRefs)
break
}
default:
}
} catch (err) {
Expand Down Expand Up @@ -787,8 +877,21 @@ const EditHomepage = ({ match }) => {
})

setDisplaySections(newDisplaySections)
scrollTo(scrollRefs[index])
break
}
case "announcement": {
const resetAnnouncementSections = _.fill(
Array(displayAnnouncements.length),
false
)
resetAnnouncementSections[index] = !displayAnnouncements[index]
const newDisplayAnnouncements = update(displayAnnouncements, {
$set: resetAnnouncementSections,
})

scrollTo(scrollRefs[index])
setDisplayAnnouncements(newDisplayAnnouncements)
break
}
case "highlight": {
Expand Down Expand Up @@ -861,7 +964,7 @@ const EditHomepage = ({ match }) => {
}
}

// NOTE: sectionType is one of `resources`, `infopic` or `infobar`
// NOTE: sectionType is one of `announcementBlock, `resources`, `infopic` or `infobar`
const onClick = (sectionType) => {
createHandler({
target: {
Expand Down Expand Up @@ -1076,6 +1179,51 @@ const EditHomepage = ({ match }) => {
/>
</Editable.DraggableAccordionItem>
)}

{section.announcementBlock && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={
<Tag variant="subtle">Announcement</Tag>
}
title={
section.announcementBlock.title ||
"New Announcement"
}
isInvalid={_.some(
errors.sections[sectionIndex]
.announcementBlock
)}
>
<AnnouncementSection
{...section.announcementBlock}
title={
section.announcementBlock.title ||
"New announcement"
}
subtitle={
section.announcementBlock.subtitle ||
"New subtitle "
}
index={sectionIndex}
errors={
errors.sections[sectionIndex]
.announcementBlock
}
>
<AnnouncementBody
{...section.announcementBlock}
announcements={
section.announcementBlock
.announcements
}
errors={{
...errors,
}}
/>
</AnnouncementSection>
</Editable.DraggableAccordionItem>
)}
</>
)
)}
Expand Down Expand Up @@ -1103,6 +1251,19 @@ const EditHomepage = ({ match }) => {
subtitle={INFOBAR_SECTION.subtitle}
onClick={() => onClick(INFOBAR_SECTION.id)}
/>
{/* NOTE: Check if the sections contain any `announcement`
and if it does, prevent creation of another `resources` section
*/}
{!frontMatter.sections.some(
({ announcementBlock }) => !!announcementBlock
) && (
<AddSectionButton.Option
title={ANNOUNCEMENT_BLOCK.title}
subtitle={ANNOUNCEMENT_BLOCK.subtitle}
onClick={() => onClick(ANNOUNCEMENT_BLOCK.id)}
/>
)}

{/* NOTE: Check if the sections contain any `resources`
and if it does, prevent creation of another `resources` section
*/}
Expand Down

0 comments on commit eb2fc7f

Please sign in to comment.