From 5abb3d815025675d1493da4f8c6e4dda4a6672e9 Mon Sep 17 00:00:00 2001
From: unarist <m.unarist@gmail.com>
Date: Thu, 13 Jul 2017 03:51:44 +0900
Subject: [PATCH] Rerender modal on property changes (#4175)

Render function for BundleContainer must not be methods.
React doesn't know dependency of the method, so they won't rerender on property updates.

In this case, when you close modal and open another modal immediately,
old modal will be open instead of new one.
---
 .../mastodon/features/ui/components/modal_root.js      | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
index 085299038a..4240871a7c 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -54,12 +54,6 @@ export default class ModalRoot extends React.PureComponent {
     return { opacity: spring(0), scale: spring(0.98) };
   }
 
-  renderModal = (SpecificComponent) => {
-    const { props, onClose } = this.props;
-
-    return <SpecificComponent {...props} onClose={onClose} />;
-  }
-
   renderLoading = () => {
     return <ModalLoading />;
   }
@@ -95,7 +89,9 @@ export default class ModalRoot extends React.PureComponent {
               <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
                 <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
                 <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
-                  <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>{this.renderModal}</BundleContainer>
+                  <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
+                    {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
+                  </BundleContainer>
                 </div>
               </div>
             ))}