From 3c576a011072ae841096bd869aacab5ebf8ffe97 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Tue, 24 Apr 2018 09:35:46 -0400
Subject: [PATCH] Allow the back button to work with libraries

Push to history when the library mounts. Whenever popstate occurs after mounting, request to be closed.

Behavior captured in the `Modal` container. If we want to re-use this functionality for anything else that uses `ModalComponent`, just use the `Modal` container rather than `ModalComponent`.
---
 src/components/library/library.jsx   |  8 +++--
 src/containers/backdrop-library.jsx  |  1 +
 src/containers/costume-library.jsx   |  1 +
 src/containers/extension-library.jsx |  1 +
 src/containers/modal.jsx             | 54 ++++++++++++++++++++++++++++
 src/containers/sound-library.jsx     |  1 +
 src/containers/sprite-library.jsx    |  1 +
 7 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 src/containers/modal.jsx

diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 16e9ecd53..56b1f1c96 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import LibraryItem from '../library-item/library-item.jsx';
-import ModalComponent from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
@@ -87,9 +87,10 @@ class LibraryComponent extends React.Component {
     }
     render () {
         return (
-            <ModalComponent
+            <Modal
                 fullScreen
                 contentLabel={this.props.title}
+                id={this.props.id}
                 onRequestClose={this.props.onRequestClose}
             >
                 {(this.props.filterable || this.props.tags) && (
@@ -151,7 +152,7 @@ class LibraryComponent extends React.Component {
                         );
                     })}
                 </div>
-            </ModalComponent>
+            </Modal>
         );
     }
 }
@@ -169,6 +170,7 @@ LibraryComponent.propTypes = {
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */
     ),
     filterable: PropTypes.bool,
+    id: PropTypes.string.isRequired,
     onItemMouseEnter: PropTypes.func,
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx
index 49c73a7c5..98604bf18 100644
--- a/src/containers/backdrop-library.jsx
+++ b/src/containers/backdrop-library.jsx
@@ -44,6 +44,7 @@ class BackdropLibrary extends React.Component {
         return (
             <LibraryComponent
                 data={backdropLibraryContent}
+                id="backdropLibrary"
                 tags={backdropTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelect}
diff --git a/src/containers/costume-library.jsx b/src/containers/costume-library.jsx
index 9152ef32d..fdef46f07 100644
--- a/src/containers/costume-library.jsx
+++ b/src/containers/costume-library.jsx
@@ -44,6 +44,7 @@ class CostumeLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={costumeLibraryContent}
+                id="costumeLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelected}
diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx
index cae675405..d30daf98a 100644
--- a/src/containers/extension-library.jsx
+++ b/src/containers/extension-library.jsx
@@ -46,6 +46,7 @@ class ExtensionLibrary extends React.PureComponent {
             <LibraryComponent
                 data={extensionLibraryThumbnailData}
                 filterable={false}
+                id="extensionLibrary"
                 title="Choose an Extension"
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
diff --git a/src/containers/modal.jsx b/src/containers/modal.jsx
new file mode 100644
index 000000000..67b14c9ff
--- /dev/null
+++ b/src/containers/modal.jsx
@@ -0,0 +1,54 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ModalComponent from '../components/modal/modal.jsx';
+
+class Modal extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'addEventListeners',
+            'removeEventListeners',
+            'handlePopState',
+            'pushHistory'
+        ]);
+        this.addEventListeners();
+    }
+    componentDidMount () {
+        // Add a history event only if it's not currently for our modal. This
+        // avoids polluting the history with many entries. We only need one.
+        this.pushHistory(this.id, history.state === null);
+    }
+    componentWillUnmount () {
+        this.removeEventListeners();
+    }
+    addEventListeners () {
+        window.addEventListener('popstate', this.handlePopState);
+    }
+    removeEventListeners () {
+        window.removeEventListener('popstate', this.handlePopState);
+    }
+    handlePopState () {
+        // Whenever someone navigates, we want to be closed
+        this.props.onRequestClose();
+    }
+    get id () {
+        return `modal-${this.props.id}`;
+    }
+    pushHistory (state, push) {
+        if (push) return history.pushState(state, this.id);
+        history.replaceState(state, this.id);
+    }
+    render () {
+        return <ModalComponent {...this.props} />;
+    }
+}
+
+Modal.propTypes = {
+    id: PropTypes.string.isRequired,
+    onRequestClose: PropTypes.func,
+    onRequestOpen: PropTypes.func
+};
+
+export default Modal;
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
index aa02765f7..3d68ea6f3 100644
--- a/src/containers/sound-library.jsx
+++ b/src/containers/sound-library.jsx
@@ -93,6 +93,7 @@ class SoundLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={soundLibraryThumbnailData}
+                id="soundLibrary"
                 tags={soundTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleItemMouseEnter}
diff --git a/src/containers/sprite-library.jsx b/src/containers/sprite-library.jsx
index 025ed0d91..072e1714a 100644
--- a/src/containers/sprite-library.jsx
+++ b/src/containers/sprite-library.jsx
@@ -81,6 +81,7 @@ class SpriteLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={this.state.sprites}
+                id="spriteLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleMouseEnter}