diff --git a/.babelrc b/.babelrc index 41d27bf34..6186cefaf 100644 --- a/.babelrc +++ b/.babelrc @@ -5,7 +5,6 @@ ], "plugins": [ "add-module-exports", - "transform-async-to-generator", "transform-class-properties", "transform-decorators-legacy", "transform-object-assign", diff --git a/.eslintrc.json b/.eslintrc.json index 34b46b83b..293657679 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,6 +4,9 @@ "node": true }, "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2017 + }, "rules": { "indent": ["error", 2 diff --git a/client/.babelrc b/client/.babelrc new file mode 100644 index 000000000..27289288c --- /dev/null +++ b/client/.babelrc @@ -0,0 +1,6 @@ +{ + "extends": "../.babelrc", + "plugins": [ + "transform-async-to-generator", + ] +} diff --git a/client/coral-admin/src/components/BanUserButton.css b/client/coral-admin/src/components/BanUserButton.css index 36243348f..6e8e50f71 100644 --- a/client/coral-admin/src/components/BanUserButton.css +++ b/client/coral-admin/src/components/BanUserButton.css @@ -5,7 +5,7 @@ i { vertical-align: middle; - margin-right: 10px; + margin-right: 5px; font-size: 14px; } } diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js deleted file mode 100644 index db5cfe5bf..000000000 --- a/client/coral-admin/src/components/Comment.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import timeago from 'timeago.js'; -import Linkify from 'react-linkify'; - -import styles from './ModerationList.css'; - -import I18n from 'coral-framework/modules/i18n/i18n'; -import translations from '../translations.json'; - -import Highlighter from 'react-highlight-words'; -import {Icon} from 'coral-ui'; -import ActionButton from './ActionButton'; - -const linkify = new Linkify(); - -// Render a single comment for the list -const Comment = props => { - const {comment, author} = props; - let authorStatus = author.status; - const links = linkify.getMatches(comment.body); - - return ( -
  • -
    -
    - {author.username || lang.t('comment.anon')} - {timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - {comment.flagged ?

    {lang.t('comment.flagged')}

    : null} -
    -
    - {links ? - Contains Link : null} -
    - {props.modActions.map( - (action, i) => - - )} -
    - {authorStatus === 'banned' ? - {lang.t('comment.banned_user')} : null} -
    -
    -
    - - - - - -
    -
  • - ); -}; - -export default Comment; - -const linkStyles = { - backgroundColor: 'rgb(255, 219, 135)', - padding: '1px 2px' -}; - -const lang = new I18n(translations); diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css index 140f4bc8f..7036998d1 100644 --- a/client/coral-admin/src/components/ModerationList.css +++ b/client/coral-admin/src/components/ModerationList.css @@ -178,6 +178,10 @@ } } +.selected { + border-radius: 10px; +} + .actionButton { transform: scale(.8); diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 4a2314926..6425507d0 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -14,28 +14,35 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
    {lang.t('configure.dashboard')} {lang.t('configure.moderate')} - {lang.t('configure.streams')} - {lang.t('configure.community')} diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 40f19b5a1..25a7a9511 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -17,22 +17,50 @@ import ModerationQueue from './ModerationQueue'; import ModerationMenu from './components/ModerationMenu'; import ModerationHeader from './components/ModerationHeader'; import NotFoundAsset from './components/NotFoundAsset'; +import ModerationKeysModal from '../../components/ModerationKeysModal'; class ModerationContainer extends Component { + state = { + selectedIndex: 0 + } + componentWillMount() { const {toggleModal, singleView} = this.props; + const {selectedIndex} = this.state; this.props.fetchSettings(); - key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); + key('j', () => this.setState({selectedIndex: selectedIndex + 1})); + key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex})); + key('r', () => this.moderate(false)); + key('t', () => this.moderate(true)); + } + + moderate = (accept) => { + const {data, route, acceptComment, rejectComment} = this.props; + const {selectedIndex} = this.state; + const activeTab = route.path === ':id' ? 'premod' : route.path; + const comments = data[activeTab]; + const commentId = {commentId: comments[selectedIndex].id}; + + if (accept) { + acceptComment(commentId); + } else { + rejectComment(commentId); + } + } componentWillUnmount() { key.unbind('s'); key.unbind('shift+/'); key.unbind('esc'); + key.unbind('j'); + key.unbind('k'); + key.unbind('r'); + key.unbind('t'); } componentWillReceiveProps(nextProps) { @@ -43,7 +71,7 @@ class ModerationContainer extends Component { } render () { - const {data, moderation, settings, assets, modQueueResort, ...props} = this.props; + const {data, moderation, settings, assets, modQueueResort, onClose, ...props} = this.props; const providedAssetId = this.props.params.id; const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path; @@ -81,6 +109,8 @@ class ModerationContainer extends Component { currentAsset={asset} comments={comments} activeTab={activeTab} + singleView={moderation.singleView} + selectedIndex={this.state.selectedIndex} suspectWords={settings.wordlist.suspect} showBanUserDialog={props.showBanUserDialog} acceptComment={props.acceptComment} @@ -92,6 +122,9 @@ class ModerationContainer extends Component { handleClose={props.hideBanUserDialog} handleBanUser={props.banUser} /> +
    ); } diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index cdbc7f28c..58fdd1398 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -1,15 +1,16 @@ import React, {PropTypes} from 'react'; import Comment from './components/Comment'; +import styles from './components/styles.css'; import EmptyCard from '../../components/EmptyCard'; import {actionsMap} from './helpers/moderationQueueActionsMap'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; const lang = new I18n(translations); -const ModerationQueue = ({comments, ...props}) => { +const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => { return ( -
    +