working, still wip

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

@@ -87,7 +87,7 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
     }
 
     render() {
-      const {root, asset, comment, user, config} = this.props;
+      const {root, asset, comment, user, config, ...rest} = this.props;
 
       const alreadyTagged = isTagged(comment.tags, TAG);
 
@@ -100,6 +100,7 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
         postTag={this.postTag}
         deleteTag={this.deleteTag}
         config={config}
+        {...rest}
       />;
     }
   }
@@ -134,9 +135,9 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
         ${fragments.comment ? fragments.comment : ''}
       `
     }),
-    connect(mapStateToProps, mapDispatchToProps),
     withAddTag,
-    withRemoveTag
+    withRemoveTag,
+    connect(mapStateToProps, mapDispatchToProps),
   );
 
   WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`;

plugins/talk-plugin-featured-comments/client/actions.js

@@ -1,7 +1,9 @@
 import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
 
-export const openFeaturedDialog = () => ({
-  type: OPEN_FEATURED_DIALOG
+export const openFeaturedDialog = (comment, asset) => ({
+  type: OPEN_FEATURED_DIALOG,
+  comment,
+  asset,
 });
 
 export const closeFeaturedDialog = () => ({

plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js

@@ -9,7 +9,7 @@ import Button from 'coral-ui/components/Button';
 const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
   <Dialog
     className={cn(styles.dialog, 'talk-featured-dialog')}
-    id="banUserDialog"
+    id="talkFeaturedDialog"
     open={showFeaturedDialog}
     onCancel={closeFeaturedDialog} >
     <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
@@ -41,8 +41,7 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => (
 );
 
 FeaturedDialog.propTypes = {
-  showFeaturedDialog: PropTypes.bool,
-  postTag: PropTypes.func.isRequired,
+  showFeaturedDialog: PropTypes.bool.isRequired,
   closeFeaturedDialog: PropTypes.func.isRequired,
 };
 

plugins/talk-plugin-featured-comments/client/components/ModTag.js

@@ -4,7 +4,6 @@ import cn from 'classnames';
 import styles from './ModTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
 
 export default class ModTag extends React.Component {
   constructor() {
@@ -31,7 +30,7 @@ export default class ModTag extends React.Component {
   }
 
   render() {
-    const {alreadyTagged, deleteTag} = this.props;
+    const {alreadyTagged, deleteTag, comment, asset} = this.props;
 
     return alreadyTagged ? (
       <span className={cn(styles.tag, styles.featured)}
@@ -43,7 +42,7 @@ export default class ModTag extends React.Component {
       </span>
     ) : (
       <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={this.props.openFeaturedDialog} >
+        onClick={() => this.props.openFeaturedDialog(comment, asset)} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
       </span>
@@ -56,4 +55,6 @@ ModTag.propTypes = {
   deleteTag: PropTypes.func,
   notify: PropTypes.func,
   openFeaturedDialog: PropTypes.func,
+  comment: PropTypes.object,
+  asset: PropTypes.object,
 };

plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js

@@ -6,6 +6,8 @@ import {closeFeaturedDialog} from '../actions';
 
 const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({
   showFeaturedDialog: state.showFeaturedDialog,
+  comment: state.comment,
+  asset: state.asset,
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -14,8 +16,8 @@ const mapDispatchToProps = (dispatch) =>
   }, dispatch);
 
 const enhance = compose(
-  withTags('featured'),
   connect(mapStateToProps, mapDispatchToProps),
+  withTags('featured'),
 );
 
 export default enhance(FeaturedDialog);

plugins/talk-plugin-featured-comments/client/index.js

@@ -6,20 +6,22 @@ import update from 'immutability-helper';
 import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
-import FeaturedConfirmation from './containers/FeaturedConfirmation';
+import FeaturedDialog from './containers/FeaturedDialog';
 import {gql} from 'react-apollo';
+import reducer from './reducer';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
   translations,
+  reducer,
   slots: {
     streamTabsPrepend: [Tab],
     streamTabPanes: [TabPane],
     commentInfoBar: [Tag],
     moderationActions: [ModActionButton],
-    adminModeration: [ModSubscription, FeaturedConfirmation],
+    adminModeration: [ModSubscription, FeaturedDialog],
     adminCommentInfoBar: [ModTag],
   },
   mutations: {

plugins/talk-plugin-featured-comments/client/reducer.js

@@ -2,6 +2,13 @@ import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
 
 const initialState = {
   showFeaturedDialog: false,
+  comment: {
+    id: null,
+    tags: []
+  },
+  asset: {
+    id: null,
+  },
 };
 
 export default function reducer(state = initialState, action) {
@@ -9,11 +16,14 @@ export default function reducer(state = initialState, action) {
   case OPEN_FEATURED_DIALOG:
     return {
       ...state,
+      comment: action.comment,
+      asset: action.asset,
       showFeaturedDialog: true,
     };
   case CLOSE_FEATURED_DIALOG:
     return {
       ...state,
+      featuredCommentId: null,
       showFeaturedDialog: false,
     };
   default :