From b61afbc1d6ddc0c9dd4340480539c05aaee8317e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 31 Aug 2017 19:04:54 +0700
Subject: [PATCH] Make rendering `edit` pure

---
 .../src/components/Comment.js                   | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index e3f2b41c8..205bc498b 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -95,8 +95,7 @@ export default class Comment extends React.Component {
     this.onClickEdit = this.onClickEdit.bind(this);
     this.stopEditing = this.stopEditing.bind(this);
     this.state = {
-
-      // Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
+      isEditable: commentIsStillEditable(props.comment),
       isEditing: false,
       replyBoxVisible: false,
       loadingState: '',
@@ -295,14 +294,12 @@ export default class Comment extends React.Component {
       this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
     }
 
-    // if still in the edit window, set a timeout to re-render once it expires
-    const msLeftToEdit = editWindowRemainingMs(this.props.comment);
-    if (msLeftToEdit > 0) {
+    // if still in the edit window, set a timeout to handle expiration.
+    if (this.state.isEditable) {
+      const msLeftToEdit = editWindowRemainingMs(this.props.comment);
       this.editWindowExpiryTimeout = setTimeout(() => {
-
-        // re-render
-        this.setState(this.state);
-      }, msLeftToEdit);
+        this.setState({isEditable: false});
+      }, Math.max(msLeftToEdit, 0));
     }
   }
   componentWillUnmount() {
@@ -476,7 +473,7 @@ export default class Comment extends React.Component {
                 /* User can edit/delete their own comment for a short window after posting */
                 <span className={cn(styles.topRight)}>
                   {
-                    commentIsStillEditable(comment) &&
+                    this.state.isEditable &&
                     <a
                       className={cn(styles.link, {[styles.active]: this.state.isEditing})}
                       onClick={this.onClickEdit}>Edit</a>