Turn venue list into components on booking page

src/pages/booking.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import Layout from '../components/Layout'
+import { VenueTemplate } from '../templates/venue'
 
 export const bookingPageQuery = graphql`
   query BookingPage {
@@ -9,30 +10,77 @@ export const bookingPageQuery = graphql`
       content
     }
     allWordpressWpVenues(
-        sort: { fields: date, order: DESC }
-      ) {
-        totalCount
-        edges {
-          node {
-            ...VenueFields
-          }
+      filter: { show_on_booking_page: { eq: "true" } }
+      sort: { order: ASC, fields: menu_order }
+    ) {
+      edges {
+        node {
+          ...VenueFields
+          menu_order
         }
       }
+    }
   }
 `
 
+const VenueList = ({ venues }) => {
+  return (
+    <div className="venue-list">
+      {venues.map(({ node: venue }) => (
+        <VenueTemplate
+          key={venue.id}
+          title={venue.title}
+          content={venue.content}
+          featuredMedia={venue.featured_media}
+          floor={venue.floor}
+          capacityLegal={venue.capacity_legal}
+          capacityStanding={venue.capacity_standing}
+          capacitySitting={venue.capacity_sitting}
+          usedFor={venue.used_for}
+          bar={venue.bar}
+          audio={venue.audio}
+          lighting={venue.lighting}
+          audioVideo={venue.audio_video}
+        />
+      ))}
+    </div>
+  )
+}
+
 export const BookingPage = () => {
   const data = useStaticQuery(bookingPageQuery)
   const { title, content } = data.wordpressPage
+  const venues = data.allWordpressWpVenues.edges
 
   return (
     <Layout>
-      <section className="page">
+      <section className="booking-page">
         <h1 className="page-title">{title}</h1>
         <div
           className="page-content wp-content"
           dangerouslySetInnerHTML={{ __html: content }}
         />
+        <VenueList venues={venues} />
+        <h2>Se utvalgte lokaler i vår 3D-løsning</h2>
+        <p>
+          Med vår 3D-løsning har du muligheten til å navigere deg rundt på
+          huset! Du kan bevege deg mellom etasjer ved å trykke på tallene i den
+          lille kolonnen nederst til høyre. Dra deg rundt fra rom til rom ved å
+          klikke dit du vil, og bruk den røde og hvite krystallen i høyre hjørne
+          til å få opptil en 360 graders rotasjon i alle rom. Pluss- og minus-
+          knappene i høyre hjørne kan brukes for å zoome inn eller ut. På denne
+          måten får du en rask og god oversikt over lokalene, og får et solid
+          innblikk i hvordan rommene ser ut. Vi har valgt at løsningen starter i
+          øverste etasje i Storsalen - men ta gjerne en titt på lokalene i alle
+          etasjer!
+        </p>
+        <iframe
+          title="test"
+          style={{ border: 0, height: '450px', width: '100%' }}
+          src="https://www.google.com/maps/embed?pb=!4v1521198562809!6m8!1m7!1sCAoSLEFGMVFpcE81LWR3UFhhcDVSTUduaWcyWXFsbElyRGpLZThLdlBLWFFkbllm!2m2!1d59.93243773194!2d10.71237824484!3f50.83!4f1.5300000000000011!5f0.5970117501821992"
+          frameBorder="0"
+          allowFullScreen="allowfullscreen"
+        />
       </section>
     </Layout>
   )

src/templates/venue.js

@@ -6,8 +6,9 @@ import Layout from '../components/Layout'
 import Map from '../components/Map'
 
 export class VenueTemplate extends React.Component {
-  render() {
+  renderInner() {
     const {
+      isSingle,
       title,
       content,
       featuredMedia,
@@ -24,13 +25,10 @@ export class VenueTemplate extends React.Component {
     const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
 
     return (
-      <section
-        className={`venue-page ${
-          hasFeaturedMedia ? 'has-featured-media' : 'no-featured-media'
-        }`}
-      >
+      <>
         <div className="venue-hero">
-          <h1 className="page-title">{title}</h1>
+          {isSingle && <h1 className="venue-title">{title}</h1>}
+          {!isSingle && <h2 className="venue-title">{title}</h2>}
           {hasFeaturedMedia && (
             <div className="venue-featured-image">
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
@@ -54,18 +52,50 @@ export class VenueTemplate extends React.Component {
             {audioVideo && <li>A/V: {audioVideo}</li>}
           </ul>
         </div>
-        <div className="venue-map">
-          <Map />
-        </div>
-      </section>
+        {isSingle && (
+          <div className="venue-map">
+            <Map />
+          </div>
+        )}
+      </>
+    )
+  }
+
+  render() {
+    const { isSingle, className, featuredMedia } = this.props
+    const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
+    const hasFeaturedMediaClass = hasFeaturedMedia
+      ? 'has-featured-media'
+      : 'no-featured-media'
+
+    if (isSingle) {
+      return (
+        <section className={`venue-page ${hasFeaturedMediaClass}`}>
+          {this.renderInner()}
+        </section>
+      )
+    }
+
+    return (
+      <div className={`venue ${hasFeaturedMediaClass}`}>
+        {this.renderInner()}
+      </div>
     )
   }
 }
 
 VenueTemplate.propTypes = {
+  isSingle: PropTypes.bool.isRequired,
+  className: PropTypes.string,
   title: PropTypes.string.isRequired,
   content: PropTypes.string,
-  featuredMedia: PropTypes.shape({}),
+  featuredMedia: PropTypes.shape({
+    localFile: PropTypes.shape({
+      childImageSharp: PropTypes.shape({
+        fluid: PropTypes.shape({}),
+      }),
+    }),
+  }),
   floor: PropTypes.string,
   capacityLegal: PropTypes.string,
   capacityStanding: PropTypes.string,
@@ -83,6 +113,8 @@ const VenuePage = ({ data }) => {
   return (
     <Layout>
       <VenueTemplate
+        isSingle={true}
+        className="venue-page"
         title={venue.title}
         content={venue.content}
         featuredMedia={venue.featured_media}
@@ -101,7 +133,9 @@ const VenuePage = ({ data }) => {
 }
 
 VenuePage.propTypes = {
-  data: PropTypes.shape({}).isRequired,
+  data: PropTypes.shape({
+    wordpressWpVenues: PropTypes.shape({}),
+  }).isRequired,
 }
 
 export default VenuePage