From 5f63a7d253d8a0bfeef4a8302c14298be524274c Mon Sep 17 00:00:00 2001
From: derekenos <derek.enos@gmail.com>
Date: Thu, 9 May 2019 14:21:35 -0400
Subject: [PATCH] Enable Escape key to close opened listing modal (#2768)

---
 app/javascript/listings/listings.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/javascript/listings/listings.jsx b/app/javascript/listings/listings.jsx
index 2658196ba..80e726093 100644
--- a/app/javascript/listings/listings.jsx
+++ b/app/javascript/listings/listings.jsx
@@ -47,12 +47,18 @@ export class Listings extends Component {
     t.setState({query, tags, index, category, allCategories, listings, openedListing, slug });
     t.listingSearch(query, tags, category, slug);
     t.setUser()
+
+    document.body.addEventListener('keydown', t.handleKeyDown)
   }
 
   componentDidUpdate() {
     this.triggerMasonry()
   }
 
+  componentWillUnmount() {
+    document.body.removeEventListener('keydown', this.handleKeyDown)
+  }
+
   addTag = (e, tag) => {
     e.preventDefault();
     const { query, tags, category } = this.state;
@@ -84,6 +90,13 @@ export class Listings extends Component {
     this.listingSearch(query, tags, cat, null)
   }
 
+  handleKeyDown = (e) => {
+    // Enable Escape key to close an open listing.
+    if (this.openedListing !== null && e.key === 'Escape') {
+      this.handleCloseModal()
+    }
+  }
+
   handleCloseModal = (e) => {
     const { query, tags, category } = this.state;
     this.setState({openedListing: null})
@@ -115,16 +128,16 @@ export class Listings extends Component {
   getQueryParams = () => {
     let qs = document.location.search;
     qs = qs.split('+').join(' ');
-  
+
     const params = {};
     let tokens;
     const re = /[?&]?([^=]+)=([^&]*)/g;
-  
+
     // eslint-disable-next-line no-cond-assign
     while (tokens = re.exec(qs)) {
       params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
     }
-  
+
     return params;
   }