From dd85fbb3e09254f047c89a6ad21c74f2bae6c0b9 Mon Sep 17 00:00:00 2001 From: David Jay Date: Wed, 7 Dec 2016 22:16:41 -0500 Subject: [PATCH] Adding other field. --- .../coral-embed-stream/src/CommentStream.js | 2 +- client/coral-embed-stream/style/default.css | 5 ++ client/coral-framework/actions/items.js | 6 +-- client/coral-plugin-flags/FlagButton.js | 47 ++++++++++++++----- client/coral-plugin-flags/translations.json | 2 + 5 files changed, 47 insertions(+), 15 deletions(-) diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 76a73171a..3262d32b6 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -274,7 +274,7 @@ const mapDispatchToProps = (dispatch) => ({ getStream: (rootId) => dispatch(getStream(rootId)), addNotification: (type, text) => dispatch(addNotification(type, text)), clearNotification: () => dispatch(clearNotification()), - postAction: (item, action, user, itemType, field, detail) => dispatch(postAction(item, action, user, itemType, field, detail)), + postAction: (item, action, itemType, field, detail) => dispatch(postAction(item, action, itemType, field, detail)), showSignInDialog: () => dispatch(showSignInDialog()), deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)), appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)), diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 273e4e0b2..04c09aa16 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -237,6 +237,11 @@ hr { margin-top: 10px; } +.coral-plugin-flags-other-text { + margin-left: 20px; + width: 75%; +} + /* Close comments */ .close-comments-intro-wrapper { diff --git a/client/coral-framework/actions/items.js b/client/coral-framework/actions/items.js index 2a0c118a2..0ef3db8eb 100644 --- a/client/coral-framework/actions/items.js +++ b/client/coral-framework/actions/items.js @@ -217,12 +217,12 @@ export function postItem (item, type, id) { * */ -export function postAction (item_id, action_type, user_id, item_type, field, detail) { +export function postAction (item_id, action_type, item_type, field, detail) { return () => { const action = { action_type, - user_id, - field, detail + field, + detail }; return coralApi(`/${item_type}/${item_id}/actions`, {method: 'POST', body: action}); diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index 8dd484604..a392776cb 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -9,8 +9,10 @@ export default class FlagButton extends Component { state = { showMenu: false, + showOther: false, itemType: '', - reason: '', + detail: '', + otherText: '', step: 1 } @@ -23,14 +25,16 @@ export default class FlagButton extends Component { } onPopupContinue = () => { - const {postAction, addItem, updateItem, currentUser, flag, id, author_id} = this.props; - const {itemType, field, detail, step} = this.state; + const {postAction, addItem, updateItem, flag, id, author_id} = this.props; + const {itemType, field, detail, step, otherText} = this.state; this.setState({step: step + 1}); if (itemType && detail) { + console.log('OtherText', otherText); + const updatedDetail = otherText || detail; const item_id = itemType === 'comments' ? id : author_id; - postAction(item_id, 'flag', currentUser.id, itemType, field, detail) + postAction(item_id, 'flag', itemType, field, updatedDetail) .then((action) => { let id = `${action.action_type}_${action.item_id}`; addItem({id, current_user: action, count: flag ? flag.count + 1 : 1}, 'actions'); @@ -43,7 +47,7 @@ export default class FlagButton extends Component { switch(step) { case 1: { return { - header: lang.t('step-1-username'), + header: lang.t('step-1-header'), options: [ {val: 'user', text: lang.t('flag-username')}, {val: 'comments', text: lang.t('flag-comment')}, @@ -57,14 +61,14 @@ export default class FlagButton extends Component { [ {val: 'I don\'t agree with this comment', text: lang.t('no-agree-comment')}, {val: 'This comment is offensive', text: lang.t('comment-offensive')}, - {val: 'This comment reveals personally identifiable inforation without consent', text: lang.t('personal-info')}, - {val: 'Other', text: lang.t('other')}, + {val: 'This comment reveals personally identifiable infomration', text: lang.t('personal-info')}, + {val: 'other', text: lang.t('other')}, ] : [ {val: 'This username is offensive', text: lang.t('username-offensive')}, {val: 'I don\'t like this username', text: lang.t('no-like-username')}, - {val: 'This looks like an ad/marketing', text: lang.t('marketing ')}, - {val: 'Other', text: lang.t('other')}, + {val: 'This looks like an ad/marketing', text: lang.t('marketing')}, + {val: 'other', text: lang.t('other')}, ]; return { header: lang.t('step-2-header'), @@ -75,19 +79,27 @@ export default class FlagButton extends Component { } case 3: { return { - header: lang.t('step-3-input'), + header: lang.t('step-3-header'), text: lang.t('thank-you') }; }} } onPopupOptionClick = (sets) => (e) => { - this.setState({[sets]: e.target.value}); + if(sets === 'detail' && e.target.value === 'other') { + this.setState({showOther: true}); + } // If flagging a user, indicate that this is referencing the username rather than the bio if(sets === 'itemType' && e.target.value === 'user') { this.setState({field: 'username'}); } + + this.setState({[sets]: e.target.value}); + } + + onOtherTextChange = (e) => { + this.setState({otherText: e.target.value}); } render () { @@ -131,6 +143,19 @@ export default class FlagButton extends Component { ) } + { + this.state.showOther &&
+ +
+
+ } }
diff --git a/client/coral-plugin-flags/translations.json b/client/coral-plugin-flags/translations.json index ac6c95523..1b5bee21b 100644 --- a/client/coral-plugin-flags/translations.json +++ b/client/coral-plugin-flags/translations.json @@ -17,6 +17,7 @@ "no-like-username": "I don't like this username", "marketing": "This looks like an ad/marketing", "thank-you": "We value your safety and feedback. A moderator will review your flag.", + "flag-reason": "Reason for flag", "other": "Other" }, "es": { @@ -37,6 +38,7 @@ "no-like-username": "¡traduceme!", "marketing": "¡traduceme!", "thank-you": "¡traduceme!", + "flag-reason": "Reason for flag", "other": "¡traduceme!" } }