-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add robustness with messages when type is missing element
- Loading branch information
Showing
11 changed files
with
323 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { Elements } from "@kontent-ai/delivery-sdk"; | ||
| import { FC, PropsWithChildren } from "react"; | ||
| import RenderElement from "./RenderElement"; | ||
|
|
||
| type FeaturedContentProps = PropsWithChildren< | ||
| Readonly<{ | ||
| type: "article" | "event"; | ||
| image?: Elements.AssetsElement; | ||
| }> | ||
| >; | ||
|
|
||
| const FeaturedComponentBase: FC<FeaturedContentProps> = ({ type, image, children }) => { | ||
| const img = image?.value[0]; | ||
| return ( | ||
| <div className="flex flex-col gap-5 xl:gap-16 xl:flex-row py-5 xl:py-[104px] items-center"> | ||
| <div className="basis-1/3"> | ||
| <RenderElement element={image} elementCodename="image" requiredElementType="asset"> | ||
| {img && ( | ||
| <> | ||
| <span className="px-3.5 py-1.5 absolute text-[12px] bg-azure text-white mt-4 ms-4 rounded-md font-bold"> | ||
| {type === "event" ? "FEATURED EVENT" : "FEATURED ARTICLE"} | ||
| </span> | ||
| <img | ||
| width={640} | ||
| height={420} | ||
| src={image.value[0]?.url ?? ""} | ||
| alt={image.value[0].description ?? "image alt"} | ||
| className="object-cover rounded-lg static" | ||
| /> | ||
| </> | ||
| )} | ||
| </RenderElement> | ||
| </div> | ||
| <div className="basis-2/3 flex flex-col"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeaturedComponentBase; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,79 @@ | ||
| import { FC } from "react"; | ||
| import FeaturedContent from "./FeaturedContent"; | ||
| import FeaturedComponentBase from "./FeaturedComponentBase"; | ||
| import { Event } from "../model"; | ||
| import { formatDate } from "../utils/date"; | ||
| import { browserParse, transformToPortableText } from "@kontent-ai/rich-text-resolver"; | ||
| import { PortableText } from "@portabletext/react"; | ||
| import { defaultPortableRichTextComponents } from "../utils/richtext"; | ||
| import { Replace } from "../utils/types"; | ||
| import RenderElement from "./RenderElement"; | ||
|
|
||
| type FeaturedEventProps = Readonly<{ | ||
| event: Partial<Event>; | ||
| event: Replace<Event, { elements: Partial<Event["elements"]> }>; | ||
| }>; | ||
|
|
||
| const FeaturedEvent: FC<FeaturedEventProps> = ({ event }) => { | ||
| const descriptionPortableText = transformToPortableText(browserParse(event.elements?.description.value ?? "")); | ||
|
|
||
| const createTag = (text: string) => ( | ||
| <div key={text} className="px-4 py-2 border-solid border rounded-full border-[#1D1D1B]"> | ||
| <p className="text-[#1D1D1B] text-lg">{text}</p> | ||
| </div> | ||
| ); | ||
|
|
||
| const shouldRender = event.elements?.name.value || event.elements?.description.value !== "<p><br></p>" | ||
| || event.elements?.start_date.value | ||
| || event.elements?.end_date.value || event.elements?.image.value.length || event.elements?.event_topic.value.length | ||
| || event.elements?.event_type.value.length; | ||
| const shouldRender = Object.entries(event.elements).length > 0; | ||
|
|
||
| return ( | ||
| <FeaturedContent image={event.elements?.image} type="event"> | ||
| {shouldRender | ||
| ? ( | ||
| <> | ||
| <div> | ||
| return shouldRender | ||
| ? ( | ||
| <FeaturedComponentBase image={event.elements.image} type="event"> | ||
| <> | ||
| <div> | ||
| <RenderElement element={event.elements.name} elementCodename="name" requiredElementType="text"> | ||
| <h2 className="text-center xl:text-left text-5xl font-semibold text-burgundy"> | ||
| {event.elements?.name.value} | ||
| {event.elements.name?.value} | ||
| </h2> | ||
| </RenderElement> | ||
| <RenderElement | ||
| element={event.elements.start_date} | ||
| elementCodename="start_date" | ||
| requiredElementType="date_time" | ||
| > | ||
| <p className="text-center xl:text-left text-gray-light mt-6 text-lg"> | ||
| {`${ | ||
| event.elements?.start_date.value !== null | ||
| ? formatDate(event.elements?.start_date.value as string) | ||
| event.elements.start_date?.value !== null | ||
| ? formatDate(event.elements.start_date?.value as string) | ||
| : "" | ||
| }${ | ||
| event.elements?.end_date.value !== null | ||
| ? ` - ${formatDate(event.elements?.end_date.value as string)}` | ||
| event.elements.end_date?.value !== null | ||
| ? ` - ${formatDate(event.elements.end_date?.value as string)}` | ||
| : "" | ||
| }`} | ||
| </p> | ||
| <div className="flex mt-6 gap-2 justify-center xl:justify-normal"> | ||
| {event.elements?.event_type.value.map(t => createTag(t.name.toUpperCase()))} | ||
| {event.elements?.event_topic.value.map(t => createTag(t.name.toUpperCase()))} | ||
| </div> | ||
| </RenderElement> | ||
| <div className="flex mt-6 gap-2 justify-center xl:justify-normal"> | ||
| {event.elements.event_type?.value.map(t => createTag(t.name.toUpperCase()))} | ||
| {event.elements.event_topic?.value.map(t => createTag(t.name.toUpperCase()))} | ||
| </div> | ||
| <RenderElement | ||
| element={event.elements.description} | ||
| elementCodename="description" | ||
| requiredElementType="rich_text" | ||
| > | ||
| <div className="mt-4"> | ||
| <PortableText value={descriptionPortableText} components={defaultPortableRichTextComponents} /> | ||
| <PortableText | ||
| value={transformToPortableText(browserParse(event.elements.description?.value ?? "<p></p>"))} | ||
| components={defaultPortableRichTextComponents} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {event.elements?.description.value !== "<p><br></p>" && ( | ||
| <a href="#" className="text-center xl:text-left text-burgundy text-xl mt-6 font-semibold underline"> | ||
| Read more | ||
| </a> | ||
| )} | ||
| </> | ||
| ) | ||
| : <></>} | ||
| </FeaturedContent> | ||
| ); | ||
| </RenderElement> | ||
| </div> | ||
| {event.elements.description?.value !== "<p><br></p>" && ( | ||
| <a href="#" className="text-center xl:text-left text-burgundy text-xl mt-6 font-semibold underline"> | ||
| Read more | ||
| </a> | ||
| )} | ||
| </> | ||
| </FeaturedComponentBase> | ||
| ) | ||
| : <></>; | ||
| }; | ||
|
|
||
| export default FeaturedEvent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.