From 0a631cfcaea1b005d5ac29152cc9fef598432b97 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 31 Aug 2017 16:12:28 +0700
Subject: [PATCH 1/6] Hide viewing options when changing sort

---
 plugin-api/beta/client/hocs/withSortOption.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/plugin-api/beta/client/hocs/withSortOption.js b/plugin-api/beta/client/hocs/withSortOption.js
index 076d921e7..1bdccbfc1 100644
--- a/plugin-api/beta/client/hocs/withSortOption.js
+++ b/plugin-api/beta/client/hocs/withSortOption.js
@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux';
 import {sortOrderSelector, sortBySelector} from 'plugin-api/beta/client/selectors/stream';
 import {setSort} from 'plugin-api/beta/client/actions/stream';
 import hoistStatics from 'recompose/hoistStatics';
+import {closeMenu} from 'plugins/talk-plugin-viewing-options/client/actions';
 
 const mapStateToProps = (state) => ({
   sortOrder: sortOrderSelector(state),
@@ -13,7 +14,8 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
-      setSort
+      setSort,
+      closeMenu,
     },
     dispatch
   );
@@ -29,6 +31,7 @@ const mapDispatchToProps = (dispatch) =>
 export default ({sortBy = 'created_at', sortOrder = 'DESC', label}) => hoistStatics((WrappedComponent) => {
   class WithSortOption extends React.Component {
     setSort = () => {
+      this.props.closeMenu();
       this.props.setSort({sortBy, sortOrder});
     }
 

From e39c377e0823afe6c0a2336e68ea4f48a99ed362 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 31 Aug 2017 16:33:51 +0700
Subject: [PATCH 2/6] Hide empty categories

---
 .../client/components/Menu.js                        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/plugins/talk-plugin-viewing-options/client/components/Menu.js b/plugins/talk-plugin-viewing-options/client/components/Menu.js
index 68afe4b3b..18186eccc 100644
--- a/plugins/talk-plugin-viewing-options/client/components/Menu.js
+++ b/plugins/talk-plugin-viewing-options/client/components/Menu.js
@@ -2,6 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Menu.css';
 import {capitalize} from 'plugin-api/beta/client/utils';
+import {IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
 import Category from './Category';
 import {t} from 'plugin-api/beta/client/services';
 
@@ -16,11 +17,12 @@ class Menu extends React.Component {
       <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
         {
           Object.keys(this.categories).map((category) =>
-            <Category
-              key={category}
-              slot={`viewingOptions${capitalize(category)}`}
-              title={this.categories[category]}
-            />
+            <IfSlotIsNotEmpty slot={`viewingOptions${capitalize(category)}`} key={category}>
+              <Category
+                slot={`viewingOptions${capitalize(category)}`}
+                title={this.categories[category]}
+              />
+            </IfSlotIsNotEmpty>
           )
         }
       </div>

From c7c51673113b378bd7d2408db25075a105bc3a23 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 31 Aug 2017 16:36:08 +0700
Subject: [PATCH 3/6] Cleanup default plugins

---
 plugins.default.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/plugins.default.json b/plugins.default.json
index 89028dd7d..0fcc70681 100644
--- a/plugins.default.json
+++ b/plugins.default.json
@@ -4,11 +4,7 @@
     "talk-plugin-respect",
     "talk-plugin-offtopic",
     "talk-plugin-facebook-auth",
-    "talk-plugin-featured-comments",
-    "talk-plugin-sort-newest",
-    "talk-plugin-sort-oldest",
-    "talk-plugin-sort-most-liked",
-    "talk-plugin-sort-most-replied"
+    "talk-plugin-featured-comments"
   ],
   "client": [
     "talk-plugin-respect",

From b5daf5882bc9654181f96c918344f1a70467fad0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 31 Aug 2017 16:58:01 +0700
Subject: [PATCH 4/6] IfSlotIsEmpty and IfSlotIsNotEmpty now only renders a
 single child

---
 client/coral-framework/components/IfSlotIsEmpty.js    | 11 +++--------
 client/coral-framework/components/IfSlotIsNotEmpty.js | 11 +++--------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js
index 557ee3b3d..72dc8c988 100644
--- a/client/coral-framework/components/IfSlotIsEmpty.js
+++ b/client/coral-framework/components/IfSlotIsEmpty.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -28,18 +28,13 @@ class IfSlotIsEmpty extends React.Component {
   }
 
   render() {
-    const {className, component: Component = 'div', children} = this.props;
-    return (
-      <Component className={className}>
-        {this.isSlotEmpty() ? children : null}
-      </Component>
-    );
+    const {children} = this.props;
+    return this.isSlotEmpty() ? Children.only(children) : null;
   }
 }
 
 IfSlotIsEmpty.propTypes = {
   slot: PropTypes.string,
-  className: PropTypes.string,
 };
 
 const mapStateToProps = (state) => ({
diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js
index 4e3abfae4..46e68fe60 100644
--- a/client/coral-framework/components/IfSlotIsNotEmpty.js
+++ b/client/coral-framework/components/IfSlotIsNotEmpty.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -28,18 +28,13 @@ class IfSlotIsNotEmpty extends React.Component {
   }
 
   render() {
-    const {className, component: Component = 'div', children} = this.props;
-    return (
-      <Component className={className}>
-        {this.isSlotEmpty() ? null : children}
-      </Component>
-    );
+    const {children} = this.props;
+    return this.isSlotEmpty() ? null : Children.only(children);
   }
 }
 
 IfSlotIsNotEmpty.propTypes = {
   slot: PropTypes.string,
-  className: PropTypes.string,
 };
 
 const mapStateToProps = (state) => ({

From 3b7d006d1e6939a4f01089eb26423de3e9e07cd5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 31 Aug 2017 16:59:04 +0700
Subject: [PATCH 5/6] Hide empty categories take 2

---
 .../client/components/Category.js                           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/talk-plugin-viewing-options/client/components/Category.js b/plugins/talk-plugin-viewing-options/client/components/Category.js
index 184b5cadc..caa3904ff 100644
--- a/plugins/talk-plugin-viewing-options/client/components/Category.js
+++ b/plugins/talk-plugin-viewing-options/client/components/Category.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './Category.css';
-import {Slot, IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
+import {Slot} from 'plugin-api/beta/client/components';
 
 const childFactory = (child) => <li className={styles.listItem} key={child.key}>{child}</li>;
 
 const ViewingOptions = ({slot, title, data, asset, root}) => {
   return (
-    <IfSlotIsNotEmpty slot={slot} className={styles.root}>
+    <div className={styles.root}>
       <div className={styles.title}>{title}</div>
       <Slot
         fill={slot}
@@ -16,7 +16,7 @@ const ViewingOptions = ({slot, title, data, asset, root}) => {
         data={data}
         queryData={{asset, root}}
       />
-    </IfSlotIsNotEmpty>
+    </div>
   );
 };
 

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 6/6] 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>