From 8397aa2d6ce2ec2825026e9e02a0452a6c198ae7 Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Thu, 15 Jul 2021 20:37:25 -0400
Subject: [PATCH] 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 | 64 ++++++++++++++++++++++++++++++++++++
 app/views/seats/index.js     | 60 ++-------------------------------
 2 files changed, 67 insertions(+), 57 deletions(-)
 create mode 100644 app/components/SeatingMap.js

diff --git a/app/components/SeatingMap.js b/app/components/SeatingMap.js
new file mode 100644
index 0000000..b9b1fe1
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/app/views/seats/index.js b/app/views/seats/index.js
index d4c6d11..87f49ed 100644
--- a/app/views/seats/index.js
+++ b/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>