From 3c586d717047d9a8c662658b6db1096dc62b18c2 Mon Sep 17 00:00:00 2001
From: Robin Gagnon <me@reobin.dev>
Date: Thu, 22 Oct 2020 12:02:17 -0400
Subject: [PATCH] refactor: Use keyboard shortcut hook in listing modal
 (#11017)

---
 app/javascript/listings/listings.jsx | 47 +++++++++++++---------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/app/javascript/listings/listings.jsx b/app/javascript/listings/listings.jsx
index 6d7d01b73..a86c09d91 100644
--- a/app/javascript/listings/listings.jsx
+++ b/app/javascript/listings/listings.jsx
@@ -1,6 +1,7 @@
-import { h, Component } from 'preact';
+import { h, Component, Fragment } from 'preact';
 import debounceAction from '../utilities/debounceAction';
 import { fetchSearch } from '../utilities/search';
+import { KeyboardShortcuts } from '../shared/components/useKeyboardShortcuts';
 import ModalBackground from './components/ModalBackground';
 import Modal from './components/Modal';
 import AllListings from './components/AllListings';
@@ -73,8 +74,6 @@ export class Listings extends Component {
     this.listingSearch(query, tags, category, slug);
     this.setUser();
 
-    document.body.addEventListener('keydown', this.handleKeyDown);
-
     /*
       The width of the columns also changes when the browser is resized
       so we will also call this function on window resize to recalculate
@@ -87,10 +86,6 @@ export class Listings extends Component {
     this.triggerMasonry();
   }
 
-  componentWillUnmount() {
-    document.body.removeEventListener('keydown', this.handleKeyDown);
-  }
-
   addTag = (e, tag) => {
     e.preventDefault();
     if (document.body.classList.contains('modal-open')) {
@@ -131,11 +126,6 @@ export class Listings extends Component {
     this.listingSearch(query, tags, cat, null);
   };
 
-  handleKeyDown = (e) => {
-    // Enable Escape key to close an open listing.
-    this.handleCloseModal(e);
-  };
-
   handleCloseModal = (e) => {
     const { openedListing } = this.state;
     if (
@@ -311,20 +301,27 @@ export class Listings extends Component {
           loadNextPage={this.loadNextPage}
         />
         {shouldRenderModal && (
-          <div className="crayons-modal">
-            <Modal
-              currentUserId={currentUserId}
-              onAddTag={this.addTag}
-              onChangeDraftingMessage={this.handleDraftingMessage}
-              onClick={this.handleCloseModal}
-              onChangeCategory={this.selectCategory}
-              onOpenModal={this.handleOpenModal}
-              onSubmit={this.handleSubmitMessage}
-              listing={openedListing}
-              message={message}
+          <Fragment>
+            <div className="crayons-modal">
+              <Modal
+                currentUserId={currentUserId}
+                onAddTag={this.addTag}
+                onChangeDraftingMessage={this.handleDraftingMessage}
+                onClick={this.handleCloseModal}
+                onChangeCategory={this.selectCategory}
+                onOpenModal={this.handleOpenModal}
+                onSubmit={this.handleSubmitMessage}
+                listing={openedListing}
+                message={message}
+              />
+              <ModalBackground onClick={this.handleCloseModal} />
+            </div>
+            <KeyboardShortcuts
+              shortcuts={{
+                Escape: this.handleCloseModal,
+              }}
             />
-            <ModalBackground onClick={this.handleCloseModal} />
-          </div>
+          </Fragment>
         )}
       </div>
     );