Multiday events

src/shared/components/event-meta/index.js

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import styles from './style.css';
+
+import TagsList from '../tags-list';
+import EventLinksList from '../event-links-list';
+
+const EventMeta = ({
+  event,
+}) => (
+  <div>
+  {
+    event.externalLinks || event.internalLinks ?
+      <div className={styles.eventLinks}>
+      {
+        event.externalLinks ?
+          <EventLinksList
+            linkList={event.externalLinks}
+            listType="external" />
+          : null
+      }
+      {
+        event.internalLinks ?
+          <EventLinksList
+            linkList={event.internalLinks}
+            listType="internal" />
+          : null
+      }
+      </div>
+    : null
+  }
+  {
+    event.tags
+    ? <TagsList
+        tags={event.tags}
+        tagsLinkPath="about-us/events" />
+    : null
+  }
+  </div>
+);
+
+EventMeta.propTypes = {
+  event: PropTypes.object.isRequired,
+};
+
+export default EventMeta;

src/shared/components/event-meta/style.css

@@ -0,0 +1,4 @@
+.eventLinks {
+  composes: cf from "../../components/utils/layout.css";
+  margin-bottom: 1em;
+}

src/shared/components/events-list-entry/index.js

@@ -0,0 +1,62 @@
+import React, { PropTypes } from 'react';
+import styles from './style.css';
+import EventImage from '../event-image';
+import DateBubble from '../date-bubble';
+import EventMeta from '../event-meta';
+import EventTitle from '../event-title';
+import HR from '../hr';
+import { Grid, Cell } from '../grid';
+import { setEndDate, eventImagePath } from '../../util/events';
+import { eventHref } from '../../util/event';
+
+const EventsListEntry = ({
+  event,
+  timeline,
+}) => (
+  <li key={`event_${event.id}`} className={styles.eventItem}>
+    <Grid fit={false}>
+      <Cell size={12}>
+        <HR color="grey" customClassName=
+          {styles.mobileHorizontalLine} />
+        <DateBubble
+            startDateTime={event.startDateTime}
+            endDateTime={setEndDate(
+              timeline,
+              event.startDateTime,
+              event.endDateTime)}
+        />
+      </Cell>
+      <Cell size={1} key="event_picture_mobile" hideOn="mobileSM">
+        <EventImage
+          imgPath={eventImagePath(event.featureImageFilename)}
+          href={eventHref(event)} />
+      </Cell>
+      <Cell size={12} breakOn="mobile">
+        <Grid fit={false}>
+          <Cell size={8} key='event_description'
+            breakOn="mobileS">
+            <EventTitle eventTitle={event.title}
+              eventHref={eventHref(event)} />
+            <div className={styles.eventDescription}>
+              {event.strapline}
+            </div>
+            <EventMeta event={event} />
+          </Cell>
+          <Cell size={4} key='event_picture' breakOn="mobileS"
+            hideOn="mobileS">
+            <EventImage
+              imgPath={eventImagePath(event.featureImageFilename)}
+              href={eventHref(event)} />
+          </Cell>
+        </Grid>
+      </Cell>
+    </Grid>
+  </li>
+);
+
+EventsListEntry.propTypes = {
+  event: PropTypes.object.isRequired,
+  timeline: PropTypes.oneOf(['past', 'future', 'today']).isRequired,
+};
+
+export default EventsListEntry;

src/shared/components/events-list-entry/style.css

@@ -0,0 +1,15 @@
+.eventItem {
+  position: relative;
+  list-style-type: none;
+}
+
+.mobileHorizontalLine {
+  display: block;
+  margin: 1.5em 0 0 0;
+}
+
+.eventDescription {
+  margin-top: 10px;
+  float: left;
+}
+

src/shared/components/events-list/index.js

@@ -4,18 +4,9 @@
 
 import React, { PropTypes } from 'react';
 import styles from './style.css';
-
-import EventImage from '../event-image';
-import DateBubble from '../date-bubble';
-import HR from '../hr';
-import { Grid, Cell } from '../grid';
-
-import TagsList from '../tags-list';
-import EventLinksList from '../event-links-list';
 import EventsTimelineTitle from '../events-timeline-title';
