Skip to content

Commit

Permalink
feat: add text card parsing and change handler
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexanderleegs
alexanderleegs committed Sep 20, 2023
1 parent e4f9b0e commit 75cb62d
Showing 1 changed file with 147 additions and 3 deletions.
150 changes: 147 additions & 3 deletions src/layouts/EditHomepage/EditHomepage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,16 @@ import { useUpdateHomepageHook } from "hooks/homepageHooks/useUpdateHomepageHook
import { useAfterFirstLoad } from "hooks/useAfterFirstLoad"
import useSiteColorsHook from "hooks/useSiteColorsHook"

import { TextCardsSectionBody } from "layouts/components/Homepage/TextCardsBody"

import elementStyles from "styles/isomer-cms/Elements.module.scss"

import { useErrorToast } from "utils/toasts"
import {
validateSections,
validateHighlights,
validateDropdownElems,
validateTextcard,
} from "utils/validators"

import { HomepageStartEditingImage } from "assets"
Expand All @@ -54,6 +57,8 @@ import {
INFOPIC_SECTION,
KEY_HIGHLIGHT_SECTION,
RESOURCES_SECTION,
TEXTCARDS_BLOCK_SECTION,
TEXTCARDS_ITEM_SECTION,
} from "./constants"
import { HomepagePreview } from "./HomepagePreview"
import { getErrorValues } from "./utils"
Expand Down Expand Up @@ -94,8 +99,14 @@ const getHasErrors = (errors) => {

const hasHighlightErrors = getHasError(errors.highlights)
const hasDropdownElemErrors = getHasError(errors.dropdownElems)
const hasTextcardCardErrors = getHasError(errors.textcards)

return hasSectionErrors || hasHighlightErrors || hasDropdownElemErrors
return (
hasSectionErrors ||
hasHighlightErrors ||
hasDropdownElemErrors ||
hasTextcardCardErrors
)
}

// Constants
Expand All @@ -119,6 +130,10 @@ const enumSection = (type, isError) => {
? { infopic: getErrorValues(INFOPIC_SECTION) }
: { infopic: INFOPIC_SECTION }

case "textcards":
return isError
? { textcards: getErrorValues(TEXTCARDS_BLOCK_SECTION) }
: { textcards: TEXTCARDS_BLOCK_SECTION }
default:
return isError
? { infobar: getErrorValues(INFOBAR_SECTION) }
Expand Down Expand Up @@ -156,6 +171,7 @@ const EditHomepage = ({ match }) => {
sections: [],
highlights: [],
dropdownElems: [],
textcards: [],
})
const [itemPendingForDelete, setItemPendingForDelete] = useState({
id: "",
Expand Down Expand Up @@ -216,6 +232,7 @@ const EditHomepage = ({ match }) => {
const sectionsErrors = []
let dropdownElemsErrors = []
let highlightsErrors = []
const textcardCardErrors = []
const scrollRefs = []
frontMatter.sections.forEach((section) => {
scrollRefs.push(createRef())
Expand Down Expand Up @@ -267,6 +284,19 @@ const EditHomepage = ({ match }) => {
sectionsErrors.push({ infopic: getErrorValues(INFOPIC_SECTION) })
}

if (section.textcards) {
sectionsErrors.push({
textcards: getErrorValues(TEXTCARDS_BLOCK_SECTION),
})
const { cards } = section.textcards
// Fill in dropdown elem errors array
textcardCardErrors.push(
_.map(cards, () => getErrorValues(TEXTCARDS_ITEM_SECTION))
)
} else {
textcardCardErrors.push([])
}

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

setFrontMatter(frontMatter)
Expand Down Expand Up @@ -486,6 +517,52 @@ const EditHomepage = ({ match }) => {
scrollTo(scrollRefs[0])
break
}
case "textcardcard": {
// The field that changed is a text card element
const { sections } = frontMatter

// cardIndex is the index of the cards array
const sectionIndex = parseInt(idArray[1], RADIX_PARSE_INT)
const cardIndex = parseInt(idArray[2], RADIX_PARSE_INT)
const field = idArray[3] // e.g. "title" or "url"

const newSections = update(sections, {
[sectionIndex]: {
textcards: {
cards: {
[cardIndex]: {
[field]: {
$set: value,
},
},
},
},
},
})

const newErrors = update(errors, {
textcards: {
[sectionIndex]: {
[cardIndex]: {
$set: validateTextcard(
errors.textcards[sectionIndex][cardIndex],
field,
value
),
},
},
},
})

setFrontMatter({
...frontMatter,
sections: newSections,
})
setErrors(newErrors)

scrollTo(scrollRefs[sectionIndex])
break
}
default: {
// The field that changed is the dropdown placeholder title

Expand Down Expand Up @@ -540,7 +617,6 @@ const EditHomepage = ({ match }) => {
const err = enumSection(value, true)

const newScrollRefs = update(scrollRefs, { $push: [createRef()] })

const updatedHomepageState = onCreate(
homepageState,
elemType,
Expand Down Expand Up @@ -582,6 +658,21 @@ const EditHomepage = ({ match }) => {
setDisplayHighlights(displayHighlights)
break
}
case "textcardcard": {
const parentId = parseInt(idArray[1], RADIX_PARSE_INT)
const val = TEXTCARDS_ITEM_SECTION
const err = getErrorValues(TEXTCARDS_ITEM_SECTION)
const updatedHomepageState = onCreate(
homepageState,
elemType,
val,
err,
parentId
)

setHomepageState(updatedHomepageState)
break
}
default:
}
} catch (err) {
Expand All @@ -602,7 +693,18 @@ const EditHomepage = ({ match }) => {

setScrollRefs(newScrollRefs)
}

if (elemType === "textcardcard") {
const childIndex = parseInt(idArray[2], RADIX_PARSE_INT)

const newHomepageState = onDelete(
homepageState,
elemType,
index,
childIndex
)
setHomepageState(newHomepageState)
return
}
const newHomepageState = onDelete(homepageState, elemType, index)
setHomepageState(newHomepageState)
} catch (err) {
Expand Down Expand Up @@ -1082,6 +1184,43 @@ const EditHomepage = ({ match }) => {
/>
</Editable.DraggableAccordionItem>
)}

{section.textcards && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={
<Tag variant="subtle">Text cards</Tag>
}
title={
section.textcards.title ||
"New cards block"
}
isInvalid={
_.some(
errors.sections[sectionIndex]
.textcards
) ||
(errors.textcards[sectionIndex] &&
_.some(
errors.textcards[
sectionIndex
].map((card) => _.some(card))
))
}
>
<TextCardsSectionBody
index={sectionIndex}
errors={
errors.sections[sectionIndex]
.textcards
}
cardErrors={
errors.textcards[sectionIndex]
}
{...section.textcards}
/>
</Editable.DraggableAccordionItem>
)}
</>
)
)}
Expand Down Expand Up @@ -1121,6 +1260,11 @@ const EditHomepage = ({ match }) => {
onClick={() => onClick(RESOURCES_SECTION.id)}
/>
)}
<AddSectionButton.Option
title={TEXTCARDS_BLOCK_SECTION.title}
subtitle={TEXTCARDS_BLOCK_SECTION.subtitle}
onClick={() => onClick(TEXTCARDS_BLOCK_SECTION.id)}
/>
</AddSectionButton.List>
</AddSectionButton>
</Box>
Expand Down

0 comments on commit 75cb62d

Please sign in to comment.