From 12be487783d72a7703b4f54fb2cc560d759c1970 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 5 Sep 2017 16:19:46 -0300 Subject: [PATCH 01/22] excludeIf no featured tags --- .../client/components/Tag.js | 13 +++------- .../client/containers/Tag.js | 25 +++++++++++-------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index 562606502..a8ee80417 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -3,7 +3,6 @@ import cn from 'classnames'; import styles from './Tag.css'; import Tooltip from './Tooltip'; import {t} from 'plugin-api/beta/client/services'; -import {isTagged} from 'plugin-api/beta/client/utils'; export default class Tag extends React.Component { constructor() { @@ -35,14 +34,10 @@ export default class Tag extends React.Component {
- { - isTagged(this.props.comment.tags, 'FEATURED') ? ( - - {t('talk-plugin-featured-comments.featured')} - - ) : null - } + + {t('talk-plugin-featured-comments.featured')} + {tooltip && }
); diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tag.js b/plugins/talk-plugin-featured-comments/client/containers/Tag.js index 60d9e1e2b..902591875 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tag.js @@ -1,15 +1,18 @@ -import {gql} from 'react-apollo'; +import {compose, gql} from 'react-apollo'; import Tag from '../components/Tag'; -import {withFragments} from 'plugin-api/beta/client/hocs'; +import {isTagged} from 'plugin-api/beta/client/utils'; +import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs'; -export default withFragments({ - comment: gql` - fragment TalkFeaturedComments_Tag_comment on Comment { - tags { - tag { - name +export default compose( + withFragments({ + comment: gql` + fragment TalkFeaturedComments_Tag_comment on Comment { + tags { + tag { + name + } } } - } - ` -})(Tag); + `}), + excludeIf((props) => !isTagged(props.comment.tags, 'FEATURED')) +)(Tag); From 7b59323b262bc3d98425bff12e6dbef5b4c80876 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Sep 2017 08:05:39 -0300 Subject: [PATCH 02/22] Moderation Actions --- .eslintignore | 1 + .gitignore | 1 + .../client/components/Tag.js | 7 +- .../client/.babelrc | 14 ++++ .../client/.eslintrc.json | 23 +++++++ .../client/components/ModerationActions.css | 8 +++ .../client/components/ModerationActions.js | 54 ++++++++++++++++ .../client/components/RejectCommentAction.css | 17 +++++ .../client/components/RejectCommentAction.js | 14 ++++ .../client/components/Tooltip.css | 64 +++++++++++++++++++ .../client/components/Tooltip.js | 9 +++ .../talk-plugin-ignore-user/client/.babelrc | 14 ++++ .../client/.eslintrc.json | 23 +++++++ .../client/components/IgnoreUserAction.css | 17 +++++ .../client/components/IgnoreUserAction.js | 12 ++++ .../components/IgnoreUserConfirmation.css | 45 +++++++++++++ .../components/IgnoreUserConfirmation.js | 23 +++++++ .../client/components/IgnoredUserSection.css | 22 +++++++ .../client/components/IgnoredUserSection.js | 23 +++++++ .../client/containers/IgnoreUserAction.js | 53 +++++++++++++++ .../containers/IgnoreUserConfirmation.js | 60 +++++++++++++++++ .../client/containers/IgnoredUserSection.js | 36 +++++++++++ .../talk-plugin-ignore-user/client/index.js | 43 +++++++++++++ .../client/translations.yml | 25 ++++++++ .../talk-plugin-ignore-user/index.js | 1 + .../client/containers/RejectCommentAction.js | 12 ++++ .../client/index.js | 11 ++++ .../client/translations.yml | 6 ++ .../talk-plugin-moderation-actions/index.js | 1 + 29 files changed, 635 insertions(+), 4 deletions(-) create mode 100644 plugins/talk-plugin-moderation-actions/client/.babelrc create mode 100644 plugins/talk-plugin-moderation-actions/client/.eslintrc.json create mode 100644 plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css create mode 100644 plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css create mode 100644 plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/Tooltip.css create mode 100644 plugins/talk-plugin-moderation-actions/client/components/Tooltip.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml create mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js create mode 100644 plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js create mode 100644 plugins/talk-plugin-moderation-actions/client/index.js create mode 100644 plugins/talk-plugin-moderation-actions/client/translations.yml create mode 100644 plugins/talk-plugin-moderation-actions/index.js diff --git a/.eslintignore b/.eslintignore index 4805e34a4..da39d3ccf 100644 --- a/.eslintignore +++ b/.eslintignore @@ -22,5 +22,6 @@ plugins/* !plugins/talk-plugin-author-menu !plugins/talk-plugin-member-since !plugins/talk-plugin-ignore-user +!plugins/talk-plugin-moderation-actions node_modules diff --git a/.gitignore b/.gitignore index 0a2ac00df..672409dbf 100644 --- a/.gitignore +++ b/.gitignore @@ -38,5 +38,6 @@ plugins/* !plugins/talk-plugin-author-menu !plugins/talk-plugin-member-since !plugins/talk-plugin-ignore-user +!plugins/talk-plugin-moderation-actions **/node_modules/* diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index a8ee80417..57a871ee9 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -31,15 +31,14 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; return( -
- + {t('talk-plugin-featured-comments.featured')} {tooltip && } -
+ ); } } diff --git a/plugins/talk-plugin-moderation-actions/client/.babelrc b/plugins/talk-plugin-moderation-actions/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/.babelrc @@ -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" + ] +} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/.eslintrc.json b/plugins/talk-plugin-moderation-actions/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/.eslintrc.json @@ -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"] }] + } +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css new file mode 100644 index 000000000..fd841e1cd --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css @@ -0,0 +1,8 @@ +.moderationActions { + display: inline; + padding: 0 4px; +} + +.moderationActions:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js new file mode 100644 index 000000000..1b7b35948 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -0,0 +1,54 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './ModerationActions.css'; +import Tooltip from './Tooltip'; +import {t} from 'plugin-api/beta/client/services'; +import {Icon} from 'plugin-api/beta/client/components/ui'; +import RejectCommentAction from '../containers/RejectCommentAction.js'; +import ClickOutside from 'coral-framework/components/ClickOutside'; + +export default class Tag extends React.Component { + constructor() { + super(); + + this.state = { + tooltip: false + }; + + } + + toggleTooltip = (e) => { + e.preventDefault(); + const {tooltip} = this.state; + + this.setState({ + tooltip: !tooltip + }); + } + + hideTooltip = () => { + this.setState({ + tooltip: false + }); + } + + render() { + const {tooltip} = this.state; + return( + +
+ + + {tooltip ? : } + + + {tooltip && ( + + + + )} +
+ + ); + } +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css new file mode 100644 index 000000000..ac818278c --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css @@ -0,0 +1,17 @@ +.root { + white-space: nowrap; +} + +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + border: 1px solid rgba(1, 1, 1, 0.8); + border-radius: 1px; + padding: 3px 6px; + font-size: 12px; + transition: color 100ms, background 100ms; + + &:hover { + background-color: rgba(1, 1, 1, 0.8); + color: white; + } +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js new file mode 100644 index 000000000..d15127294 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './RejectCommentAction.css'; +import {t} from 'plugin-api/beta/client/services'; +import {Icon} from 'plugin-api/beta/client/components/ui'; +import cn from 'classnames'; + +export default ({rejectComment}) => ( + +); diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css new file mode 100644 index 000000000..63e0a1e1b --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css @@ -0,0 +1,64 @@ +.tooltip { + background-color: white; + border: solid 1px #999; + border-radius: 3px; + padding: 10px; + position: absolute; + -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); + z-index: 10; + top: 26px; + right: 0px; + width: 200px; + text-align: left; + color: #616161; +} + +.tooltip::before{ + content: ''; + border: 10px solid transparent; + border-top-color: #999; + position: absolute; + right: 0px; + top: -20px; + transform: rotate(180deg); +} + +.tooltip::after{ + content: ''; + border: 10px solid transparent; + border-top-color: white; + position: absolute; + right: 0px; + top: -19px; + transform: rotate(180deg); +} + +.headline { + color: #484747; + display: inline-block; + margin: 0; + padding: 0; + font-size: 1.02em; + margin-left: 6px; + letter-spacing: 0.2px; + vertical-align: middle; + margin-bottom: 2px; + line-height: 22px; +} + +.icon { + font-size: 1.4em; + vertical-align: middle; +} + +.description { + width: 100%; + box-sizing: border-box; + white-space: pre-wrap; + padding: 0; + margin: 0; + padding-left: 25px; + font-weight: 400; + font-size: 1em; +} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js new file mode 100644 index 000000000..6b7428ce6 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js @@ -0,0 +1,9 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './Tooltip.css'; +import {t} from 'plugin-api/beta/client/services'; +import {Icon} from 'plugin-api/beta/client/components/ui'; + +export default ({className = '', children}) => ( +
{children}
+); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc @@ -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" + ] +} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json @@ -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"] }] + } +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css new file mode 100644 index 000000000..ac818278c --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css @@ -0,0 +1,17 @@ +.root { + white-space: nowrap; +} + +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + border: 1px solid rgba(1, 1, 1, 0.8); + border-radius: 1px; + padding: 3px 6px; + font-size: 12px; + transition: color 100ms, background 100ms; + + &:hover { + background-color: rgba(1, 1, 1, 0.8); + color: white; + } +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js new file mode 100644 index 000000000..19319ec9c --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js @@ -0,0 +1,12 @@ +import React from 'react'; +import styles from './IgnoreUserAction.css'; +import {t} from 'plugin-api/beta/client/services'; +import cn from 'classnames'; + +export default ({ignoreUser}) => ( + +); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css new file mode 100644 index 000000000..4f3d8e9da --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css @@ -0,0 +1,45 @@ +.root { + width: 200px; +} + +.actions { + display: flex; + justify-content: flex-end; + margin-top: 8px; +} + +.message { + font-size: 13px; +} + +.title { + padding: 0; + margin: 0 0 8px 0; + font-size: 15px; +} + +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + border: 1px solid rgba(1, 1, 1, 0.8); + border-radius: 1px; + padding: 3px 6px; + font-size: 12px; + transition: color 100ms, background 100ms; + + &:hover { + background-color: rgba(1, 1, 1, 0.8); + color: white; + } +} + +.cancel { + composes: buttonReset from "coral-framework/styles/reset.css"; + padding: 3px 6px; + font-size: 12px; + transition: color 100ms; + margin-right: 4px; + + &:hover { + color: rgba(1, 1, 1, 0.75); + } +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js new file mode 100644 index 000000000..8da879f62 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from './IgnoreUserConfirmation.css'; +import {t} from 'plugin-api/beta/client/services'; +import cn from 'classnames'; + +export default ({ignoreUser, cancel, username}) => ( + +); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css new file mode 100644 index 000000000..b279101ea --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css @@ -0,0 +1,22 @@ +.list { + display: table; + list-style-type: none; + margin-left: 0; + padding-left: 0; +} + +.listItem { + display: table-row; +} + +.username { + display: table-cell; +} + +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + + margin-left: 16px; + color: #D0011B; + text-decoration: underline; +} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js new file mode 100644 index 000000000..3946626cd --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from './IgnoredUserSection.css'; +import {t} from 'plugin-api/beta/client/services'; + +export default ({ignoredUsers, stopIgnoringUser}) => ( +
+

{t('talk-plugin-ignore-user.section_title')}

+

{t('talk-plugin-ignore-user.section_info')}

+
    + {ignoredUsers.map(({username, id}) => ( +
  • + {username} + +
    • + ))} +
+
+); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js new file mode 100644 index 000000000..d7e9d38b5 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js @@ -0,0 +1,53 @@ +import React from 'react'; +import IgnoreUserAction from '../components/IgnoreUserAction'; +import {compose, gql} from 'react-apollo'; +import {connect, withFragments, excludeIf} from 'plugin-api/beta/client/hocs'; +import {bindActionCreators} from 'redux'; +import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions'; +import IgnoreUserConfirmation from './IgnoreUserConfirmation'; +import {getDefinitionName} from 'plugin-api/beta/client/utils'; + +class IgnoreUserActionContainer extends React.Component { + + ignoreUser = () => { + this.props.setContentSlot('ignoreUserConfirmation'); + }; + + render() { + return ; + } +} + +const mapDispatchToProps = (dispatch) => + bindActionCreators({ + setContentSlot, + }, dispatch); + +const withIgnoreUserActionFragments = withFragments({ + root: gql` + fragment TalkIgnoreUser_IgnoreUserAction_root on RootQuery { + me { + id + } + } + `, + comment: gql` + fragment TalkIgnoreUser_IgnoreUserAction_comment on Comment { + user { + id + } + ...${getDefinitionName(IgnoreUserConfirmation.fragments.comment)} + } + ${IgnoreUserConfirmation.fragments.comment} + `, +}); + +const enhance = compose( + connect(null, mapDispatchToProps), + withIgnoreUserActionFragments, + excludeIf(({root: {me}, comment}) => !me || me.id === comment.user.id), +); + +export default enhance(IgnoreUserActionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js new file mode 100644 index 000000000..fdf6d1986 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js @@ -0,0 +1,60 @@ +import React from 'react'; +import IgnoreUserConfirmation from '../components/IgnoreUserConfirmation'; +import {compose, gql} from 'react-apollo'; +import {connect, withFragments, withIgnoreUser} from 'plugin-api/beta/client/hocs'; +import {bindActionCreators} from 'redux'; +import {closeMenu} from 'plugins/talk-plugin-author-menu/client/actions'; +import {notify} from 'plugin-api/beta/client/actions/notification'; +import {t} from 'plugin-api/beta/client/services'; +import {getErrorMessages} from 'plugin-api/beta/client/utils'; + +class IgnoreUserConfirmationContainer extends React.Component { + + ignoreUser = () => { + const {ignoreUser, notify, comment, closeMenu} = this.props; + ignoreUser(comment.user.id) + .then(() => { + notify('success', t('talk-plugin-ignore-user.notify_success', comment.user.username)); + }) + .catch((err) => { + notify('error', getErrorMessages(err)); + }); + closeMenu(); + }; + + cancel = () => { + this.props.closeMenu(); + } + + render() { + return ; + } +} + +const mapDispatchToProps = (dispatch) => + bindActionCreators({ + closeMenu, + notify, + }, dispatch); + +const withIgnoreUserConfirmationFragments = withFragments({ + comment: gql` + fragment TalkIgnoreUser_IgnoreUserConfirmation_comment on Comment { + user { + id + username + } + }`, +}); + +const enhance = compose( + connect(null, mapDispatchToProps), + withIgnoreUserConfirmationFragments, + withIgnoreUser, +); + +export default enhance(IgnoreUserConfirmationContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js new file mode 100644 index 000000000..e420f180b --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js @@ -0,0 +1,36 @@ +import React from 'react'; +import IgnoredUserSection from '../components/IgnoredUserSection'; +import {compose, gql} from 'react-apollo'; +import {withFragments, excludeIf, withStopIgnoringUser} from 'plugin-api/beta/client/hocs'; + +class IgnoredUserSectionContainer extends React.Component { + + render() { + return ; + } +} + +const withIgnoredUserSectionFragments = withFragments({ + root: gql` + fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery { + me { + id + ignoredUsers { + id, + username, + } + } + } + `, +}); + +const enhance = compose( + withIgnoredUserSectionFragments, + withStopIgnoringUser, + excludeIf(({root: {me}}) => me.ignoredUsers.length === 0), +); + +export default enhance(IgnoredUserSectionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js new file mode 100644 index 000000000..6583f68e6 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js @@ -0,0 +1,43 @@ +import IgnoreUserAction from './containers/IgnoreUserAction'; +import IgnoreUserConfirmation from './containers/IgnoreUserConfirmation'; +import IgnoredUserSection from './containers/IgnoredUserSection'; +import translations from './translations.yml'; +import update from 'immutability-helper'; + +export default { + slots: { + authorMenuActions: [IgnoreUserAction], + ignoreUserConfirmation: [IgnoreUserConfirmation], + profileSections: [IgnoredUserSection], + }, + translations, + mutations: { + IgnoreUser: ({variables}) => ({ + updateQueries: { + CoralEmbedStream_Embed: (previousData) => { + const ignoredUserId = variables.id; + const updated = update(previousData, {me: {ignoredUsers: {$push: [{ + id: ignoredUserId, + __typename: 'User', + }]}}}); + return updated; + } + } + }), + StopIgnoringUser: ({variables}) => ({ + updateQueries: { + CoralEmbedStream_Profile: (previousData) => { + const noLongerIgnoredUserId = variables.id; + + // remove noLongerIgnoredUserId from ignoredUsers + const updated = update(previousData, {me: {ignoredUsers: { + $apply: (ignoredUsers) => { + return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId); + } + }}}); + return updated; + } + } + }), + }, +}; diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml new file mode 100644 index 000000000..a6c051ada --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml @@ -0,0 +1,25 @@ +en: + talk-plugin-ignore-user: + section_title: Ignored users + section_info: Because you ignored the following commenters, their comments are hidden. + stop_ignoring: Stop ignoring + ignore_user: Ignore User + cancel: Cancel + confirmation: | + When you ignore a user, all comments they wrote on the site will be hidden from you. You can + undo this later from My Profile. + notify_success: | + You are now ignoring {0}. You can undo this action from My Profile. + confirmation_title: Ignore {0}? +es: + talk-plugin-ignore-user: + section_title: "Usuarios ignorados" + stop_ignoring: "No ignorar más" +fr: + talk-plugin-ignore-user: + section_title: "Utilisateurs ignorés" +pt_Br: + talk-plugin-ignore-user: + section_title: "Usuários ignorados" + section_info: "Porque você ignorou os seguintes comentadores, seus comentários estão ocultos." + stop_ignoring: "Pare de ignorar" diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js new file mode 100644 index 000000000..f053ebf79 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js new file mode 100644 index 000000000..9d24a2003 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -0,0 +1,12 @@ +import React from 'react'; +import {compose} from 'react-apollo'; +import {withSetCommentStatus} from 'coral-framework/graphql/mutations'; +import RejectCommentAction from '../components/RejectCommentAction'; + +// change this + +const enhance = compose( + withSetCommentStatus +); + +export default enhance(RejectCommentAction); diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js new file mode 100644 index 000000000..9e7a0716c --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/index.js @@ -0,0 +1,11 @@ +// import RejectCommentAction from './containers/RejectCommentAction'; +import ModerationActions from './components/ModerationActions'; +import translations from './translations.yml'; +import update from 'immutability-helper'; + +export default { + slots: { + commentInfoBar: [ModerationActions], + }, + translations +}; diff --git a/plugins/talk-plugin-moderation-actions/client/translations.yml b/plugins/talk-plugin-moderation-actions/client/translations.yml new file mode 100644 index 000000000..fea7352ce --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/translations.yml @@ -0,0 +1,6 @@ +en: + talk-plugin-reject-comment: + reject_comment: "Reject comment" +es: + talk-plugin-reject-user: + reject_comment: "Rechazar commentario" \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/index.js b/plugins/talk-plugin-moderation-actions/index.js new file mode 100644 index 000000000..f053ebf79 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/index.js @@ -0,0 +1 @@ +module.exports = {}; From a31a63e1c88530cfdb9ba6bd87435826b7cca888 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Sep 2017 10:12:49 -0300 Subject: [PATCH 03/22] Working Tooltip --- .../client/components/Tag.css | 8 ++- .../client/components/Tag.js | 4 +- .../client/components/ModerationActions.css | 14 ++++- .../client/components/ModerationActions.js | 13 ++-- .../client/components/RejectCommentAction.css | 2 - .../client/components/Tooltip.css | 4 +- .../talk-plugin-ignore-user/client/.babelrc | 14 ----- .../client/.eslintrc.json | 23 ------- .../client/components/IgnoreUserAction.css | 17 ------ .../client/components/IgnoreUserAction.js | 12 ---- .../components/IgnoreUserConfirmation.css | 45 -------------- .../components/IgnoreUserConfirmation.js | 23 ------- .../client/components/IgnoredUserSection.css | 22 ------- .../client/components/IgnoredUserSection.js | 23 ------- .../client/containers/IgnoreUserAction.js | 53 ---------------- .../containers/IgnoreUserConfirmation.js | 60 ------------------- .../client/containers/IgnoredUserSection.js | 36 ----------- .../talk-plugin-ignore-user/client/index.js | 43 ------------- .../client/translations.yml | 25 -------- .../talk-plugin-ignore-user/index.js | 1 - 20 files changed, 26 insertions(+), 416 deletions(-) delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml delete mode 100644 plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.css b/plugins/talk-plugin-featured-comments/client/components/Tag.css index 7ade3d968..0e8c8ae60 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.css +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.css @@ -34,9 +34,9 @@ } .tooltip { - top: 36px; + top: 33px; left: auto; - right: 10px; + right: 5px; } .tooltip::before{ @@ -48,4 +48,8 @@ left: auto; right: 16px; top: -20px; +} + +.tagContainer { + position: relative; } \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index 57a871ee9..e7e75a0e6 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js @@ -31,9 +31,9 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; return( - + onTouchEnd={this.hideTooltip} > {t('talk-plugin-featured-comments.featured')} diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css index fd841e1cd..1fc461afb 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css @@ -1,8 +1,18 @@ .moderationActions { - display: inline; + position: relative; + display: inline-block; padding: 0 4px; } -.moderationActions:hover { +.arrow { + -ms-user-select:none; + -moz-user-select: none; + -webkit-user-select: none; + -webkit-touch-callout:none; + user-select: none; + -webkit-tap-highlight-color:rgba(0,0,0,0); +} + +.arrow:hover { cursor: pointer; } \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index 1b7b35948..d893fae84 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -14,13 +14,10 @@ export default class Tag extends React.Component { this.state = { tooltip: false }; - } - toggleTooltip = (e) => { - e.preventDefault(); + toogleTooltip = (e) => { const {tooltip} = this.state; - this.setState({ tooltip: !tooltip }); @@ -36,14 +33,12 @@ export default class Tag extends React.Component { const {tooltip} = this.state; return( -
- - +
+ {tooltip ? : } - {tooltip && ( - + )} diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css index ac818278c..fb18e3a18 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css @@ -4,8 +4,6 @@ .button { composes: buttonReset from "coral-framework/styles/reset.css"; - border: 1px solid rgba(1, 1, 1, 0.8); - border-radius: 1px; padding: 3px 6px; font-size: 12px; transition: color 100ms, background 100ms; diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css index 63e0a1e1b..905dd9f13 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css +++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css @@ -7,9 +7,9 @@ -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); z-index: 10; - top: 26px; + top: 32px; right: 0px; - width: 200px; + width: 160px; text-align: left; color: #616161; } diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc deleted file mode 100644 index 60be246eb..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.babelrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json deleted file mode 100644 index 9fe56bd14..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/.eslintrc.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "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"] }] - } -} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css deleted file mode 100644 index ac818278c..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.css +++ /dev/null @@ -1,17 +0,0 @@ -.root { - white-space: nowrap; -} - -.button { - composes: buttonReset from "coral-framework/styles/reset.css"; - border: 1px solid rgba(1, 1, 1, 0.8); - border-radius: 1px; - padding: 3px 6px; - font-size: 12px; - transition: color 100ms, background 100ms; - - &:hover { - background-color: rgba(1, 1, 1, 0.8); - color: white; - } -} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js deleted file mode 100644 index 19319ec9c..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserAction.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import styles from './IgnoreUserAction.css'; -import {t} from 'plugin-api/beta/client/services'; -import cn from 'classnames'; - -export default ({ignoreUser}) => ( - -); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css deleted file mode 100644 index 4f3d8e9da..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css +++ /dev/null @@ -1,45 +0,0 @@ -.root { - width: 200px; -} - -.actions { - display: flex; - justify-content: flex-end; - margin-top: 8px; -} - -.message { - font-size: 13px; -} - -.title { - padding: 0; - margin: 0 0 8px 0; - font-size: 15px; -} - -.button { - composes: buttonReset from "coral-framework/styles/reset.css"; - border: 1px solid rgba(1, 1, 1, 0.8); - border-radius: 1px; - padding: 3px 6px; - font-size: 12px; - transition: color 100ms, background 100ms; - - &:hover { - background-color: rgba(1, 1, 1, 0.8); - color: white; - } -} - -.cancel { - composes: buttonReset from "coral-framework/styles/reset.css"; - padding: 3px 6px; - font-size: 12px; - transition: color 100ms; - margin-right: 4px; - - &:hover { - color: rgba(1, 1, 1, 0.75); - } -} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js deleted file mode 100644 index 8da879f62..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import styles from './IgnoreUserConfirmation.css'; -import {t} from 'plugin-api/beta/client/services'; -import cn from 'classnames'; - -export default ({ignoreUser, cancel, username}) => ( - -); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css deleted file mode 100644 index b279101ea..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.css +++ /dev/null @@ -1,22 +0,0 @@ -.list { - display: table; - list-style-type: none; - margin-left: 0; - padding-left: 0; -} - -.listItem { - display: table-row; -} - -.username { - display: table-cell; -} - -.button { - composes: buttonReset from "coral-framework/styles/reset.css"; - - margin-left: 16px; - color: #D0011B; - text-decoration: underline; -} diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js deleted file mode 100644 index 3946626cd..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/components/IgnoredUserSection.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import styles from './IgnoredUserSection.css'; -import {t} from 'plugin-api/beta/client/services'; - -export default ({ignoredUsers, stopIgnoringUser}) => ( -
-

