🔥

src/components/App.js

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+
+const ContextType = {
+  // Enables critical path CSS rendering
+  // https://github.com/kriasoft/isomorphic-style-loader
+  insertCss: PropTypes.func.isRequired,
+};
+
+/**
+ * The top-level React component setting context (global) variables
+ * that can be accessed from all the child components.
+ *
+ * https://facebook.github.io/react/docs/context.html
+ *
+ * Usage example:
+ *
+ *   const context = {
+ *     history: createBrowserHistory(),
+ *     store: createStore(),
+ *   };
+ *
+ *   ReactDOM.render(
+ *     <App context={context}>
+ *       <Layout>
+ *         <LandingPage />
+ *       </Layout>
+ *     </App>,
+ *     container,
+ *   );
+ */
+class App extends React.PureComponent {
+
+  static propTypes = {
+    context: PropTypes.shape(ContextType).isRequired,
+    children: PropTypes.element.isRequired,
+  };
+
+  static childContextTypes = ContextType;
+
+  getChildContext() {
+    return this.props.context;
+  }
+
+  render() {
+    // NOTE: If you need to add or modify header, footer etc. of the app,
+    // please do that inside the Layout component.
+    return React.Children.only(this.props.children);
+  }
+
+}
+
+export default App;

src/components/Html.js

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import { analytics } from '../config';
+
+class Html extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    style: PropTypes.string,
+    scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
+    children: PropTypes.string,
+  };
+
+  render() {
+    const { title, description, style, scripts, children } = this.props;
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+          {style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
+        </head>
+        <body>
+          <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
+          {scripts && scripts.map(script => <script key={script} src={script} />)}
+          {analytics.google.trackingId &&
+            <script
+              dangerouslySetInnerHTML={{ __html:
+              'window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;' +
+              `ga('create','${analytics.google.trackingId}','auto');ga('send','pageview')` }}
+            />
+          }
+          {analytics.google.trackingId &&
+            <script src="https://www.google-analytics.com/analytics.js" async defer />
+          }
+        </body>
+      </html>
+    );
+  }
+}
+
+export default Html;

src/components/Layout/Layout.css

@@ -0,0 +1,170 @@
+@import '../../../node_modules/normalize.css/normalize.css';
+
+@import '../variables.css';
+
+/*
+ * Base styles
+ * ========================================================================== */
+
+html {
+  color: #222;
+  font-weight: 100;
+  font-size: 1em; /* ~16px; */
+  font-family: var(--font-family-base);
+  line-height: 1.375; /* ~22px */
+}
+
+a {
+  color: #0074c2;
+}
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+::selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+  resize: vertical;
+}
+
+/*
+ * Browser upgrade prompt
+ * ========================================================================== */
+
+:global(.browserupgrade) {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+/*
+ * Print styles
+ * Inlined to avoid the additional HTTP request:
+ * http://www.phpied.com/delay-loading-your-print-css/
+ * ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: ' (' attr(href) ')';
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  /*
+   * Don't show links that are fragment identifiers,
+   * or use the `javascript:` pseudo protocol
+   */
+
+  a[href^='#']::after,
+  a[href^='javascript:']::after {
+    content: '';
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /*
+   * Printing Tables:
+   * http://css-discuss.incutio.com/wiki/Printing_Tables
+   */
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

src/components/Layout/Layout.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Layout.css';
+
+class Layout extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Layout);

src/components/Layout/Layout.test.js

@@ -0,0 +1,23 @@
+/* eslint-env mocha */
+/* eslint-disable padded-blocks, no-unused-expressions */
+
+import React from 'react';
+import { expect } from 'chai';
+import { render } from 'enzyme';
+import App from '../App';
+import Layout from './Layout';
+
+describe('Layout', () => {
+
+  it('renders children correctly', () => {
+    const wrapper = render(
+      <App context={{ insertCss: () => {} }}>
+        <Layout>
+          <div className="child" />
+        </Layout>
+      </App>,
+    );
+    expect(wrapper.find('div.child').length).to.eq(1);
+  });
+
+});

src/components/Layout/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Layout",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Layout.js"
+}

src/components/Link/Link.js

