First working version

plugin-api/beta/client/actions/stream.js

@@ -0,0 +1 @@
+export {setSort} from 'coral-embed-stream/src/actions/stream';

plugin-api/beta/client/components/SortOption.css

@@ -0,0 +1,8 @@
+.input {
+  cursor: pointer;
+}
+
+.label {
+  cursor: pointer;
+  padding-left: 4px;
+}

plugin-api/beta/client/components/SortOption.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './SortOption.css';
+
+export default class SortOption extends React.Component {
+  render() {
+    return (
+      <div className={styles.viewingOption}>
+        <input type="radio" onChange={this.props.setSort} checked={this.props.active} className={styles.input}/>
+        <label className={styles.label} onClick={this.props.setSort}>
+          {this.props.label}
+        </label>
+      </div>
+    );
+  }
+}

plugin-api/beta/client/components/index.js

@@ -1,3 +1,5 @@
 export {Slot} from 'coral-framework/components';
 export {default as ClickOutside} from 'coral-framework/components/ClickOutside';
+export {default as IfSlotIsEmpty} from 'coral-framework/components/IfSlotIsEmpty';
+export {default as IfSlotIsNotEmpty} from 'coral-framework/components/IfSlotIsNotEmpty';
 export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName';

plugin-api/beta/client/hocs/index.js

@@ -1,5 +1,6 @@
 export {default as withReaction} from './withReaction';
 export {default as withTags} from './withTags';
+export {default as withSortOption} from './withSortOption';
 export {default as withFragments} from 'coral-framework/hocs/withFragments';
 export {default as excludeIf} from 'coral-framework/hocs/excludeIf';
 export {default as connect} from 'coral-framework/hocs/connect';

plugin-api/beta/client/hocs/withSortOption.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {connect} from 'plugin-api/beta/client/hocs';
+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';
+
+const mapStateToProps = (state) => ({
+  sortOrder: sortOrderSelector(state),
+  sortBy: sortBySelector(state),
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      setSort
+    },
+    dispatch
+  );
+
+export default ({by = 'created_at', order = 'DESC', label}) => hoistStatics((WrappedComponent) => {
+  class WithSortOption extends React.Component {
+    setSort = () => {
+      this.props.setSort({by, order});
+    }
+
+    render() {
+      const active = this.props.sortOrder === order && this.props.sortBy === by;
+      const resolvedLabel = typeof label === 'function' ? label() : label;
+      return (
+        <WrappedComponent
+          active={active}
+          setSort={this.setSort}
+          label={resolvedLabel}
+        />
+      );
+    }
+  }
+  return connect(mapStateToProps, mapDispatchToProps)(WithSortOption);
+});

plugin-api/beta/client/selectors/stream.js

@@ -0,0 +1,2 @@
+export const sortOrderSelector = (state) => state.stream.sortOrder;
+export const sortBySelector = (state) => state.stream.sortBy;

plugin-api/beta/client/utils/index.js

@@ -3,5 +3,6 @@ export {
   insertCommentsSorted,
   getSlotFragmentSpreads,
   forEachError,
+  capitalize,
   getDefinitionName,
 } from 'coral-framework/utils';