From 2458f1e70c6830c2191f0f5b2fe560f358e4eb5d Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 13 Jun 2024 13:14:18 -0700 Subject: [PATCH 01/25] initial home page prep --- app/pages/HomePage/HomePage.tsx | 119 ++++++++++++-------------------- 1 file changed, 46 insertions(+), 73 deletions(-) diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 68d1c3c8d..51b1de412 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -1,15 +1,10 @@ import React, { useEffect, useState } from "react"; -import { useHistory } from "react-router-dom"; -import qs from "qs"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { getResourceCount } from "utils/DataService"; import { Footer } from "components/ui"; import imageUrlBuilder from "@sanity/image-url"; import Hero from "components/ui/Hero/Hero"; -import { Partners } from "./components/Partners/Partners"; -import { SearchBar } from "./components/SearchBar/SearchBar"; -import { HomePageSection } from "./components/Section/Section"; -import ResourceList from "./components/ResourceList/ResourceList"; +import { OppEventCardSection } from "components/ui/Section/OppEventCardSection"; import { client } from "../../sanity"; const builder = imageUrlBuilder(client); @@ -27,6 +22,50 @@ export interface HeroData { buttons: ButtonType[]; } +export const HomePage = () => { + const [resourceCount, setResourceCount] = useState<number | undefined>(); + const [heroData, setHeroData] = useState<HeroData | null>(null); + + useEffect(() => { + getResourceCount().then((count: number) => setResourceCount(count)); + const fetchHeroData = async () => { + const query = `*[_type == "hero" && name == "Home Hero"][0]{ + name, + title, + description, + backgroundImage, + buttons + }`; + const result: HeroData = await client.fetch(query); + setHeroData(result); + }; + + fetchHeroData(); + }, []); + + if (!heroData) { + return <div>Loading...</div>; + } + + return ( + <> + <Hero + backgroundImage={builder.image(heroData.backgroundImage).url()} + title={heroData.title} + description={heroData.description} + buttons={heroData.buttons} + /> + {/* Category Card */} + <OppEventCardSection sectionType="opportunity" /> + <OppEventCardSection sectionType="event" /> + {/* Two Column Layout */} + <Footer /> + </> + ); +}; + +// Remove when new categories is created +// other components are dependent on this list export const coreCategories = [ { algoliaCategoryName: "Covid-food", @@ -100,70 +139,4 @@ export const coreCategories = [ icon: "substance-use", categorySlug: "substance-use-resources", }, -]; - -export const HomePage = () => { - const [resourceCount, setResourceCount] = useState<number | undefined>(); - const [searchValue, setSearchValue] = useState(""); - const history = useHistory(); - const [heroData, setHeroData] = useState<HeroData | null>(null); - - const submitSearch = () => { - if (searchValue) { - const query = qs.stringify({ query: searchValue }); - history.push(`/search?${query}`); - } - }; - - useEffect(() => { - getResourceCount().then((count: number) => setResourceCount(count)); - const fetchHeroData = async () => { - const query = `*[_type == "hero" && name == "Home Hero"][0]{ - name, - title, - description, - backgroundImage, - buttons - }`; - const result: HeroData = await client.fetch(query); - setHeroData(result); - }; - - fetchHeroData(); - }, []); - - if (!heroData) { - return <div>Loading...</div>; - } - - return ( - <> - <Hero - backgroundImage={builder.image(heroData.backgroundImage).url()} - title={heroData.title} - description={heroData.description} - buttons={heroData.buttons} - /> - <HomePageSection title="Find essential services in San Francisco"> - <ResourceList resources={coreCategories} /> - </HomePageSection> - - <HomePageSection - title="Browse Directory" - description="Search the directory for a specific social service provider or browse by category." - > - <SearchBar - placeholder={`Search ${ - resourceCount || "" - } resources in San Francisco`} - onSubmit={submitSearch} - onChange={(newSearchValue: string) => setSearchValue(newSearchValue)} - value={searchValue} - /> - </HomePageSection> - - <Partners /> - <Footer /> - </> - ); -}; +]; \ No newline at end of file From 7e75cb8936d4e3f547489ec97133d87eaed45339 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Mon, 17 Jun 2024 17:34:47 -0700 Subject: [PATCH 02/25] move and export type from two column component --- .../TwoColumnContentSection.tsx | 18 ++++++++------- app/pages/AboutPageOur415/AboutPage.tsx | 22 ++++++------------- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx index 689633266..a9a8d0fcc 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx @@ -36,6 +36,15 @@ const BlockRenderer = (props: { return BlockContent.defaultSerializers.types.block(props); }; +export interface TwoColumnContent { + mediaAlignment: string; + image: SanityImageSource; + imageAlt: string | undefined; + contentBlock: BlockContentProps; + contentLinkButtonText: string; + contentLinkButtonUrl: string; +} + export const TwoColumnContentSection = ({ image, imageAlt, @@ -43,14 +52,7 @@ export const TwoColumnContentSection = ({ mediaAlignment, contentLinkButtonText, contentLinkButtonUrl, -}: { - mediaAlignment: string; - image: SanityImageSource; - imageAlt: string | undefined; - contentBlock: BlockContentProps; - contentLinkButtonText: string; - contentLinkButtonUrl: string; -}) => { +}: TwoColumnContent) => { return ( <section className={styles.twoColumnContentSectionContainer}> <div diff --git a/app/pages/AboutPageOur415/AboutPage.tsx b/app/pages/AboutPageOur415/AboutPage.tsx index 714a0e0b8..0f5e12911 100644 --- a/app/pages/AboutPageOur415/AboutPage.tsx +++ b/app/pages/AboutPageOur415/AboutPage.tsx @@ -1,24 +1,16 @@ import React, { useEffect, useState } from "react"; -import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { client } from "../../sanity"; import { Masthead } from "../../components/ui/Masthead/Masthead"; import { EmailSignup } from "../../components/EmailSignup/Emailsignup"; -import { TwoColumnContentSection } from "../../components/ui/TwoColumnContentSection/TwoColumnContentSection"; - -interface TwoColumnContentSection { - mediaAlignment: string; - image: SanityImageSource; - imageAlt: string | undefined; - contentBlock: any; - contentLinkButtonText: string; - contentLinkButtonUrl: string; - _id: string; -} +import { + TwoColumnContent, + TwoColumnContentSection, +} from "../../components/ui/TwoColumnContentSection/TwoColumnContentSection"; interface PageState { pageInitialized: boolean; mastHead: string; - twoColumnContentSections: TwoColumnContentSection[]; + twoColumnContentSections: TwoColumnContent[]; } export const AboutPage = () => { @@ -54,8 +46,8 @@ export const AboutPage = () => { <> <Masthead title={pageData.mastHead} /> {pageData?.twoColumnContentSections?.map( - (section: JSX.IntrinsicAttributes & TwoColumnContentSection) => { - return <TwoColumnContentSection key={section._id} {...section} />; + (section: JSX.IntrinsicAttributes & TwoColumnContent) => { + return <TwoColumnContentSection key={section.key} {...section} />; } )} <EmailSignup /> From 1ad45f1313a7cb5c07040c5afb9f81aa45ddb1b6 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Mon, 17 Jun 2024 18:24:09 -0700 Subject: [PATCH 03/25] create 2 column component for home page --- app/pages/HomePage/HomePage.tsx | 6 ++- app/pages/HomePage/HomePageContentColumn.tsx | 43 ++++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 app/pages/HomePage/HomePageContentColumn.tsx diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 51b1de412..6becf9733 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -6,6 +6,7 @@ import imageUrlBuilder from "@sanity/image-url"; import Hero from "components/ui/Hero/Hero"; import { OppEventCardSection } from "components/ui/Section/OppEventCardSection"; import { client } from "../../sanity"; +import { HomePageContentColumn } from "./HomePageContentColumn"; const builder = imageUrlBuilder(client); @@ -58,7 +59,8 @@ export const HomePage = () => { {/* Category Card */} <OppEventCardSection sectionType="opportunity" /> <OppEventCardSection sectionType="event" /> - {/* Two Column Layout */} + <HomePageContentColumn /> + {/* Newsletter Component */} <Footer /> </> ); @@ -139,4 +141,4 @@ export const coreCategories = [ icon: "substance-use", categorySlug: "substance-use-resources", }, -]; \ No newline at end of file +]; diff --git a/app/pages/HomePage/HomePageContentColumn.tsx b/app/pages/HomePage/HomePageContentColumn.tsx new file mode 100644 index 000000000..cc389af6f --- /dev/null +++ b/app/pages/HomePage/HomePageContentColumn.tsx @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from "react"; +import { + TwoColumnContent, + TwoColumnContentSection, +} from "components/ui/TwoColumnContentSection/TwoColumnContentSection"; +import { client } from "../../sanity"; + +interface ContentState { + contentInitialized: boolean; + twoColumnContentSections: TwoColumnContent[]; +} + +export const HomePageContentColumn = () => { + const [contentData, setContentData] = useState<ContentState>({ + contentInitialized: false, + twoColumnContentSections: [], + }); + + useEffect(() => { + const fetchPageData = async () => { + const fetchedPageData = await client.fetch( + `*[_type == 'contentPageType' && name == 'Home']{twoColumnContentSections[]->}` + ); + + const { twoColumnContentSections } = fetchedPageData[0]; + + setContentData({ + twoColumnContentSections, + contentInitialized: true, + }); + }; + + fetchPageData(); + }, []); + + if (!contentData.contentInitialized) { + return <>loading...</>; + } + + return ( + <TwoColumnContentSection {...contentData.twoColumnContentSections[0]} /> + ); +}; From b59629400a1dac55719c86614b7d06b36eeebf1c Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Mon, 17 Jun 2024 18:38:04 -0700 Subject: [PATCH 04/25] rm resource count state --- app/pages/HomePage/HomePage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 6becf9733..43e748d96 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; -import { getResourceCount } from "utils/DataService"; import { Footer } from "components/ui"; import imageUrlBuilder from "@sanity/image-url"; import Hero from "components/ui/Hero/Hero"; @@ -24,11 +23,9 @@ export interface HeroData { } export const HomePage = () => { - const [resourceCount, setResourceCount] = useState<number | undefined>(); const [heroData, setHeroData] = useState<HeroData | null>(null); useEffect(() => { - getResourceCount().then((count: number) => setResourceCount(count)); const fetchHeroData = async () => { const query = `*[_type == "hero" && name == "Home Hero"][0]{ name, From bb7a42fad77aedb3080805419855bdf47d14c460 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Tue, 18 Jun 2024 15:32:21 -0700 Subject: [PATCH 05/25] refactor into one api call from sanity --- app/pages/HomePage/HomePage.tsx | 69 +++++++++++++++++++++++---------- 1 file changed, 48 insertions(+), 21 deletions(-) diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 43e748d96..40b0d29da 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from "react"; +import imageUrlBuilder from "@sanity/image-url"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { Footer } from "components/ui"; -import imageUrlBuilder from "@sanity/image-url"; import Hero from "components/ui/Hero/Hero"; import { OppEventCardSection } from "components/ui/Section/OppEventCardSection"; +import React, { useEffect, useState } from "react"; import { client } from "../../sanity"; import { HomePageContentColumn } from "./HomePageContentColumn"; @@ -22,40 +22,67 @@ export interface HeroData { buttons: ButtonType[]; } +interface OppEventCardData { + header: string; + subheader?: string; + backgroundColor?: string; + link?: { + label: string; + href: string; + }; +} + +interface HomePageData { + heroSection: HeroData; + categoriesSection: { + header: string; + subheader: string; + }; + opportunitySection: OppEventCardData; + eventSection: OppEventCardData; +} + export const HomePage = () => { - const [heroData, setHeroData] = useState<HeroData | null>(null); + const [homePageData, setHomePageData] = useState<HomePageData | null>(null); useEffect(() => { - const fetchHeroData = async () => { - const query = `*[_type == "hero" && name == "Home Hero"][0]{ - name, - title, - description, - backgroundImage, - buttons + const fetchHomePageData = async () => { + const query = `*[_type == "homePage" && name == "Home Page"][0]{ + 'heroSection': *[_type == "hero" && name == "Home Hero"][0], + categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->{...}}, + opportunitySection {...,'opportunityCards': opportunityCards[]->{...}}, + eventSection {...,'eventCards': eventCards[]-> {...}}, }`; - const result: HeroData = await client.fetch(query); - setHeroData(result); + + const result: HomePageData = await client.fetch(query); + + setHomePageData(result); }; - fetchHeroData(); + fetchHomePageData(); }, []); - if (!heroData) { + if (!homePageData) { return <div>Loading...</div>; } + const { categoriesSection, opportunitySection, eventSection, heroSection } = + homePageData; + return ( <> <Hero - backgroundImage={builder.image(heroData.backgroundImage).url()} - title={heroData.title} - description={heroData.description} - buttons={heroData.buttons} + backgroundImage={builder.image(heroSection.backgroundImage).url()} + title={heroSection.title} + description={heroSection.description} + buttons={heroSection.buttons} + /> + {/* <CategoryCardSection sectionData={categoriesSection} /> */} + <OppEventCardSection + sectionType="opportunity" + sectionData={opportunitySection} /> - {/* Category Card */} - <OppEventCardSection sectionType="opportunity" /> - <OppEventCardSection sectionType="event" /> + <OppEventCardSection sectionType="event" sectionData={eventSection} /> <HomePageContentColumn /> {/* Newsletter Component */} <Footer /> From 19564ca3053e616d93396650f04e1f28629159e5 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Tue, 18 Jun 2024 16:32:26 -0700 Subject: [PATCH 06/25] connect oppevent cards to sanity data --- .../ui/Cards/OppEventCard.module.scss | 5 ++ app/components/ui/Cards/OppEventCard.tsx | 5 +- .../Section/OppEventCardSection.module.scss | 72 ++++++++-------- .../ui/Section/OppEventCardSection.tsx | 85 ++++++++----------- app/pages/HomePage/HomePage.tsx | 24 ++---- 5 files changed, 89 insertions(+), 102 deletions(-) diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss index eb5b920c7..658d19057 100644 --- a/app/components/ui/Cards/OppEventCard.module.scss +++ b/app/components/ui/Cards/OppEventCard.module.scss @@ -36,6 +36,7 @@ display: flex; flex-direction: column; justify-content: space-between; + align-items: flex-start; gap: $general-spacing-md; padding: $general-spacing-lg; height: 100%; @@ -43,6 +44,10 @@ @media screen and (max-width: $break-tablet-p) { padding: $general-spacing-md; + + button { + justify-content: flex-start; + } } .contentTitle { diff --git a/app/components/ui/Cards/OppEventCard.tsx b/app/components/ui/Cards/OppEventCard.tsx index af3ff804b..0829e95f2 100644 --- a/app/components/ui/Cards/OppEventCard.tsx +++ b/app/components/ui/Cards/OppEventCard.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { Button } from "components/ui/inline/Button/Button"; import styles from "./OppEventCard.module.scss"; import { OppEventDate } from "./OppEventDate"; @@ -32,7 +33,9 @@ export const OppEventCard = (props: OppEventCardProps) => { </div> </div> - <p className={styles.contentSubtext}>View more</p> + <Button arrowVariant="after" variant="linkBlue" size="lg"> + View more + </Button> </div> </div> ); diff --git a/app/components/ui/Section/OppEventCardSection.module.scss b/app/components/ui/Section/OppEventCardSection.module.scss index 0062ebf3f..114dbf267 100644 --- a/app/components/ui/Section/OppEventCardSection.module.scss +++ b/app/components/ui/Section/OppEventCardSection.module.scss @@ -8,8 +8,19 @@ width: 100%; padding: $spacing-24 $spacing-32; - &.event { - background: $color-brand-dark; + &.secondary { + background-color: $color-secondary; + h2, + p { + color: $white; + } + } + &.tertiary { + background-color: $color-brand-dark; + h2, + p { + color: $white; + } } @media screen and (max-width: $break-tablet-s) { @@ -24,46 +35,39 @@ h2 { margin-bottom: $general-spacing-s; } - - &.event { - h2, - p { - color: $white; - } - } - - @media screen and (max-width: $break-tablet-p) { - gap: $general-spacing-s; - flex-direction: column; - align-items: stretch; - } } - .cardsContainer { - display: flex; - gap: $general-spacing-lg; - width: 100%; - height: 100%; - - &.event { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); + @media screen and (max-width: $break-tablet-p) { + gap: $general-spacing-s; + flex-direction: column; + align-items: stretch; + } +} - @media screen and (max-width: $break-tablet-p) { - display: flex; - flex-direction: column; - } - } +.cardsContainer { + display: flex; + gap: $general-spacing-lg; + width: 100%; + height: 100%; - @media screen and (max-width: 1336px) { - display: grid; - grid-template-columns: repeat(2, 1fr); - } + &.event { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); @media screen and (max-width: $break-tablet-p) { display: flex; flex-direction: column; } } + + @media screen and (max-width: 1336px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + + @media screen and (max-width: $break-tablet-p) { + display: flex; + flex-direction: column; + } } diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx index d2976e42e..53ea5bacf 100644 --- a/app/components/ui/Section/OppEventCardSection.tsx +++ b/app/components/ui/Section/OppEventCardSection.tsx @@ -1,22 +1,17 @@ import imageUrlBuilder from "@sanity/image-url"; -import React, { useEffect, useState } from "react"; +import React from "react"; +import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { client } from "../../../sanity"; -import { OppEventCard } from "../Cards/OppEventCard"; import { Button } from "../inline/Button/Button"; import styles from "./OppEventCardSection.module.scss"; +import { OppEventCard } from "../Cards/OppEventCard"; export interface EventData { slug: { current: string; _type: string; }; - image: { - asset: { - _ref: string; - _type: string; - }; - _type: string; - }; + image: SanityImageSource; /* Event Types*/ title?: string; @@ -32,63 +27,51 @@ export interface EventData { end_date?: Date; } -export interface OppEventCardSectionProps { - sectionType: "opportunity" | "event"; +export interface OppEventCardData { + header: string; + subheader?: string; + backgroundColor: string; + link?: { + label: string; + href: string; + }; + opportunityCards?: EventData[]; + eventCards?: EventData[]; +} + +interface OppEventCardSectionProps { + sectionType: "event" | "opportunity"; + sectionData: OppEventCardData; } -/* -TODO: Future PRs - - Pull in Sanity data for header, description, button text - - Update Button to use global button component - - Update header button and view more button - - include link to opportunity/event page -*/ export const OppEventCardSection = (props: OppEventCardSectionProps) => { - const { sectionType } = props; - const [eventData, setEventData] = useState<EventData[]>([]); - const [isLoading, setIsLoading] = useState<boolean>(false); + const { sectionType, sectionData } = props; + const { header, subheader, backgroundColor, link } = sectionData; const builder = imageUrlBuilder(client); - useEffect(() => { - const fetchEventData = async () => { - const fields = { - event: "title, slug, date, image", - opportunity: "name, slug, start_date, end_date, image", - }; - const query = `*[_type == "${sectionType}"] | order(_createdAt desc)[0...4] { ${fields[sectionType]} }`; - - setIsLoading(true); - const result: EventData[] = await client.fetch(query); - setIsLoading(false); - - setEventData(result); - }; - - fetchEventData(); - }, [sectionType]); - - if (isLoading) { + if (!sectionData) { return <div>Loading...</div>; } - if (!eventData) { - return null; - } + const cardData = sectionData.opportunityCards || sectionData.eventCards; return ( - <div className={`${styles.oppEventSection} ${styles[sectionType]}`}> - <div className={`${styles.oppEvent__header} ${styles[sectionType]}`}> + <div className={`${styles.oppEventSection} ${styles[backgroundColor]}`}> + <div className={`${styles.oppEvent__header}`}> <div> - <h2> - {sectionType === "event" ? "Upcoming events" : "Open Opportunties"} - </h2> - <p>Description text explaining this section goes here.</p> + <h2>{header}</h2> + {subheader && <p>{subheader}</p>} </div> - <Button>See all opportunities/events</Button> + + {link && ( + <Button href={link.href} arrowVariant="after"> + {link.label} + </Button> + )} </div> <div className={`${styles.cardsContainer} ${styles[sectionType]}`}> - {eventData.map((event): JSX.Element => { + {cardData?.map((event): JSX.Element => { const { title, name, slug, date, start_date, end_date, image } = event; const cardImage = builder.image(image).url(); diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 40b0d29da..9dea67bc3 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -2,7 +2,10 @@ import imageUrlBuilder from "@sanity/image-url"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { Footer } from "components/ui"; import Hero from "components/ui/Hero/Hero"; -import { OppEventCardSection } from "components/ui/Section/OppEventCardSection"; +import { + OppEventCardData, + OppEventCardSection, +} from "components/ui/Section/OppEventCardSection"; import React, { useEffect, useState } from "react"; import { client } from "../../sanity"; import { HomePageContentColumn } from "./HomePageContentColumn"; @@ -22,16 +25,6 @@ export interface HeroData { buttons: ButtonType[]; } -interface OppEventCardData { - header: string; - subheader?: string; - backgroundColor?: string; - link?: { - label: string; - href: string; - }; -} - interface HomePageData { heroSection: HeroData; categoriesSection: { @@ -49,9 +42,9 @@ export const HomePage = () => { const fetchHomePageData = async () => { const query = `*[_type == "homePage" && name == "Home Page"][0]{ 'heroSection': *[_type == "hero" && name == "Home Hero"][0], - categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->{...}}, - opportunitySection {...,'opportunityCards': opportunityCards[]->{...}}, - eventSection {...,'eventCards': eventCards[]-> {...}}, + categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->}, + opportunitySection {...,'opportunityCards': opportunityCards[]->}, + eventSection {...,'eventCards': eventCards[]->}, }`; const result: HomePageData = await client.fetch(query); @@ -66,8 +59,7 @@ export const HomePage = () => { return <div>Loading...</div>; } - const { categoriesSection, opportunitySection, eventSection, heroSection } = - homePageData; + const { opportunitySection, eventSection, heroSection } = homePageData; return ( <> From 2bfb53d90770922406959dadacb5beaca8e8583d Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Tue, 18 Jun 2024 16:55:03 -0700 Subject: [PATCH 07/25] fix button issue with two column content, misc changes --- .../Section/OppEventCardSection.module.scss | 52 ++++++++++--------- .../TwoColumnContentSection.module.scss | 2 +- .../TwoColumnContentSection.tsx | 9 ++-- app/pages/HomePage/HomePageContentColumn.tsx | 8 +-- app/styles/st-base/_forms.scss | 36 ++++++------- 5 files changed, 56 insertions(+), 51 deletions(-) diff --git a/app/components/ui/Section/OppEventCardSection.module.scss b/app/components/ui/Section/OppEventCardSection.module.scss index 114dbf267..3c9c12421 100644 --- a/app/components/ui/Section/OppEventCardSection.module.scss +++ b/app/components/ui/Section/OppEventCardSection.module.scss @@ -10,6 +10,7 @@ &.secondary { background-color: $color-secondary; + h2, p { color: $white; @@ -31,43 +32,44 @@ display: flex; align-items: center; justify-content: space-between; + gap: $general-spacing-lg; h2 { margin-bottom: $general-spacing-s; } - } - @media screen and (max-width: $break-tablet-p) { - gap: $general-spacing-s; - flex-direction: column; - align-items: stretch; + @media screen and (max-width: $break-tablet-p) { + gap: $general-spacing-s; + flex-direction: column; + align-items: stretch; + } } -} -.cardsContainer { - display: flex; - gap: $general-spacing-lg; - width: 100%; - height: 100%; + .cardsContainer { + display: flex; + gap: $general-spacing-lg; + width: 100%; + height: 100%; - &.event { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); + &.event { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + + @media screen and (max-width: $break-tablet-p) { + display: flex; + flex-direction: column; + } + } + + @media screen and (max-width: 1336px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } @media screen and (max-width: $break-tablet-p) { display: flex; flex-direction: column; } } - - @media screen and (max-width: 1336px) { - display: grid; - grid-template-columns: repeat(2, 1fr); - } - - @media screen and (max-width: $break-tablet-p) { - display: flex; - flex-direction: column; - } } diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss index f1d4049f7..20851f60d 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss @@ -53,7 +53,7 @@ margin-left: 7%; margin-right: 18%; display: inline-block; - margin-top: $general-spacing-md; + margin-top: $general-spacing-xl; margin-bottom: $general-spacing-md; } diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx index a9a8d0fcc..4e6272e24 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx @@ -6,6 +6,7 @@ import BlockContent, { import imageUrlBuilder from "@sanity/image-url"; import styles from "./TwoColumnContentSection.module.scss"; import { client } from "../../../sanity"; +import { Button } from "../inline/Button/Button"; const builder = imageUrlBuilder(client); @@ -81,9 +82,11 @@ export const TwoColumnContentSection = ({ serializers={{ types: { block: BlockRenderer } }} /> {contentLinkButtonText && ( - <a className={styles.contentLinkButton} href={contentLinkButtonUrl}> - {contentLinkButtonText} - </a> + <div className={styles.contentLinkButton}> + <Button href={contentLinkButtonUrl} arrowVariant="after"> + {contentLinkButtonText} + </Button> + </div> )} </div> </section> diff --git a/app/pages/HomePage/HomePageContentColumn.tsx b/app/pages/HomePage/HomePageContentColumn.tsx index cc389af6f..cd8ccfba7 100644 --- a/app/pages/HomePage/HomePageContentColumn.tsx +++ b/app/pages/HomePage/HomePageContentColumn.tsx @@ -17,12 +17,12 @@ export const HomePageContentColumn = () => { }); useEffect(() => { - const fetchPageData = async () => { - const fetchedPageData = await client.fetch( + const fetchContentData = async () => { + const fetchedContentData = await client.fetch( `*[_type == 'contentPageType' && name == 'Home']{twoColumnContentSections[]->}` ); - const { twoColumnContentSections } = fetchedPageData[0]; + const { twoColumnContentSections } = fetchedContentData[0]; setContentData({ twoColumnContentSections, @@ -30,7 +30,7 @@ export const HomePageContentColumn = () => { }); }; - fetchPageData(); + fetchContentData(); }, []); if (!contentData.contentInitialized) { diff --git a/app/styles/st-base/_forms.scss b/app/styles/st-base/_forms.scss index 407ad3171..6a8429431 100644 --- a/app/styles/st-base/_forms.scss +++ b/app/styles/st-base/_forms.scss @@ -33,25 +33,25 @@ textarea { } // This button is affecting all buttons globally -button { - @extend %font-size-default; - border: 0; - // height: calc-em(44px); - padding: calc-em(6px) calc-em(20px); - color: $color-white; - background: $color-green; - display: inline-block; - font-weight: 600; - &:active, - &:hover, - &:focus { - box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); - } +// button { +// @extend %font-size-default; +// border: 0; +// // height: calc-em(44px); +// padding: calc-em(6px) calc-em(20px); +// color: $color-white; +// background: $color-green; +// display: inline-block; +// font-weight: 600; +// &:active, +// &:hover, +// &:focus { +// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); +// } - &.danger { - background: $color-red; - } -} +// &.danger { +// background: $color-red; +// } +// } button.filter-chip { border-radius: 3px; From 63eef688b87f1f483bc010043ad21f306fa0eba7 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 15:16:42 -0700 Subject: [PATCH 08/25] refactor home page section component --- .../components/Section/Section.module.scss | 72 ++++++++++++------- .../HomePage/components/Section/Section.tsx | 27 +++++-- 2 files changed, 69 insertions(+), 30 deletions(-) diff --git a/app/pages/HomePage/components/Section/Section.module.scss b/app/pages/HomePage/components/Section/Section.module.scss index 813fa797b..72f4e4f35 100644 --- a/app/pages/HomePage/components/Section/Section.module.scss +++ b/app/pages/HomePage/components/Section/Section.module.scss @@ -1,37 +1,59 @@ @import "app/styles/utils/_helpers.scss"; .section { - color: #202020; - margin-top: 100px; - position: relative; - @media screen and (max-width: 600px) { - margin-top: 50px; + padding: $spacing-24 $spacing-32; + + @media screen and (max-width: $break-tablet-p) { + padding: $general-spacing-xl $general-spacing-md; } -} -.content { - margin-left: auto; - margin-right: auto; - max-width: $width-content; - width: 90%; + &.secondary { + background-color: $color-secondary; + .description { + color: $white; + } + } + + &.tertiary { + background-color: $color-brand-dark; + .title, + .description { + color: $white; + } + } } -.title { - font-weight: 600; - font-size: 42px; - @media screen and (max-width: 767px) { - font-size: 36px; +.header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: $general-spacing-lg; + gap: $general-spacing-xl; + + @media screen and (max-width: $break-tablet-s) { + gap: $general-spacing-s; + align-items: stretch; + flex-direction: column; } - @media screen and (max-width: 600px) { - font-size: 24px; + + .title { + margin-bottom: $general-spacing-s; + @media screen and (max-width: $break-tablet-p) { + font-size: 1.625rem; + } } -} -.description { - font-size: 18px; - margin-top: 5px; - @media screen and (max-width: 600px) { - font-size: 14px; - margin-top: 10px; + .description { + font-size: 18px; + color: $text-secondary; + @media screen and (max-width: $break-tablet-p) { + font-size: 1rem; + } } } + +.content { + margin-left: auto; + margin-right: auto; + max-width: $width-content; +} diff --git a/app/pages/HomePage/components/Section/Section.tsx b/app/pages/HomePage/components/Section/Section.tsx index 95e178f48..0830e569e 100644 --- a/app/pages/HomePage/components/Section/Section.tsx +++ b/app/pages/HomePage/components/Section/Section.tsx @@ -1,20 +1,37 @@ +import { Button } from "components/ui/inline/Button/Button"; import React from "react"; - import styles from "./Section.module.scss"; export const HomePageSection = ({ title, description, + backgroundColor, + link, children, }: { - title: string; + title?: string; description?: string; + backgroundColor: string; children?: React.ReactNode; + link?: { + label: string; + href: string; + }; }) => ( - <section className={styles.section}> + <section className={`${styles.section} ${styles[backgroundColor]}`}> <div className={styles.content}> - <h1 className={styles.title}>{title}</h1> - <div className={styles.description}>{description}</div> + <div className={styles.header}> + <div> + <h2 className={styles.title}>{title}</h2> + <p className={styles.description}>{description}</p> + </div> + + {link && ( + <Button href={link.href} arrowVariant="after" size="lg"> + {link.label} + </Button> + )} + </div> {children} </div> </section> From c8d2fe4e1702f4764e6eeb0208db289872d38d39 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 15:17:07 -0700 Subject: [PATCH 09/25] add focus/active state on event cards --- app/components/ui/Cards/OppEventCard.module.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss index 658d19057..ad72ebd6a 100644 --- a/app/components/ui/Cards/OppEventCard.module.scss +++ b/app/components/ui/Cards/OppEventCard.module.scss @@ -10,6 +10,10 @@ position: relative; cursor: pointer; + &:focus-within { + outline: 3px solid $color-secondary + } + &.opportunity { flex-direction: column; } @@ -53,6 +57,11 @@ .contentTitle { line-height: 125%; margin-bottom: $general-spacing-md; + + &:active, + :focus { + outline: none; + } } .contentTitle a { From 32a4e1ada0d01f38153bd7c2f7a929d584987902 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 15:17:42 -0700 Subject: [PATCH 10/25] refactor event section to use home page section --- .../Section/OppEventCardSection.module.scss | 76 ++++--------------- .../ui/Section/OppEventCardSection.tsx | 23 ++---- 2 files changed, 23 insertions(+), 76 deletions(-) diff --git a/app/components/ui/Section/OppEventCardSection.module.scss b/app/components/ui/Section/OppEventCardSection.module.scss index 3c9c12421..cbc4554ae 100644 --- a/app/components/ui/Section/OppEventCardSection.module.scss +++ b/app/components/ui/Section/OppEventCardSection.module.scss @@ -1,75 +1,29 @@ @import "../../../styles/utils/_helpers.scss"; -.oppEventSection { +.cardsContainer { display: flex; - flex-direction: column; - gap: $general-spacing-xl; - overflow: hidden; + gap: $general-spacing-lg; width: 100%; - padding: $spacing-24 $spacing-32; + height: 100%; - &.secondary { - background-color: $color-secondary; - - h2, - p { - color: $white; - } - } - &.tertiary { - background-color: $color-brand-dark; - h2, - p { - color: $white; - } - } - - @media screen and (max-width: $break-tablet-s) { - padding: $general-spacing-xl $general-spacing-md; - } - - .oppEvent__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: $general-spacing-lg; - - h2 { - margin-bottom: $general-spacing-s; - } + &.event { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); @media screen and (max-width: $break-tablet-p) { - gap: $general-spacing-s; + display: flex; flex-direction: column; - align-items: stretch; } } - .cardsContainer { - display: flex; - gap: $general-spacing-lg; - width: 100%; - height: 100%; - - &.event { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); - - @media screen and (max-width: $break-tablet-p) { - display: flex; - flex-direction: column; - } - } - - @media screen and (max-width: 1336px) { - display: grid; - grid-template-columns: repeat(2, 1fr); - } + @media screen and (max-width: 1336px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } - @media screen and (max-width: $break-tablet-p) { - display: flex; - flex-direction: column; - } + @media screen and (max-width: $break-tablet-p) { + display: flex; + flex-direction: column; } } diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx index 53ea5bacf..160753f0d 100644 --- a/app/components/ui/Section/OppEventCardSection.tsx +++ b/app/components/ui/Section/OppEventCardSection.tsx @@ -5,6 +5,7 @@ import { client } from "../../../sanity"; import { Button } from "../inline/Button/Button"; import styles from "./OppEventCardSection.module.scss"; import { OppEventCard } from "../Cards/OppEventCard"; +import { HomePageSection } from "pages/HomePage/components/Section"; export interface EventData { slug: { @@ -56,20 +57,12 @@ export const OppEventCardSection = (props: OppEventCardSectionProps) => { const cardData = sectionData.opportunityCards || sectionData.eventCards; return ( - <div className={`${styles.oppEventSection} ${styles[backgroundColor]}`}> - <div className={`${styles.oppEvent__header}`}> - <div> - <h2>{header}</h2> - {subheader && <p>{subheader}</p>} - </div> - - {link && ( - <Button href={link.href} arrowVariant="after"> - {link.label} - </Button> - )} - </div> - + <HomePageSection + title={header} + description={subheader} + backgroundColor={backgroundColor} + link={link} + > <div className={`${styles.cardsContainer} ${styles[sectionType]}`}> {cardData?.map((event): JSX.Element => { const { title, name, slug, date, start_date, end_date, image } = @@ -89,6 +82,6 @@ export const OppEventCardSection = (props: OppEventCardSectionProps) => { ); })} </div> - </div> + </HomePageSection> ); }; From 61b817541545eefebc5257aae1bd5ef91e72d62c Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 15:39:52 -0700 Subject: [PATCH 11/25] fix small breakpoint issue with two column section --- .../TwoColumnContentSection.module.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss index 20851f60d..d8f2e49e7 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.module.scss @@ -77,11 +77,11 @@ .twoColumnContentSectionContainer { display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr; + grid-template-columns: none; } .contentContainer_right { + padding: $general-spacing-md; grid-row: 1; } @@ -91,16 +91,17 @@ } .contentLinkButton { + width: 100%; margin: 0px 0px; - padding: $general-spacing-md $general-spacing-xl; } .contentContainer_left { + padding: $general-spacing-md; grid-row: 1; } .imageContainer_left { grid-row: 2; - grid-column: 1; + grid-column: none; } } From 71efed697ab94c63cfd3f779758a4ed40c8a9b12 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 15:40:22 -0700 Subject: [PATCH 12/25] fix prettier --- app/components/ui/Cards/OppEventCard.module.scss | 4 ++-- app/pages/HomePage/HomePage.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss index ad72ebd6a..019b6d8b3 100644 --- a/app/components/ui/Cards/OppEventCard.module.scss +++ b/app/components/ui/Cards/OppEventCard.module.scss @@ -11,9 +11,9 @@ cursor: pointer; &:focus-within { - outline: 3px solid $color-secondary + outline: 3px solid $color-secondary; } - + &.opportunity { flex-direction: column; } diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 9dea67bc3..a0eff0bfb 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -9,6 +9,7 @@ import { import React, { useEffect, useState } from "react"; import { client } from "../../sanity"; import { HomePageContentColumn } from "./HomePageContentColumn"; +import { HomePageSection } from "./components/Section"; const builder = imageUrlBuilder(client); @@ -40,6 +41,7 @@ export const HomePage = () => { useEffect(() => { const fetchHomePageData = async () => { + /* Create and pull in 2 Column content data after schema is made*/ const query = `*[_type == "homePage" && name == "Home Page"][0]{ 'heroSection': *[_type == "hero" && name == "Home Hero"][0], categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->}, @@ -69,7 +71,7 @@ export const HomePage = () => { description={heroSection.description} buttons={heroSection.buttons} /> - {/* <CategoryCardSection sectionData={categoriesSection} /> */} + {/* <CategorySection /> */} <OppEventCardSection sectionType="opportunity" sectionData={opportunitySection} From d94ecb8d7314bed13ded9310e6878613284f786a Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 16:13:27 -0700 Subject: [PATCH 13/25] fix build error --- app/pages/HomePage/HomePage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index a0eff0bfb..a90786f78 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -9,7 +9,6 @@ import { import React, { useEffect, useState } from "react"; import { client } from "../../sanity"; import { HomePageContentColumn } from "./HomePageContentColumn"; -import { HomePageSection } from "./components/Section"; const builder = imageUrlBuilder(client); @@ -41,7 +40,9 @@ export const HomePage = () => { useEffect(() => { const fetchHomePageData = async () => { - /* Create and pull in 2 Column content data after schema is made*/ + /* + Create and pull in 2 Column content data after schema is made + */ const query = `*[_type == "homePage" && name == "Home Page"][0]{ 'heroSection': *[_type == "hero" && name == "Home Hero"][0], categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->}, From 2470d9cf2493cb6f8ae2a5db8b5dacbd0cec8e91 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Wed, 19 Jun 2024 16:17:28 -0700 Subject: [PATCH 14/25] fix build errors again --- app/components/ui/Section/OppEventCardSection.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx index 160753f0d..8d6c64821 100644 --- a/app/components/ui/Section/OppEventCardSection.tsx +++ b/app/components/ui/Section/OppEventCardSection.tsx @@ -1,11 +1,10 @@ import imageUrlBuilder from "@sanity/image-url"; -import React from "react"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; +import { HomePageSection } from "pages/HomePage/components/Section"; +import React from "react"; import { client } from "../../../sanity"; -import { Button } from "../inline/Button/Button"; -import styles from "./OppEventCardSection.module.scss"; import { OppEventCard } from "../Cards/OppEventCard"; -import { HomePageSection } from "pages/HomePage/components/Section"; +import styles from "./OppEventCardSection.module.scss"; export interface EventData { slug: { From d56197adc26c3b14fc28e3894d8f0a9cb07daa72 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 10:45:50 -0700 Subject: [PATCH 15/25] add in category cards --- app/components/ui/Cards/CategoryCard.tsx | 10 +- .../ui/Section/CategorySection.module.scss | 5 - app/components/ui/Section/CategorySection.tsx | 123 ++++++++++-------- app/pages/HomePage/HomePage.tsx | 15 ++- .../components/Section/Section.module.scss | 2 +- 5 files changed, 84 insertions(+), 71 deletions(-) diff --git a/app/components/ui/Cards/CategoryCard.tsx b/app/components/ui/Cards/CategoryCard.tsx index e504e7724..590c6e0de 100644 --- a/app/components/ui/Cards/CategoryCard.tsx +++ b/app/components/ui/Cards/CategoryCard.tsx @@ -3,16 +3,22 @@ import styles from "./CategoryCard.module.scss"; interface CategoryCardProps { label: string; - icon: string; + slug: string; + icon: { + name: string; + provider: string; + }; } + export const CategoryCard = (props: CategoryCardProps) => { const { label, icon } = props; const searchQuery = label === "See all services" ? "" : encodeURIComponent(label); + const iconName = `${icon.provider} ${icon.name}`; return ( <a href={`/service-finder${searchQuery}`} className={styles.categoryCard}> - <span className={`fas ${icon} ${styles.icon}`} /> + <span className={`${iconName} ${styles.icon}`} /> <p className={styles.categoryTitle}>{label}</p> </a> ); diff --git a/app/components/ui/Section/CategorySection.module.scss b/app/components/ui/Section/CategorySection.module.scss index 5105cd622..77d10e597 100644 --- a/app/components/ui/Section/CategorySection.module.scss +++ b/app/components/ui/Section/CategorySection.module.scss @@ -2,16 +2,11 @@ .categorySection { background-color: $color-secondary; - padding: $spacing-24 $spacing-32; h2 { margin-bottom: $general-spacing-s; } - @media screen and (max-width: $break-tablet-p) { - padding: $general-spacing-xl $general-spacing-md; - } - .categoryCards { display: grid; grid-template-columns: repeat(4, 1fr); diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx index b2e7ce051..e73607247 100644 --- a/app/components/ui/Section/CategorySection.tsx +++ b/app/components/ui/Section/CategorySection.tsx @@ -1,67 +1,76 @@ import React from "react"; import { CategoryCard } from "../Cards/CategoryCard"; import styles from "./CategorySection.module.scss"; +import { HomePageSection } from "pages/HomePage/components/Section"; -const categories = [ - { - label: "Arts, Culture, & Identity", - icon: "fa-palette", - }, - { - label: "Childcare", - icon: "fa-baby", - }, - { - label: "Education", - icon: "fa-school", - }, - { - label: "Family Support", - icon: "fa-people-roof", - }, - { - label: "Health & Wellness", - icon: "fa-heart-pulse", - }, - { - label: "Sports & Recreation", - icon: "fa-running", - }, - { - label: "Youth Workforce & Life Skills", - icon: "fa-briefcase", - }, - { - label: "See all services", - icon: "fa-arrow-right", - }, -]; +interface Category { + icon: { + name: string; + provider: string; + }; + label: string; + slug: string; + name: string; +} -/* -TODO: future PR -- Pull in title and description data -- Remove hardcoded category data -- add in background color field in sanity schema -*/ +interface FeaturedCategoriesSection { + category: Category[]; + name: string; +} + +export interface FeaturedCategoriesData { + header: string; + subheader: string; + backgroundColor: string; + featuredCategoriesSection: FeaturedCategoriesSection[]; +} + +interface CategorySectionProps { + sectionData: FeaturedCategoriesData; +} + +export const CategorySection = (props: CategorySectionProps) => { + const { sectionData } = props; + + if (!sectionData) { + return <div>Loading...</div>; + } + + const { header, subheader, backgroundColor, featuredCategoriesSection } = + sectionData; + const categories = featuredCategoriesSection[0].category; + const navigationIcon = { + name: "fa-arrow-right", + provider: "fas", + }; -export const CategorySection = () => { - // const {sectionData} = props; - // const {header, subheader, backgroundColor} = sectionData return ( - // <HomePageSection title={header} description={subheader} backgroundColor={backgroundColor}> - <div className={styles.categorySection}> - <div className={styles.categoryCards}> - {categories.map((category) => { - return ( - <CategoryCard - key={category.label} - label={category.label} - icon={category.icon} - /> - ); - })} + <HomePageSection + title={header} + description={subheader} + backgroundColor={backgroundColor} + > + <div className={styles.categorySection}> + <div className={styles.categoryCards}> + {categories.map((category) => { + console.log(category); + return ( + <CategoryCard + key={category.label} + label={category.label} + slug={category.slug} + icon={category.icon} + /> + ); + })} + <CategoryCard + key="See all services" + label="See all services" + slug={"/"} + icon={navigationIcon} + /> + </div> </div> - </div> - // </HomePageSection> + </HomePageSection> ); }; diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index a90786f78..d46a2cb9c 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -9,6 +9,10 @@ import { import React, { useEffect, useState } from "react"; import { client } from "../../sanity"; import { HomePageContentColumn } from "./HomePageContentColumn"; +import { + CategorySection, + FeaturedCategoriesData, +} from "components/ui/Section/CategorySection"; const builder = imageUrlBuilder(client); @@ -27,10 +31,7 @@ export interface HeroData { interface HomePageData { heroSection: HeroData; - categoriesSection: { - header: string; - subheader: string; - }; + categoriesSection: FeaturedCategoriesData; opportunitySection: OppEventCardData; eventSection: OppEventCardData; } @@ -62,7 +63,9 @@ export const HomePage = () => { return <div>Loading...</div>; } - const { opportunitySection, eventSection, heroSection } = homePageData; + const { categoriesSection, opportunitySection, eventSection, heroSection } = + homePageData; + return ( <> @@ -72,7 +75,7 @@ export const HomePage = () => { description={heroSection.description} buttons={heroSection.buttons} /> - {/* <CategorySection /> */} + <CategorySection sectionData={categoriesSection} /> <OppEventCardSection sectionType="opportunity" sectionData={opportunitySection} diff --git a/app/pages/HomePage/components/Section/Section.module.scss b/app/pages/HomePage/components/Section/Section.module.scss index 72f4e4f35..1e4abc56a 100644 --- a/app/pages/HomePage/components/Section/Section.module.scss +++ b/app/pages/HomePage/components/Section/Section.module.scss @@ -10,7 +10,7 @@ &.secondary { background-color: $color-secondary; .description { - color: $white; + color: $text-primary; } } From db63bdd9deec88f2a99a1ec7590e85cb4892771e Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 12:02:54 -0700 Subject: [PATCH 16/25] fetch home page 2 column content --- .../TwoColumnContentSection.tsx | 2 + app/pages/HomePage/HomePage.tsx | 32 ++++++++++---- app/pages/HomePage/HomePageContentColumn.tsx | 43 ------------------- 3 files changed, 25 insertions(+), 52 deletions(-) delete mode 100644 app/pages/HomePage/HomePageContentColumn.tsx diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx index 4e6272e24..5cebbada9 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx @@ -38,6 +38,8 @@ const BlockRenderer = (props: { }; export interface TwoColumnContent { + // Fix in sanity schema + twoColumnContentSections: TwoColumnContent; mediaAlignment: string; image: SanityImageSource; imageAlt: string | undefined; diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index d46a2cb9c..c8d6524b3 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -2,17 +2,20 @@ import imageUrlBuilder from "@sanity/image-url"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { Footer } from "components/ui"; import Hero from "components/ui/Hero/Hero"; +import { + CategorySection, + FeaturedCategoriesData, +} from "components/ui/Section/CategorySection"; import { OppEventCardData, OppEventCardSection, } from "components/ui/Section/OppEventCardSection"; +import { + TwoColumnContent, + TwoColumnContentSection, +} from "components/ui/TwoColumnContentSection/TwoColumnContentSection"; import React, { useEffect, useState } from "react"; import { client } from "../../sanity"; -import { HomePageContentColumn } from "./HomePageContentColumn"; -import { - CategorySection, - FeaturedCategoriesData, -} from "components/ui/Section/CategorySection"; const builder = imageUrlBuilder(client); @@ -34,6 +37,7 @@ interface HomePageData { categoriesSection: FeaturedCategoriesData; opportunitySection: OppEventCardData; eventSection: OppEventCardData; + twoColumnContentSections: TwoColumnContent[]; } export const HomePage = () => { @@ -49,6 +53,9 @@ export const HomePage = () => { categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->}, opportunitySection {...,'opportunityCards': opportunityCards[]->}, eventSection {...,'eventCards': eventCards[]->}, + 'twoColumnContentSections': *[_type == 'contentPageType' && name == 'Home']{ + twoColumnContentSections[0]-> + } }`; const result: HomePageData = await client.fetch(query); @@ -63,9 +70,13 @@ export const HomePage = () => { return <div>Loading...</div>; } - const { categoriesSection, opportunitySection, eventSection, heroSection } = - homePageData; - + const { + categoriesSection, + opportunitySection, + eventSection, + heroSection, + twoColumnContentSections, + } = homePageData; return ( <> @@ -81,7 +92,10 @@ export const HomePage = () => { sectionData={opportunitySection} /> <OppEventCardSection sectionType="event" sectionData={eventSection} /> - <HomePageContentColumn /> + {/* Fix Sanity schema for two column */} + <TwoColumnContentSection + {...twoColumnContentSections[0].twoColumnContentSections} + /> {/* Newsletter Component */} <Footer /> </> diff --git a/app/pages/HomePage/HomePageContentColumn.tsx b/app/pages/HomePage/HomePageContentColumn.tsx deleted file mode 100644 index cd8ccfba7..000000000 --- a/app/pages/HomePage/HomePageContentColumn.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { - TwoColumnContent, - TwoColumnContentSection, -} from "components/ui/TwoColumnContentSection/TwoColumnContentSection"; -import { client } from "../../sanity"; - -interface ContentState { - contentInitialized: boolean; - twoColumnContentSections: TwoColumnContent[]; -} - -export const HomePageContentColumn = () => { - const [contentData, setContentData] = useState<ContentState>({ - contentInitialized: false, - twoColumnContentSections: [], - }); - - useEffect(() => { - const fetchContentData = async () => { - const fetchedContentData = await client.fetch( - `*[_type == 'contentPageType' && name == 'Home']{twoColumnContentSections[]->}` - ); - - const { twoColumnContentSections } = fetchedContentData[0]; - - setContentData({ - twoColumnContentSections, - contentInitialized: true, - }); - }; - - fetchContentData(); - }, []); - - if (!contentData.contentInitialized) { - return <>loading...</>; - } - - return ( - <TwoColumnContentSection {...contentData.twoColumnContentSections[0]} /> - ); -}; From 2e325c00c94bf02042a7192e2ba05bf2d1f08d02 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 12:03:11 -0700 Subject: [PATCH 17/25] fix slug type --- app/components/ui/Section/OppEventCardSection.tsx | 10 ++++------ app/pages/HomePage/components/Section/Section.tsx | 9 +++++++-- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx index 8d6c64821..816920556 100644 --- a/app/components/ui/Section/OppEventCardSection.tsx +++ b/app/components/ui/Section/OppEventCardSection.tsx @@ -5,12 +5,10 @@ import React from "react"; import { client } from "../../../sanity"; import { OppEventCard } from "../Cards/OppEventCard"; import styles from "./OppEventCardSection.module.scss"; +import { Slug } from "pages/HomePage/components/Section/Section"; export interface EventData { - slug: { - current: string; - _type: string; - }; + slug: Slug; image: SanityImageSource; /* Event Types*/ @@ -31,9 +29,9 @@ export interface OppEventCardData { header: string; subheader?: string; backgroundColor: string; - link?: { + link: { label: string; - href: string; + slug: Slug; }; opportunityCards?: EventData[]; eventCards?: EventData[]; diff --git a/app/pages/HomePage/components/Section/Section.tsx b/app/pages/HomePage/components/Section/Section.tsx index 0830e569e..3a3727378 100644 --- a/app/pages/HomePage/components/Section/Section.tsx +++ b/app/pages/HomePage/components/Section/Section.tsx @@ -2,6 +2,11 @@ import { Button } from "components/ui/inline/Button/Button"; import React from "react"; import styles from "./Section.module.scss"; +export interface Slug { + current: string; + _type: string; +} + export const HomePageSection = ({ title, description, @@ -15,7 +20,7 @@ export const HomePageSection = ({ children?: React.ReactNode; link?: { label: string; - href: string; + slug: Slug; }; }) => ( <section className={`${styles.section} ${styles[backgroundColor]}`}> @@ -27,7 +32,7 @@ export const HomePageSection = ({ </div> {link && ( - <Button href={link.href} arrowVariant="after" size="lg"> + <Button href={link.slug.current} arrowVariant="after" size="lg"> {link.label} </Button> )} From 962927dae19fc9fd21e2b20bf657591a7b772037 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 12:03:19 -0700 Subject: [PATCH 18/25] rm console.log --- app/components/ui/Section/CategorySection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx index e73607247..78059fbc7 100644 --- a/app/components/ui/Section/CategorySection.tsx +++ b/app/components/ui/Section/CategorySection.tsx @@ -53,7 +53,6 @@ export const CategorySection = (props: CategorySectionProps) => { <div className={styles.categorySection}> <div className={styles.categoryCards}> {categories.map((category) => { - console.log(category); return ( <CategoryCard key={category.label} From c893886999b88a9208fd804739eafb8bbd1334d0 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 12:14:08 -0700 Subject: [PATCH 19/25] fix two column types --- .../TwoColumnContentSection.tsx | 2 -- app/pages/HomePage/HomePage.tsx | 17 +++++++++-------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx index 5cebbada9..4e6272e24 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx @@ -38,8 +38,6 @@ const BlockRenderer = (props: { }; export interface TwoColumnContent { - // Fix in sanity schema - twoColumnContentSections: TwoColumnContent; mediaAlignment: string; image: SanityImageSource; imageAlt: string | undefined; diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index c8d6524b3..33ae9e170 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -37,7 +37,10 @@ interface HomePageData { categoriesSection: FeaturedCategoriesData; opportunitySection: OppEventCardData; eventSection: OppEventCardData; - twoColumnContentSections: TwoColumnContent[]; + /* Fix naming in Sanity schema */ + twoColumnContentSections: { + twoColumnContentSections: TwoColumnContent; + }[]; } export const HomePage = () => { @@ -45,9 +48,6 @@ export const HomePage = () => { useEffect(() => { const fetchHomePageData = async () => { - /* - Create and pull in 2 Column content data after schema is made - */ const query = `*[_type == "homePage" && name == "Home Page"][0]{ 'heroSection': *[_type == "hero" && name == "Home Hero"][0], categoriesSection {...,'featuredCategoriesSection': featuredCategoriesSection[]->}, @@ -78,6 +78,10 @@ export const HomePage = () => { twoColumnContentSections, } = homePageData; + /* Fix naming in Sanity schema */ + const twoColumnContentData = + twoColumnContentSections[0].twoColumnContentSections; + return ( <> <Hero @@ -92,10 +96,7 @@ export const HomePage = () => { sectionData={opportunitySection} /> <OppEventCardSection sectionType="event" sectionData={eventSection} /> - {/* Fix Sanity schema for two column */} - <TwoColumnContentSection - {...twoColumnContentSections[0].twoColumnContentSections} - /> + <TwoColumnContentSection {...twoColumnContentData} /> {/* Newsletter Component */} <Footer /> </> From 3f4366ebcc355f206160afce541682ced70f4bc1 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 12:14:36 -0700 Subject: [PATCH 20/25] fix prettier/lint issues --- app/components/ui/Cards/CategoryCard.tsx | 8 +++----- app/components/ui/Section/CategorySection.tsx | 4 ++-- app/components/ui/Section/OppEventCardSection.tsx | 2 +- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/app/components/ui/Cards/CategoryCard.tsx b/app/components/ui/Cards/CategoryCard.tsx index 590c6e0de..83d8126cd 100644 --- a/app/components/ui/Cards/CategoryCard.tsx +++ b/app/components/ui/Cards/CategoryCard.tsx @@ -11,13 +11,11 @@ interface CategoryCardProps { } export const CategoryCard = (props: CategoryCardProps) => { - const { label, icon } = props; - const searchQuery = - label === "See all services" ? "" : encodeURIComponent(label); - + const { label, icon, slug } = props; const iconName = `${icon.provider} ${icon.name}`; + return ( - <a href={`/service-finder${searchQuery}`} className={styles.categoryCard}> + <a href={`/service-finder${slug}`} className={styles.categoryCard}> <span className={`${iconName} ${styles.icon}`} /> <p className={styles.categoryTitle}>{label}</p> </a> diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx index 78059fbc7..418055bf5 100644 --- a/app/components/ui/Section/CategorySection.tsx +++ b/app/components/ui/Section/CategorySection.tsx @@ -1,7 +1,7 @@ +import { HomePageSection } from "pages/HomePage/components/Section"; import React from "react"; import { CategoryCard } from "../Cards/CategoryCard"; import styles from "./CategorySection.module.scss"; -import { HomePageSection } from "pages/HomePage/components/Section"; interface Category { icon: { @@ -65,7 +65,7 @@ export const CategorySection = (props: CategorySectionProps) => { <CategoryCard key="See all services" label="See all services" - slug={"/"} + slug="" icon={navigationIcon} /> </div> diff --git a/app/components/ui/Section/OppEventCardSection.tsx b/app/components/ui/Section/OppEventCardSection.tsx index 816920556..49eab18c3 100644 --- a/app/components/ui/Section/OppEventCardSection.tsx +++ b/app/components/ui/Section/OppEventCardSection.tsx @@ -1,11 +1,11 @@ import imageUrlBuilder from "@sanity/image-url"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; import { HomePageSection } from "pages/HomePage/components/Section"; +import { Slug } from "pages/HomePage/components/Section/Section"; import React from "react"; import { client } from "../../../sanity"; import { OppEventCard } from "../Cards/OppEventCard"; import styles from "./OppEventCardSection.module.scss"; -import { Slug } from "pages/HomePage/components/Section/Section"; export interface EventData { slug: Slug; From dc3aaefd6f569c78a4b2e264bb9722c734698ebc Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Thu, 20 Jun 2024 12:29:37 -0700 Subject: [PATCH 21/25] refactor see all services icon --- app/components/ui/Section/CategorySection.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx index 418055bf5..a08cd5b2f 100644 --- a/app/components/ui/Section/CategorySection.tsx +++ b/app/components/ui/Section/CategorySection.tsx @@ -39,10 +39,6 @@ export const CategorySection = (props: CategorySectionProps) => { const { header, subheader, backgroundColor, featuredCategoriesSection } = sectionData; const categories = featuredCategoriesSection[0].category; - const navigationIcon = { - name: "fa-arrow-right", - provider: "fas", - }; return ( <HomePageSection @@ -66,7 +62,7 @@ export const CategorySection = (props: CategorySectionProps) => { key="See all services" label="See all services" slug="" - icon={navigationIcon} + icon={{ provider: "fas", name: "fa-arrow-right" }} /> </div> </div> From 9d789f8ae4fa3dcbda19e8c344567f9a07ac705c Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Fri, 21 Jun 2024 08:17:22 -0700 Subject: [PATCH 22/25] update comments, address pr review comments --- app/components/ui/Section/CategorySection.tsx | 4 ++-- .../TwoColumnContentSection.tsx | 1 + app/pages/AboutPageOur415/AboutPage.tsx | 2 +- app/pages/HomePage/HomePage.tsx | 12 +++++++----- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/app/components/ui/Section/CategorySection.tsx b/app/components/ui/Section/CategorySection.tsx index a08cd5b2f..7dcc646dc 100644 --- a/app/components/ui/Section/CategorySection.tsx +++ b/app/components/ui/Section/CategorySection.tsx @@ -38,7 +38,7 @@ export const CategorySection = (props: CategorySectionProps) => { const { header, subheader, backgroundColor, featuredCategoriesSection } = sectionData; - const categories = featuredCategoriesSection[0].category; + const featuredCategories = featuredCategoriesSection[0].category; return ( <HomePageSection @@ -48,7 +48,7 @@ export const CategorySection = (props: CategorySectionProps) => { > <div className={styles.categorySection}> <div className={styles.categoryCards}> - {categories.map((category) => { + {featuredCategories.map((category) => { return ( <CategoryCard key={category.label} diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx index 4e6272e24..f1fd9afe6 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx @@ -44,6 +44,7 @@ export interface TwoColumnContent { contentBlock: BlockContentProps; contentLinkButtonText: string; contentLinkButtonUrl: string; + _id: string; } export const TwoColumnContentSection = ({ diff --git a/app/pages/AboutPageOur415/AboutPage.tsx b/app/pages/AboutPageOur415/AboutPage.tsx index 0f5e12911..3502d31f9 100644 --- a/app/pages/AboutPageOur415/AboutPage.tsx +++ b/app/pages/AboutPageOur415/AboutPage.tsx @@ -47,7 +47,7 @@ export const AboutPage = () => { <Masthead title={pageData.mastHead} /> {pageData?.twoColumnContentSections?.map( (section: JSX.IntrinsicAttributes & TwoColumnContent) => { - return <TwoColumnContentSection key={section.key} {...section} />; + return <TwoColumnContentSection key={section._id} {...section} />; } )} <EmailSignup /> diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 33ae9e170..91fdb1bda 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -37,7 +37,9 @@ interface HomePageData { categoriesSection: FeaturedCategoriesData; opportunitySection: OppEventCardData; eventSection: OppEventCardData; - /* Fix naming in Sanity schema */ + /* TODO: update field in Sanity schema + to avoid nested values of the same name + */ twoColumnContentSections: { twoColumnContentSections: TwoColumnContent; }[]; @@ -66,7 +68,7 @@ export const HomePage = () => { fetchHomePageData(); }, []); - if (!homePageData) { + if (homePageData === null) { return <div>Loading...</div>; } @@ -78,7 +80,6 @@ export const HomePage = () => { twoColumnContentSections, } = homePageData; - /* Fix naming in Sanity schema */ const twoColumnContentData = twoColumnContentSections[0].twoColumnContentSections; @@ -103,8 +104,9 @@ export const HomePage = () => { ); }; -// Remove when new categories is created -// other components are dependent on this list +/* TODO: Remove when new categories are created + other components are dependent on this list */ + export const coreCategories = [ { algoliaCategoryName: "Covid-food", From 72ad47140aaa89b29bfc7ad8d877412c30ea8c4a Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Fri, 21 Jun 2024 08:17:35 -0700 Subject: [PATCH 23/25] add basic error handling --- app/pages/HomePage/HomePage.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index 91fdb1bda..ebd7881c5 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -57,12 +57,15 @@ export const HomePage = () => { eventSection {...,'eventCards': eventCards[]->}, 'twoColumnContentSections': *[_type == 'contentPageType' && name == 'Home']{ twoColumnContentSections[0]-> - } - }`; + } + }`; - const result: HomePageData = await client.fetch(query); - - setHomePageData(result); + try { + const result: HomePageData = await client.fetch(query); + setHomePageData(result); + } catch (error) { + console.error("Failed to fetch home page data"); + } }; fetchHomePageData(); From 0a8b8a72774aacae5029bab87cda5213f1b17845 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Fri, 21 Jun 2024 08:37:26 -0700 Subject: [PATCH 24/25] fix no console lint error, revert two column prop type --- .../TwoColumnContentSection/TwoColumnContentSection.tsx | 9 ++++++++- app/pages/HomePage/HomePage.tsx | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx index f1fd9afe6..9f3cfadf8 100644 --- a/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx +++ b/app/components/ui/TwoColumnContentSection/TwoColumnContentSection.tsx @@ -54,7 +54,14 @@ export const TwoColumnContentSection = ({ mediaAlignment, contentLinkButtonText, contentLinkButtonUrl, -}: TwoColumnContent) => { +}: { + mediaAlignment: string; + image: SanityImageSource; + imageAlt: string | undefined; + contentBlock: any; + contentLinkButtonText: string; + contentLinkButtonUrl: string; +}) => { return ( <section className={styles.twoColumnContentSectionContainer}> <div diff --git a/app/pages/HomePage/HomePage.tsx b/app/pages/HomePage/HomePage.tsx index ebd7881c5..ef9e8cf67 100644 --- a/app/pages/HomePage/HomePage.tsx +++ b/app/pages/HomePage/HomePage.tsx @@ -1,5 +1,6 @@ import imageUrlBuilder from "@sanity/image-url"; import { SanityImageSource } from "@sanity/image-url/lib/types/types.d"; +import * as Sentry from "@sentry/browser"; import { Footer } from "components/ui"; import Hero from "components/ui/Hero/Hero"; import { @@ -64,7 +65,7 @@ export const HomePage = () => { const result: HomePageData = await client.fetch(query); setHomePageData(result); } catch (error) { - console.error("Failed to fetch home page data"); + Sentry.captureException(error); } }; From 9660204b398c070ef5e2a8f8717d6cb3ad2c04e5 Mon Sep 17 00:00:00 2001 From: Justin Caovan <justincaovan@gmail.com> Date: Fri, 21 Jun 2024 08:38:24 -0700 Subject: [PATCH 25/25] rm previous global button styling --- app/styles/st-base/_forms.scss | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/app/styles/st-base/_forms.scss b/app/styles/st-base/_forms.scss index 6a8429431..ddfdbac81 100644 --- a/app/styles/st-base/_forms.scss +++ b/app/styles/st-base/_forms.scss @@ -32,27 +32,6 @@ textarea { resize: vertical !important; } -// This button is affecting all buttons globally -// button { -// @extend %font-size-default; -// border: 0; -// // height: calc-em(44px); -// padding: calc-em(6px) calc-em(20px); -// color: $color-white; -// background: $color-green; -// display: inline-block; -// font-weight: 600; -// &:active, -// &:hover, -// &:focus { -// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); -// } - -// &.danger { -// background: $color-red; -// } -// } - button.filter-chip { border-radius: 3px; border: 1px solid #e0e0e0;