From a2f67235d85dd7573d8d4dbf7173fbaa609f30e9 Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Fri, 8 May 2020 10:17:48 -0400
Subject: [PATCH] Add `<symbol>` for a selected seat

For comparison [see this commit]

Nothing exciting here. The ergonomics is similar to the Stimulus version.

[commit]: https://github.com/seanpdoyle/select-your-own-seat/commit/de0bd4565563590a4e779569b7de30052f8bf910
---
 app/views/seats/_sections.json.props |  6 ++++++
 app/views/seats/index.js             | 11 ++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/views/seats/_sections.json.props b/app/views/seats/_sections.json.props
index 09b51f3a..25cc16d4 100644
--- a/app/views/seats/_sections.json.props
+++ b/app/views/seats/_sections.json.props
@@ -5,6 +5,12 @@ json.array! sections do |section|
       json.y seat.y
       json.venue_floor_seat_path venue_floor_seat_path(venue, floor, seat.row_number)
       json.aria_label seat.row_number
+
+      if Current.cart.include?(seat)
+        json.href "#seat-icon-selected"
+      else
+        json.href "#seat-icon-unselected"
+      end
     end
   end
 end
diff --git a/app/views/seats/index.js b/app/views/seats/index.js
index e9a10c1e..d4c6d11c 100644
--- a/app/views/seats/index.js
+++ b/app/views/seats/index.js
@@ -14,7 +14,7 @@ const buildSectionElements = (sections) => {
         <use
           width="12px"
           height="12px"
-          xlinkHref="#seat-icon-unselected"
+          xlinkHref={seat.href}
           x={seat.x}
           y={seat.y}
         />
@@ -68,6 +68,15 @@ export default (props) => {
                   <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>