From 12be487783d72a7703b4f54fb2cc560d759c1970 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 5 Sep 2017 16:19:46 -0300 Subject: [PATCH 01/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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/17] 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 2cbd59b4b5b2df7b75087760eeb6f1893f47239a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 17:05:20 -0300 Subject: [PATCH 13/17] 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 14/17] 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 15/17] 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 16/17] 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 7f85ceb566c74609018febd95639f82942aa97ec Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 8 Sep 2017 18:55:11 -0300 Subject: [PATCH 17/17] 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 /> + +