diff --git a/components/Events/SelectedEvent.js b/components/Events/SelectedEvent.js index 4b4039c8..5e8e180a 100644 --- a/components/Events/SelectedEvent.js +++ b/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

click on an event to see more!

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

event information

{/* eslint-disable-next-line @next/next/no-img-element */} - {alt} + {alt} setImageUrl('/images/events/default-event.png')}/>

{title}

{/* Don't show start time if it starts at 12:00 am (missing start time in event spreadsheet) */} diff --git a/scripts/event-generator-sheets.mjs b/scripts/event-generator-sheets.mjs index 4174ee11..49b06140 100644 --- a/scripts/event-generator-sheets.mjs +++ b/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}`); diff --git a/scripts/lib.mjs b/scripts/lib.mjs index 551bf1b3..f34167d1 100644 --- a/scripts/lib.mjs +++ b/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, }; };