New API for comment input tags

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

@@ -1,6 +1,7 @@
 import * as actions from '../constants/stream';
 import { buildUrl } from 'coral-framework/utils/url';
 import queryString from 'query-string';
+import once from 'lodash/once';
 
 export const setActiveReplyBox = id => ({
   type: actions.SET_ACTIVE_REPLY_BOX,
@@ -71,16 +72,32 @@ export const setActiveTab = tab => dispatch => {
   dispatch({ type: actions.SET_ACTIVE_TAB, tab });
 };
 
-export const addCommentBoxTag = tag => ({
-  type: actions.ADD_COMMENT_BOX_TAG,
-  tag,
+// @Deprecated
+const showOldTagsWarningOnce = once(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      '`addCommentBoxTag`, `removeCommentBoxTag`, `clearCommentBoxTags` are deprecated. Please switch to `onInputChange`, `input.tags` instead'
+    );
+  }
 });
 
-export const removeCommentBoxTag = idx => ({
-  type: actions.REMOVE_COMMENT_BOX_TAG,
-  idx,
-});
-
-export const clearCommentBoxTags = () => ({
-  type: actions.CLEAR_COMMENT_BOX_TAGS,
-});
+export const addCommentBoxTag = tag => {
+  showOldTagsWarningOnce();
+  return {
+    type: actions.ADD_COMMENT_BOX_TAG,
+    tag,
+  };
+};
+export const removeCommentBoxTag = idx => {
+  showOldTagsWarningOnce();
+  return {
+    type: actions.REMOVE_COMMENT_BOX_TAG,
+    idx,
+  };
+};
+export const clearCommentBoxTags = () => {
+  showOldTagsWarningOnce();
+  return {
+    type: actions.CLEAR_COMMENT_BOX_TAGS,
+  };
+};

client/coral-embed-stream/src/tabs/stream/components/DraftArea.js

@@ -70,6 +70,7 @@ export default class DraftArea extends React.Component {
               isEdit,
             }}
           />
+          {/* Is this slot here legitimate? (kiwi) */}
           <Slot fill="commentInputArea" />
         </div>
         {charCountEnable && maxCharCount > 0 && this.renderCharCount()}

client/coral-embed-stream/src/tabs/stream/containers/Comment.js

@@ -16,7 +16,6 @@ import { nest } from '../../../graphql/utils';
 
 const slots = [
   'streamQuestionArea',
-  'commentInputArea',
   'commentInputDetailArea',
   'commentInfoBar',
   'commentActions',

client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js

@@ -9,10 +9,22 @@ import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 import withHooks from '../hocs/withHooks';
 import { compose } from 'recompose';
+import once from 'lodash/once';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 export const name = 'talk-plugin-commentbox';
 
+// @Deprecated
+const showOldTagsWarningOnce = once(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      'Using `addTags` and `removeTags` is deprecated. Please switch to `onInputChange` and `input` instead'
+    );
+  }
+});
+
+const initialInput = { body: '', tags: [] };
+
 /**
  * Container for posting a new Comment
  */
@@ -22,9 +34,7 @@ class CommentBox extends React.Component {
 
     this.state = {
       loadingState: '',
-      input: {
-        body: '',
-      },
+      input: initialInput,
     };
   }
 
@@ -54,11 +64,18 @@ class CommentBox extends React.Component {
       return;
     }
 
+    // @Deprecated
+    const deprecatedTags = this.props.tags || [];
+    if (deprecatedTags.length) {
+      showOldTagsWarningOnce();
+    }
+    const tags = this.state.input.tags || [];
+
     let input = {
       asset_id: assetId,
       parent_id: parentId,
-      tags: this.props.tags,
       ...this.state.input,
+      tags: [...deprecatedTags, ...tags],
     };
 
     // Execute preSubmit Hooks
@@ -72,7 +89,7 @@ class CommentBox extends React.Component {
 
     postComment(input, 'comments')
       .then(({ data }) => {
-        this.setState({ loadingState: 'success', input: { body: '' } });
+        this.setState({ loadingState: 'success', input: initialInput });
         const postedComment = data.createComment.comment;
         const actions = data.createComment.actions;
 
@@ -102,14 +119,17 @@ class CommentBox extends React.Component {
   };
 
   renderButtonContainerStart() {
-    const { isReply, registerHook, unregisterHook } = this.props;
+    const { root, isReply, registerHook, unregisterHook } = this.props;
     return (
       <Slot
         fill="commentInputDetailArea"
         passthrough={{
+          root,
           registerHook: registerHook,
           unregisterHook: unregisterHook,
           isReply,
+          input: this.state.input,
+          onInputChange: this.handleInputChange,
         }}
         inline
       />

client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js

@@ -89,7 +89,7 @@ DraftAreaContainer.propTypes = {
   comment: PropTypes.object,
 };
 
-const slots = ['draftArea'];
+const slots = ['draftArea', 'commentInputArea'];
 
 export default withFragments({
   root: gql`

client/coral-embed-stream/src/tabs/stream/containers/Stream.js

@@ -367,6 +367,7 @@ const LOAD_MORE_QUERY = gql`
 `;
 
 const slots = [
+  'commentInputDetailArea',
   'streamTabs',
   'streamTabsPrepend',
   'streamTabPanes',

plugin-api/alpha/client/actions/index.js

@@ -1,6 +1,8 @@
 export {
   addCommentClassName,
   removeCommentClassName,
+  // @Deprecated
   addCommentBoxTag as addTag,
+  // @Deprecated
   removeCommentBoxTag as removeTag,
 } from 'coral-embed-stream/src/actions/stream';

plugin-api/alpha/client/selectors/index.js

@@ -1,3 +1,18 @@
-export const commentBoxTagsSelector = state => state.stream.commentBoxTags;
+import once from 'lodash/once';
+
+// @Deprecated
+const showOldTagsWarningOnce = once(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      '`commentBoxTagsSelector` is deprecated. Please switch to `input.tags` instead'
+    );
+  }
+});
+
+export const commentBoxTagsSelector = state => {
+  showOldTagsWarningOnce();
+  return state.stream.commentBoxTags;
+};
+
 export const commentClassNamesSelector = state =>
   state.stream.commentClassNames;