@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import history from '../../core/history';
+
+function isLeftClickEvent(event) {
+  return event.button === 0;
+}
+
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+
+class Link extends React.Component {
+  static propTypes = {
+    to: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+  };
+
+  handleClick = (event) => {
+    if (this.props.onClick) {
+      this.props.onClick(event);
+    }
+
+    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
+      return;
+    }
+
+    if (event.defaultPrevented === true) {
+      return;
+    }
+
+    event.preventDefault();
+    history.push(this.props.to);
+  };
+
+  render() {
+    const { to, children, ...props } = this.props;
+    return <a href={to} {...props} onClick={this.handleClick}>{children}</a>;
+  }
+}
+
+export default Link;

src/components/Link/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Link",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Link.js"
+}

src/components/Page/Page.css

@@ -0,0 +1,12 @@
+@import '../variables.css';
+
+.root {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 0 0 40px;
+  max-width: var(--max-content-width);
+}

src/components/Page/Page.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Page.css';
+
+class Page extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    html: PropTypes.string.isRequired,
+  };
+
+  render() {
+    const { title, html } = this.props;
+    return (
+      <div className={s.root}>
+        <div className={s.container}>
+          {title && <h1>{title}</h1>}
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Page);

src/components/Page/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Page",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Page.js"
+}

src/components/RsvpCard/RsvpCard.css

