fix: Ephemere component

handle unmount
cheminfo · Sep 26, 2017 · 45af857 · 45af857
1 parent 580b952
commit 45af857
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/client/components/Ephemere.js b/src/client/components/Ephemere.js
@@ -9,19 +9,43 @@ class Ephemere extends Component {
         );
     }
 
+    componentWillMount() {
+        this.setTimer();
+    }
+
+    componentDidMount() {
+        this.makeVisible();
+    }
+
+    componentDidUpdate() {
+        this.makeVisible();
+    }
+
     componentWillUpdate() {
-        if (this.refs.ephemere) {
-            this.refs.ephemere.style.display = 'block';
-        }
+        this.clearTimer();
+        this.setTimer();
+    }
+
+    componentWillUnmount() {
+        this.clearTimer();
+    }
+    makeVisible() {
         if (this.timeout) {
-            clearTimeout(this.timeout);
+            if (this.refs.ephemere) {
+                this.refs.ephemere.style.display = 'block';
+            }
         }
     }
-
-    componentDidUpdate() {
-        this.timeout = setTimeout(() => {
-            this.refs.ephemere.style.display = 'none';
-        }, this.props.timeout || 3000);
+    clearTimer() {
+        clearTimeout(this.timeout);
+        this.timeout = null;
+    }
+    setTimer() {
+        if (!this.timeout) {
+            this.timeout = setTimeout(() => {
+                this.refs.ephemere.style.display = 'none';
+            }, this.props.timeout || 3000);
+        }
     }
 }
 

diff --git a/src/client/components/GroupEditor.js b/src/client/components/GroupEditor.js
@@ -67,9 +67,7 @@ class GroupEditor extends PureComponent {
                                 />
                             </div>
                         </div>
-                        <Ephemere>
-                            {group.success ? <div className="alert alert-success">{group.success}</div> : null }
-                        </Ephemere>
+                        {group.success ? <Ephemere><div className="alert alert-success">{group.success}</div></Ephemere> : null }
                         {group.error ? <div className="alert alert-danger">{group.error}</div> : null }
                     </div>
                 </div>