Split pass and upcoming events

src/core/util.js

@@ -1,3 +1,5 @@
+import fecha from 'fecha'
+
 export function truncate(text, len = 100, elipsis = '...') {
   if (text.length > len) {
     return text.substr(0, len - elipsis.length) + elipsis
@@ -7,3 +9,11 @@ export function truncate(text, len = 100, elipsis = '...') {
 }
 
 export const quote = text => `“${text.trim()}”`
+
+export function dateParser(dateObj) {
+  if (!dateObj || !dateObj.date || !dateObj.month || !dateObj.year) return null
+  return fecha.parse(
+    `${dateObj.date} ${dateObj.month} ${dateObj.year}`,
+    'D M YYYY',
+  )
+}

src/ducks/events.selector.js

@@ -1,6 +1,8 @@
 import {createSelector} from 'reselect'
 import Fuse from 'fuse.js'
 
+import { dateParser } from '../core/util'
+
 const searchOptions = {
   shouldSort: true,
   keys: [
@@ -50,6 +52,27 @@ function filterByFavorites(events, isFavOnly, favorites) {
   return events
 }
 
+function splitEvents(events) {
+  const startOfToday = new Date()
+  startOfToday.setHours(0, 0, 0, 0)
+  const upcomingEvents = events
+    .filter(event => dateParser(event.start) - startOfToday >= 0)
+    .sort((a, b) => {
+      const aDate = dateParser(a.start)
+      const bDate = dateParser(b.start)
+      if (aDate - bDate > 0) return 1
+      else if (aDate - bDate < 0) return -1
+      return 0
+    })
+  const pastEvents = events.filter(
+    event => dateParser(event.start) - startOfToday < 0,
+  )
+  return {
+    pastEvents,
+    upcomingEvents,
+  }
+}
+
 const eventsSelector = createSelector(
   state => state.app.events,
   state => state.app.search,
@@ -60,7 +83,7 @@ const eventsSelector = createSelector(
     events = filterByTags(events, tagFilters)
     events = filterBySearch(events, query)
     events = filterByFavorites(events, isFavOnly, favs)
-
+    events = splitEvents(events)
     return events
   },
 )

src/routes/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import styled from 'react-emotion'
+import fecha from 'fecha'
 
 import Search from '../components/Search'
 import TagList from '../components/TagList'
 import EventCard from '../components/EventCard'
 
 import eventsSelector from '../ducks/events.selector'
+import { dateParser } from '../core/util'
 
 const Container = styled.div`
   display: flex;
@@ -27,9 +29,10 @@ const Container = styled.div`
 const Title = styled.h1`
   margin: 0;
 
-  color: white;
+  color: black;
   font-weight: 300;
   font-size: 1.38em;
+  margin-bottom: 20px;
 `
 
 const List = styled.div`
@@ -41,16 +44,21 @@ const List = styled.div`
   max-width: 1000px;
 `
 
-const Landing = ({events}) => (
+const Landing = ({upcomingEvents, pastEvents}) => (
   <Container>
+    <Title>Upcoming Events</Title>
     <List>
-      {events.map(event => <EventCard key={event.id} data={event} />)}
+      {upcomingEvents.map(event => <EventCard key={event.id} data={event} />)}
+    </List>
+    <Title>Past Events</Title>
+    <List>
+      {pastEvents.map(event => <EventCard key={event.id} data={event} />)}
     </List>
   </Container>
 )
 
 const mapStateToProps = state => ({
-  events: eventsSelector(state),
+  ...eventsSelector(state),
 })
 
 const enhance = connect(mapStateToProps)