Add RSVP end date and disable responses

src/routes/rsvp/Rsvp.js

@@ -14,6 +14,8 @@ class Rsvp extends React.Component {
       starter: PropTypes.string,
       main: PropTypes.string,
     })).isRequired,
+    rsvpEnd: PropTypes.string.isRequired,
+    isEditable: PropTypes.bool.isRequired,
   };
 
   constructor(props) {
@@ -38,11 +40,16 @@ class Rsvp extends React.Component {
           <h1 className={s.heading}>Odpovezte prosím</h1>
           <div className={s.flexContainer}>
             {this.props.people.map(person => (
-              <RsvpCard key={person.key} person={person} focusCallback={this.focusCallback} />
+              <RsvpCard
+                key={person.key}
+                person={person}
+                focusCallback={this.focusCallback}
+                isEditable={this.props.isEditable}
+              />
             ))}
           </div>
           <div className={s.notes}>
-            <p>You can modify the above details up until XX/XX/XXXX</p>
+            <p>You can modify the above details up until {this.props.rsvpEnd}</p>
           </div>
         </div>
       </div>

src/routes/rsvp/index.js

@@ -3,13 +3,44 @@ import Layout from '../../components/Layout';
 import fetchQL from '../../core/fetchQL';
 import Rsvp from './Rsvp';
 import NotFound from '../notFound/NotFound';
+import { rsvpEndDate } from '../../config';
 
 let title = 'RSVP';
 
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
 export default {
 
   path: '/rsvp/:password',
 
+  getRsvpEnd() {
+    const date = rsvpEndDate.getDate();
+    let dateSuffix = 'th';
+    if (date === 1 || date === 21 || date === 31) { dateSuffix = 'st'; }
+    if (date === 2 || date === 22) { dateSuffix = 'nd'; }
+    if (date === 3 || date === 23) { dateSuffix = 'rd'; }
+    const month = months[rsvpEndDate.getMonth()];
+    const year = rsvpEndDate.getFullYear();
+    return `${date}${dateSuffix} ${month} ${year}`;
+  },
+
+  isEditable() {
+    return new Date() < rsvpEndDate;
+  },
+
   async action({ params }) {
     if (!params.password) {
       return { redirect: '/' };
@@ -32,7 +63,16 @@ export default {
 
     return {
       title,
-      component: <Layout><Rsvp title={title} people={people} /></Layout>,
+      component: (
+        <Layout>
+          <Rsvp
+            title={title}
+            people={people}
+            rsvpEnd={this.getRsvpEnd()}
+            isEditable={this.isEditable()}
+          />
+        </Layout>
+      ),
     };
   },