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 */ { - commentIsStillEditable(comment) && + this.state.isEditable && Edit 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 ( - - {this.isSlotEmpty() ? children : null} - - ); + 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 ( - - {this.isSlotEmpty() ? null : children} - - ); + const {children} = this.props; + return this.isSlotEmpty() ? null : Children.only(children); } } IfSlotIsNotEmpty.propTypes = { slot: PropTypes.string, - className: PropTypes.string, }; const mapStateToProps = (state) => ({ 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}); } 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", 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) =>
  • {child}
  • ; const ViewingOptions = ({slot, title, data, asset, root}) => { return ( - +
    {title}
    { data={data} queryData={{asset, root}} /> - +
    ); }; 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 {
    { Object.keys(this.categories).map((category) => - + + + ) }