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> };