adding context for moderation

client/coral-admin/src/components/ActionButton.js

@@ -4,43 +4,39 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 import {FabButton, Button, Icon} from 'coral-ui';
 
-const ActionButton = ({option, type, comment = {}, user, menuOptionsMap, onClickAction, onClickShowBanDialog}) =>
-{
-  const banned = user.status === 'BANNED';
+const ActionButton = ({type, user}) => {
+  const menuOptionsMap = {
+    'reject': {status: 'REJECTED', icon: 'close', key: 'r'},
+    'approve': {status: 'ACCEPTED', icon: 'done', key: 't'},
+    'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
+    'ban': {status: 'BANNED', icon: 'not interested'}
+  };
 
-  if (option === 'flag' && (type === 'USERS' || comment.status || comment.flagged === true)) {
-    return null;
-  }
-  if (option === 'ban') {
+  if (type === 'ban') {
     return (
       <div className={styles.ban}>
         <Button
           className={`ban ${styles.banButton}`}
           cStyle='darkGrey'
-          disabled={banned ? 'disabled' : ''}
-          onClick={() => onClickShowBanDialog(user.id, user.displayName, comment.id)
-          }
-          raised
-        >
+          disabled={user.status === 'BANNED' ? 'disabled' : ''}
+          onClick={() => {}}
+          raised>
           <Icon name='not_interested' className={styles.banIcon} />
           {lang.t('comment.ban_user')}
         </Button>
       </div>
     );
   }
-  const menuOption = menuOptionsMap[option];
-  const action = {
-    item_type: type,
-    item_id: type === 'COMMENTS' ? comment.id : user.id
-  };
+
   return (
     <FabButton
-      className={`${option} ${styles.actionButton}`}
-      cStyle={option}
-      icon={menuOption.icon}
-      onClick={() => onClickAction(menuOption.status, type === 'COMMENTS' ? comment : user, action)}
+      className={`${type} ${styles.actionButton}`}
+      cStyle={type}
+      icon={menuOptionsMap[type].icon}
+      onClick={() => {}}
     />
   );
+
 };
 
 export default ActionButton;

client/coral-admin/src/components/ModerationList.css

@@ -96,11 +96,6 @@
     margin-left: 40px;
   }
 
-  .actionButton {
-    transform: scale(.8);
-    margin: 0;
-  }
-
   .body {
     margin-top: 20px;
     flex: 1;
@@ -182,3 +177,9 @@
     font-size: 14px;
   }
 }
+
+
+.actionButton {
+  transform: scale(.8);
+  margin: 0;
+}

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -59,7 +59,6 @@ class ModerationContainer extends Component {
     }
 
     const enablePremodTab = !!data.premod.length;
