Merge pull request #3765 from dfinity/rei/featured-card

add featured event option
dfinity · Nov 15, 2024 · 887db12 · 887db12
2 parents 407ec5b + 0447547
commit 887db12
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 65 deletions.
diff --git a/plugins/airtable.js b/plugins/airtable.js
@@ -65,7 +65,7 @@ const airtablePlugin = async function () {
           );
           const mockEvents = require("./data/airtable-events-mock.json");
           const mockCourses = require("./data/airtable-courses-mock.json");
-          
+
           cache = {
             events: mockEvents,
             courses: mockCourses,
@@ -156,18 +156,20 @@ async function fetchAirtableRecords({ apiKey, baseId, tableName, viewId }) {
 }
 
 async function processEventsData(records) {
-  records = await Promise.all(records.map(async (record) => {
-    const parsedRecord = parseAirtableData(record);
-
-    let imageUrl = await fetchShareImage(parsedRecord.eventLink);
-
-    // If no share image is found, use a default image
-    if (!imageUrl) {
-      imageUrl = getDefaultEventImage(parsedRecord);
-    }
-
-    return { ...parsedRecord, imageUrl };
-  }));
+  records = await Promise.all(
+    records.map(async (record) => {
+      const parsedRecord = parseAirtableData(record);
+
+      let imageUrl = await fetchShareImage(parsedRecord.eventLink);
+
+      // If no share image is found, use a default image
+      if (!imageUrl) {
+        imageUrl = getDefaultEventImage(parsedRecord);
+      }
+
+      return { ...parsedRecord, imageUrl };
+    })
+  );
 
   const endDatecutoff = new Date(Date.now() - 6 * 30 * 24 * 60 * 60 * 1000)
     .toISOString()
@@ -252,45 +254,43 @@ async function processEventsData(records) {
 }
 
 async function fetchShareImage(url) {
-  if (!url || url === '#') return null;
+  if (!url || url === "#") return null;
 
   try {
     const response = await fetch(url);
     const html = await response.text();
     const $ = cheerio.load(html);
-    
-    let imageUrl = $('meta[property="og:image"]').attr('content');
-    
+
+    let imageUrl = $('meta[property="og:image"]').attr("content");
+
     if (!imageUrl) {
-      imageUrl = $('meta[name="twitter:image"]').attr('content');
+      imageUrl = $('meta[name="twitter:image"]').attr("content");
     }
-    
+
     return imageUrl;
   } catch (error) {
     console.warn(`Failed to fetch share image from ${url}: ${error.message}`);
     return null;
   }
 }
 
-
 function getDefaultEventImage(event) {
   const defaultImages = [
-    '/img/events/event-01.webp',
-    '/img/events/event-02.webp',
-    '/img/events/event-03.webp',
-    '/img/events/event-04.webp',
-    '/img/events/event-05.webp',
-    '/img/events/event-06.webp',
-    '/img/events/event-07.webp',
-    '/img/events/event-08.webp',
-    '/img/events/event-09.webp',
-    '/img/events/event-10.webp',
-    '/img/events/event-11.webp',
-    '/img/events/event-12.webp',
-    '/img/events/event-13.webp',
-    '/img/events/event-14.webp',
-    '/img/events/event-15.webp',
-
+    "/img/events/event-01.webp",
+    "/img/events/event-02.webp",
+    "/img/events/event-03.webp",
+    "/img/events/event-04.webp",
+    "/img/events/event-05.webp",
+    "/img/events/event-06.webp",
+    "/img/events/event-07.webp",
+    "/img/events/event-08.webp",
+    "/img/events/event-09.webp",
+    "/img/events/event-10.webp",
+    "/img/events/event-11.webp",
+    "/img/events/event-12.webp",
+    "/img/events/event-13.webp",
+    "/img/events/event-14.webp",
+    "/img/events/event-15.webp",
   ];
 
   const index = parseInt(event.id, 36) % defaultImages.length;
@@ -507,6 +507,7 @@ function parseAirtableData(record) {
     websiteCategory: record.fields["Website Category"],
     mode: record.fields["Mode"],
     status: record.fields["Status"],
+    featured: record.fields["Featured on Event Website"] || false,
   };
 }
 

diff --git a/src/components/GlobalEvents/FeaturedCard.tsx b/src/components/GlobalEvents/FeaturedCard.tsx
@@ -15,7 +15,7 @@ const FeaturedCard: React.FC<{ event: AirtableEvent }> = ({ event }) => {
         href={event.eventLink}
       >
         <img
-          src="/img/events/featured.webp"
+          src={event.imageUrl || "/img/events/featured.webp"}
           alt={event.eventName}
           className="w-full h-full object-cover"
         />
@@ -33,7 +33,7 @@ const FeaturedCard: React.FC<{ event: AirtableEvent }> = ({ event }) => {
           <p className="text-black/60 tw-paragraph md:tw-lead-sm mb-0 mt-3 line-clamp-3">
             {event.description}
           </p>
-          {event.eventLink && (
+          {event.eventLink && event.eventLink !== "#" && (
             <p className="mt-6 mb-0">
               <Link href={event.eventLink} className="link-primary">
                 Register now <LinkArrowUpRight />
@@ -46,38 +46,61 @@ const FeaturedCard: React.FC<{ event: AirtableEvent }> = ({ event }) => {
   );
 };
 
-export function getFeaturedEvent(events: AirtableEvent[]): AirtableEvent {
+export function getFeaturedEvent(
+  events: AirtableEvent[]
+): AirtableEvent | null {
+  if (!events || events.length === 0) {
+    return null;
+  }
+
   const currentDate = new Date().toISOString().slice(0, 10);
 
-  // has a banner and end date (of format yyyy-mm-dd) is in the future
-  const maybeOngoingOrFutureEventWithBanner = events.find(
-    (event) => event.eventBanner && event.endDate >= currentDate
-  );
+  try {
+    // 1. First priority: Current featured event that hasn't ended
+    const currentFeaturedEvent = events.find(
+      (event) =>
+        event.featured === true && event.endDate && event.endDate >= currentDate
+    );
 
-  if (maybeOngoingOrFutureEventWithBanner) {
-    return maybeOngoingOrFutureEventWithBanner;
-  }
+    if (currentFeaturedEvent) {
+      return currentFeaturedEvent;
+    }
 
-  // has no banner and in the future
-  const maybeMostRecentEvent = events.find(
-    (event) => event.endDate >= currentDate
-  );
+    // 2. Second priority: Next upcoming featured event
+    const upcomingFeaturedEvents = events.filter(
+      (event) =>
+        event.featured === true &&
+        event.startDate &&
+        event.startDate > currentDate
+    );
 
-  if (maybeMostRecentEvent) {
-    return maybeMostRecentEvent;
-  }
+    if (upcomingFeaturedEvents.length > 0) {
+      return upcomingFeaturedEvents.sort((a, b) =>
+        a.startDate.localeCompare(b.startDate)
+      )[0];
+    }
 
-  // has a banner and the most recent
-  const maybeMostRecentEventWithBanner = [...events]
-    .reverse()
-    .find((event) => event.eventBanner);
+    // Current or upcoming non-featured event
+    const nonEndedEvents = events.filter(
+      (event) => event.endDate && event.endDate >= currentDate
+    );
 
-  if (maybeMostRecentEventWithBanner) {
-    return maybeMostRecentEventWithBanner;
-  }
+    if (nonEndedEvents.length > 0) {
+      return nonEndedEvents.sort((a, b) =>
+        a.startDate.localeCompare(b.startDate)
+      )[0];
+    }
 
-  // most recent
-  return events[events.length - 1];
+    // Final fallback: Most recent event overall
+    const sortedEvents = [...events].sort((a, b) =>
+      b.endDate.localeCompare(a.endDate)
+    );
+
+    return sortedEvents[0];
+  } catch (error) {
+    console.error("Error in getFeaturedEvent:", error);
+    return null;
+  }
 }
 
 export default FeaturedCard;
diff --git a/src/pages/events.tsx b/src/pages/events.tsx
@@ -165,9 +165,11 @@ function GlobalEventsPage() {
               bg-[linear-gradient(0deg,#F1EEF5_0%,#F1EEF5_50%,transparent_50%,transparent_100%)]
             "
             >
-              <div className="container-10">
-                <FeaturedCard event={featuredEvent}></FeaturedCard>
-              </div>
+              {featuredEvent && (
+                <div className="container-10">
+                  <FeaturedCard event={featuredEvent}></FeaturedCard>
+                </div>
+              )}
             </div>
           </section>
         </AnimateSpawn>