From a254447e98472b39051ed16146ba625f6459125f Mon Sep 17 00:00:00 2001
From: LBlend <lblend@protonmail.com>
Date: Thu, 29 Jul 2021 18:49:24 +0200
Subject: [PATCH] closes #30

---
 src/components/sections/events.js         | 66 ++++++++++++++---------
 src/components/sections/events.module.css |  4 ++
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/components/sections/events.js b/src/components/sections/events.js
index 00694ce..c6c3337 100644
--- a/src/components/sections/events.js
+++ b/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}
diff --git a/src/components/sections/events.module.css b/src/components/sections/events.module.css
index caf0b15..28157aa 100644
--- a/src/components/sections/events.module.css
+++ b/src/components/sections/events.module.css
@@ -27,6 +27,10 @@
   justify-self: center;
 }
 
+.noEvents {
+  text-align: center;
+}
+
 .card {
   display: grid;
   box-shadow: var(--shadow);