Implement preliminary automated meetup detail display support

Related to #11

Author: Brandon Johnson

components/Meetup.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import format from 'date-fns/format'
+
+const NEXT_MEETUP_URI = 'https://ctpukojlyh.execute-api.us-east-1.amazonaws.com/prod/meetup/next'
+
+export default class Meetup extends React.Component {
+  state = {
+    name: '',
+    time: 0,
+    venue: {name: ''}
+  }
+
+  componentWillMount () {
+    fetch(NEXT_MEETUP_URI)
+      .then((res) => res.json())
+      .then((json) => this.setState(json))
+  }
+
+  render () {
+    const meetupStyles = {
+        container: {
+          textAlign: 'center',
+          border: '1px solid black',
+          display: 'inline block',
+          margin: '8rem'
+        },
+        title: {
+          fontSize: '2rem',
+          margin: '1rem'
+        },
+        bug: {},
+        rsvpButton: {}
+    }
+
+    return (
+      <div className="next-event">
+        <div className="next-event-tagline">
+          <strong>Next Event:</strong>
+          <div className="event-name">
+            {this.state.name}
+          </div>
+          <span className="next-event-timestamp">{format(this.state.time, 'dddd, MMMM Mo, YYYY')} at <strong>{ this.state.venue.name }</strong></span>
+        </div>
+      </div>
+    )
+  }
+}

components/meetup.js

@@ -5,6 +5,7 @@
   "private": true,
   "author": "JavaScriptMN Organizers <[email protected]",
   "dependencies": {
+    "date-fns": "^1.28.5",
     "front-matter": "^2.1.1",
     "gatsby": "^0.12.20",
     "highlight.js": "^9.8.0",

package.json

@@ -0,0 +1,83 @@
+import React from 'react'
+import Meetup from '../components/Meetup'
+
+class index extends React.Component {
+  render () {
+    return (<div className='Index'>
+      <div className='hero-container'>
+
+        <div className='hero-container-content'>
+
+          <div className='primary-header'>JavaScript MN</div>
+
+          <Meetup />
+
+          <div className='button-row'>
+            <button className='outline-button' onclick={'window.open("https://meetup.com/javascriptmn")'}>
+              <span className='icon rsvp'></span>
+              <span>RSVP</span>
+            </button>
+            <button className='outline-button' onclick={'window.open("https://javascriptmn-slack.herokuapp.com")'}>
+              <span className='icon slack'></span>
+              <span>Join our Slack</span>
+            </button>
+            <button className='outline-button' onclick={'window.open("https://www.youtube.com/channel/UC4DA_d8mD-14ZSBvIb1jmXg")'}>
+              <span className='icon youtube'></span>
+              <span>Watch previous talks</span>
+            </button>
+          </div>
+
+
+          <div className='sponsor-container'>
+
+            <div className='sponsored-by-title'>Hosted By:</div>
+
+            <div className='sponsor-container-row'>
+              <div className='sponsor'>
+                <img src={'images/sponsors/logo-icf-olson.svg'} />
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+      <div id='#location' className='secondary-content tilt-left'>
+        <div className='column'>
+          <h2 className='secondary-content-header'>Location</h2>
+          <div className='secondary-content-blurb'>We are graciously hosted at <strong>Olson\'s</strong> office space in downtown Minneapolis. Parking is available in the adjacent lot or additional street parking near the building.</div>
+          <address>
+            Olson<br />
+            420 N 5th St<br />
+            Suite #1000<br />
+            Minneapolis, MN 55401
+          </address>
+
+        </div>
+        <div className='column'>
+          <div className='map-container'>
+          </div>
+        </div>
+
+      </div>
+
+      <div className='secondary-content tilt-right'>
+        <div className='column'>
+          <img width={650} src={'images/speak.jpeg'} />
+        </div>
+        <div className='column info-column'>
+          <h2 className='secondary-content-header'>Speaking</h2>
+          <div className='secondary-content-blurb'>
+            <strong>Interested in speaking?</strong><br/>
+            We are always open to new speakers, please see our questionnaire for more details.
+          </div>
+          <a className='outline-button small-button' href={'/speak/'}>Learn More</a>
+        </div>
+      </div>
+  </div>)
+  }
+}
+
+export default index