maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Use keyboard shortcut hook in listing modal (#11017)

Browse source
This commit is contained in:
Robin Gagnon 2020-10-22 12:02:17 -04:00 • committed by GitHub
parent e36690cdba
commit 3c586d7170
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/javascript/listings/listings.jsx
View file

@ -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>
);