From bc273d16f72d4cf7ab06aa2f9cb4f7664a4342af Mon Sep 17 00:00:00 2001 From: okbel Date: Thu, 1 Mar 2018 19:43:54 -0300 Subject: [PATCH] hook to clear text after submiting a comment --- .../src/tabs/stream/components/CommentForm.js | 6 ++++++ .../src/tabs/stream/components/DraftArea.js | 7 +++++++ .../src/tabs/stream/containers/CommentBox.js | 11 +++++++++-- .../src/tabs/stream/containers/DraftArea.js | 6 ++++++ .../client/components/CheckSpamHook.js | 4 ++-- .../client/components/Editor.js | 14 ++++++++++++++ 6 files changed, 44 insertions(+), 4 deletions(-) diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js index ed4bfb602..b4f636f46 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js +++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js @@ -51,6 +51,9 @@ class CommentForm extends React.Component { state: PropTypes.string, loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']), comment: PropTypes.object, + registerHook: PropTypes.func, + unregisterHook: PropTypes.func, + isReply: PropTypes.bool, }; static get defaultProps() { return { @@ -115,6 +118,9 @@ class CommentForm extends React.Component { disabled={disableTextArea} charCountEnable={this.props.charCountEnable} maxCharCount={this.props.maxCharCount} + registerHook={this.props.registerHook} + unregisterHook={this.props.unregisterHook} + isReply={this.props.isReply} />
{this.props.buttonContainerStart} 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 728f90237..202349370 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js +++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js @@ -44,6 +44,7 @@ export default class DraftArea extends React.Component { maxCharCount, onChange, queryData, + isReply, } = this.props; const tASettings = { @@ -53,6 +54,7 @@ export default class DraftArea extends React.Component { onChange, rows, disabled, + isReply, }; return ( @@ -68,6 +70,8 @@ export default class DraftArea extends React.Component { defaultComponent={DraftAreaContent} className={styles.content} queryData={queryData} + registerHook={this.props.registerHook} + unregisterHook={this.props.unregisterHook} {...tASettings} /> @@ -93,4 +97,7 @@ DraftArea.propTypes = { disabled: PropTypes.bool, rows: PropTypes.number, queryData: PropTypes.object.isRequired, + registerHook: PropTypes.func, + unregisterHook: PropTypes.func, + isReply: PropTypes.bool, }; 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 a59ba2806..4495aab33 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js +++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js @@ -65,7 +65,9 @@ class CommentBox extends React.Component { }; // Execute preSubmit Hooks - this.state.hooks.preSubmit.forEach(hook => hook(input)); + this.state.hooks.preSubmit.forEach(hook => + hook(input, this.handleBodyChange) + ); this.setState({ loadingState: 'loading' }); postComment(input, 'comments') @@ -75,7 +77,9 @@ class CommentBox extends React.Component { const actions = data.createComment.actions; // Execute postSubmit Hooks - this.state.hooks.postSubmit.forEach(hook => hook(data)); + this.state.hooks.postSubmit.forEach(hook => + hook(data, this.handleBodyChange) + ); notifyForNewCommentStatus(notify, postedComment.status, actions); @@ -172,6 +176,9 @@ class CommentBox extends React.Component { bodyPlaceholder={t('comment.comment')} bodyInputId={id} body={this.state.body} + registerHook={this.registerHook} + unregisterHook={this.unregisterHook} + isReply={isReply} buttonContainerStart={ ); } @@ -78,6 +81,9 @@ DraftAreaContainer.propTypes = { rows: PropTypes.number, label: PropTypes.string.isRequired, comment: PropTypes.object, + registerHook: PropTypes.func, + unregisterHook: PropTypes.func, + isReply: PropTypes.bool, }; const slots = ['draftArea']; diff --git a/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js b/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js index 58eeac11f..056f28eef 100644 --- a/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js +++ b/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js @@ -49,6 +49,6 @@ export default class CheckSpamHook extends React.Component { CheckSpamHook.propTypes = { notify: PropTypes.func.isRequired, - registerHook: PropTypes.func.isRequired, - unregisterHook: PropTypes.func.isRequired, + registerHook: PropTypes.func, + unregisterHook: PropTypes.func, }; diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js index 2faedb633..29121d4b6 100644 --- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js +++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js @@ -40,6 +40,18 @@ class Editor extends React.Component { if (this.props.comment && this.props.comment.richTextBody) { this.ref.content.innerHTML = this.props.comment.richTextBody; } + + this.clearInputHook = this.props.registerHook( + 'postSubmit', + (res, handleBodyChange) => { + this.ref.content.innerHTML = ''; + handleBodyChange('', { richTextBody: '' }); + } + ); + } + + componentWillUnmount() { + this.props.unregisterHook(this.clearInputHook); } render() { @@ -85,6 +97,8 @@ Editor.propTypes = { comment: PropTypes.object, classNames: PropTypes.object, actions: PropTypes.array, + registerHook: PropTypes.func, + unregisterHook: PropTypes.func, }; export default Editor;