Add behavior to Zoom In and Zoom Out buttons

For comparison [see this commit][commit] Nothing exciting here. The ergonomics is similar to the Stimulus version. [commit]: seanpdoyle@04546d2
thoughtbot · Oct 8, 2023 · 965e9c2 · 965e9c2
1 parent b6e8ef1
commit 965e9c2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/app/components/SeatingMap.js b/app/components/SeatingMap.js
@@ -36,6 +36,8 @@ export default class extends React.Component {
   constructor (props) {
     super(props)
     this.svgRef = React.createRef()
+    this.zoomIn = this.zoomIn.bind(this)
+    this.zoomOut = this.zoomOut.bind(this)
   }
 
   componentDidMount() {
@@ -49,6 +51,14 @@ export default class extends React.Component {
     })
   }
 
+  zoomIn() {
+    this.map.zoomIn()
+  }
+
+  zoomOut() {
+    this.map.zoomOut()
+  }
+
   componentWillUnmount() {
     this.map.destroy()
   }
@@ -91,7 +101,10 @@ export default class extends React.Component {
           </svg>
           { sectionElements }
         </svg>
-        <SvgZoomControls />
+        <SvgZoomControls
+          onZoomOut={this.zoomOut}
+          onZoomIn={this.zoomIn}
+        />
       </>
     )
   }

diff --git a/app/components/SvgZoomControls.js b/app/components/SvgZoomControls.js
@@ -5,18 +5,25 @@ import minusSvg from '../assets/images/icons/minus.svg'
 
 export default class extends React.Component {
   render() {
+    const {
+      onZoomOut,
+      onZoomIn,
+    } = this.props
+
     return (
       <div className="syos-frame__map-zoom syos-control-zoom">
         <button
           className="syos-button syos-button--transparent syos-control-zoom__button"
           type="button"
+          onClick={onZoomOut}
         >
           <SVG src={ minusSvg } className="syos-icon" title="zoom out"/>
         </button>
 
         <button
           className="syos-button syos-button--transparent syos-control-zoom__button"
           type="button"
+          onClick={onZoomIn}
         >
           <SVG src={ plusSvg } className="syos-icon" title="zoom in"/>
         </button>

diff --git a/test/controllers/seats_controller_test.rb b/test/controllers/seats_controller_test.rb
@@ -60,8 +60,8 @@ class SeatsControllerTest < ActionDispatch::IntegrationTest
     get venue_floor_seats_path(venue, floor, maximum: maximum, format: :json)
 
     json = JSON.parse(body)
-    assert_equal json["data"]["filters"]["controls"][1]["maximum"], maximum
-    assert_equal json["data"]["filters"]["controls"][1]["isChecked"], true
+
+    assert_equal json["data"]["filters"]["filterForm"]["inputs"]["maximum1000"]["defaultChecked"], true
   end
 
   test "#index without a ?maximum query parameter" do
@@ -71,7 +71,7 @@ class SeatsControllerTest < ActionDispatch::IntegrationTest
     get venue_floor_seats_path(venue, floor, format: :json)
 
     json = JSON.parse(body)
-    assert_equal json["data"]["filters"]["controls"][2]["maximum"], 1500
-    assert_equal json["data"]["filters"]["controls"][2]["isChecked"], true
+
+    assert_equal json["data"]["filters"]["filterForm"]["inputs"]["maximum1500"]["defaultChecked"], true
   end
 end