Add banners to events calendar

components/Events/SelectedEvent.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import Link from 'next/link';
-import React from 'react';
+import {React, useEffect, useState} from 'react';
 
 import styles from '../../styles/components/Events/SelectedEvent.module.scss';
 
@@ -9,12 +9,18 @@ function SelectedEvent({ event }) {
     return <p>click on an event to see more!</p>;
   }
   const { title, start, description, location, links, image, alt } = event;
-  const imageSrc = image ? image : '/images/events/default-event.png';
+  const [imageUrl, setImageUrl] = useState(image ?? '/images/events/default-event.png');
+
+  // Must set imageUrl if event prop changes
+  useEffect(() => {
+    setImageUrl(event.image);
+  }, [event]);
+
   return (
     <div className={styles['card-container']}>
       <h2 className={styles['card-header']}>event information</h2>
       {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img className={styles['card-image']} src={imageSrc} alt={alt} />
+      <img className={styles['card-image']} src={imageUrl} alt={alt} onError={() => setImageUrl('/images/events/default-event.png')}/>
       <div className={styles['card-body']}>
         <h3 className={styles['card-title']}>{title}</h3>
         {/* Don't show start time if it starts at 12:00 am (missing start time in event spreadsheet) */}

scripts/event-generator-sheets.mjs

@@ -34,19 +34,20 @@ async function getAllEvents() {
   events = [].concat(...events);
 
   // Get all recurring events
-  let recurring_rows = await getGoogleSheetData('RECURRING EVENTS!A:J');
+  let recurring_rows = await getGoogleSheetData('RECURRING EVENTS!A:K');
   for (let i = 1; i <= 10; i++) {
     events = events.concat(getRecurringEventsOfWeek(recurring_rows, i));
   }
-  return events.filter((item, index, self) => index === self.findIndex(
-      (other) => item.title === other.title && item.rawStart === other.rawStart),
-    );
+  events = events.filter((item, index, self) => index === self.findIndex(
+    (other) => item.title === other.title && item.rawStart === other.rawStart));
+
+  return events;
 }
 
 // Read single events of Week n
 // Return as array of JSON objects
 async function getSingleEventsOfWeek(n) {
-  const rows = await getGoogleSheetData('Week ' + n + '!A:H');
+  const rows = await getGoogleSheetData('Week ' + n + '!A:I');
 
   const events = [];
   for (const row of rows) {
@@ -68,7 +69,8 @@ async function getSingleEventsOfWeek(n) {
         rawStart: row[3],
         rawEnd: row[4],
         date: row[2],
-        fblink: row[7]}));
+        fblink: row[7],
+        image: row[8],}));
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(`Error ${err} on event ${row}`);
@@ -108,7 +110,8 @@ function getRecurringEventsOfWeek(rows, n) {
           rawStart: row[5],
           rawEnd: row[6],
           date: date.toISOString().split('T')[0],
-          fblink: row[9]}));
+          fblink: row[9],
+          image: row[10]}));
       } catch (err) {
         // eslint-disable-next-line no-console
         console.error(`Error ${err} on event ${row}`);

scripts/lib.mjs

@@ -8,6 +8,7 @@ const getCssStringFromCommittee = (committee) => {
     case 'board':
       return 'board';
     case 'teach la':
+    case 'teachla':
       return 'teach-la';
     case 'ai':
     case 'cyber':
@@ -37,6 +38,7 @@ const generateSingleEvent = ({
   rawEnd,
   date,
   fblink,
+  image,
 }) => {
   let allDay = false;
 
@@ -81,6 +83,27 @@ const generateSingleEvent = ({
       ext: true,
     });
   }
+  if (image) {
+    try {
+      // Extract host from url to comply with codeQL scanner
+      const url = new URL(image);
+      const host = url.hostname;
+
+      if (host === 'drive.google.com') {
+        // Google drive urls need to be transformed
+        // 'https://drive.google.com/uc?export=view&id=' + image id (id which follows /d in original link)
+        image = 'https://drive.google.com/uc?export=view&id=' + image.substring(image.indexOf("/d/") + 3, image.indexOf("/view"));
+      } else {
+          image = url.href;
+      }
+    } catch (e) {
+      console.log("Warning: Invalid Image URL: " + e);
+      image = '/images/events/default-event.png'
+    }
+  } else {
+    // Default image
+    image = '/images/events/default-event.png';
+  }
 
   if (!title) {
     throw new Error('Missing title');
@@ -96,6 +119,7 @@ const generateSingleEvent = ({
     committee,
     description,
     links,
+    image,
   };
 };