🔥

src/routes/rsvp/Rsvp.css

@@ -0,0 +1,24 @@
+@import '../../components/variables.css';
+
+.root {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 0 0 40px;
+  max-width: var(--max-content-width);
+}
+
+.flexContainer {
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+}
+
+@media (--sm-viewport) {
+  .flexContainer {
+    flex-flow: row nowrap;
+  }
+}

src/routes/rsvp/Rsvp.js

@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Rsvp.css';
+import RsvpCard from '../../components/RsvpCard';
+
+class Rsvp extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    people: PropTypes.arrayOf(PropTypes.shape({
+      firstname: PropTypes.string,
+      lastname: PropTypes.string,
+      email: PropTypes.string,
+      dietary: PropTypes.string,
+      starter: PropTypes.string,
+      main: PropTypes.string,
+    })).isRequired,
+  };
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div className={s.container}>
+          <h1>{this.props.title}</h1>
+          <div className={s.flexContainer}>
+            {this.props.people.map(person => <RsvpCard key={person.key} person={person} />)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Rsvp);

src/routes/rsvp/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Layout from '../../components/Layout';
+import fetchQL from '../../core/fetchQL';
+import Rsvp from './Rsvp';
+import NotFound from '../notFound/NotFound';
+
+let title = 'RSVP';
+
+export default {
+
+  path: '/rsvp/:password',
+
+  async action({ params }) {
+    if (!params.password) {
+      return { redirect: '/' };
+    }
+
+    const resp = await fetchQL('{getPersonsByPassword{key,firstname,lastname,attending,dietary,starter,main}}', {
+      password: params.password,
+    });
+
+    const { data } = await resp.json();
+    const people = data && data.getPersonsByPassword;
+    if (!people || people.length === 0) {
+      title = 'RSVP Not Found';
+      return {
+        title,
+        component: <Layout><NotFound title={title} /></Layout>,
+        status: 404,
+      };
+    }
+
+    return {
+      title,
+      component: <Layout><Rsvp title={title} people={people} /></Layout>,
+    };
+  },
+
+};