Posting bio flags to backend.

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

@@ -139,7 +139,17 @@ class CommentStream extends Component {
                     const comment = comments[commentId];
                     return <div className="comment" key={commentId} id={`c_${commentId}`}>
                       <hr aria-hidden={true}/>
-                      <AuthorName author={users[comment.author_id]}/>
+                      <AuthorName
+                        author={users[comment.author_id]}
+                        addNotification={this.props.addNotification}
+                        id={commentId}
+                        author_id={comment.author_id}
+                        postAction={this.props.postAction}
+                        showSignInDialog={this.props.showSignInDialog}
+                        deleteAction={this.props.deleteAction}
+                        addItem={this.props.addItem}
+                        updateItem={this.props.updateItem}
+                        currentUser={this.props.auth.user}/>
                       <PubDate created_at={comment.created_at}/>
                       <Content body={comment.body}/>
                       <div className="commentActionsLeft">

client/coral-embed-stream/style/default.css

@@ -127,6 +127,10 @@ hr {
   font-weight: bolder;
 }
 
+.coral-plugin-author-name-bio-flag {
+  float: right;
+}
+
 
 /* Reply styles */
 
@@ -199,10 +203,14 @@ hr {
 
 /* Flag Styles */
 
+.coral-plugin-flags-container {
+  position: relative;
+}
+
 .coral-plugin-flags-popup span {
-  min-width: 100px;
+  min-width: 280px;
   bottom: 36px;
-  right: 75px;
+  left: -190px;
   position: absolute;
 }
 

client/coral-plugin-author-name/AuthorName.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {Tooltip} from 'coral-ui';
+import FlagBio from '../coral-plugin-flags/FlagBio';
 const packagename = 'coral-plugin-author-name';
 
 export default class AuthorName extends Component {
@@ -36,7 +37,15 @@ export default class AuthorName extends Component {
         onMouseLeave={this.handleMouseLeave}
       >
         {author && author.displayName}
-        { showTooltip && <Tooltip>{author.settings.bio}</Tooltip>}
+        { showTooltip && <Tooltip>
+            <div className={`${packagename}-bio`}>
+              {author.settings.bio}
+            </div>
+            <div className={`${packagename}-bio-flag`}>
+              <FlagBio  {...this.props}/>
+            </div>
+            </Tooltip>
+        }
       </div>
     );
   }

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) => <FlagButton {...props} getPopupMenu={getPopupMenu} />;
+
+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);

client/coral-plugin-flags/FlagButton.js

@@ -33,7 +33,7 @@ class FlagButton extends Component {
     const {itemType, field, detail, step, otherText, posted} = this.state;
 
     //Proceed to the next step or close the menu if we've reached the end
-    if (step + 1 >= this.getPopupMenu.length) {
+    if (step + 1 >= this.props.getPopupMenu.length) {
       this.setState({showMenu: false});
     } else {
       this.setState({step: step + 1});
@@ -79,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});
   }
 
@@ -147,7 +156,7 @@ class FlagButton extends Component {
               </form>
             }
             <div className={`${name}-popup-counter`}>
-              {this.state.step + 1} of {this.getPopupMenu.length}
+              {this.state.step + 1} of {getPopupMenu.length}
             </div>
             {
               popupMenu.button && <Button

client/coral-plugin-flags/translations.json

@@ -16,6 +16,8 @@
     "personal-info": "This comment reveals personally identifiable information",
     "username-offensive": "This username is offensive",
     "no-like-username": "I don't like this username",
+    "bio-offensive": "This bio is offensive",
+    "no-like-bio": "I don't like this bio",
     "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",
@@ -38,6 +40,8 @@
     "personal-info": "¡traduceme!",
     "username-offensive": "¡traduceme!",
     "no-like-username": "¡traduceme!",
+    "bio-offensive": "¡traduceme!",
+    "no-like-bio": "¡traduceme!",
     "marketing": "¡traduceme!",
     "thank-you": "¡traduceme!",
     "flag-reason": "¡traduceme!",

models/user.js

@@ -607,7 +607,7 @@ UserService.addBio = (id, bio) => (
  */
 UserService.addAction = (item_id, user_id, action_type, field, detail) => Action.insertUserAction({
   item_id,
-  item_type: 'comment',
+  item_type: 'user',
   user_id,
   action_type,
   field,