{t('talk-plugin-ignore-user.section_title')}

-

{t('talk-plugin-ignore-user.section_info')}

-
    - {ignoredUsers.map(({username, id}) => ( -
  • - {username} - -
    • - ))} -
-
-); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js deleted file mode 100644 index d7e9d38b5..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import IgnoreUserAction from '../components/IgnoreUserAction'; -import {compose, gql} from 'react-apollo'; -import {connect, withFragments, excludeIf} from 'plugin-api/beta/client/hocs'; -import {bindActionCreators} from 'redux'; -import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions'; -import IgnoreUserConfirmation from './IgnoreUserConfirmation'; -import {getDefinitionName} from 'plugin-api/beta/client/utils'; - -class IgnoreUserActionContainer extends React.Component { - - ignoreUser = () => { - this.props.setContentSlot('ignoreUserConfirmation'); - }; - - render() { - return ; - } -} - -const mapDispatchToProps = (dispatch) => - bindActionCreators({ - setContentSlot, - }, dispatch); - -const withIgnoreUserActionFragments = withFragments({ - root: gql` - fragment TalkIgnoreUser_IgnoreUserAction_root on RootQuery { - me { - id - } - } - `, - comment: gql` - fragment TalkIgnoreUser_IgnoreUserAction_comment on Comment { - user { - id - } - ...${getDefinitionName(IgnoreUserConfirmation.fragments.comment)} - } - ${IgnoreUserConfirmation.fragments.comment} - `, -}); - -const enhance = compose( - connect(null, mapDispatchToProps), - withIgnoreUserActionFragments, - excludeIf(({root: {me}, comment}) => !me || me.id === comment.user.id), -); - -export default enhance(IgnoreUserActionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js deleted file mode 100644 index fdf6d1986..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import IgnoreUserConfirmation from '../components/IgnoreUserConfirmation'; -import {compose, gql} from 'react-apollo'; -import {connect, withFragments, withIgnoreUser} from 'plugin-api/beta/client/hocs'; -import {bindActionCreators} from 'redux'; -import {closeMenu} from 'plugins/talk-plugin-author-menu/client/actions'; -import {notify} from 'plugin-api/beta/client/actions/notification'; -import {t} from 'plugin-api/beta/client/services'; -import {getErrorMessages} from 'plugin-api/beta/client/utils'; - -class IgnoreUserConfirmationContainer extends React.Component { - - ignoreUser = () => { - const {ignoreUser, notify, comment, closeMenu} = this.props; - ignoreUser(comment.user.id) - .then(() => { - notify('success', t('talk-plugin-ignore-user.notify_success', comment.user.username)); - }) - .catch((err) => { - notify('error', getErrorMessages(err)); - }); - closeMenu(); - }; - - cancel = () => { - this.props.closeMenu(); - } - - render() { - return ; - } -} - -const mapDispatchToProps = (dispatch) => - bindActionCreators({ - closeMenu, - notify, - }, dispatch); - -const withIgnoreUserConfirmationFragments = withFragments({ - comment: gql` - fragment TalkIgnoreUser_IgnoreUserConfirmation_comment on Comment { - user { - id - username - } - }`, -}); - -const enhance = compose( - connect(null, mapDispatchToProps), - withIgnoreUserConfirmationFragments, - withIgnoreUser, -); - -export default enhance(IgnoreUserConfirmationContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js deleted file mode 100644 index e420f180b..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import IgnoredUserSection from '../components/IgnoredUserSection'; -import {compose, gql} from 'react-apollo'; -import {withFragments, excludeIf, withStopIgnoringUser} from 'plugin-api/beta/client/hocs'; - -class IgnoredUserSectionContainer extends React.Component { - - render() { - return ; - } -} - -const withIgnoredUserSectionFragments = withFragments({ - root: gql` - fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery { - me { - id - ignoredUsers { - id, - username, - } - } - } - `, -}); - -const enhance = compose( - withIgnoredUserSectionFragments, - withStopIgnoringUser, - excludeIf(({root: {me}}) => me.ignoredUsers.length === 0), -); - -export default enhance(IgnoredUserSectionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js deleted file mode 100644 index 6583f68e6..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import IgnoreUserAction from './containers/IgnoreUserAction'; -import IgnoreUserConfirmation from './containers/IgnoreUserConfirmation'; -import IgnoredUserSection from './containers/IgnoredUserSection'; -import translations from './translations.yml'; -import update from 'immutability-helper'; - -export default { - slots: { - authorMenuActions: [IgnoreUserAction], - ignoreUserConfirmation: [IgnoreUserConfirmation], - profileSections: [IgnoredUserSection], - }, - translations, - mutations: { - IgnoreUser: ({variables}) => ({ - updateQueries: { - CoralEmbedStream_Embed: (previousData) => { - const ignoredUserId = variables.id; - const updated = update(previousData, {me: {ignoredUsers: {$push: [{ - id: ignoredUserId, - __typename: 'User', - }]}}}); - return updated; - } - } - }), - StopIgnoringUser: ({variables}) => ({ - updateQueries: { - CoralEmbedStream_Profile: (previousData) => { - const noLongerIgnoredUserId = variables.id; - - // remove noLongerIgnoredUserId from ignoredUsers - const updated = update(previousData, {me: {ignoredUsers: { - $apply: (ignoredUsers) => { - return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId); - } - }}}); - return updated; - } - } - }), - }, -}; diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml deleted file mode 100644 index a6c051ada..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/client/translations.yml +++ /dev/null @@ -1,25 +0,0 @@ -en: - talk-plugin-ignore-user: - section_title: Ignored users - section_info: Because you ignored the following commenters, their comments are hidden. - stop_ignoring: Stop ignoring - ignore_user: Ignore User - cancel: Cancel - confirmation: | - When you ignore a user, all comments they wrote on the site will be hidden from you. You can - undo this later from My Profile. - notify_success: | - You are now ignoring {0}. You can undo this action from My Profile. - confirmation_title: Ignore {0}? -es: - talk-plugin-ignore-user: - section_title: "Usuarios ignorados" - stop_ignoring: "No ignorar más" -fr: - talk-plugin-ignore-user: - section_title: "Utilisateurs ignorés" -pt_Br: - talk-plugin-ignore-user: - section_title: "Usuários ignorados" - section_info: "Porque você ignorou os seguintes comentadores, seus comentários estão ocultos." - stop_ignoring: "Pare de ignorar" diff --git a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js b/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js deleted file mode 100644 index f053ebf79..000000000 --- a/plugins/talk-plugin-moderation-actions/client/components/talk-plugin-ignore-user/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {}; From 32d9dc66463590122db3640ef4a64174931aa953 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Sep 2017 11:27:12 -0300 Subject: [PATCH 04/22] Permissions to moderate comments --- plugin-api/beta/client/hocs/index.js | 1 + .../client/components/ModerationActions.css | 4 ++++ .../client/components/ModerationActions.js | 3 ++- .../client/components/RejectCommentAction.css | 12 ++++++---- .../client/components/RejectCommentAction.js | 6 ++--- .../client/components/Tooltip.css | 22 ++----------------- .../client/components/Tooltip.js | 7 +++++- .../client/containers/ModerationActions.js | 16 ++++++++++++++ .../client/containers/RejectCommentAction.js | 11 ++-------- .../client/index.js | 4 +--- .../client/translations.yml | 10 +++++---- 11 files changed, 51 insertions(+), 45 deletions(-) create mode 100644 plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js index 15c8b3544..d6d5a67a0 100644 --- a/plugin-api/beta/client/hocs/index.js +++ b/plugin-api/beta/client/hocs/index.js @@ -8,4 +8,5 @@ export {default as withEmit} from 'coral-framework/hocs/withEmit'; export { withIgnoreUser, withStopIgnoringUser, + withSetCommentStatus, } from 'coral-framework/graphql/mutations'; diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css index 1fc461afb..1138d2ffc 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.css @@ -15,4 +15,8 @@ .arrow:hover { cursor: pointer; +} + +.icon { + font-size: 16px; } \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index d893fae84..cfc11c441 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -31,11 +31,12 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; + console.log(this.props); return(
- {tooltip ? : } + {tooltip ? : } {tooltip && ( diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css index fb18e3a18..2e7891cf8 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.css @@ -4,12 +4,16 @@ .button { composes: buttonReset from "coral-framework/styles/reset.css"; - padding: 3px 6px; - font-size: 12px; + padding: 6px; + font-size: 14px; transition: color 100ms, background 100ms; + border-radius: 3px; &:hover { - background-color: rgba(1, 1, 1, 0.8); - color: white; + background-color: #efefef; } } + +.icon { + margin-right: 15px; +} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js index d15127294..f455a1458 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js @@ -6,9 +6,9 @@ import cn from 'classnames'; export default ({rejectComment}) => ( ); diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css index 905dd9f13..bdf877ee5 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css +++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.css @@ -9,7 +9,7 @@ z-index: 10; top: 32px; right: 0px; - width: 160px; + width: 140px; text-align: left; color: #616161; } @@ -39,26 +39,8 @@ display: inline-block; margin: 0; padding: 0; - font-size: 1.02em; - margin-left: 6px; - letter-spacing: 0.2px; + font-size: 1em; vertical-align: middle; margin-bottom: 2px; line-height: 22px; -} - -.icon { - font-size: 1.4em; - vertical-align: middle; -} - -.description { - width: 100%; - box-sizing: border-box; - white-space: pre-wrap; - padding: 0; - margin: 0; - padding-left: 25px; - font-weight: 400; - font-size: 1em; } \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js index 6b7428ce6..95486271d 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js +++ b/plugins/talk-plugin-moderation-actions/client/components/Tooltip.js @@ -5,5 +5,10 @@ import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; export default ({className = '', children}) => ( -
{children}
+
+

+ {t('talk-plugin-moderation-actions.moderation_actions')} +

+ {children} +
); diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js new file mode 100644 index 000000000..ce5fde186 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -0,0 +1,16 @@ +import React from 'react'; +import {gql, compose} from 'react-apollo'; +import {connect, excludeIf} from 'plugin-api/beta/client/hocs'; +import ModerationActions from '../components/ModerationActions'; +import {can} from 'plugin-api/beta/client/services'; + +const mapStateToProps = ({auth}) => ({ + user: auth.user +}); + +const enhance = compose( + connect(mapStateToProps), + excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')) +); + +export default enhance(ModerationActions); diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js index 9d24a2003..63ff535ef 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -1,12 +1,5 @@ import React from 'react'; -import {compose} from 'react-apollo'; -import {withSetCommentStatus} from 'coral-framework/graphql/mutations'; +import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; import RejectCommentAction from '../components/RejectCommentAction'; -// change this - -const enhance = compose( - withSetCommentStatus -); - -export default enhance(RejectCommentAction); +export default withSetCommentStatus(RejectCommentAction); diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js index 9e7a0716c..3343505f3 100644 --- a/plugins/talk-plugin-moderation-actions/client/index.js +++ b/plugins/talk-plugin-moderation-actions/client/index.js @@ -1,7 +1,5 @@ -// import RejectCommentAction from './containers/RejectCommentAction'; -import ModerationActions from './components/ModerationActions'; +import ModerationActions from './containers/ModerationActions'; import translations from './translations.yml'; -import update from 'immutability-helper'; export default { slots: { diff --git a/plugins/talk-plugin-moderation-actions/client/translations.yml b/plugins/talk-plugin-moderation-actions/client/translations.yml index fea7352ce..dfb5023d4 100644 --- a/plugins/talk-plugin-moderation-actions/client/translations.yml +++ b/plugins/talk-plugin-moderation-actions/client/translations.yml @@ -1,6 +1,8 @@ en: - talk-plugin-reject-comment: - reject_comment: "Reject comment" + talk-plugin-moderation-actions: + reject_comment: "Reject" + moderation_actions: "Moderation Actions" es: - talk-plugin-reject-user: - reject_comment: "Rechazar commentario" \ No newline at end of file + talk-plugin-moderation-actions: + reject_comment: "Rechazar" + moderation_actions: "Acciones de Moderación" \ No newline at end of file From f6b02a52fea2b6b6bbfc922132a6e53c51fd6736 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Sep 2017 13:08:52 -0300 Subject: [PATCH 05/22] Cache and Tombstoning rejected comment working --- .../src/components/Comment.js | 14 ++++++- .../src/components/CommentTombstone.js | 37 +++++++++++++++++++ .../src/components/IgnoredCommentTombstone.js | 24 ------------ locales/en.yml | 2 + locales/es.yml | 2 + .../client/components/ModerationActions.js | 9 +++-- .../client/components/RejectCommentAction.js | 4 +- .../client/containers/ModerationActions.js | 9 ++++- .../client/containers/RejectCommentAction.js | 25 ++++++++++++- .../client/index.js | 33 ++++++++++++++++- 10 files changed, 123 insertions(+), 36 deletions(-) create mode 100644 client/coral-embed-stream/src/components/CommentTombstone.js delete mode 100644 client/coral-embed-stream/src/components/IgnoredCommentTombstone.js diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 937e205f1..4f95b06fd 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -18,7 +18,7 @@ import {getEditableUntilDate} from './util'; import {findCommentWithId} from '../graphql/utils'; import CommentContent from './CommentContent'; import Slot from 'coral-framework/components/Slot'; -import IgnoredCommentTombstone from './IgnoredCommentTombstone'; +import CommentTombstone from './CommentTombstone'; import InactiveCommentLabel from './InactiveCommentLabel'; import {EditableCommentContent} from './EditableCommentContent'; import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils'; @@ -209,6 +209,10 @@ export default class Comment extends React.Component { } } + commentIsRejected(comment) { + return comment.status === "REJECTED"; + } + commentIsIgnored(comment) { const me = this.props.root.me; return ( @@ -338,8 +342,14 @@ export default class Comment extends React.Component { commentClassNames = [] } = this.props; + console.log('STATUS', comment.status); + + if (this.commentIsRejected(comment)) { + return ; + } + if (this.commentIsIgnored(comment)) { - return ; + return ; } const view = this.getVisibileReplies(); diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js new file mode 100644 index 000000000..0afa4a555 --- /dev/null +++ b/client/coral-embed-stream/src/components/CommentTombstone.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import t from 'coral-framework/services/i18n'; + +// Render in place of a Comment when the author of the comment is +class CommentTombstone extends React.Component { + getCopy() { + const {action} = this.props; + + switch (action) { + case 'ignored': + return t('framework.comment_is_ignored') + case 'rejected': + return t('framework.comment_is_rejected') + default : + return t('framework.comment_is_hidden'); + } + } + + render() { + return ( +
+
+

+ {this.getCopy()} +

+
+ ); + } +} + +export default CommentTombstone; diff --git a/client/coral-embed-stream/src/components/IgnoredCommentTombstone.js b/client/coral-embed-stream/src/components/IgnoredCommentTombstone.js deleted file mode 100644 index bbcc5d5f6..000000000 --- a/client/coral-embed-stream/src/components/IgnoredCommentTombstone.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import t from 'coral-framework/services/i18n'; - -// Render in place of a Comment when the author of the comment is ignored -class IgnoredCommentTombstone extends React.Component { - render() { - return ( -
-
-

- {t('framework.comment_is_ignored')} -

-
- ); - } -} - -export default IgnoredCommentTombstone; diff --git a/locales/en.yml b/locales/en.yml index 4d215fd06..703de4b28 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -221,6 +221,8 @@ en: banned_account_body: "This means that you cannot Like, Report, or write comments." comment: comment comment_is_ignored: "This comment is hidden because you ignored this user." + comment_is_rejected: "You have rejected this comment." + comment_is_hidden: "This comment is not available." comments: comments configure_stream: "Configure" content_not_available: "This content is not available" diff --git a/locales/es.yml b/locales/es.yml index f9b675a10..b9bcc9c2d 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -219,6 +219,8 @@ es: banned_account_body: "Esto significa que no puedes gustar, marcar o escribir comentarios." comment: "comentario" comment_is_ignored: "Este comentario está escondido porque has ignorado al usuario." + comment_is_rejected: "Haz rechazado este comentario." + comment_is_hidden: "Este comentario no está disponible." comments: "comentarios" configure_stream: "Configurar Hilo de Comentarios" content_not_available: "Este contenido no se encuentra disponible" diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index cfc11c441..ac745474a 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -4,10 +4,10 @@ import styles from './ModerationActions.css'; import Tooltip from './Tooltip'; import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; -import RejectCommentAction from '../containers/RejectCommentAction.js'; +import RejectCommentAction from '../containers/RejectCommentAction'; import ClickOutside from 'coral-framework/components/ClickOutside'; -export default class Tag extends React.Component { +export default class ModerationActions extends React.Component { constructor() { super(); @@ -31,7 +31,8 @@ export default class Tag extends React.Component { render() { const {tooltip} = this.state; - console.log(this.props); + const {comment} = this.props; + return(
@@ -40,7 +41,7 @@ export default class Tag extends React.Component { {tooltip && ( - + )}
diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js index f455a1458..aa593f69e 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js @@ -5,9 +5,7 @@ import {Icon} from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; export default ({rejectComment}) => ( - diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js index ce5fde186..a8de1844d 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -1,6 +1,6 @@ import React from 'react'; import {gql, compose} from 'react-apollo'; -import {connect, excludeIf} from 'plugin-api/beta/client/hocs'; +import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs'; import ModerationActions from '../components/ModerationActions'; import {can} from 'plugin-api/beta/client/services'; @@ -10,6 +10,13 @@ const mapStateToProps = ({auth}) => ({ const enhance = compose( connect(mapStateToProps), + withFragments({ + comment: gql` + fragment TalkModerationActions_comment on Comment { + id + status + } + `}), excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')) ); diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js index 63ff535ef..06040fa06 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -1,5 +1,28 @@ import React from 'react'; import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; import RejectCommentAction from '../components/RejectCommentAction'; +import {notify} from 'plugin-api/beta/client/actions/notification'; +import {getErrorMessages} from 'plugin-api/beta/client/utils'; -export default withSetCommentStatus(RejectCommentAction); +class RejectCommentActionContainer extends React.Component { + + rejectComment = async () => { + const {setCommentStatus, comment} = this.props; + + try { + const result = await setCommentStatus({commentId: comment.id, status: 'REJECTED'}); + + if (result.data.setCommentStatus.errors) { + throw result.data.setCommentStatus.errors; + } + } catch (err) { + notify('error', getErrorMessages(err)); + } + } + + render() { + return + } +} + +export default withSetCommentStatus(RejectCommentActionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js index 3343505f3..79f0b29c9 100644 --- a/plugins/talk-plugin-moderation-actions/client/index.js +++ b/plugins/talk-plugin-moderation-actions/client/index.js @@ -1,9 +1,40 @@ import ModerationActions from './containers/ModerationActions'; import translations from './translations.yml'; +import update from 'immutability-helper'; export default { slots: { commentInfoBar: [ModerationActions], }, - translations + translations, + mutations: { + SetCommentStatus: ({variables: {status, commentId}}) => ({ + updateQueries: { + CoralEmbedStream_Embed: (prev) => { + + if (status !== 'REJECTED') { + return prev; + } + + const updated = update(prev, { + asset: { + comments: { + nodes: { + $apply: (nodes) => nodes.map((node) => { + if (node.id === commentId) { + node.status = "REJECTED"; + } + + return node; + }) + } + } + } + }); + + return updated; + } + } + }), + }, }; From 8e96ef46925b461d9d4de5123f1d376b4808fd2c Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Sep 2017 14:33:53 -0300 Subject: [PATCH 06/22] Approve --- .../client/components/ApproveCommentAction.js | 23 +++++++++++++ .../client/components/ModerationActions.js | 9 ++++-- .../client/containers/ApproveCommentAction.js | 32 +++++++++++++++++++ .../client/containers/ModerationActions.js | 2 +- .../client/containers/RejectCommentAction.js | 14 +++++--- .../client/translations.yml | 4 +++ 6 files changed, 75 insertions(+), 9 deletions(-) create mode 100644 plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js create mode 100644 plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js new file mode 100644 index 000000000..cea1a2344 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from './RejectCommentAction.css'; +import {t} from 'plugin-api/beta/client/services'; +import {Icon} from 'plugin-api/beta/client/components/ui'; +import cn from 'classnames'; + +const isApproved = (status) => status === "APPROVED"; + +export default ({comment: {status}, approveComment}) => ( + +); diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index ac745474a..8caec1343 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -1,11 +1,12 @@ import React from 'react'; import cn from 'classnames'; -import styles from './ModerationActions.css'; import Tooltip from './Tooltip'; +import styles from './ModerationActions.css'; import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; -import RejectCommentAction from '../containers/RejectCommentAction'; import ClickOutside from 'coral-framework/components/ClickOutside'; +import RejectCommentAction from '../containers/RejectCommentAction'; +import ApproveCommentAction from '../containers/ApproveCommentAction'; export default class ModerationActions extends React.Component { constructor() { @@ -37,10 +38,12 @@ export default class ModerationActions extends React.Component {
- {tooltip ? : } + {tooltip ? : + } {tooltip && ( + )} diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js new file mode 100644 index 000000000..fb30e1102 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js @@ -0,0 +1,32 @@ +import React from 'react'; +import {getErrorMessages} from 'plugin-api/beta/client/utils'; +import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; +import {notify} from 'plugin-api/beta/client/actions/notification'; +import ApproveCommentAction from '../components/ApproveCommentAction'; + +class ApproveCommentActionContainer extends React.Component { + + approveComment = async () => { + const {setCommentStatus, comment} = this.props; + + try { + const result = await setCommentStatus({ + commentId: comment.id, + status: 'APPROVED' + }); + + if (result.data.setCommentStatus.errors) { + throw result.data.setCommentStatus.errors; + } + + } catch (err) { + notify('error', getErrorMessages(err)); + } + } + + render() { + return + } +} + +export default withSetCommentStatus(ApproveCommentActionContainer); diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js index a8de1844d..648e4a860 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -17,7 +17,7 @@ const enhance = compose( status } `}), - excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')) + excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')), ); export default enhance(ModerationActions); diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js index 06040fa06..fa8c12730 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -1,8 +1,8 @@ import React from 'react'; -import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; -import RejectCommentAction from '../components/RejectCommentAction'; -import {notify} from 'plugin-api/beta/client/actions/notification'; import {getErrorMessages} from 'plugin-api/beta/client/utils'; +import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; +import {notify} from 'plugin-api/beta/client/actions/notification'; +import RejectCommentAction from '../components/RejectCommentAction'; class RejectCommentActionContainer extends React.Component { @@ -10,11 +10,15 @@ class RejectCommentActionContainer extends React.Component { const {setCommentStatus, comment} = this.props; try { - const result = await setCommentStatus({commentId: comment.id, status: 'REJECTED'}); - + const result = await setCommentStatus({ + commentId: comment.id, + status: 'REJECTED' + }); + if (result.data.setCommentStatus.errors) { throw result.data.setCommentStatus.errors; } + } catch (err) { notify('error', getErrorMessages(err)); } diff --git a/plugins/talk-plugin-moderation-actions/client/translations.yml b/plugins/talk-plugin-moderation-actions/client/translations.yml index dfb5023d4..425c917f3 100644 --- a/plugins/talk-plugin-moderation-actions/client/translations.yml +++ b/plugins/talk-plugin-moderation-actions/client/translations.yml @@ -1,8 +1,12 @@ en: talk-plugin-moderation-actions: reject_comment: "Reject" + approve_comment: "Approve" + approved_comment: "Approved" moderation_actions: "Moderation Actions" es: talk-plugin-moderation-actions: reject_comment: "Rechazar" + approve_comment: "Aprobar" + approved_comment: "Aprobado" moderation_actions: "Acciones de Moderación" \ No newline at end of file From 462fcb6b94204f49466506095f70302d9b47f05b Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 7 Sep 2017 15:02:38 -0300 Subject: [PATCH 07/22] Approve actions and styles --- .../components/ApproveCommentAction.css | 23 +++++++++++++++++++ .../client/components/ApproveCommentAction.js | 12 +++++----- .../client/containers/ApproveCommentAction.js | 2 +- .../client/index.js | 6 ++--- 4 files changed, 33 insertions(+), 10 deletions(-) create mode 100644 plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css new file mode 100644 index 000000000..7a8fbf502 --- /dev/null +++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.css @@ -0,0 +1,23 @@ +.root { + white-space: nowrap; +} + +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + padding: 6px; + font-size: 14px; + transition: color 100ms, background 100ms; + border-radius: 3px; + + &:hover { + background-color: #efefef; + } +} + +.icon { + margin-right: 15px; +} + +.approved { + color: #519954; +} \ No newline at end of file diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js index cea1a2344..a777b70c3 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js @@ -1,21 +1,21 @@ import React from 'react'; -import styles from './RejectCommentAction.css'; +import styles from './ApproveCommentAction.css'; import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; import cn from 'classnames'; -const isApproved = (status) => status === "APPROVED"; +const isApproved = (status) => (status === "ACCEPTED"); -export default ({comment: {status}, approveComment}) => ( +export default ({approveComment, comment: {status}}) => ( - ) : null ; -}; - -export default withTags('featured')(Button); - diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css new file mode 100644 index 000000000..0c9455e28 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css @@ -0,0 +1,31 @@ +.button { + composes: buttonReset from "coral-framework/styles/reset.css"; + padding: 6px; + font-size: 14px; + transition: color 100ms, background-color 100ms; + border-radius: 3px; + color: #383A43; + width: 100%; + text-align: left; + font-weight: bold; + letter-spacing: 0.3px; + + &:hover { + background-color: #D8D8D8; + color: #383a43; + } +} + +.icon { + margin-right: 15px; + font-size: 16px; +} + +.button.featured { + color: #10589b; + + &:hover { + background-color: #D8D8D8; + color: #383a43; + } +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js new file mode 100644 index 000000000..5f7abcf06 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js @@ -0,0 +1,60 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './ModActionButton.css'; +import {pluginName} from '../../package.json'; +import {t} from 'plugin-api/beta/client/services'; +import {withTags} from 'plugin-api/beta/client/hocs'; +import {Icon} from 'plugin-api/beta/client/components/ui'; + +export class Button extends React.Component { + constructor() { + super(); + + this.state = { + on: false + }; + + } + + handleMouseEnter = (e) => { + e.preventDefault(); + this.setState({ + on: true + }); + } + + handleMouseLeave = (e) => { + e.preventDefault(); + this.setState({ + on: false + }); + } + + render() { + const {alreadyTagged, deleteTag, postTag} = this.props; + + return ( + + ); + } +} + +export default withTags('featured')(Button); + diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js new file mode 100644 index 000000000..e6ccc0f72 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js @@ -0,0 +1,10 @@ +import {compose} from 'react-apollo'; +import {excludeIf} from 'plugin-api/beta/client/hocs'; +import {can} from 'plugin-api/beta/client/services'; +import Button from '../components/Button'; + +const enhance = compose( + excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')), +); + +export default enhance(Button); diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index c9598b1dd..1fa78ba24 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -1,6 +1,6 @@ import Tab from './containers/Tab'; import Tag from './containers/Tag'; -import Button from './components/Button'; +import ModActionButton from './components/ModActionButton'; import TabPane from './containers/TabPane'; import translations from './translations.yml'; import update from 'immutability-helper'; @@ -18,7 +18,7 @@ export default { streamTabs: [Tab], streamTabPanes: [TabPane], commentInfoBar: [Tag], - commentReactions: [Button], + moderationActions: [ModActionButton], adminModeration: [ModSubscription], adminCommentInfoBar: [ModTag], }, diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js index 6309cb14d..3a3b54156 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js @@ -6,6 +6,7 @@ import {Icon} from 'plugin-api/beta/client/components/ui'; import ClickOutside from 'coral-framework/components/ClickOutside'; import RejectCommentAction from '../containers/RejectCommentAction'; import ApproveCommentAction from '../containers/ApproveCommentAction'; +import {Slot} from 'plugin-api/beta/client/components'; export default class ModerationActions extends React.Component { constructor() { @@ -31,7 +32,7 @@ export default class ModerationActions extends React.Component { render() { const {tooltip} = this.state; - const {comment} = this.props; + const {comment, asset, data} = this.props; return( @@ -42,6 +43,14 @@ export default class ModerationActions extends React.Component { {tooltip && ( + + + diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js index 648e4a860..84017429c 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -11,10 +11,20 @@ const mapStateToProps = ({auth}) => ({ const enhance = compose( connect(mapStateToProps), withFragments({ + asset: gql` + fragment TalkModerationActions_asset on Asset { + id + }` + , comment: gql` fragment TalkModerationActions_comment on Comment { id status + tags { + tag { + name + } + } } `}), excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')), From 6494669262a85831800b797b7641c9ed9fe182d6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 13:15:17 -0300 Subject: [PATCH 10/22] Working for permalink --- .../client/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js index 014b26007..445c72271 100644 --- a/plugins/talk-plugin-moderation-actions/client/index.js +++ b/plugins/talk-plugin-moderation-actions/client/index.js @@ -16,6 +16,22 @@ export default { return prev; } + // Permalink view will retrieve only one comment. + if (prev.asset.comment) { + const updated = update(prev, { + asset: { + comment: { + status: { + $set: status + } + } + } + }); + + return updated; + } + + // Stream View const updated = update(prev, { asset: { comments: { From fefacf039fff499a471c6a4f74416a116b9dfbc5 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 13:25:23 -0300 Subject: [PATCH 11/22] Featured comments should have ACCEPTED status --- client/coral-embed-stream/src/components/Comment.js | 2 -- plugins/talk-plugin-featured-comments/client/index.js | 11 +++++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 4f95b06fd..68eaf50cc 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -342,8 +342,6 @@ export default class Comment extends React.Component { commentClassNames = [] } = this.props; - console.log('STATUS', comment.status); - if (this.commentIsRejected(comment)) { return ; } diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 1fa78ba24..e451ad830 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -58,6 +58,17 @@ export default { const updated = update(previous, { asset: { + comments: { + nodes: { + $apply: (nodes) => nodes.map((node) => { + if (node.id === variables.id) { + node.status = 'ACCEPTED'; + } + + return node; + }) + } + }, featuredComments: { nodes: { $apply: (nodes) => prependNewNodes(nodes, [comment]), From e28f1caaef4d79427b9dcb7d9749cc0b4abf33cb Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 13:33:53 -0300 Subject: [PATCH 12/22] Styles --- .../client/components/ModActionButton.css | 2 +- .../talk-plugin-moderation-actions/client/components/styles.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css index 0c9455e28..f6b122fcc 100644 --- a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css +++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css @@ -7,7 +7,6 @@ color: #383A43; width: 100%; text-align: left; - font-weight: bold; letter-spacing: 0.3px; &:hover { @@ -23,6 +22,7 @@ .button.featured { color: #10589b; + font-weight: bold; &:hover { background-color: #D8D8D8; diff --git a/plugins/talk-plugin-moderation-actions/client/components/styles.css b/plugins/talk-plugin-moderation-actions/client/components/styles.css index 1eb919166..12ae4bad5 100644 --- a/plugins/talk-plugin-moderation-actions/client/components/styles.css +++ b/plugins/talk-plugin-moderation-actions/client/components/styles.css @@ -11,7 +11,6 @@ color: #383A43; width: 100%; text-align: left; - font-weight: bold; letter-spacing: 0.3px; &:hover { @@ -26,4 +25,5 @@ .approved { color: #519954; + font-weight: bold; } \ No newline at end of file From 4046b6e0a628135eaa9ad6eb3d5ed0735b9ddf82 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Sat, 9 Sep 2017 00:20:18 +0700 Subject: [PATCH 13/22] Remove zombie files --- .../src/components/TopRightMenu.js | 61 ------------------- .../coral-settings/components/IgnoredUsers.js | 44 ------------- 2 files changed, 105 deletions(-) delete mode 100644 client/coral-embed-stream/src/components/TopRightMenu.js delete mode 100644 client/coral-settings/components/IgnoredUsers.js diff --git a/client/coral-embed-stream/src/components/TopRightMenu.js b/client/coral-embed-stream/src/components/TopRightMenu.js deleted file mode 100644 index fd4587356..000000000 --- a/client/coral-embed-stream/src/components/TopRightMenu.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {IgnoreUserWizard} from './IgnoreUserWizard'; -import Toggleable from './Toggleable'; - -// TopRightMenu appears as a dropdown in the top right of the comment. -// when you click the down cehvron, it expands and shows IgnoreUserWizard -// when you click 'cancel' in the wizard, it closes the menu -export class TopRightMenu extends React.Component { - static propTypes = { - - // comment on which this menu appears - comment: PropTypes.shape({ - user: PropTypes.shape({ - id: PropTypes.string.isRequired, - username: PropTypes.string.isRequired - }).isRequired - }).isRequired, - ignoreUser: PropTypes.func, - - // show notification to the user (e.g. for errors) - notify: PropTypes.func.isRequired, - } - constructor(props) { - super(props); - this.state = { - timesReset: 0 - }; - } - render() { - const {comment, ignoreUser, notify} = this.props; - - // timesReset is used as Toggleable key so it re-renders on reset (closing the toggleable) - const reset = () => this.setState({timesReset: this.state.timesReset + 1}); - const ignoreUserAndCloseMenuAndNotifyOnError = async ({id}) => { - - // close menu - reset(); - - // ignore user - try { - await ignoreUser({id}); - } catch (error) { - notify('error', 'Failed to ignore user'); - throw error; - } - }; - return ( - -
- -
- - ); - } -} - diff --git a/client/coral-settings/components/IgnoredUsers.js b/client/coral-settings/components/IgnoredUsers.js deleted file mode 100644 index 9cb314373..000000000 --- a/client/coral-settings/components/IgnoredUsers.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import t from 'coral-framework/services/i18n'; -import styles from './IgnoredUsers.css'; - -export class IgnoredUsers extends Component { - static propTypes = { - users: PropTypes.arrayOf(PropTypes.shape({ - username: PropTypes.string, - id: PropTypes.string, - })).isRequired, - - // accepts { id } - stopIgnoring: PropTypes.func.isRequired, - } - render() { - const {users, stopIgnoring} = this.props; - return ( -
- { - users.length - ?

{t('framework.because_you_ignored')}

- : null - } -
- { - users.map(({username, id}) => ( - -
{ username }
-
- stopIgnoring({id})} - className={styles.link}>{t('framework.stop_ignoring')} -
- - )) - } -
-
- ); - } -} - -export default IgnoredUsers; From 2cbd59b4b5b2df7b75087760eeb6f1893f47239a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 17:05:20 -0300 Subject: [PATCH 14/22] Featured comments error in permalink view, handling permaview moderation and handling replies moderation --- .../src/components/Comment.js | 2 +- client/coral-framework/graphql/mutations.js | 21 +++++ .../client/index.js | 76 ++++++++++--------- .../client/containers/ApproveCommentAction.js | 3 +- .../client/containers/RejectCommentAction.js | 3 +- .../client/index.js | 49 +----------- 6 files changed, 68 insertions(+), 86 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 68eaf50cc..c91396eb1 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -341,7 +341,7 @@ export default class Comment extends React.Component { emit, commentClassNames = [] } = this.props; - + if (this.commentIsRejected(comment)) { return ; } diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index c09ce8751..fb004956b 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -127,6 +127,27 @@ export const withSetCommentStatus = withMutation( commentId, status, }, + optimisticResponse: { + setCommentStatus: { + __typename: 'SetCommentStatusResponse', + errors: null, + } + }, + update: (proxy) => { + + const fragment = gql` + fragment Talk_SetCommentStatus on Comment { + status + }`; + + const fragmentId = `Comment_${commentId}`; + + const data = proxy.readFragment({fragment, id: fragmentId}); + + data.status = status; + + proxy.writeFragment({fragment, id: fragmentId, data}); + } }); } }) diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index e451ad830..765951652 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -49,36 +49,39 @@ export default { AddTag: ({variables}) => ({ updateQueries: { CoralEmbedStream_Embed: (previous) => { + let updated = previous; if (variables.name !== 'FEATURED') { return; } const comment = findCommentInEmbedQuery(previous, variables.id); - - const updated = update(previous, { - asset: { - comments: { - nodes: { - $apply: (nodes) => nodes.map((node) => { - if (node.id === variables.id) { - node.status = 'ACCEPTED'; - } - - return node; - }) - } - }, - featuredComments: { - nodes: { - $apply: (nodes) => prependNewNodes(nodes, [comment]), - } - }, - featuredCommentsCount: { - $apply: (value) => value + 1 + + if (previous.asset.comments) { + updated = update(previous, { + asset: { + comments: { + nodes: { + $apply: (nodes) => nodes.map((node) => { + if (node.id === variables.id) { + node.status = 'ACCEPTED'; + } + + return node; + }) + } + }, + featuredComments: { + nodes: { + $apply: (nodes) => prependNewNodes(nodes, [comment]), + } + }, + featuredCommentsCount: { + $apply: (value) => value + 1 + }, } - } - }); + }); + } return updated; }, @@ -87,24 +90,27 @@ export default { RemoveTag: ({variables}) => ({ updateQueries: { CoralEmbedStream_Embed: (previous) => { - + let updated = previous; + if (variables.name !== 'FEATURED') { return; } - const updated = update(previous, { - asset: { - featuredComments: { - nodes: { - $apply: (nodes) => - nodes.filter((n) => n.id !== variables.id) + if (previous.asset.comments) { + updated = update(previous, { + asset: { + featuredComments: { + nodes: { + $apply: (nodes) => + nodes.filter((n) => n.id !== variables.id) + } + }, + featuredCommentsCount: { + $apply: (value) => value - 1 } - }, - featuredCommentsCount: { - $apply: (value) => value - 1 } - } - }); + }); + } return updated; }, diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js index bcedb7fc6..686cded9f 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js @@ -3,6 +3,7 @@ import {getErrorMessages} from 'plugin-api/beta/client/utils'; import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; import {notify} from 'plugin-api/beta/client/actions/notification'; import ApproveCommentAction from '../components/ApproveCommentAction'; +import isNil from 'lodash/isNil'; class ApproveCommentActionContainer extends React.Component { @@ -15,7 +16,7 @@ class ApproveCommentActionContainer extends React.Component { status: 'ACCEPTED' }); - if (result.data.setCommentStatus.errors) { + if (!isNil(result.data.setCommentStatus)) { throw result.data.setCommentStatus.errors; } diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js index fa8c12730..82ca9f175 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -3,6 +3,7 @@ import {getErrorMessages} from 'plugin-api/beta/client/utils'; import {withSetCommentStatus} from 'plugin-api/beta/client/hocs'; import {notify} from 'plugin-api/beta/client/actions/notification'; import RejectCommentAction from '../components/RejectCommentAction'; +import isNil from 'lodash/isNil'; class RejectCommentActionContainer extends React.Component { @@ -15,7 +16,7 @@ class RejectCommentActionContainer extends React.Component { status: 'REJECTED' }); - if (result.data.setCommentStatus.errors) { + if (!isNil(result.data.setCommentStatus)) { throw result.data.setCommentStatus.errors; } diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js index 445c72271..3343505f3 100644 --- a/plugins/talk-plugin-moderation-actions/client/index.js +++ b/plugins/talk-plugin-moderation-actions/client/index.js @@ -1,56 +1,9 @@ import ModerationActions from './containers/ModerationActions'; import translations from './translations.yml'; -import update from 'immutability-helper'; export default { slots: { commentInfoBar: [ModerationActions], }, - translations, - mutations: { - SetCommentStatus: ({variables: {status, commentId}}) => ({ - updateQueries: { - CoralEmbedStream_Embed: (prev) => { - - if (status !== 'REJECTED' && status !== "ACCEPTED") { - return prev; - } - - // Permalink view will retrieve only one comment. - if (prev.asset.comment) { - const updated = update(prev, { - asset: { - comment: { - status: { - $set: status - } - } - } - }); - - return updated; - } - - // Stream View - const updated = update(prev, { - asset: { - comments: { - nodes: { - $apply: (nodes) => nodes.map((node) => { - if (node.id === commentId) { - node.status = status; - } - - return node; - }) - } - } - } - }); - - return updated; - } - } - }), - }, + translations }; From 790c20e7ac8113cdc6770452a37922f7feeed3b6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 17:14:15 -0300 Subject: [PATCH 15/22] Indent --- client/coral-embed-stream/src/components/Comment.js | 4 ++-- .../src/components/CommentTombstone.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index c91396eb1..20f502c7b 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -343,11 +343,11 @@ export default class Comment extends React.Component { } = this.props; if (this.commentIsRejected(comment)) { - return ; + return ; } if (this.commentIsIgnored(comment)) { - return ; + return ; } const view = this.getVisibileReplies(); diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js index 0afa4a555..4f923bb4b 100644 --- a/client/coral-embed-stream/src/components/CommentTombstone.js +++ b/client/coral-embed-stream/src/components/CommentTombstone.js @@ -8,12 +8,12 @@ class CommentTombstone extends React.Component { const {action} = this.props; switch (action) { - case 'ignored': - return t('framework.comment_is_ignored') - case 'rejected': - return t('framework.comment_is_rejected') - default : - return t('framework.comment_is_hidden'); + case 'ignore': + return t('framework.comment_is_ignored') + case 'reject': + return t('framework.comment_is_rejected') + default : + return t('framework.comment_is_hidden'); } } From 72530e7501805e5a5a088130819c9bc7473093b4 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 17:17:03 -0300 Subject: [PATCH 16/22] Linting and Indenting --- client/coral-embed-stream/src/components/Comment.js | 2 +- client/coral-embed-stream/src/components/CommentTombstone.js | 4 ++-- .../client/containers/ApproveCommentAction.js | 2 +- .../client/containers/ModerationActions.js | 5 ++--- .../client/containers/RejectCommentAction.js | 2 +- 5 files changed, 7 insertions(+), 8 deletions(-) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 20f502c7b..2b8c565da 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -210,7 +210,7 @@ export default class Comment extends React.Component { } commentIsRejected(comment) { - return comment.status === "REJECTED"; + return comment.status === 'REJECTED'; } commentIsIgnored(comment) { diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js index 4f923bb4b..1d7e8d7e5 100644 --- a/client/coral-embed-stream/src/components/CommentTombstone.js +++ b/client/coral-embed-stream/src/components/CommentTombstone.js @@ -9,9 +9,9 @@ class CommentTombstone extends React.Component { switch (action) { case 'ignore': - return t('framework.comment_is_ignored') + return t('framework.comment_is_ignored'); case 'reject': - return t('framework.comment_is_rejected') + return t('framework.comment_is_rejected'); default : return t('framework.comment_is_hidden'); } diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js index 686cded9f..c75711a56 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js @@ -26,7 +26,7 @@ class ApproveCommentActionContainer extends React.Component { } render() { - return + return ; } } diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js index 84017429c..ffb711e18 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js @@ -1,8 +1,7 @@ -import React from 'react'; import {gql, compose} from 'react-apollo'; -import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs'; -import ModerationActions from '../components/ModerationActions'; import {can} from 'plugin-api/beta/client/services'; +import ModerationActions from '../components/ModerationActions'; +import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs'; const mapStateToProps = ({auth}) => ({ user: auth.user diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js index 82ca9f175..5497d0e8e 100644 --- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js +++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js @@ -26,7 +26,7 @@ class RejectCommentActionContainer extends React.Component { } render() { - return + return ; } } From 0ea951f3d9c9729c16073e912318b6335c360eb6 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 17:50:30 -0300 Subject: [PATCH 17/22] wrong translation --- locales/es.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/es.yml b/locales/es.yml index b9bcc9c2d..db25ab527 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -219,7 +219,7 @@ es: banned_account_body: "Esto significa que no puedes gustar, marcar o escribir comentarios." comment: "comentario" comment_is_ignored: "Este comentario está escondido porque has ignorado al usuario." - comment_is_rejected: "Haz rechazado este comentario." + comment_is_rejected: "Has rechazado este comentario." comment_is_hidden: "Este comentario no está disponible." comments: "comentarios" configure_stream: "Configurar Hilo de Comentarios" From ce3e29813bd8566250dc95ed532bd6e4370c0880 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 8 Sep 2017 15:41:43 -0600 Subject: [PATCH 18/22] implemented status switch when mismatched --- graph/mutators/comment.js | 30 +++-- services/assets.js | 25 +++-- services/comments.js | 103 +++++++++++------ test/server/services/comments.js | 187 +++++++++++++++++-------------- 4 files changed, 208 insertions(+), 137 deletions(-) diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js index 9142687f6..a75e319f4 100644 --- a/graph/mutators/comment.js +++ b/graph/mutators/comment.js @@ -194,16 +194,32 @@ const createComment = async (context, {tags = [], body, asset_id, parent_id = nu * @param {String} [asset_id] id of asset comment is posted on * @return {Object} resolves to the wordlist results */ -const filterNewComment = (context, {body, asset_id}) => { +const filterNewComment = async (context, {body, asset_id}) => { + + // Load the settings. + const [ + settings, + asset, + ] = await Promise.all([ + context.loaders.Settings.load(), + context.loaders.Assets.getByID.load(asset_id), + ]); // Create a new instance of the Wordlist. const wl = new Wordlist(); + // Load the wordlist. + wl.upsert(settings.wordlist); + // Load the wordlist and filter the comment content. - return Promise.all([ - wl.load().then(() => wl.scan('body', body)), - asset_id && AssetsService.rectifySettings(AssetsService.findById(asset_id)) - ]); + return [ + + // Scan the word. + wl.scan('body', body), + + // Return the asset's settings. + AssetsService.rectifySettings(asset, settings) + ]; }; /** @@ -247,7 +263,7 @@ const resolveNewCommentStatus = async (context, {asset_id, body, status}, wordli // Return `premod` if pre-moderation is enabled and an empty "new" status // in the event that it is not in pre-moderation mode. - let {moderation, charCountEnable, charCount} = await AssetsService.rectifySettings(asset); + let {moderation, charCountEnable, charCount} = await AssetsService.rectifySettings(asset, settings); // Reject if the comment is too long if (charCountEnable && body.length > charCount) { @@ -365,7 +381,7 @@ const edit = async (context, {id, asset_id, edit: {body}}) => { const status = await resolveNewCommentStatus(context, {asset_id, body}, wordlist, settings); // Execute the edit. - const comment = await CommentsService.edit(id, context.user.id, {body, status}); + const comment = await CommentsService.edit({id, author_id: context.user.id, body, status}); // Publish the edited comment via the subscription. context.pubsub.publish('commentEdited', comment); diff --git a/services/assets.js b/services/assets.js index 34c8ff465..cddfcfb7c 100644 --- a/services/assets.js +++ b/services/assets.js @@ -3,6 +3,7 @@ const AssetModel = require('../models/asset'); const SettingsService = require('./settings'); const domainlist = require('./domainlist'); const errors = require('../errors'); +const merge = require('lodash/merge'); module.exports = class AssetsService { @@ -28,19 +29,21 @@ module.exports = class AssetsService { * @param {Promise} assetQuery an asset query that returns a single asset. * @return {Promise} */ - static rectifySettings(assetQuery) { - return Promise.all([ - SettingsService.retrieve(), - assetQuery - ]).then(([settings, asset]) => { + static async rectifySettings(assetQuery, settings = null) { + const [ + globalSettings, + asset, + ] = await Promise.all([ + settings || SettingsService.retrieve(), + assetQuery, + ]); - // If the asset exists and has settings then return the merged object. - if (asset && asset.settings) { - settings.merge(asset.settings); - } + // If the asset exists and has settings then return the merged object. + if (asset && asset.settings) { + settings = merge({}, globalSettings, asset.settings); + } - return settings; - }); + return settings; } /** diff --git a/services/comments.js b/services/comments.js index db0714233..1c39fdafb 100644 --- a/services/comments.js +++ b/services/comments.js @@ -5,6 +5,7 @@ const ActionsService = require('./actions'); const SettingsService = require('./settings'); const sc = require('snake-case'); +const cloneDeep = require('lodash/cloneDeep'); const errors = require('../errors'); const events = require('./events'); const { @@ -52,13 +53,34 @@ module.exports = class CommentsService { } /** - * Edit a Comment - * @param {String} id comment.id you want to edit (or its ID) - * @param {String} author_id user.id of the user trying to edit the comment (will err if not comment author) + * lastUnmoderatedStatus will retrieve the last status before this one. + * + * @param {Object} comment the comment to get the last status of + */ + static lastUnmoderatedStatus(comment) { + const UNMODERATED_STATUSES = [ + 'NONE', + 'PREMOD', + ]; + + for (let i = comment.status_history.length - 1; i >= 0; i--) { + const {type} = comment.status_history[i]; + + if (UNMODERATED_STATUSES.includes(type)) { + return type; + } + } + } + + /** + * Edit a Comment. + * + * @param {String} id comment.id you want to edit (or its ID) + * @param {String} author_id user.id of the user trying to edit the comment (will err if not comment author) * @param {String} body the new Comment body * @param {String} status the new Comment status */ - static async edit(id, author_id, {body, status, ignoreEditWindow = false}) { + static async edit({id, author_id, body, status}) { const query = { id, author_id, @@ -69,14 +91,11 @@ module.exports = class CommentsService { // Establish the edit window (if it exists) and add the condition to the // original query. - let lastEditableCommentCreatedAt; - if (!ignoreEditWindow) { - const {editCommentWindowLength: editWindowMs} = await SettingsService.retrieve(); - lastEditableCommentCreatedAt = new Date((new Date()).getTime() - editWindowMs); - query.created_at = { - $gt: lastEditableCommentCreatedAt, - }; - } + const {editCommentWindowLength: editWindowMs} = await SettingsService.retrieve(); + const lastEditableCommentCreatedAt = new Date(Date.now() - editWindowMs); + query.created_at = { + $gt: lastEditableCommentCreatedAt, + }; const originalComment = await CommentModel.findOneAndUpdate(query, { $set: { @@ -117,7 +136,7 @@ module.exports = class CommentsService { } // Check to see if the edit window expired. - if (!ignoreEditWindow && comment.created_at <= lastEditableCommentCreatedAt) { + if (comment.created_at <= lastEditableCommentCreatedAt) { debug('rejecting comment edit because outside edit time window'); throw errors.ErrEditWindowHasEnded; } @@ -126,7 +145,7 @@ module.exports = class CommentsService { } // Mutate the comment like Mongo would have. - const editedComment = originalComment; + const editedComment = cloneDeep(originalComment); editedComment.status = status; editedComment.body = body; editedComment.body_history.push({ @@ -138,6 +157,43 @@ module.exports = class CommentsService { created_at: new Date(), }); + // We should adjust the comment's status such that if it was approved + // previously, we should mark the comment as 'NONE' or 'PREMOD', which ever + // was most recent if the new comment is destined to be `NONE` or `PREMOD`. + if (originalComment.status === 'ACCEPTED' && ['NONE', 'PREMOD'].includes(status)) { + + const lastUnmoderatedStatus = CommentsService.lastUnmoderatedStatus(originalComment); + + // If the last moderated status was found and the current comment doesn't + // match this already. + if (lastUnmoderatedStatus && status !== lastUnmoderatedStatus) { + + // Update the comment model (if at this point, the status is still + // accepted) with the previously unmoderated status + await CommentModel.update({ + id, + status, + }, { + $set: { + status: lastUnmoderatedStatus, + }, + $push: { + status_history: { + type: lastUnmoderatedStatus, + created_at: new Date(), + } + }, + }); + + // Update the returned comment. + editedComment.status = lastUnmoderatedStatus; + editedComment.status_history.push({ + type: lastUnmoderatedStatus, + created_at: new Date(), + }); + } + } + await events.emitAsync(COMMENTS_EDIT, originalComment, editedComment); return editedComment; @@ -215,23 +271,6 @@ module.exports = class CommentsService { return CommentModel.find({status}); } - /** - * Find comments that need to be moderated (aka moderation queue). - * @param {String} asset_id - * @return {Promise} - */ - static moderationQueue(status = 'NONE', asset_id = null) { - - // Fetch the comments with statuses. - let comments = CommentModel.find({status}); - - if (asset_id) { - comments = comments.where({asset_id}); - } - - return comments; - } - /** * Pushes a new status in for the user. * @param {String} id identifier of the comment (uuid) @@ -356,7 +395,7 @@ events.on(COMMENTS_NEW, async (comment) => { if ( !comment || // Check that the comment is defined. (!comment.parent_id || comment.parent_id.length === 0) || // Check that the comment has a parent (is a reply). - !(comment.status === 'NONE' || comment.status === 'APPROVED') // Check that the comment is visible. + !(comment.status === 'NONE' || comment.status === 'ACCEPTED') // Check that the comment is visible. ) { return; } diff --git a/test/server/services/comments.js b/test/server/services/comments.js index e33089325..2be05f87c 100644 --- a/test/server/services/comments.js +++ b/test/server/services/comments.js @@ -10,7 +10,6 @@ const CommentsService = require('../../../services/comments'); const settings = {id: '1', moderation: 'PRE', wordlist: {banned: ['bad words'], suspect: ['suspect words']}}; const chai = require('chai'); -chai.use(require('chai-as-promised')); chai.use(require('sinon-chai')); const expect = chai.expect; @@ -96,102 +95,118 @@ describe('services.CommentsService', () => { user_id: '456' }]; - beforeEach(() => { - return SettingsService.init(settings).then(() => { - return Promise.all([ - CommentModel.create(comments), - UsersService.createLocalUsers(users), - ActionModel.create(actions) - ]); - }); + beforeEach(async () => { + await SettingsService.init(settings); + + await Promise.all([ + CommentModel.create(comments), + UsersService.createLocalUsers(users), + ActionModel.create(actions) + ]); }); describe('#publicCreate()', () => { - it('creates a new comment', () => { - return CommentsService - .publicCreate({ - body: 'This is a comment!', - status: 'ACCEPTED' - }).then((c) => { - expect(c).to.not.be.null; - expect(c.id).to.not.be.null; - expect(c.id).to.be.uuid; - expect(c.status).to.be.equal('ACCEPTED'); - }); + it('creates a new comment', async () => { + const c = await CommentsService.publicCreate({ + body: 'This is a comment!', + status: 'ACCEPTED' + }); + + expect(c).to.not.be.null; + expect(c.id).to.not.be.null; + expect(c.id).to.be.uuid; + expect(c.status).to.be.equal('ACCEPTED'); }); - it('creates many new comments', () => { - return CommentsService - .publicCreate([{ - body: 'This is a comment!', - status: 'ACCEPTED' - }, { - body: 'This is another comment!' - }, { - body: 'This is a rejected comment!', - status: 'REJECTED' - }]).then(([c1, c2, c3]) => { - expect(c1).to.not.be.null; - expect(c1.id).to.be.uuid; - expect(c1.status).to.be.equal('ACCEPTED'); + it('creates many new comments', async () => { + const [ + c1, + c2, + c3, + ] = await CommentsService.publicCreate([{ + body: 'This is a comment!', + status: 'ACCEPTED' + }, { + body: 'This is another comment!' + }, { + body: 'This is a rejected comment!', + status: 'REJECTED' + }]); - expect(c2).to.not.be.null; - expect(c2.id).to.be.uuid; - expect(c2.status).to.be.equal('NONE'); + expect(c1).to.not.be.null; + expect(c1.status).to.be.equal('ACCEPTED'); - expect(c3).to.not.be.null; - expect(c3.id).to.be.uuid; - expect(c3.status).to.be.equal('REJECTED'); - }); + expect(c2).to.not.be.null; + expect(c2.status).to.be.equal('NONE'); + + expect(c3).to.not.be.null; + expect(c3.status).to.be.equal('REJECTED'); }); + }); + describe.only('#edit', () => { + it('changes the comment status back to premod if it was accepted', async () => { + const originalComment = await CommentsService.publicCreate({ + body: 'this is a body!', + status: 'PREMOD', + author_id: '123', + }); + + expect(originalComment.status_history).to.have.length(1); + + await CommentsService.pushStatus(originalComment.id, 'ACCEPTED'); + + let retrivedComment = await CommentsService.findById(originalComment.id); + + expect(retrivedComment).to.have.property('status', 'ACCEPTED'); + expect(retrivedComment.status_history).to.have.length(2); + expect(retrivedComment.status_history[1]).to.have.property('type', 'ACCEPTED'); + + const editedComment = await CommentsService.edit({ + id: originalComment.id, + author_id: '123', + body: 'This is a body!', + status: 'NONE', + }); + + expect(editedComment).to.have.property('status', 'PREMOD'); + expect(editedComment.status_history).to.have.length(4); + expect(editedComment.status_history[3]).to.have.property('type', 'PREMOD'); + + retrivedComment = await CommentsService.findById(originalComment.id); + + expect(retrivedComment).to.have.property('status', 'PREMOD'); + expect(retrivedComment.status_history).to.have.length(4); + expect(retrivedComment.status_history[3]).to.have.property('type', 'PREMOD'); + }); }); describe('#findById()', () => { - it('should find a comment by id', () => { - return CommentsService - .findById('1') - .then((result) => { - expect(result).to.not.be.null; - expect(result).to.have.property('body', 'comment 10'); - }); + it('should find a comment by id', async () => { + const comment = await CommentsService.findById('1'); + expect(comment).to.not.be.null; + expect(comment).to.have.property('body', 'comment 10'); }); }); describe('#findByAssetId()', () => { - it('should find an array of all comments by asset id', () => { - return CommentsService - .findByAssetId('123') - .then((result) => { - expect(result).to.have.length(3); - result.sort((a, b) => { - if (a.body < b.body) {return -1;} - else {return 1;} - }); - expect(result[0]).to.have.property('body', 'comment 10'); - expect(result[1]).to.have.property('body', 'comment 20'); - expect(result[2]).to.have.property('body', 'comment 40'); - }); + it('should find an array of all comments by asset id', async () => { + const comments = await CommentsService.findByAssetId('123'); + expect(comments).to.have.length(3); + comments.sort((a, b) => { + if (a.body < b.body) {return -1;} + else {return 1;} + }); + expect(comments[0]).to.have.property('body', 'comment 10'); + expect(comments[1]).to.have.property('body', 'comment 20'); + expect(comments[2]).to.have.property('body', 'comment 40'); }); }); - describe('#moderationQueue()', () => { - - it('should find an array of new comments to moderate when pre-moderation', () => { - return CommentsService - .moderationQueue('PREMOD') - .then((result) => { - expect(result).to.not.be.null; - expect(result).to.have.lengthOf(2); - }); - }); - - }); - describe('#changeStatus', () => { it('should change the status of a comment from no status', async () => { @@ -220,20 +235,18 @@ describe('services.CommentsService', () => { expect(c3.status_history[0]).to.have.property('assigned_by', '123'); }); - it('should change the status of a comment from accepted', () => { - return CommentsService.pushStatus(comments[1].id, 'REJECTED', '123') - .then(() => CommentsService.findById(comments[1].id)) - .then((c) => { - expect(c).to.have.property('status_history'); - expect(c).to.have.property('status'); - expect(c.status).to.equal('REJECTED'); - expect(c.status_history).to.have.length(2); - expect(c.status_history[0]).to.have.property('type', 'ACCEPTED'); - expect(c.status_history[0]).to.have.property('assigned_by', null); + it('should change the status of a comment from accepted', async () => { + await CommentsService.pushStatus(comments[1].id, 'REJECTED', '123'); + const c = await CommentsService.findById(comments[1].id); + expect(c).to.have.property('status_history'); + expect(c).to.have.property('status'); + expect(c.status).to.equal('REJECTED'); + expect(c.status_history).to.have.length(2); + expect(c.status_history[0]).to.have.property('type', 'ACCEPTED'); + expect(c.status_history[0]).to.have.property('assigned_by', null); - expect(c.status_history[1]).to.have.property('type', 'REJECTED'); - expect(c.status_history[1]).to.have.property('assigned_by', '123'); - }); + expect(c.status_history[1]).to.have.property('type', 'REJECTED'); + expect(c.status_history[1]).to.have.property('assigned_by', '123'); }); }); }); From d20bd20005dface4b3d58126edf90ea9774011d4 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 8 Sep 2017 15:46:04 -0600 Subject: [PATCH 19/22] linting --- test/server/services/comments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/server/services/comments.js b/test/server/services/comments.js index 2be05f87c..77711d321 100644 --- a/test/server/services/comments.js +++ b/test/server/services/comments.js @@ -145,7 +145,7 @@ describe('services.CommentsService', () => { }); }); - describe.only('#edit', () => { + describe('#edit', () => { it('changes the comment status back to premod if it was accepted', async () => { const originalComment = await CommentsService.publicCreate({ body: 'this is a body!', From 7f85ceb566c74609018febd95639f82942aa97ec Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 18:55:11 -0300 Subject: [PATCH 20/22] Featuring from Featured Tab --- .../client/components/Button.css | 17 ++++++++++++ .../client/components/Button.js | 26 +++++++++++++++++++ .../client/components/Comment.js | 8 ++++++ 3 files changed, 51 insertions(+) create mode 100644 plugins/talk-plugin-featured-comments/client/components/Button.css create mode 100644 plugins/talk-plugin-featured-comments/client/components/Button.js diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css new file mode 100644 index 000000000..09432af70 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/Button.css @@ -0,0 +1,17 @@ +.button { + + /* TODO: figure out the best location to include the `reset.css` */ + composes: buttonReset from "coral-framework/styles/reset.css"; + + color: #767676; + margin-right: 10px; +} + +.button.featured { + color: #10589b; +} + +.icon { + font-size: 18px; + vertical-align: top; +} \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/Button.js new file mode 100644 index 000000000..c581ce027 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/Button.js @@ -0,0 +1,26 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './Button.css'; +import {pluginName} from '../../package.json'; +import {can} from 'plugin-api/beta/client/services'; +import {withTags} from 'plugin-api/beta/client/hocs'; +import {Icon} from 'plugin-api/beta/client/components/ui'; + +const Button = (props) => { + const {alreadyTagged, deleteTag, postTag, user} = props; + + return can(user, 'MODERATE_COMMENTS') ? ( + + ) : null ; +}; + +export default withTags('featured')(Button); diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index ada7ae7b6..1c2045110 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js @@ -5,6 +5,7 @@ import {t, timeago} from 'plugin-api/beta/client/services'; import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components'; import {Icon} from 'plugin-api/beta/client/components/ui'; import {pluginName} from '../../package.json'; +import Button from './Button'; class Comment extends React.Component { @@ -48,6 +49,13 @@ class Comment extends React.Component { asset={asset} inline /> + +