Show events on home

src/components/EventSelector.js

@@ -112,6 +112,7 @@ const EventSelector = props => {
                   time={event.time}
                   link={event.link}
                   fbEvent={event.fbEvent}
+                  noteProps={{expandable: true}}
                 />
               </div>
             )}

src/components/Note.js

@@ -8,13 +8,18 @@ const Note = ({
   primaryColor = '#3D73C7',
   secondaryColor = '#2B5699',
   contentHeight,
+  expandable,
   setHovering
 }) => {
   const isDesktop = useMediaQuery('(min-width: 600px)')
+  const classes = [
+    styles.container,
+    expandable ? styles.containerExpandable : null,
+  ]
 
   return (
     <div
-      className={styles.container}
+      className={classes.filter(x => x != null).join(' ')}
       style={{
         '--primary-color': primaryColor,
         '--secondary-color': secondaryColor,

src/components/ShortUpcomingEvent.js

@@ -1,10 +1,11 @@
 import styles from '../css/ShortUpcomingEvent.module.css'
 import useMediaQuery from '../utils/useMediaQuery'
-import allEvents from '../utils/upcomingEvents'
+import {byDate} from '../utils/upcomingEvents'
 import UpcomingEvent from './UpcomingEvent'
 
 const EventSelector = props => {
   const isDesktop = useMediaQuery('(min-width: 600px)')
+  const events = byDate.slice(0, 3);
 
   return (
     <div
@@ -19,9 +20,9 @@ const EventSelector = props => {
       <div
         className={isDesktop ? styles.eventsNotes : styles.eventsNotesMobile}
       >
-        {allEvents.map((event, i) => (
+        {events.map((event, i) => (
           <>
-            {i < 3 && (
+            {
               <div className={!isDesktop && styles.notesMargin}>
                 <UpcomingEvent
                   primaryColor={event.primaryColor && event.primaryColor}
@@ -33,19 +34,18 @@ const EventSelector = props => {
                   time={event.time}
                   link={event.link}
                   fbEvent={event.fbEvent}
+                  noteProps={{expandable: true}}
                 />
               </div>
-            )}
+            }
           </>
         ))}
-        {allEvents.length <= 0 && 
-          <p
-            style={isDesktop ? { fontSize: '2rem' } : { fontSize: '1rem' }}
-            className={styles.title}
-          >
-            Stay tuned for future events
-          </p>
-        }
+        <p
+          style={isDesktop ? { fontSize: '30px' } : { fontSize: '18px' }}
+          className={styles.title}
+        >
+          {events.length > 0 ? '' : 'Stay tuned for future events'}
+        </p>
       </div>
     </div>
   )

src/components/UpcomingEvent.js

@@ -13,11 +13,12 @@ const UpcomingEvent = ({
   location,
   time,
   link,
-  fbEvent
+  fbEvent,
+  noteProps,
 }) => {
   const isDesktop = useMediaQuery('(min-width: 600px)')
   return (
-    <Note primaryColor={primaryColor} secondaryColor={secondaryColor}>
+    <Note primaryColor={primaryColor} secondaryColor={secondaryColor} {...noteProps}>
       <div className={styles.container}>
         <div className={styles.header}>
           <div className={styles.date}>

src/css/EventSelector.module.css

@@ -42,7 +42,19 @@
   min-height: 631px;
   grid-row-gap: 31px;
   grid-column-gap: 49px;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+@media screen and (max-width: 1200px) {
+  .eventsNotes {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .eventsNotes {
+    grid-template-columns: 1fr;
+  }
 }
 
 .eventsNotesMobile {

src/css/Note.module.css

@@ -5,6 +5,11 @@
   width: fit-content;
 }
 
+.container.containerExpandable {
+  width: 100%;
+  max-width: 500px;
+}
+
 .pageCurl {
   position: absolute;
   bottom: 0;

src/utils/upcomingEvents.js

@@ -1,4 +1,37 @@
 const upcomingEvent = [
+  {
+    title: 'Audio Workshop',
+    day: '28',
+    month: 'Jul',
+    location: 'SFU Library',
+    time: '5:30PM – 7:30PM',
+    link: 'https://lu.ma/a5m6mqwe',
+    filterSetting: 'Workshops',
+    fbEvent:
+      'https://www.facebook.com/events/589045982841057'
+  },
+  {
+    title: 'Audio Workshop',
+    day: '28',
+    month: 'Jul',
+    location: 'SFU Library',
+    time: '5:30PM – 7:30PM',
+    link: 'https://lu.ma/a5m6mqwe',
+    filterSetting: 'Workshops',
+    fbEvent:
+      'https://www.facebook.com/events/589045982841057'
+  },
+  {
+    title: 'Audio Workshop',
+    day: '28',
+    month: 'Jul',
+    location: 'SFU Library',
+    time: '5:30PM – 7:30PM',
+    link: 'https://lu.ma/a5m6mqwe',
+    filterSetting: 'Workshops',
+    fbEvent:
+      'https://www.facebook.com/events/589045982841057'
+  },
   {
     title: 'Audio Workshop',
     day: '28',
@@ -116,4 +149,18 @@ const upcomingEvent = [
   */
 ]
 
-export default upcomingEvent
+export default upcomingEvent;
+
+// Internal Utility Functions:
+function dateOf(event) {
+  const time = event.time.split(' - ')[0].replace(/ *([AP]M)/g, ' $1');
+  return new Date(`${event.month} ${event.day} ${time}`);
+}
+
+// byDate: The events, listed in order of closest to furthest.
+export const byDate = upcomingEvent.sort((a, b) => {
+  const aDate = dateOf(a);
+  const bDate = dateOf(b);
+  return bDate - aDate;
+});
+