add eventrow to stories with knob to change hide calendar

client/src/components/ErrorShow.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const ErrorShow = ({ msg }) => (
   <span>

client/src/components/Register.js

@@ -1,6 +1,7 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { Link, withRouter } from 'react-router';
 import Modal from 'react-modal';
+import PropTypes from 'prop-types';
 import Terms from './Terms';
 
 class Register extends React.Component {

client/src/utils/dateFormatting.js

@@ -3,13 +3,14 @@ import moment from 'moment-timezone';
 export function getFormattedDayAndTime(date, endDate) {
   const localTimezone = moment.tz.guess();
 
-  const startDateMoment = moment(date);
+  const startDateMoment = moment(date).tz(localTimezone);
+  const endDateMoment = moment(endDate).tz(localTimezone);
   const day = startDateMoment.format('dddd, MMMM D, YYYY');
-  const start = moment(date).tz(localTimezone).format('h:mm');
-  const end = moment(endDate).tz(localTimezone).format('h:mm a z');
+  const startTime = startDateMoment.format('h:mm');
+  const endTime = endDateMoment.format('h:mm a z');
   return {
     day,
-    time: `${start}-${end}`
+    time: `${startTime}-${endTime}`
   };
 }
 

client/stories/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "globals": {
+    "jest": true
+  }
+}

client/stories/__tests__/__snapshots__/storyshots.spec.js.snap

@@ -13,7 +13,7 @@ exports[`Storyshots Event Event with customizable props 1`] = `
     <h4>
       Tuesday, January 1, 1901
        | 
-      4:00-7:30 pm UTC
+      11:00-2:30 am GMT
     </h4>
     <p>
       Galvanize, Golden Triangle, Denver
@@ -75,6 +75,63 @@ exports[`Storyshots Event Event with customizable props 1`] = `
 </div>
 `;
 
+exports[`Storyshots EventRow Event row with customizable props 1`] = `
+<div
+  className="row event-row"
+>
+  <div
+    className="small-12 medium-2 columns"
+  >
+    Monday, January 1, 2018
+  </div>
+  <div
+    className="small-12 medium-2 columns"
+  >
+    12:00-12:00 am GMT
+  </div>
+  <div
+    className="small-12 medium-5 columns"
+  >
+    music
+
+    denver
+  </div>
+  <div
+    className="small-12 medium-1 columns"
+  >
+    <a
+      onClick={[Function]}
+      style={Object {}}
+    >
+      details
+    </a>
+  </div>
+  <div
+    className="small-12 medium-2 columns"
+  >
+    <div
+      className="react-add-to-calendar"
+    >
+      <div
+        className="react-add-to-calendar__wrapper"
+      >
+        <a
+          className="react-add-to-calendar__button"
+          onClick={[Function]}
+        >
+          <span>
+            add to calendar 
+            <i
+              className="react-add-to-calendar__icon--right fa fa-caret-down"
+            />
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Header Logged In: Organizer 1`] = `
 <header
   className="top-bar"

client/stories/__tests__/storyshots.spec.js

@@ -1,4 +1,8 @@
 import initStoryshots from 'storyshots';
+import moment from 'moment-timezone';
+
+moment.tz.setDefault('Europe/London');
+moment.tz.guess = jest.fn(() => 'Europe/London');
 
 initStoryshots({
   configPath: 'client/stories/snapshotConfig'

client/stories/event.js

@@ -10,8 +10,8 @@ storiesOf('Event', module)
     'Check the knobs tab in the panel below to customize the props for this component',
     () => {
       const eventData = {
-        date: date('data.date', new Date('Jan 1, 1901 4:00 pm')),
-        endDate: date('data.endDate', new Date('Jan 1, 1901 7:30 pm')),
+        date: date('data.date', new Date('Jan 1, 1901 4:00 pm MST')),
+        endDate: date('data.endDate', new Date('Jan 1, 1901 7:30 pm MST')),
         id: 2,
         location: text('data.location', 'Galvanize, Golden Triangle, Denver'),
         name: text('data.name', 'The best event'),
@@ -38,6 +38,7 @@ storiesOf('Event', module)
           isRegistered={boolean('is Registered', false)}
           signUpForEvent={action('sign up for event')}
           cancelSignUpForEvent={action('cancel sign up for event')}
+          deleteEvent={action('delete event')}
         />
       );
     }

client/stories/eventrow.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs, boolean } from '@kadira/storybook-addon-knobs';
+import EventRow from '../src/components/EventRow';
+
+storiesOf('EventRow', module)
+  .addDecorator(withKnobs)
+  .addWithInfo(
+    'Event row with customizable props',
+    'Check the knobs tab in the panel below to customize the props for this component',
+    () => (
+      <EventRow
+        hideCalendar={boolean('hide calendar', false)}
+        event={{
+          date: '2018-01-01',
+          endDate: '2018-01-02',
+          id: 5,
+          location: 'denver',
+          name: 'music' }}
+      />
+    )
+  );

client/stories/index.js

@@ -1,3 +1,4 @@
 import '../src/scss/app.scss';
 import './header';
 import './event';
+import './eventrow';