Add associations

gatsby-config.js

@@ -22,6 +22,7 @@ module.exports = {
         // Set to true to debug endpoints on 'gatsby build'
         verboseOutput: true,
         includedRoutes: [
+          '**/*/*/associations',
           '**/*/*/categories',
           '**/*/*/events',
           '**/*/*/event_types',

gatsby-node.js

@@ -198,6 +198,60 @@ exports.createPages = ({ actions, graphql }) => {
         }
       )
     })
+    .then(() => {
+      return graphql(`
+        {
+          allWordpressWpAssociations {
+            edges {
+              node {
+                id
+                slug
+                status
+                fields {
+                  link
+                }
+              }
+            }
+          }
+        }
+      `)
+    })
+    .then(result => {
+      if (result.errors) {
+        result.errors.forEach(e => console.error(e.toString()))
+        return Promise.reject(result.errors)
+      }
+
+      const associationTemplate = path.resolve(`./src/templates/association.js`)
+
+      // In production builds, filter for only published associations.
+      const allAssociations = result.data.allWordpressWpAssociations.edges
+      const associations =
+        process.env.NODE_ENV === 'production'
+          ? getOnlyPublished(allAssociations)
+          : allAssociations
+
+      // Iterate over the array of associations
+      _.each(associations, ({ node: association }) => {
+        // Create the Gatsby page for this WordPress event
+        createPage({
+          path: association.fields.link,
+          component: associationTemplate,
+          context: {
+            id: association.id,
+          },
+        })
+      })
+
+      // Create the list of associations
+      const associationListTemplate = path.resolve(
+        `./src/templates/association-list.js`
+      )
+      createPage({
+        path: `/foreningene/`,
+        component: associationListTemplate,
+      })
+    })
     .then(() => {
       return graphql(`
         {
@@ -315,11 +369,13 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
     })
   }
 
-  if (
-    node.internal.type === 'wordpress__POST' ||
-    node.internal.type === 'wordpress__wp_events' ||
-    node.internal.type === 'wordpress__wp_event_types'
-  ) {
+  relativeLinksFor = [
+    'wordpress__POST',
+    'wordpress__wp_associations',
+    'wordpress__wp_events',
+    'wordpress__wp_event_types',
+  ]
+  if (relativeLinksFor.includes(node.internal.type)) {
     const link = new URL(node.link).pathname
     createNodeField({
       node,

src/components/AssociationList.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+
+export default class AssociationList extends React.Component {
+  render_association(association) {
+    return (
+      <div>
+        <Link
+          to={association.fields.link}
+          className="association"
+          key={association.id}
+        >
+          {association.featured_media && association.featured_media.localFile && (
+            <div className="association-image">
+              <Img
+                fluid={
+                  association.featured_media.localFile.childImageSharp.fluid
+                }
+              />
+            </div>
+          )}
+          <h2 className="association-title">{association.title}</h2>
+        </Link>
+
+        <div
+          className="association-description"
+          dangerouslySetInnerHTML={{ __html: association.excerpt }}
+        />
+      </div>
+    )
+  }
+
+  render() {
+    const { associations, title } = this.props
+
+    return (
+      <section className="associations">
+        <h1 className="section-title">{title}</h1>
+        <div className="association-list">
+          {associations.map(({ node: association }) =>
+            this.render_association(association)
+          )}
+        </div>
+      </section>
+    )
+  }
+}
+
+AssociationList.propTypes = {
+  associations: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string,
+}
+
+export const pageQuery = graphql`
+  fragment AssociationListFields on wordpress__wp_associations {
+    id
+    title
+    excerpt
+    featured_media {
+      localFile {
+        ...FluidImage
+      }
+    }
+    fields {
+      link
+    }
+  }
+`

src/templates/association-list.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
+import AssociationList from '../components/AssociationList'
+
+export default class AssociationListPage extends React.Component {
+  render() {
+    const { data } = this.props
+    const { edges: associations } = data.allWordpressWpAssociations
+
+    return (
+      <Layout>
+        <AssociationList associations={associations} title="Foreninger" />
+      </Layout>
+    )
+  }
+}
+
+AssociationListPage.propTypes = {
+  data: PropTypes.shape({
+    allWordpressWpEvents: PropTypes.shape({
+      edges: PropTypes.array,
+    }),
+  }),
+}
+
+export const pageQuery = graphql`
+  query {
+    allWordpressWpAssociations(sort: { fields: title, order: ASC }) {
+      edges {
+        node {
+          ...AssociationListFields
+        }
+      }
+    }
+  }
+`

src/templates/association.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
+import Img from 'gatsby-image'
+
+export const AssociationTemplate = data => {
+  const {
+    title,
+    content,
+    hasFeaturedMedia,
+    featuredMedia,
+    type,
+    homepage,
+  } = data
+  return (
+    <section className="association">
+      <h1 className="section-title">{title}</h1>
+      {hasFeaturedMedia && (
+        <div className="assocation-logo">
+          <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+        </div>
+      )}
+      {homepage && (
+        <div className="association-homepage">
+          <a href="{{ homepage }}">Nettside</a>
+        </div>
+      )}
+      <div className="association-type">Type: {type}</div>
+      <div
+        className="association-content"
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+    </section>
+  )
+}
+
+AssociationTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string,
+}
+
+const Association = ({ data }) => {
+  const { wordpressWpAssociations: association } = data
+
+  return (
+    <Layout>
+      <AssociationTemplate
+        title={association.title}
+        content={association.content}
+        type={association.association_type}
+        homepage={association.association_homepage}
+        hasFeaturedMedia={!!association.featured_media.localFile}
+        featuredMedia={association.featured_media}
+      />
+    </Layout>
+  )
+}
+
+Association.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+export default Association
+
+export const associationQuery = graphql`
+  query AssociationById($id: String!) {
+    wordpressWpAssociations(id: { eq: $id }) {
+      title
+      content
+      association_type
+      association_homepage
+      featured_media {
+        localFile {
+          ...FluidImage
+        }
+      }
+    }
+  }
+`

src/templates/event.js

@@ -94,9 +94,11 @@ export const EventTemplate = ({
             )}
           </div>
         </div>
-        <div className="event-hero_image">
-          <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
-        </div>
+        {hasFeaturedMedia && (
+          <div className="event-hero_image">
+            <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+          </div>
+        )}
       </div>
       <div className="event-body">
         <div dangerouslySetInnerHTML={{ __html: content }} />