From 8cf3db32affa9b858eecde18bd8fb4ca67059938 Mon Sep 17 00:00:00 2001 From: Jonas Braathen Date: Fri, 22 Feb 2019 02:39:00 +0100 Subject: [PATCH] Show event types --- gatsby-node.js | 40 +++++++++++++++- src/components/EventList.js | 93 ++++++++++++++++++++++++------------- src/templates/event-type.js | 48 +++++++++++++++++++ src/templates/event.js | 33 +++++++------ 4 files changed, 168 insertions(+), 46 deletions(-) create mode 100644 src/templates/event-type.js diff --git a/gatsby-node.js b/gatsby-node.js index b3fa858..7e20d40 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -158,6 +158,43 @@ exports.createPages = ({ actions, graphql }) => { component: programTemplate, }) }) + .then(() => { + return graphql(` + { + allWordpressWpEventType(filter: { count: { gt: 0 } }) { + edges { + node { + id + name + slug + fields { + link + } + } + } + } + } + `) + }) + .then(result => { + if (result.errors) { + result.errors.forEach(e => console.error(e.toString())) + return Promise.reject(result.errors) + } + + const eventTypeTemplate = path.resolve(`./src/templates/event-type.js`) + + _.each(result.data.allWordpressWpEventType.edges, ({ node: event_type }) => { + createPage({ + path: event_type.fields.link, + component: eventTypeTemplate, + context: { + name: event_type.name, + slug: event_type.slug, + }, + }) + }) + }) .then(() => { return graphql(` { @@ -276,7 +313,8 @@ exports.onCreateNode = ({ node, actions, getNode }) => { } if ((node.internal.type === 'wordpress__POST') || - (node.internal.type === 'wordpress__wp_events')) { + (node.internal.type === 'wordpress__wp_events') || + (node.internal.type === 'wordpress__wp_event_type')) { const link = new URL(node.link).pathname createNodeField({ node, diff --git a/src/components/EventList.js b/src/components/EventList.js index c87cf8a..4d03797 100644 --- a/src/components/EventList.js +++ b/src/components/EventList.js @@ -8,19 +8,50 @@ import 'moment/locale/nb' moment.locale('nb') export default class EventList extends React.Component { - formatDate(dt) { - return moment(dt).format('D. MMMM') - } - - formatTime(dt) { - return moment(dt).format('HH:mm') - } - - formatTimes(start, end, sep) { - if (!end) { - return this.formatTime(start) - } - return this.formatTime(start) + sep + this.formatTime(end) + render_event(event) { + console.log(event) + return ( + +
+ {event.featured_media && event.featured_media.localFile && + } +
+
+

+ {event.title} +

+
+ {moment(event.start_time).format('HH:mm')} + + {moment(event.start_time).format('dddd')} + {moment(event.start_time).format('D.')} + {moment(event.start_time).format('MMMM')} + {/* Only specify year if different. */} + {!moment(event.start_time).isSame(new Date(), 'year') && + {moment(event.start_time).format('YYYY')} + } + + {event.event_type && event.event_type.length && +
+
    + {event.event_type.map(type => ( +
  • + + {type.name} + +
    • + ))} +
+
+ } +
+
+ + ) } render() { @@ -31,25 +62,7 @@ export default class EventList extends React.Component {

{title}

{events.map(({ node: event }) => ( - -
- {event.featured_media && event.featured_media.localFile && - } -
-
-

- {event.title} -

-
- {this.formatTime(event.start_time)} - {this.formatDate(event.start_time)} -
-
- + this.render_event(event) ))}
@@ -63,6 +76,15 @@ EventList.propTypes = { } export const pageQuery = graphql` + fragment EventTypeFields on wordpress__wp_events { + event_type { + name + slug + fields { + link + } + } + } fragment EventListFields on wordpress__wp_events { id title @@ -76,5 +98,12 @@ export const pageQuery = graphql` fields { link } + event_type { + name + slug + fields { + link + } + } } ` diff --git a/src/templates/event-type.js b/src/templates/event-type.js new file mode 100644 index 0000000..d5996c7 --- /dev/null +++ b/src/templates/event-type.js @@ -0,0 +1,48 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { graphql } from 'gatsby' +import Layout from '../components/Layout' +import EventList from '../components/EventList' + +export default class EventTypeProgram extends React.Component { + render() { + const { data, pageContext } = this.props + const { edges: events, totalCount } = data.allWordpressWpEvents + const { name: eventTypeName } = pageContext + + return ( + + + + ) + } +} + +EventTypeProgram.propTypes = { + data: PropTypes.shape({ + allWordpressWpEventType: PropTypes.shape({ + edges: PropTypes.array, + }), + }), +} + +export const pageQuery = graphql` + query EventTypeProgramPage($slug: String!) { + site { + siteMetadata { + title + } + } + allWordpressWpEvents( + filter: { event_type: { elemMatch: { slug: { eq: $slug } } } }, + sort: { fields: date, order: DESC } + ) { + totalCount + edges { + node { + ...EventListFields + } + } + } + } +` diff --git a/src/templates/event.js b/src/templates/event.js index 2861a4f..8c6a04f 100644 --- a/src/templates/event.js +++ b/src/templates/event.js @@ -30,7 +30,8 @@ export const EventTemplate = ({ facebookUrl, ticketUrl, priceStudent, - priceRegular + priceRegular, + eventTypes }) => { return (
@@ -53,12 +54,12 @@ export const EventTemplate = ({ {moment(startTime).format('YYYY')} } -
+
Start: {moment(startTime).format('HH:mm')}
{/* TODO: make the API stop assuming event duration is 2 hours when unspecified? */} {endTime && -
+
Slutt: {moment(endTime).format('HH:mm')}
} @@ -71,6 +72,20 @@ export const EventTemplate = ({ {facebookUrl && Se Facebook-event } + {eventTypes && eventTypes.length && +
+

Konsept

+
    + {eventTypes.map(type => ( +
  • + + {type.name} + +
    • + ))} +
+
+ }
@@ -107,10 +122,7 @@ const Event = ({ data }) => { ticketUrl={event.ticket_url} priceStudent={event.price_member} priceRegular={event.price_regular} - // categories={post.categories} - // tags={post.tags} - // date={post.date} - // author={post.author} + eventTypes={event.event_type} /> ) @@ -125,12 +137,6 @@ Event.propTypes = { export default Event export const eventQuery = graphql` - fragment EventFields on wordpress__wp_events { - id - slug - content - title - } query EventByID($id: String!) { wordpressWpEvents(id: { eq: $id }) { id @@ -149,6 +155,7 @@ export const eventQuery = graphql` ...FluidImage } } + ...EventTypeFields } } `