Use factory

client/coral-embed-stream/src/actions/stream.js

@@ -5,7 +5,7 @@ import queryString from 'query-string';
 
 export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
 
-export const setSort = ({order, by}) => ({type: actions.SET_SORT, order, by});
+export const setSort = ({sortOrder, sortBy}) => ({type: actions.SET_SORT, sortOrder, sortBy});
 
 export const viewAllComments = () => {
 

client/coral-embed-stream/src/reducers/stream.js

@@ -71,8 +71,8 @@ export default function stream(state = initialState, action) {
   case actions.SET_SORT :
     return {
       ...state,
-      sortOrder: action.order ? action.order : state.order,
-      sortBy: action.by ? action.by : state.by,
+      sortOrder: action.sortOrder ? action.sortOrder : state.sortOrder,
+      sortBy: action.sortBy ? action.sortBy : state.sortBy,
     };
   default:
     return state;

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

@@ -0,0 +1,4 @@
+import withSortOption from '../hocs/withSortOption';
+import SortOption from '../components/SortOption';
+
+export const createSortOption = (label, sort) => withSortOption({...sort, label})(SortOption);

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

@@ -18,14 +18,14 @@ const mapDispatchToProps = (dispatch) =>
     dispatch
   );
 
-export default ({by = 'created_at', order = 'DESC', label}) => hoistStatics((WrappedComponent) => {
+export default ({sortBy = 'created_at', sortOrder = 'DESC', label}) => hoistStatics((WrappedComponent) => {
   class WithSortOption extends React.Component {
     setSort = () => {
-      this.props.setSort({by, order});
+      this.props.setSort({sortBy, sortOrder});
     }
 
     render() {
-      const active = this.props.sortOrder === order && this.props.sortBy === by;
+      const active = this.props.sortOrder === sortOrder && this.props.sortBy === sortBy;
       const resolvedLabel = typeof label === 'function' ? label() : label;
       return (
         <WrappedComponent

plugins/talk-plugin-sort-oldest/client/components/SortOption.css

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

plugins/talk-plugin-sort-oldest/client/components/SortOption.js

@@ -1,15 +0,0 @@
-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>
-    );
-  }
-}

plugins/talk-plugin-sort-oldest/client/containers/SortOption.js

@@ -1,4 +0,0 @@
-import {withSortOption} from 'plugin-api/beta/client/hocs';
-import SortOption from '../components/SortOption';
-
-export default withSortOption({by: 'CREATED_AT', order: 'ASC', label: 'Oldest first'})(SortOption);

plugins/talk-plugin-sort-oldest/client/containers/SortOptionNewest.js

@@ -1,4 +0,0 @@
-import {withSortOption} from 'plugin-api/beta/client/hocs';
-import SortOption from '../components/SortOption';
-
-export default withSortOption({by: 'CREATED_AT', order: 'DESC', label: 'Newest first'})(SortOption);

plugins/talk-plugin-sort-oldest/client/index.js

@@ -1,15 +1,19 @@
 import translations from './translations.yml';
-import SortOption from './containers/SortOption';
-import SortOptionNewest from './containers/SortOptionNewest';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-oldest.label'),
+  {sortBy: 'CREATED_AT', sortOrder: 'ASC'},
+);
 
 /**
- * talk-plugin-sort-oldest depends on talk-plugin-viewing-options
- * in other to display sort option.
+ * talk-plugin-sort-oldest depends on talk-plugin-viewing-options.
  */
 
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOptionNewest, SortOption]
+    viewingOptionsSort: [SortOption]
   }
 };

plugins/talk-plugin-sort-oldest/client/translations.yml

@@ -1,4 +1,5 @@
 en:
   talk-plugin-sort-oldest:
+    label: Oldest first
 es:
   talk-plugin-sort-oldest: