diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 445245e1d..7ec042ea1 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -16,7 +16,7 @@ import PubDate from '../../coral-plugin-pubdate/PubDate'; import Count from '../../coral-plugin-comment-count/CommentCount'; import AuthorName from '../../coral-plugin-author-name/AuthorName'; import {ReplyBox, ReplyButton} from '../../coral-plugin-replies'; -import FlagButton from '../../coral-plugin-flags/FlagButton'; +import FlagComment from '../../coral-plugin-flags/FlagComment'; import LikeButton from '../../coral-plugin-likes/LikeButton'; import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton'; import SignInContainer from '../../coral-sign-in/containers/SignInContainer'; @@ -139,7 +139,17 @@ class CommentStream extends Component { const comment = comments[commentId]; return
- +
@@ -162,7 +172,7 @@ class CommentStream extends Component { banned={banned}/>
-
- {author && author.displayName} - { showTooltip && {author.settings.bio}} + { showTooltip && +
+ {author.settings.bio} +
+
+ +
+ + }
); } diff --git a/client/coral-plugin-flags/FlagBio.js b/client/coral-plugin-flags/FlagBio.js new file mode 100644 index 000000000..90cc11a7a --- /dev/null +++ b/client/coral-plugin-flags/FlagBio.js @@ -0,0 +1,35 @@ +import React from 'react'; +import FlagButton from './FlagButton'; +import {I18n} from '../coral-framework'; +import translations from './translations.json'; + +const FlagBio = (props) => ; + +const getPopupMenu = [ + () => { + return { + header: lang.t('step-2-header'), + itemType: 'user', + field: 'bio', + options: [ + {val: 'This bio is offensive', text: lang.t('bio-offensive')}, + {val: 'I don\'t like this bio', text: lang.t('no-like-bio')}, + {val: 'This looks like an ad/marketing', text: lang.t('marketing')}, + {val: 'other', text: lang.t('other')} + ], + button: lang.t('continue'), + sets: 'detail' + }; + }, + () => { + return { + header: lang.t('step-3-header'), + text: lang.t('thank-you'), + button: lang.t('done'), + }; + } +]; + +export default FlagBio; + +const lang = new I18n(translations); diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index e36d96ab4..d0b9cb6b4 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -18,6 +18,7 @@ class FlagButton extends Component { posted: false } + // When the "report" button is clicked expand the menu onReportClick = () => { if (!this.props.currentUser) { const offset = document.getElementById(`c_${this.props.id}`).getBoundingClientRect().top - 75; @@ -31,15 +32,26 @@ class FlagButton extends Component { const {postAction, addItem, updateItem, flag, id, author_id} = this.props; const {itemType, field, detail, step, otherText, posted} = this.state; - if (step + 1 >= this.getPopupMenu.length) { + //Proceed to the next step or close the menu if we've reached the end + if (step + 1 >= this.props.getPopupMenu.length) { this.setState({showMenu: false}); } else { this.setState({step: step + 1}); } + // If itemType and detail are both set, post the action if (itemType && detail && !posted) { + // Set the text from the "other" field if it exists. const updatedDetail = otherText || detail; - const item_id = itemType === 'comments' ? id : author_id; + let item_id; + switch(itemType) { + case 'comments': + item_id = id; + break; + case 'user': + item_id = author_id; + break; + } const action = { action_type: 'flag', field, @@ -55,49 +67,9 @@ class FlagButton extends Component { } } - getPopupMenu = [ - () => { - return { - header: lang.t('step-1-header'), - options: [ - {val: 'user', text: lang.t('flag-username')}, - {val: 'comments', text: lang.t('flag-comment')} - ], - button: lang.t('continue'), - sets: 'itemType' - }; - }, - (itemType) => { - const options = itemType === 'comments' ? - [ - {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 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')} - ]; - return { - header: lang.t('step-2-header'), - options, - button: lang.t('continue'), - sets: 'detail' - }; - }, - () => { - return { - header: lang.t('step-3-header'), - text: lang.t('thank-you'), - button: lang.t('done'), - }; - } - ] - onPopupOptionClick = (sets) => (e) => { + + // If the "other" option is clicked, show the other textbox if(sets === 'detail' && e.target.value === 'other') { this.setState({showOther: true}); } @@ -107,6 +79,15 @@ class FlagButton extends Component { this.setState({field: 'username'}); } + // Set itemType and field if they are defined in the popupMenu + const currentMenu = this.props.getPopupMenu[this.state.step](); + if (currentMenu.itemType) { + this.setState({itemType: currentMenu.itemType}); + } + if (currentMenu.field) { + this.setState({field: currentMenu.field}); + } + this.setState({[sets]: e.target.value}); } @@ -119,9 +100,9 @@ class FlagButton extends Component { } render () { - const {flag} = this.props; + const {flag, getPopupMenu} = this.props; const flagged = flag && flag.current_user; - const popupMenu = this.getPopupMenu[this.state.step](this.state.itemType); + const popupMenu = getPopupMenu[this.state.step](this.state.itemType); return