diff --git a/src/components/EventList.js b/src/components/EventList.js index 1bab5ff..def10eb 100644 --- a/src/components/EventList.js +++ b/src/components/EventList.js @@ -2,16 +2,18 @@ import React from 'react' import PropTypes from 'prop-types' import { Link, graphql } from 'gatsby' import Img from 'gatsby-image' +import _ from 'lodash' import moment from 'moment' import 'moment/locale/nb' +import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable' moment.locale('nb') export default class EventList extends React.Component { render() { - const { events, title, onlyUpcoming, numDays } = this.props + const { events, title, onlyUpcoming, numDays, groupBy } = this.props - const displayEvents = events.filter(({ node: event }) => { + const filteredEvents = events.filter(({ node: event }) => { const startTime = moment(event.start_time) if (onlyUpcoming && !startTime.isSameOrAfter(new Date(), 'day')) { return false @@ -29,12 +31,41 @@ export default class EventList extends React.Component {
{title &&

{title}

}
- {displayEvents.map(({ node: event }) => this.renderEvent(event))} + {groupBy && this.renderEventsByDate(filteredEvents, groupBy)} + {!groupBy && + filteredEvents.map(({ node: event }) => this.renderEvent(event))}
) } + renderEventsByDate(filteredEvents, groupBy) { + let groupByFormat = null + if (groupBy === 'day') { + groupByFormat = 'YYYY-MM-DD' + } + if (groupBy === 'month') { + groupByFormat = 'YYYY-MM' + } + const grouper = ({ node: event }) => { + return moment(event.start_time).format(groupByFormat) + } + const groupedEvents = _.groupBy(filteredEvents, grouper) + return _.map(groupedEvents, (theseEvents, date) => { + return ( +
+
+ {groupBy === 'day' && moment(date).format('dddd D. MMMM')} + {groupBy === 'month' && moment(date).format('MMMM')} +
+ {theseEvents.map(({ node: event }) => { + return
{this.renderEvent(event)}
+ })} +
+ ) + }) + } + renderEvent(event) { return ( @@ -70,9 +101,7 @@ export default class EventList extends React.Component {
@@ -89,11 +118,13 @@ EventList.propTypes = { title: PropTypes.string, onlyUpcoming: PropTypes.bool, numDays: PropTypes.number, + groupBy: PropTypes.string, } EventList.defaultProps = { onlyUpcoming: true, numDays: 0, + groupBy: null, } export const pageQuery = graphql` diff --git a/src/templates/event-program.js b/src/templates/event-program.js index 68343c8..fa80273 100644 --- a/src/templates/event-program.js +++ b/src/templates/event-program.js @@ -11,7 +11,7 @@ export default class EventProgram extends React.Component { return ( - + ) } diff --git a/src/templates/front-page.js b/src/templates/front-page.js index 4ee147d..de913f6 100644 --- a/src/templates/front-page.js +++ b/src/templates/front-page.js @@ -13,7 +13,7 @@ export default class IndexPage extends React.Component { return ( - + )