@@ -0,0 +1,98 @@
+@import '../variables.css';
+
+.root {
+  display: flex;
+  flex-flow: row wrap;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 20px;
+}
+
+@media (--sm-viewport) {
+  .root {
+    width: 50%;
+  }
+}
+
+.formGroup {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.label {
+  display: inline-block;
+  margin-bottom: 5px;
+  max-width: 100%;
+  font-weight: 700;
+}
+
+.input {
+  display: block;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  width: 100%;
+  height: 46px;
+  outline: 0;
+  border: 1px solid var(--colour-grey);
+  border-radius: 0;
+  background-color: #fff;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #616161;
+  font-size: 18px;
+  line-height: 1.3333333;
+  transition: border-color ease-in-out 0.15s,
+              box-shadow ease-in-out 0.15s,
+              background-color ease-in-out 0.15s;
+}
+
+.input:focus {
+  border-color: var(--colour-tertiary);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
+}
+
+.inputSuccess {
+  background-color: var(--colour-green);
+}
+
+.inputError {
+  background-color: var(--colour-red);
+}
+
+.rsvpDetails {
+  display: none;
+}
+
+.rsvpDetailsVisible {
+  display: block;
+}
+
+.iconContainer {
+  display: inline-block;
+  position: absolute;
+  top: 35px;
+  right: 15px;
+}
+
+.rsvpSummary {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  padding: 10px;
+  text-align: center;
+  opacity: 0;
+  border-radius: 0;
+  background-color: #fff;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #616161;
+  font-size: 18px;
+  pointer-events: none;
+  transition: opacity ease-in-out .4s;
+}
+
+.rsvpSummarySuccess {
+  opacity: 1;
+  background-color: var(--colour-green);
+}
+

src/components/RsvpCard/RsvpCard.js

@@ -0,0 +1,261 @@
+import React, { PropTypes } from 'react';
+import cx from 'classnames';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import { MdCheck, MdError } from 'react-icons/lib/md';
+import s from './RsvpCard.css';
+import { starters, mains } from '../../config';
+
+class RsvpCard extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    person: PropTypes.shape({
+      key: PropTypes.string,
+      firstname: PropTypes.string,
+      lastname: PropTypes.string,
+      email: PropTypes.string,
+      password: PropTypes.string,
+      completed: PropTypes.boolean,
+      attending: PropTypes.boolean,
+      dietary: PropTypes.string,
+      starter: PropTypes.string,
+      main: PropTypes.string,
+    }).isRequired,
+  };
+
+  state = {
+    detailsVisible: this.props.person.attending,
+    saveAttending: this.props.person.attending ? 'saved' : null,
+    saveStarter: this.props.person.starter !== '-1' ? 'saved' : null,
+    saveMain: this.props.person.main !== '-1' ? 'saved' : null,
+    saveDietary: this.props.person.dietary ? 'saved' : null,
+  };
+
+  isRSVPComplete(prop, value) {
+    function isOK(str) {
+      return (str === 'saved' || str === 'success');
+    }
+
+    if (prop === 'attending' && value === 'false') { return true; }
+
+    return (isOK(this.state.saveAttending) &&
+      isOK(this.state.saveStarter) &&
+      isOK(this.state.saveMain));
+  }
+
+  saveData(prop, value) {
+    const stateKey = `save${prop.charAt(0).toUpperCase()}${prop.slice(1)}`;
+    const state = {};
+
+    fetch('/rsvp/save', {
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        key: this.props.person.key,
+        prop,
+        value,
+      }),
+      credentials: 'include',
+    }).then(res => res.json())
+      .then(data => {
+        state[stateKey] = data.success ? 'success' : 'error';
+        this.setState(state);
+        if (this.isRSVPComplete(prop, value)) {
+          this.setState({
+            summaryState: 'success',
+            summary: `Thanks ${this.props.person.firstname}, your RSVP has been received`,
+          });
+
+          if (!this.state.saveCompleted) {
+            this.setState({ saveSompleted: true });
+            this.saveData('completed', true);
+          }
+
+          setTimeout(() => {
+            this.setState({
+              summaryState: null,
+              summary: null,
+            });
+          }, 5000);
+        }
+
+        state[stateKey] = data.success ? 'saved' : 'error';
+        setTimeout(() => {
+          this.setState(state);
+        }, 500);
+      }).catch(() => {
+        state[stateKey] = 'error';
+      });
+  }
+
+  handleAttendingChange = (event) => {
+    this.saveData('attending', event.target.value);
+    this.setState({
+      detailsVisible: event.target.value === 'true',
+      attendingResponse: event.target.value === 'true' ? '👍' : '☹️',
+    });
+  };
+
+  handleDietaryBlur = (event) => {
+    this.saveData('dietary', event.target.value);
+  };
+
+  handleStarterChange = (event) => {
+    this.saveData('starter', event.target.value);
+  };
+
+  handleMainChange = (event) => {
+    this.saveData('main', event.target.value);
+  };
+
+  handleFormSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  render() {
+    return (
+      <div className={cx(s.root, this.props.className)}>
+        <h2>
+          {this.props.person.firstname} {this.props.person.lastname}
+          <span> {this.state.attendingResponse}</span>
+        </h2>
+        <form onSubmit={this.handleFormSubmit}>
+          <div className={s.formGroup}>
+            <label className={s.label} htmlFor="attending">
+              Attending:
+            </label>
+            {this.props.person.attending === null ?
+              <select
+                className={[
+                  s.input,
+                  this.state.saveAttending === 'success' ? s.inputSuccess : null,
+                  this.state.saveAttending === 'error' ? s.inputError : null,
+                ].join(' ')}
+                id="attending"
+                name="attending"
+                defaultValue="-1"
+                onChange={this.handleAttendingChange}
+              >
+                <option value="-1" disabled>Will you be attending?</option>
+                <option value="true">
+                  Yes
+                </option>
+                <option value="false">
+                  No
+                </option>
+              </select>
+            :
+              <select
+                className={[
+                  s.input,
+                  this.state.saveAttending === 'success' ? s.inputSuccess : null,
+                  this.state.saveAttending === 'error' ? s.inputError : null,
+                ].join(' ')}
+                id="attending"
+                name="attending"
+                defaultValue={this.props.person.attending === true ? 'true' : 'false'}
+                onChange={this.handleAttendingChange}
+              >
+                <option value="true">
+                  Yes
+                </option>
+                <option value="false">
+                  No
+                </option>
+              </select>
+            }
+            <div className={s.iconContainer}>
+              {this.state.saveAttending === 'saved' ? <MdCheck size={30} color="green" /> : null}
+              {this.state.saveAttending === 'error' ? <MdError size={30} color="red" /> : null}
+            </div>
+          </div>
+          <div className={[s.rsvpDetails, this.state.detailsVisible ? s.rsvpDetailsVisible : null].join(' ')}>
+            <div className={s.formGroup}>
+              <label className={s.label} htmlFor="starter">
+                Starter:
+              </label>
+              <select
+                className={[
+                  s.input,
+                  this.state.saveStarter === 'success' ? s.inputSuccess : null,
+                  this.state.saveStarter === 'error' ? s.inputError : null,
+                ].join(' ')}
+                id="starter"
+                name="starter"
+                defaultValue={this.props.person.starter}
+                onChange={this.handleStarterChange}
+              >
+                {this.props.person.starter === '-1' ? <option value="-1" disabled>Please select a starter</option> : null}
+                {starters.map((starter, index) => (
+                  <option key={index} value={index}>{starter}</option>
+                ))}
+              </select>
+              <div className={s.iconContainer}>
+                {this.state.saveStarter === 'saved' ? <MdCheck size={30} color="green" /> : null}
+                {this.state.saveStarter === 'error' ? <MdError size={30} color="red" /> : null}
+              </div>
+            </div>
+            <div className={s.formGroup}>
+              <label className={s.label} htmlFor="main">
+                Main:
+              </label>
+              <select
+                className={[
+                  s.input,
+                  this.state.saveMain === 'success' ? s.inputSuccess : null,
+                  this.state.saveMain === 'error' ? s.inputError : null,
+                ].join(' ')}
+                id="main"
+                name="main"
+                defaultValue={this.props.person.main}
+                onChange={this.handleMainChange}
+              >
+                {this.props.person.main === '-1' ? <option value="-1" disabled>Please select a main course</option> : null}
+                {mains.map((main, index) => (
+                  <option key={index} value={index}>{main}</option>
+                ))}
+              </select>
+              <div className={s.iconContainer}>
+                {this.state.saveMain === 'saved' ? <MdCheck size={30} color="green" /> : null}
+                {this.state.saveMain === 'error' ? <MdError size={30} color="red" /> : null}
+              </div>
+            </div>
+            <div className={s.formGroup}>
+              <label className={s.label} htmlFor="dietary">
+                Dietary requirements (if any):
+              </label>
+              <input
+                className={[
+                  s.input,
+                  this.state.saveDietary === 'success' ? s.inputSuccess : null,
+                  this.state.saveDietary === 'error' ? s.inputError : null,
+                ].join(' ')}
+                id="dietary"
+                type="text"
+                name="dietary"
+                defaultValue={this.props.person.dietary}
+                onBlur={this.handleDietaryBlur}
+              />
+              <div className={s.iconContainer}>
+                {this.state.saveDietary === 'saved' ? <MdCheck size={30} color="green" /> : null}
+                {this.state.saveDietary === 'error' ? <MdError size={30} color="red" /> : null}
+              </div>
+            </div>
+          </div>
+        </form>
+        <div
+          className={[
+            s.rsvpSummary,
+            this.state.summaryState === 'success' ? s.rsvpSummarySuccess : null,
+          ].join(' ')}
+        >
+          {this.state.summary}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(RsvpCard);

src/components/RsvpCard/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "RsvpCard",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./RsvpCard.js"
+}

src/components/variables.css

@@ -0,0 +1,34 @@
+:root {
+  /*
+   * Typography
+   * ======================================================================== */
+
+  --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+
+  /*
+   * Layout
+   * ======================================================================== */
+
+  --max-content-width: 1000px;
+
+  /*
+   * Media queries breakpoints
+   * ======================================================================== */
+
+/*  --screen-xs-min: 480px;  /* Extra small screen / phone */
+/*  --screen-sm-min: 768px;  /* Small screen / tablet */
+/*  --screen-md-min: 992px;  /* Medium screen / desktop */
+/*  --screen-lg-min: 1200px; /* Large screen / wide desktop */
+
+  @custom-media --xs-viewport (min-width: 480px);
+  @custom-media --sm-viewport (min-width: 768px);
+  @custom-media --md-viewport (min-width: 992px);
+  @custom-media --lg-viewport (min-width: 1200px);
+
+  --colour-primary: #6495ED;
+  --colour-secondary: #2A6FEB;
+  --colour-tertiary: #2A6FEB;
+  --colour-grey: #CCC;
+  --colour-green: #87EDA2;
+  --colour-red: #FA7575;
+}