Merge pull request #31 from DetroitJS/nomeetup

adds noMeetup component, for when there's no scheduled meetups

components/noMeetup.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const NoMeetup = () => {
+  return (
+    <article className="w-100 w-100-ns pa2 pa3-ns">
+      <div className="bt bw2 b-solid" style={{ borderColor: '#f7d71e' }}>
+        <h2 className="f2 tc">No Meetups Currently Scheduled</h2>
+        <div style={{ background: '#f7df1e' }}>
+          <div className="center measure lh-copy pa3 meetup-content">
+            😭 Sorry! We don't have anything scheduled at the moment. Please
+            join our group over at{' '}
+            <a href="https://www.meetup.com/Detroit-Javascript/">Meetup</a>. if
+            you'd like to be notified when the next meetup happens. We are
+            always looking for people to give talks. If you're interested in
+            giving a talk, send us an email over at [email protected].
+          </div>
+        </div>
+      </div>
+      <style jsx global>{`
+        .meetup-content a {
+          color: black;
+        }
+      `}</style>
+    </article>
+  )
+}
+
+export default NoMeetup

pages/index.js

@@ -3,17 +3,11 @@ import PropTypes from 'prop-types'
 import axios from 'axios'
 import Layout from '../components/layout'
 import Meetups from '../components/meetups'
+import NoMeetup from '../components/noMeetup'
 
-const Index = ({ meetups }) => (
-  <Layout>
-    <div className="pa3 center cf">
-      <h1 className="tc">Upcoming Meetups</h1>
-      <Meetups meetups={meetups} />
-    </div>
-  </Layout>
-)
+const Index = ({ meetups }) => <Layout>{renderContent(meetups)}</Layout>
 
-Index.getInitialProps = async ({req}) => {
+Index.getInitialProps = async ({ req }) => {
   const res = await axios.get('https://detroitjs.sixlabs.io/events')
   const meetups = res.data.data
 
@@ -24,4 +18,21 @@ Index.propTypes = {
   meetups: PropTypes.array
 }
 
+const renderContent = meetups => {
+  if (meetups.length >= 1) {
+    return (
+      <div className="pa3 center cf">
+        <h1 className="tc">Upcoming Meetups</h1>
+        <Meetups meetups={meetups} />
+      </div>
+    )
+  } else {
+    return (
+      <div className="pa3 center cf">
+        <NoMeetup />
+      </div>
+    )
+  }
+}
+
 export default Index