-import EventTitle from '../event-title';
-import { eventHref } from '../../util/event';
-import { splitEvents, setEndDate, eventImagePath } from '../../util/events';
+import EventsListEntry from '../events-list-entry';
+import { splitEvents } from '../../util/events';
 
 const EventsList = ({
   events,
@@ -37,79 +28,19 @@ const EventsList = ({
         <ul className={styles.eventsList}>
           {
             relevantEvents.map((event) => (
-                <li key={`event_${event.id}`} className={styles.eventItem}>
-                  <Grid fit={false}>
-                    <Cell size={12}>
-                      <HR color="grey" customClassName=
-                        {styles.mobileHorizontalLine} />
-                      <DateBubble
-                          startDateTime={event.startDateTime}
-                          endDateTime={setEndDate(
-                            timeline,
-                            event.startDateTime,
-                            event.endDateTime)}
-                      />
-                    </Cell>
-                    <Cell size={1} key="event_picture_mobile" hideOn="mobileSM">
-                      <EventImage
-                        imgPath={eventImagePath(event.featureImageFilename)}
-                        href={eventHref(event)} />
-                    </Cell>
-                    <Cell size={12} breakOn="mobile">
-                      <Grid fit={false}>
-                        <Cell size={8} key='event_description'
-                          breakOn="mobileS">
-                          <EventTitle eventTitle={event.title}
-                            eventHref={eventHref(event)} />
-                          <div className={styles.eventDescription}>
-                            {event.strapline}
-                          </div>
-                          {
-                            event.externalLinks || event.internalLinks ?
-                              <div className={styles.eventLinks}>
-                              {
-                                event.externalLinks ?
-                                  <EventLinksList
-                                    linkList={event.externalLinks}
-                                    listType="external" />
-                                  : null
-                              }
-                              {
-                                event.internalLinks ?
-                                  <EventLinksList
-                                    linkList={event.internalLinks}
-                                    listType="internal" />
-                                  : null
-                              }
-                              </div>
-                            : null
-                          }
-                          {
-                            event.tags
-                            ? <TagsList
-                                tags={event.tags}
-                                tagsLinkPath="about-us/events" />
-                            : null
-                          }
-                        </Cell>
-                        <Cell size={4} key='event_picture' breakOn="mobileS"
-                          hideOn="mobileS">
-                          <EventImage
-                            imgPath={eventImagePath(event.featureImageFilename)}
-                            href={eventHref(event)} />
-                        </Cell>
-                      </Grid>
-                    </Cell>
-                  </Grid>
-                </li>
+              <EventsListEntry
+                event={event}
+                timeline={timeline}
+                key={`key_${event.id}`}
+              />
             ))
           }
         </ul>
       </div>
     );
   }
 
-  return null;
+  return (<noscript />);
 };
 
 EventsList.propTypes = {

src/shared/components/events-list/index.spec.js

@@ -12,6 +12,6 @@ describe('EventsList component', () => {
         defaultEvent,
       ]}
     />);
-    expect(wrapper.find('li').length).to.equal(1);
+    expect(wrapper.find('ul').length).to.equal(1);
   });
 });

src/shared/components/events-list/style.css

@@ -20,31 +20,11 @@
   padding-left: 0;
 }
 
-.eventItem {
-  position: relative;
-  list-style-type: none;
-}
-
 .arrow {
   color: red;
   padding-left: 5px;
 }
 
-.eventDescription {
-  margin-top: 10px;
-  float: left;
-}
-
-.eventLinks {
-  composes: cf from "../../components/utils/layout.css";
-  margin-bottom: 1em;
-}
-
-.mobileHorizontalLine {
-  display: block;
-  margin: 1.5em 0 0 0;
-}
-
 @media mobile {
   .eventsList {
     padding: 0;

src/shared/util/events.js

@@ -12,8 +12,9 @@ export function splitEvents({
     const endDateTime = dateFns.parse(event.endDateTime.iso);
 
     // In a rare case of user error we omit this event from the output list
-    if (!dateFns.isSameDay(startDateTime, endDateTime) &&
-      !dateFns.isBefore(startDateTime, endDateTime)) {
+    if ((!dateFns.isSameDay(startDateTime, endDateTime) &&
+      !dateFns.isBefore(startDateTime, endDateTime)) ||
+        dateFns.differenceInMinutes(endDateTime, startDateTime) < 0) {
       return false;
     }
 

src/shared/util/events.spec.js

@@ -11,6 +11,7 @@ let testEventsSingleDay = [];
 let testEventsMultiDay = [];
 let testEventsMultiDayInProgress = [];
 let testErrorMultiDay = [];
+let testEventsSingleDayWrongStartEndTime = [];
 let currentDate;
 
 describe('Set end date', () => {
@@ -217,8 +218,29 @@ describe('SplitEvents', () => {
         },
       },
     ];
+
+    testEventsSingleDayWrongStartEndTime = [
+      {
+        id: 'earlier-event',
+        startDateTime: {
+          iso: earlierToday,
+        },
+        endDateTime: {
+          iso: laterToday,
+        },
+      },
+      {
+        id: 'later-today-event',
+        startDateTime: {
+          iso: laterToday,
+        },
+        endDateTime: {
+          iso: earlierToday,
+        },
+      }];
   });
 
+
   afterEach(() => {
     MockDate.reset();
   });
@@ -330,5 +352,16 @@ describe('SplitEvents', () => {
       expect(returnedEvents[0].id).to.equal('future-event-2');
       expect(returnedEvents[1].id).to.equal('future-event-1');
     });
+
+    it('omits event from the result if end time is earlier than start time', () => {
+      const timeline = 'today';
+      const returnedEvents = splitEvents({
+        events: testEventsSingleDayWrongStartEndTime,
+        timeline,
+        todayDateTime: currentDate,
+      });
+      expect(returnedEvents.length).to.equal(1);
+      expect(returnedEvents[0].id).to.equal('earlier-event');
+    });
   });
 });