merge

2026-07-05 06:14:58 +08:00 · 2017-05-10 14:15:24 -03:00
parent 26e5631f52 67c202d89f
commit cb45e33b41
9 changed files with 189 additions and 36 deletions
@@ -20,6 +20,7 @@ plugins/*
 !plugins/coral-plugin-respect
 !plugins/coral-plugin-offtopic
 !plugins/coral-plugin-like
+!plugins/coral-plugin-mod
 !plugins/coral-plugin-love

 **/node_modules/*
@@ -1,16 +1,17 @@
 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 Linkify from 'react-linkify';

-import styles from './styles.css';
 import {Icon} from 'coral-ui';
 import FlagBox from './FlagBox';
+import styles from './styles.css';
 import CommentType from './CommentType';
+import Highlighter from 'react-highlight-words';
+import Slot from 'coral-framework/components/Slot';
+import {getActionSummary} from 'coral-framework/utils';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import BanUserButton from 'coral-admin/src/components/BanUserButton';
-import {getActionSummary} from 'coral-framework/utils';

 const linkify = new Linkify();

@@ -18,11 +19,19 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 const lang = new I18n(translations);

-const Comment = ({actions = [], comment, suspectWords, bannedWords, ...props}) => {
+const Comment = ({
+  actions = [],
+  comment,
+  suspectWords,
+  bannedWords,
+  ...props
+}) => {
  const links = linkify.getMatches(comment.body);
  const linkText = links ? links.map(link => link.raw) : [];
  const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-  const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction');
+  const flagActions =
+    comment.actions &&
+    comment.actions.filter(a => a.__typename === 'FlagAction');
  let commentType = '';
  if (comment.status === 'PREMOD') {
    commentType = 'premod';
@@ -33,12 +42,17 @@ const Comment = ({actions = [], comment, suspectWords, bannedWords, ...props}) =
  // since words are checked against word boundaries on the backend,
  // this should be the behavior on the front end as well.
  // currently the highlighter plugin does not support this out of the box.
-  const searchWords = [...suspectWords, ...bannedWords].filter(w => {
-    return new RegExp(`(^|\\s)${w}(\\s|$)`).test(comment.body);
-  }).concat(linkText);
+  const searchWords = [...suspectWords, ...bannedWords]
+    .filter(w => {
+      return new RegExp(`(^|\\s)${w}(\\s|$)`).test(comment.body);
+    })
+    .concat(linkText);

  return (
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ?  'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
+    <li
+      tabIndex={props.index}
+      className={`mdl-card ${props.selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}
+    >
      <div className={styles.container}>
        <div className={styles.itemHeader}>
          <div className={styles.author}>
@@ -46,53 +60,95 @@ const Comment = ({actions = [], comment, suspectWords, bannedWords, ...props}) =
              {comment.user.name}
            </span>
            <span className={styles.created}>
-              {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+              {timeago().format(
+                comment.created_at || Date.now() - props.index * 60 * 1000,
+                lang.getLocale().replace('-', '_')
+              )}
            </span>
-            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status, comment.status !== 'REJECTED')} />
+            <BanUserButton
+              user={comment.user}
+              onClick={() =>
+                props.showBanUserDialog(
+                  comment.user,
+                  comment.id,
+                  comment.status,
+                  comment.status !== 'REJECTED'
+                )}
+            />
            <CommentType type={commentType} />
          </div>
-          {comment.user.status === 'banned' ?
-            <span className={styles.banned}>
-              <Icon name='error_outline'/>
-              {lang.t('comment.banned_user')}
-            </span>
+          {comment.user.status === 'banned'
+            ? <span className={styles.banned}>
+                <Icon name="error_outline" />
+                {lang.t('comment.banned_user')}
+              </span>
            : null}
+          <Slot fill="adminCommentInfoBar" comment={comment} />
        </div>
        <div className={styles.moderateArticle}>
          Story: {comment.asset.title}
-          {!props.currentAsset && (
-            <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>
-          )}
+          {!props.currentAsset &&
+            <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>}
        </div>
        <div className={styles.itemBody}>
          <p className={styles.body}>
            <Highlighter
              searchWords={searchWords}
-              textToHighlight={comment.body} /> <a className={styles.external} href={`${comment.asset.url}#${comment.id}`} target="_blank"><Icon name='open_in_new' /> {lang.t('comment.view_context')}</a>
+              textToHighlight={comment.body}
+            />
+            {' '}
+            <a
+              className={styles.external}
+              href={`${comment.asset.url}#${comment.id}`}
+              target="_blank"
+            >
+              <Icon name="open_in_new" /> {lang.t('comment.view_context')}
+            </a>
          </p>
+          <Slot fill="adminCommentContent" comment={comment} />
          <div className={styles.sideActions}>
-            {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
+            {links
+              ? <span className={styles.hasLinks}>
+                  <Icon name="error_outline" /> Contains Link
+                </span>
+              : null}
            <div className={`actions ${styles.actions}`}>
              {actions.map((action, i) => {
-                const active = (action === 'REJECT' && comment.status === 'REJECTED') ||
-                               (action === 'APPROVE' && comment.status === 'ACCEPTED');
-                return <ActionButton key={i}
-                  type={action}
-                  user={comment.user}
-                  status={comment.status}
-                  active={active}
-                  acceptComment={() => comment.status === 'ACCEPTED' ? null : props.acceptComment({commentId: comment.id})}
-                  rejectComment={() => comment.status === 'REJECTED' ? null : props.rejectComment({commentId: comment.id})} />;
+                const active =
+                  (action === 'REJECT' && comment.status === 'REJECTED') ||
+                  (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                return (
+                  <ActionButton
+                    key={i}
+                    type={action}
+                    user={comment.user}
+                    status={comment.status}
+                    active={active}
+                    acceptComment={() =>
+                      (comment.status === 'ACCEPTED'
+                        ? null
+                        : props.acceptComment({commentId: comment.id}))}
+                    rejectComment={() =>
+                      (comment.status === 'REJECTED'
+                        ? null
+                        : props.rejectComment({commentId: comment.id}))}
+                  />
+                );
              })}
            </div>
+            <Slot fill="adminSideActions" comment={comment} />
          </div>
        </div>
      </div>
-      {
-        flagActions && flagActions.length
-        ? <FlagBox actions={flagActions} actionSummaries={flagActionSummaries} />
-        : null
-      }
+      <div>
+        <Slot fill="adminCommentDetailArea" comment={comment} />
+      </div>
+      {flagActions && flagActions.length
+        ? <FlagBox
+            actions={flagActions}
+            actionSummaries={flagActionSummaries}
+          />
+        : null}
    </li>
  );
 };
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './styles.css'
+
+export default (props) => (
+  <div className={styles.box}>
+    Comment Status: {props.comment.status}
+  </div>
+)
@@ -0,0 +1,32 @@
+import React from 'react';
+import Box from './Box';
+import {Button} from 'coral-ui'
+import styles from './styles.css';
+
+export default class Footer extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      show: false
+    };
+  }
+
+  handleClick = () => {
+    this.setState(state => ({
+      show: !state.show
+    }))
+  }
+
+  render() {
+    const {show} = this.state;
+    return (
+      <div className={styles.container}>
+        <Button cStyle="darkGrey" onClick={this.handleClick}>
+          Show Comment Status
+        </Button>
+        {show ? <Box comment={this.props.comment} /> : null}
+      </div>
+    );
+  }
+}
@@ -0,0 +1,8 @@
+.container {
+    padding: 0 14px 10px;
+}
+
+.box {
+    font-size: 12px;
+    padding: 10px 14px;
+}
@@ -0,0 +1,7 @@
+import Container from './components/Container';
+
+export default {
+  slots: {
+    adminCommentDetailArea: [Container],
+  }
+};
@@ -0,0 +1,4 @@
+const {readFileSync} = require('fs');
+const path = require('path');
+
+module.exports = {};