Refactor: Extract SeatingMap component [NEW]

This commit has no equivalent in the Stimulus branch. Here, a concept of a
`SeatingMap` component emerges from `index.js`. This is a quality of working in
React. The library library makes it easy to extract related and semantic behavior
into into reusable, testable components.

Rails has tools like partial, presenters, view object, etc. But when faced with
a ERB template with a rich history of changes, dependencies on instance variables,
global view helpers, local variables contribute to some of the difficulty of
extracting isolated, and testable behavior.

app/components/SeatingMap.js

@@ -0,0 +1,64 @@
+import React from 'react'
+
+const buildSectionElements = (sections) => {
+  return sections.map((section, index) => {
+    const seatElements = section.seats.map((seat) => (
+      <a
+        href={seat.venueFloorSeatPath}
+        aria-label={seat.ariaLabel}
+        key={seat.venueFloorSeatPath}
+       >
+        <use
+          width="12px"
+          height="12px"
+          xlinkHref={seat.href}
+          x={seat.x}
+          y={seat.y}
+        />
+      </a>
+    ))
+
+    return <g key={index}>{seatElements}</g>
+  })
+}
+
+export default class extends React.Component {
+  render() {
+    const { sections } = this.props
+    const sectionElements = buildSectionElements(sections)
+
+    return(
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        className="syos-seat-map"
+        width="1600px"
+        height="1600px"
+        viewBox="0 0 1600 1600"
+      >
+        <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
+        <svg style={{display: "none"}}>
+          <symbol
+            id="seat-icon-unselected"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+            <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
+          </symbol>
+
+          <symbol
+            id="seat-icon-selected"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+          </symbol>
+        </svg>
+        { sectionElements }
+      </svg>
+    )
+  }
+}

app/views/seats/index.js

@@ -1,29 +1,8 @@
 import React from 'react'
-import Layout from '../../components/Layout'
 import SeatDialog from '../../components/SeatDialog'
 import Cart from '../../components/Cart'
-
-const buildSectionElements = (sections) => {
-  return sections.map((section, index) => {
-    const seatElements = section.seats.map((seat) => (
-      <a
-        href={seat.venueFloorSeatPath}
-        aria-label={seat.ariaLabel}
-        key={seat.venueFloorSeatPath}
-       >
-        <use
-          width="12px"
-          height="12px"
-          xlinkHref={seat.href}
-          x={seat.x}
-          y={seat.y}
-        />
-      </a>
-    ))
-
-    return <g key={index}>{seatElements}</g>
-  })
-}
+import SeatingMap from '../../components/SeatingMap'
+import Layout from '../../components/Layout'
 
 export default (props) => {
   const {
@@ -33,8 +12,6 @@ export default (props) => {
     seat,
   } = props
 
-  const sectionElements = buildSectionElements(sections)
-
   return (
     <Layout {...props}>
       <SeatDialog {...seat} />
@@ -49,39 +26,8 @@ export default (props) => {
           className="syos-frame"
         >
           <div className="syos-frame__map">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-              className="syos-seat-map"
-              width="1600px"
-              height="1600px"
-              viewBox="0 0 1600 1600"
-            >
-              <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
-              <svg style={{display: "none"}}>
-                <symbol
-                  id="seat-icon-unselected"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                >
-                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
-                  <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
-                </symbol>
-
-                <symbol
-                  id="seat-icon-selected"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                >
-                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
-                </symbol>
-              </svg>
-              { sectionElements }
-            </svg>
+            <SeatingMap sections={sections} />
           </div>
-
           <div className="syos-frame__sidebar">
             <Cart cart={cart} />
           </div>