Merge pull request #1421 from clintabrown/viewing-options-sort-option-classnames

Add classname hooks for viewing-options-sort-option default and active state

plugins/talk-plugin-sort-most-liked/client/index.js

@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import { createSortOption } from 'plugin-api/beta/client/factories';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
 import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(

plugins/talk-plugin-sort-most-loved/client/index.js

@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import { createSortOption } from 'plugin-api/beta/client/factories';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
 import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(

plugins/talk-plugin-sort-most-replied/client/index.js

@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import { createSortOption } from 'plugin-api/beta/client/factories';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
 import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(

plugins/talk-plugin-sort-most-respected/client/index.js

@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import { createSortOption } from 'plugin-api/beta/client/factories';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
 import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(

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

@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import { createSortOption } from 'plugin-api/beta/client/factories';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
 import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(() => t('talk-plugin-sort-newest.label'), {

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

@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import { createSortOption } from 'plugin-api/beta/client/factories';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
 import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(() => t('talk-plugin-sort-oldest.label'), {

plugins/talk-plugin-viewing-options/client/api/components/SortOption.js

@@ -1,11 +1,18 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './SortOption.css';
 import PropTypes from 'prop-types';
+import { PLUGIN_NAME } from '../../constants';
 
 export default class SortOption extends React.Component {
   render() {
+    const className = cn([
+      styles.label,
+      `${PLUGIN_NAME}-sort-option`,
+      { [`${PLUGIN_NAME}-sort-option-active`]: this.props.active },
+    ]);
     return (
-      <label className={styles.label}>
+      <label className={className}>
         <input
           type="radio"
           onChange={this.props.setSort}

plugins/talk-plugin-viewing-options/client/api/factories/index.js

@@ -1,4 +1,4 @@
-import withSortOption from '../hocs/withSortOption';
+import withSortOption from 'plugin-api/beta/client/hocs/withSortOption';
 import SortOption from '../components/SortOption';
 
 /**

plugins/talk-plugin-viewing-options/client/constants.js

@@ -1,4 +1,6 @@
-const prefix = 'TALK_VIEWING_OPTIONS';
+export const PLUGIN_NAME = 'talk-plugin-viewing-options';
 
+/* Contants for redux actions */
+const prefix = 'TALK_VIEWING_OPTIONS';
 export const OPEN_MENU = `${prefix}_OPEN_MENU`;
 export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;