closes #30

src/components/sections/events.js

@@ -38,36 +38,50 @@ const Events = () => {
 
   const currentDate = new Date()
 
+  const filteredEvents = data.allSanityEvent.edges
+    .filter(({ node: event }) => {
+      const eventDate = event.date.split(" ").slice(1).join(" ")
+      return currentDate < moment(eventDate, "D. MMM Y")
+    })
+    .slice(0, 2)
+
+  const mapEvents = events => {
+    if (events.length !== 0) {
+      return events.map(({ node: event }) => (
+        <Link key={event._id} to={"event/" + event.slug.current}>
+          <article className={styles.card}>
+            <h3>{event.title}</h3>
+            <div>
+              <div>
+                <FaMapMarkerAlt />
+                <p>{event.location}</p>
+              </div>
+              <div>
+                <FaCalendarAlt />
+                <p>{event.date}</p>
+              </div>
+            </div>
+            <p>{event.description}</p>
+          </article>
+        </Link>
+      ))
+    } else {
+      return (
+        <h3 className={styles.noEvents}>
+          Ingen kommende arragnementer
+          <br />
+          <br />
+          (っ˘̩╭╮˘̩)っ
+        </h3>
+      )
+    }
+  }
+
   return (
     <section className={styles.stretch}>
       <div className={styles.container}>
         <h2 className={styles.sectionHeader}>Hva skjer?</h2>
-        <div className={styles.events}>
-          {data.allSanityEvent.edges
-            .filter(({ node: event }) => {
-              const eventDate = event.date.split(" ").slice(1).join(" ")
-              return currentDate < moment(eventDate, "D. MMM Y")
-            })
-            .slice(0, 2)
-            .map(({ node: event }) => (
-              <Link to={"event/" + event.slug.current}>
-                <article key={event._id} className={styles.card}>
-                  <h3>{event.title}</h3>
-                  <div>
-                    <div>
-                      <FaMapMarkerAlt />
-                      <p>{event.location}</p>
-                    </div>
-                    <div>
-                      <FaCalendarAlt />
-                      <p>{event.date}</p>
-                    </div>
-                  </div>
-                  <p>{event.description}</p>
-                </article>
-              </Link>
-            ))}
-        </div>
+        <div className={styles.events}>{mapEvents(filteredEvents)}</div>
         <div className={"no-mobile " + styles.image}>
           <GatsbyImage
             image={data.placeholder.childImageSharp.gatsbyImageData}

src/components/sections/events.module.css

@@ -27,6 +27,10 @@
   justify-self: center;
 }
 
+.noEvents {
+  text-align: center;
+}
+
 .card {
   display: grid;
   box-shadow: var(--shadow);