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 {
{event.event_types.map(type => (
- -
- {type.name}
-
+ - {type.name}
))}
@@ -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 (
-
+
)