-
     return (
       <div>
         <ModerationHeader asset={asset} />
@@ -68,9 +67,9 @@ class ModerationContainer extends Component {
           enablePremodTab={enablePremodTab}
           {...moderation} />
         <ModerationQueue
-          enablePremodTab={enablePremodTab}
-          activeTab={moderation.activeTab}
           data={data}
+          activeTab={moderation.activeTab}
+          enablePremodTab={enablePremodTab}
           suspectWords={settings.wordlist.suspect}
         />
       </div>

client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js

@@ -7,11 +7,13 @@ const actionsMap = {
 };
 
 const ModerationQueue = props => {
+  console.log(props);
   return (
     <div>
       <ul>
       {
         props.data[props.activeTab].map((comment, i) => {
+          console.log(props.asset);
           return <Comment
             key={i}
             index={i}

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -2,12 +2,13 @@ import React, {PropTypes} from 'react';
 import timeago from 'timeago.js';
 import Linkify from 'react-linkify';
 import Highlighter from 'react-highlight-words';
+import {Link} from 'react-router';
 
 import styles from './styles.css';
 
 import {Icon} from 'coral-ui';
 
-// import ActionButton from '../components/ActionButton';
+import ActionButton from '../../../components/ActionButton';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../../translations.json';
@@ -16,7 +17,7 @@ const Comment = props => {
   const links = linkify.getMatches(props.body);
   return (
     <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
       <div className={styles.itemHeader}>
         <div className={styles.author}>
           <span>{props.user.name}</span>
@@ -28,18 +29,9 @@ const Comment = props => {
         <div className={styles.sideActions}>
           {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={`actions ${styles.actions}`}>
-            {/* {props.modActions.map(*/}
-            {/* (action, i) =>*/}
-            {/* <ActionButton*/}
-            {/* option={action}*/}
-            {/* key={i}*/}
-            {/* type='COMMENTS'*/}
-            {/* comment={comment}*/}
-            {/* user={author}*/}
-            {/* menuOptionsMap={props.menuOptionsMap}*/}
-            {/* onClickAction={props.onClickAction}*/}
-            {/* onClickShowBanDialog={props.onClickShowBanDialog}/>*/}
-            {/* )}*/}
+            <ActionButton type="reject" user={props.user} />
+            <ActionButton type="approve" user={props.user} />
+            <ActionButton type="ban" user={props.user} />
           </div>
           {props.user.banned === 'banned' ?
             <span className={styles.banned}>
@@ -50,10 +42,9 @@ const Comment = props => {
         </div>
       </div>
 
-      {/* <div className={styles.itemBody}> */}
-        {/* Article title */}
-        {/* <a>Moderate this Article</a> */}
-      {/* </div> */}
+       <div className={styles.moderateArticle}>
+         {props.asset.title} <Link to={`/admin/moderate/${props.asset.id}`}>Moderate Article</Link>
+       </div>
 
       <div className={styles.itemBody}>
         <p className={styles.body}>
@@ -62,11 +53,9 @@ const Comment = props => {
           </Linkify>
         </p>
       </div>
-
-      {/*  <span className={styles.context}> */}
-        {/* <a>View context</a> */}
-      {/* </span> */}
-
+      {/* <span className={styles.context}>*/}
+       {/* <a>View context</a>*/}
+     {/* </span>*/}
     </li>
   );
 };
@@ -80,7 +69,8 @@ const linkify = new Linkify();
 const lang = new I18n(translations);
 
 Comment.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired
 };
 
 export default Comment;

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -248,3 +248,25 @@
     font-size: 14px;
   }
 }
+
+
+.Comment {
+  .moderateArticle {
+    padding: 10px 0px;
+    a {
+      display: block;
+      color: #679af3;
+      text-decoration: none;
+      font-size: 1em;
+      font-weight: 500;
+      letter-spacing: .5px;
+      font-size: .8em;
+
+      &:hover {
+        text-decoration: underline;
+        opacity: .9;
+        cursor: pointer;
+       }
+    }
+  }
+}

client/coral-admin/src/containers/Streams/StreamsTable.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
-const lang = new I18n(translations);
-
-const StreamsTable = props => (
-  <table className={'mdl-data-table'}>
-    <thead>
-    <tr>
-        <th className="mdl-data-table__cell--non-numeric">
-          {lang.t('streams.article')}
-        </th>
-        <th className="mdl-data-table__cell--non-numeric">
-          {lang.t('streams.pubdate')}
-        </th>
-        <th className="mdl-data-table__cell--non-numeric">
-          {lang.t('streams.status')}
-        </th>
-    </tr>
-    </thead>
-    <tbody>
-    {props.rows.map((row, i)=> (
-      <tr key={i}>
-        <td className="mdl-data-table__cell--non-numeric">
-          {row.title}
-        </td>
-        <td className="mdl-data-table__cell--non-numeric">
-          {row.publication_date}
-        </td>
-        <td className="mdl-data-table__cell--non-numeric">
-          {lang.t('streams.status')}
-        </td>
-      </tr>
-    ))}
-    </tbody>
-  </table>
-);
-
-export default StreamsTable;

client/coral-admin/src/graphql/fragments/commentView.graphql

@@ -6,6 +6,11 @@ fragment commentView on Comment {
     user {
         id
         name: displayName
+        status
+    }
+    asset {
+      id
+      title
     }
     actions {
         type: action_type

graph/mutators/user.js

@@ -1,16 +1,8 @@
 const UsersService = require('../../services/users');
 
 const setUserStatus = ({user}, {id, status}) => {
-  console.log('------as-d-asd-a-sads-a-sad-dsa-----');
-  console.log('user', user);
-  console.log('id', id);
-  console.log('status', status);
-
   return UsersService.setStatus(id, status)
-  .then((user) => {
-    console.log('result', user);
-    return user;
-  });
+  .then(res => res);
 };
 
 module.exports = (context) => {