Show event types

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,

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 (
+      <Link
+        to={event.fields.link}
+        className="event"
+        key={event.id}
+      >
+        <div className="event-image">
+          {event.featured_media && event.featured_media.localFile &&
+            <Img fluid={event.featured_media.localFile.childImageSharp.fluid} />}
+        </div>
+        <header className="event-header">
+          <h2 className="event-title">
+            {event.title}
+          </h2>
+          <div className="event-meta">
+            <span className="event-start">{moment(event.start_time).format('HH:mm')}</span>
+            <span className="event-date">
+              <span className="event-date-weekday">{moment(event.start_time).format('dddd')} </span>
+              <span className="event-date-day">{moment(event.start_time).format('D.')} </span>
+              <span className="event-date-month">{moment(event.start_time).format('MMMM')} </span>
+              {/* Only specify year if different. */}
+              {!moment(event.start_time).isSame(new Date(), 'year') &&
+                <span className="event-date-year">{moment(event.start_time).format('YYYY')} </span>
+              }
+            </span>
+            {event.event_type && event.event_type.length &&
+              <div className="event-types">
+                <ul className="event-types-list">
+                  {event.event_type.map(type => (
+                    <li key={`${type.slug}`}>
+                      <Link to={type.fields.link}>
+                        {type.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            }
+          </div>
+        </header>
+      </Link>
+    )
   }
 
   render() {
@@ -31,25 +62,7 @@ export default class EventList extends React.Component {
         <h1 className="section-title">{title}</h1>
         <div className="event-list">
           {events.map(({ node: event }) => (
-            <Link
-              to={event.fields.link}
-              className="event"
-              key={event.id}
-            >
-              <div className="event-image">
-                {event.featured_media && event.featured_media.localFile &&
-                  <Img fluid={event.featured_media.localFile.childImageSharp.fluid} />}
-              </div>
-              <header className="event-header">
-                <h2 className="event-title">
-                  {event.title}
-                </h2>
-                <div className="event-meta">
-                  <span class="event-start">{this.formatTime(event.start_time)}</span>
-                  <span class="event-date">{this.formatDate(event.start_time)}</span>
-                </div>
-              </header>
-            </Link>
+            this.render_event(event)
           ))}
         </div>
       </section>
@@ -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
+      }
+    }
   }
 `

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 (
+      <Layout>
+        <EventList events={events} title={eventTypeName} />
+      </Layout>
+    )
+  }
+}
+
+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
+        }
+      }
+    }
+  }
+`

src/templates/event.js

@@ -30,7 +30,8 @@ export const EventTemplate = ({
   facebookUrl,
   ticketUrl,
   priceStudent,
-  priceRegular
+  priceRegular,
+  eventTypes
 }) => {
   return (
     <section className="event-page">
@@ -53,12 +54,12 @@ export const EventTemplate = ({
                 <span className="event-date-year">{moment(startTime).format('YYYY')} </span>
               }
             </div>
-            <div className="end-time">
+            <div className="event-time-start">
                 Start: {moment(startTime).format('HH:mm')}
             </div>
             {/* TODO: make the API stop assuming event duration is 2 hours when unspecified? */}
             {endTime &&
-              <div className="end-time">
+              <div className="event-time-end">
                 Slutt: {moment(endTime).format('HH:mm')}
               </div>
             }
@@ -71,6 +72,20 @@ export const EventTemplate = ({
             {facebookUrl &&
               <a className="facebook-url" href={facebookUrl}>Se Facebook-event</a>
             }
+            {eventTypes && eventTypes.length &&
+              <div>
+                <h4>Konsept</h4>
+                <ul className="event-types">
+                  {eventTypes.map(type => (
+                    <li key={`${type.slug}`}>
+                      <Link to={type.fields.link}>
+                        {type.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            }
           </div>
         </div>
         <div className="event-hero_image">
@@ -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}
       />
     </Layout>
   )
@@ -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
     }
   }
 `