events: Show upcoming events on home page

Author: eth-p

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 UpcomingEvent from './UpcomingEvent'
+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,10 +20,9 @@ const EventSelector = props => {
       <div
         className={isDesktop ? styles.eventsNotes : styles.eventsNotesMobile}
       >
-        {allEvents.map((event, i) => (
+        {events.map((event, i) => (
           <>
-            {/* TODO for future devs: uncomment below line when there are events*/}
-            {/* {i < 3 && (
+            {
               <div className={!isDesktop && styles.notesMargin}>
                 <UpcomingEvent
                   primaryColor={event.primaryColor && event.primaryColor}
@@ -36,14 +36,14 @@ const EventSelector = props => {
                   fbEvent={event.fbEvent}
                 />
               </div>
-            )} */}
+            }
           </>
         ))}
         <p
           style={isDesktop ? { fontSize: '30px' } : { fontSize: '18px' }}
           className={styles.title}
         >
-          Stay tuned for future events
+          {events.length > 0 ? '' : 'Stay tuned for future events'}
         </p>
       </div>
     </div>