Add associations

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 }} />