diff --git a/app/components/ui/Cards/EventCardSection.tsx b/app/components/ui/Cards/EventCardSection.tsx index dba28b701..719521898 100644 --- a/app/components/ui/Cards/EventCardSection.tsx +++ b/app/components/ui/Cards/EventCardSection.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useMemo } from "react"; import { EventCard } from "./EventCard"; import styles from "./EventCardSection.module.scss"; import { Loader } from "../Loader"; @@ -11,12 +11,24 @@ export const EventCardSection = ({ }) => { const [showAll, setShowAll] = useState(false); - if (!events) { + // Sort events so featured events come first + const sortedEvents = useMemo(() => { + if (!events) return null; + + return [...events].sort((a, b) => { + // Featured items first (true > false, so we reverse the comparison) + if (a.featured && !b.featured) return -1; + if (!a.featured && b.featured) return 1; + return 0; + }); + }, [events]); + + if (!sortedEvents) { return ; } - const displayedEvents = showAll ? events : events.slice(0, 4); - const hasMoreEvents = events.length > 4; + const displayedEvents = showAll ? sortedEvents : sortedEvents.slice(0, 4); + const hasMoreEvents = sortedEvents.length > 4; return ( <> diff --git a/app/hooks/StrapiAPI.ts b/app/hooks/StrapiAPI.ts index 0c5f3d130..477448f28 100644 --- a/app/hooks/StrapiAPI.ts +++ b/app/hooks/StrapiAPI.ts @@ -82,7 +82,7 @@ export function useNavigationData() { */ export function useHomePageFeaturedResourcesData() { const path = - "events?populate[address]=*&populate[calendar_event]=*&populate[page_link]=*&populate[image][populate]=*&filters[featured][$eq]=true"; + "events?populate[address]=*&populate[calendar_event]=*&populate[page_link]=*&populate[image][populate]=*"; const dataFetcher = () => fetcher<{ data: Array> }>( @@ -370,6 +370,7 @@ export interface EventResponse extends BaseDatumAttributesResponse { image: { data: { id: number; attributes: ImageResponse }; }; + featured: boolean; page_link: LinkResponse; registration_link?: LinkResponse | null; event_categories?: { data: Array> };