diff --git a/src/core/util.js b/src/core/util.js index d36434a..bedd459 100644 --- a/src/core/util.js +++ b/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', + ) +} diff --git a/src/ducks/events.selector.js b/src/ducks/events.selector.js index 763c09c..eaafcab 100644 --- a/src/ducks/events.selector.js +++ b/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 }, ) diff --git a/src/routes/index.js b/src/routes/index.js index b06c872..6bb98ac 100644 --- a/src/routes/index.js +++ b/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}) => ( + Upcoming Events - {events.map(event => )} + {upcomingEvents.map(event => )} + + Past Events + + {pastEvents.map(event => )} ) const mapStateToProps = state => ({ - events: eventsSelector(state), + ...eventsSelector(state), }) const enhance = connect(mapStateToProps)