From 5d060cb6e4d34c81c9d4a18cbcc1d6b1a5989260 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Fri, 27 Jul 2018 11:09:33 +0200
Subject: [PATCH] =?UTF-8?q?Allow=20modals=20to=20be=20closed=20by=20pressi?=
 =?UTF-8?q?ng=20=E2=80=9Cback=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flavours/glitch/components/modal_root.js  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js
index 89f81f58ef..cc26f6a112 100644
--- a/app/javascript/flavours/glitch/components/modal_root.js
+++ b/app/javascript/flavours/glitch/components/modal_root.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import createHistory from 'history/createBrowserHistory';
 
 export default class ModalRoot extends React.PureComponent {
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
   static propTypes = {
     children: PropTypes.node,
@@ -24,6 +28,7 @@ export default class ModalRoot extends React.PureComponent {
 
   componentDidMount () {
     window.addEventListener('keyup', this.handleKeyUp, false);
+    this.history = this.context.router ? this.context.router.history : createHistory();
   }
 
   componentWillReceiveProps (nextProps) {
@@ -41,11 +46,13 @@ export default class ModalRoot extends React.PureComponent {
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
       this.activeElement.focus();
       this.activeElement = null;
+      this.handleModalClose();
     }
     if (this.props.children) {
       requestAnimationFrame(() => {
         this.setState({ revealed: true });
       });
+      if (!prevProps.children) this.handleModalOpen();
     }
   }
 
@@ -53,6 +60,24 @@ export default class ModalRoot extends React.PureComponent {
     window.removeEventListener('keyup', this.handleKeyUp);
   }
 
+  handleModalClose () {
+    this.unlistenHistory();
+
+    const state = this.history.location.state;
+    if (state && state.mastodonModalOpen) {
+      this.history.goBack();
+    }
+  }
+
+  handleModalOpen () {
+    const history = this.history;
+    const state   = {...history.location.state, mastodonModalOpen: true};
+    history.push(history.location.pathname, state);
+    this.unlistenHistory = history.listen(() => {
+      this.props.onClose();
+    });
+  }
+
   getSiblings = () => {
     return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
   }