From 1256007eba7ed7ece33a5f23581ef45fc47e0c27 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 21 Mar 2018 16:46:08 +0100 Subject: [PATCH] New API for comment input tags --- .../coral-embed-stream/src/actions/stream.js | 39 +++++++++++++------ .../src/tabs/stream/components/DraftArea.js | 1 + .../src/tabs/stream/containers/Comment.js | 1 - .../src/tabs/stream/containers/CommentBox.js | 32 ++++++++++++--- .../src/tabs/stream/containers/DraftArea.js | 2 +- .../src/tabs/stream/containers/Stream.js | 1 + plugin-api/alpha/client/actions/index.js | 2 + plugin-api/alpha/client/selectors/index.js | 17 +++++++- 8 files changed, 75 insertions(+), 20 deletions(-) diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js index bc31c90e9..f3d3897ee 100644 --- a/client/coral-embed-stream/src/actions/stream.js +++ b/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, + }; +}; diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js index 15e1711d4..42c5eee6f 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js +++ b/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) */} {charCountEnable && maxCharCount > 0 && this.renderCharCount()} diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js index 928bb098a..dca7fadaa 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js +++ b/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', diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js index 8ff9b8ec4..57b5a2f17 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js +++ b/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 ( diff --git a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js index 5cbadae8f..61738758d 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js +++ b/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` diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js index 9687a9370..0a7a1951c 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js +++ b/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', diff --git a/plugin-api/alpha/client/actions/index.js b/plugin-api/alpha/client/actions/index.js index 9ef89f11b..653f6bf71 100644 --- a/plugin-api/alpha/client/actions/index.js +++ b/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'; diff --git a/plugin-api/alpha/client/selectors/index.js b/plugin-api/alpha/client/selectors/index.js index 214a07d0c..c094b7ac1 100644 --- a/plugin-api/alpha/client/selectors/index.js +++ b/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;