diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index 66fd7ad2e..3edc66824 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -87,11 +87,12 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => { } render() { - const {root, asset, comment, user, config} = this.props; + const {root, asset, comment, user, config, ...rest} = this.props; const alreadyTagged = isTagged(comment.tags, TAG); return hoistStatics((WrappedComponent) => { ${fragments.comment ? fragments.comment : ''} ` }), - connect(mapStateToProps, mapDispatchToProps), withAddTag, - withRemoveTag + withRemoveTag, + connect(mapStateToProps, mapDispatchToProps), ); WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`; diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js new file mode 100644 index 000000000..e16f06f48 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/actions.js @@ -0,0 +1,16 @@ +import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants'; + +export const openFeaturedDialog = (comment, asset) => ({ + type: OPEN_FEATURED_DIALOG, + comment: { + id: comment.id, + tags: comment.tags, + }, + asset: { + id: asset.id, + }, +}); + +export const closeFeaturedDialog = () => ({ + type: CLOSE_FEATURED_DIALOG, +}); diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css new file mode 100644 index 000000000..4326d5c5c --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.css @@ -0,0 +1,41 @@ +.dialog { + border: none; + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); + width: 400px; + top: 50%; + transform: translateY(-50%); + padding: 20px; + border-radius: 4px; +} + +.header { + color: black; + font-size: 1.5em; + font-weight: 500; + margin: 0 0 8px 0; +} + +.close { + display: block; + position: absolute; + top: 24px; + right: 20px; +} + +.cancel { + margin-right: 5px; +} + +.perform { + min-width: 90px; +} + +.buttons { + margin-top: 8px; + margin-bottom: 6px; + text-align: right; +} + +.content { + margin-bottom: 20px; +} diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js new file mode 100644 index 000000000..81c054ae8 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js @@ -0,0 +1,52 @@ +import React from 'react'; +import cn from 'classnames'; +import PropTypes from 'prop-types'; +import {Dialog} from 'coral-ui'; +import styles from './FeaturedDialog.css'; +import {t} from 'plugin-api/beta/client/services'; +import Button from 'coral-ui/components/Button'; + +const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => { + + const onPerform = async () => { + await postTag(); + await closeFeaturedDialog(); + }; + + return ( + + × +

{t('talk-plugin-featured-comments.feature_comment')}

+
+ {t('talk-plugin-featured-comments.are_you_sure')} +
+
+ + +
+
+ ); +}; + +FeaturedDialog.propTypes = { + showFeaturedDialog: PropTypes.bool.isRequired, + closeFeaturedDialog: PropTypes.func.isRequired, +}; + +export default FeaturedDialog; diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js index 0664f07cd..70f51dcbc 100644 --- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js +++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js @@ -1,9 +1,9 @@ import React from 'react'; +import PropTypes from 'prop-types'; import cn from 'classnames'; import styles from './ModTag.css'; import {t} from 'plugin-api/beta/client/services'; import {Icon} from 'plugin-api/beta/client/components/ui'; -import {getErrorMessages} from 'plugin-api/beta/client/utils'; export default class ModTag extends React.Component { constructor() { @@ -29,17 +29,12 @@ export default class ModTag extends React.Component { }); } - postTag = async () => { - try { - await this.props.postTag(); - } - catch(err) { - this.props.notify('error', getErrorMessages(err)); - } + openFeaturedDialog = (comment, asset) => { + this.props.openFeaturedDialog(comment, asset); } render() { - const {alreadyTagged, deleteTag} = this.props; + const {alreadyTagged, deleteTag, comment, asset} = this.props; return alreadyTagged ? ( ) : ( + onClick={() => this.openFeaturedDialog(comment, asset)} > {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')} ); } } + +ModTag.propTypes = { + alreadyTagged: PropTypes.bool, + deleteTag: PropTypes.func, + notify: PropTypes.func, + openFeaturedDialog: PropTypes.func, + comment: PropTypes.object, + asset: PropTypes.object, +}; diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js new file mode 100644 index 000000000..912f6f002 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/constants.js @@ -0,0 +1,4 @@ +const prefix = 'TALK_FEATURED_COMMENTS_ACTIONS'; + +export const OPEN_FEATURED_DIALOG = `${prefix}_OPEN_FEATURED_DIALOG`; +export const CLOSE_FEATURED_DIALOG = `${prefix}_CLOSE_FEATURED_DIALOG`; diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js new file mode 100644 index 000000000..0440e9d08 --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js @@ -0,0 +1,23 @@ +import {compose} from 'react-apollo'; +import {bindActionCreators} from 'redux'; +import FeaturedDialog from '../components/FeaturedDialog'; +import {withTags, connect} from 'plugin-api/beta/client/hocs'; +import {closeFeaturedDialog} from '../actions'; + +const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({ + showFeaturedDialog: state.showFeaturedDialog, + comment: state.comment, + asset: state.asset, +}); + +const mapDispatchToProps = (dispatch) => + bindActionCreators({ + closeFeaturedDialog, + }, dispatch); + +const enhance = compose( + connect(mapStateToProps, mapDispatchToProps), + withTags('featured'), +); + +export default enhance(FeaturedDialog); diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js index 88aee73f6..35e7edfcd 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js +++ b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js @@ -2,11 +2,13 @@ import ModTag from '../components/ModTag'; import {withTags, connect} from 'plugin-api/beta/client/hocs'; import {gql, compose} from 'react-apollo'; import {bindActionCreators} from 'redux'; +import {openFeaturedDialog} from '../actions'; import {notify} from 'plugin-api/beta/client/actions/notification'; const mapDispatchToProps = (dispatch) => bindActionCreators({ notify, + openFeaturedDialog, }, dispatch); const fragments = { @@ -24,4 +26,3 @@ const enhance = compose( ); export default enhance(ModTag); - diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 7a0b9827d..304bff647 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -6,19 +6,22 @@ import update from 'immutability-helper'; import ModTag from './containers/ModTag'; import ModActionButton from './containers/ModActionButton'; import ModSubscription from './containers/ModSubscription'; +import FeaturedDialog from './containers/FeaturedDialog'; import {gql} from 'react-apollo'; +import reducer from './reducer'; import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils'; import {prependNewNodes} from 'plugin-api/beta/client/utils'; export default { translations, + reducer, slots: { streamTabsPrepend: [Tab], streamTabPanes: [TabPane], commentInfoBar: [Tag], moderationActions: [ModActionButton], - adminModeration: [ModSubscription], + adminModeration: [ModSubscription, FeaturedDialog], adminCommentInfoBar: [ModTag], }, mutations: { diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js new file mode 100644 index 000000000..eb6d302ff --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/reducer.js @@ -0,0 +1,32 @@ +import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants'; + +const initialState = { + showFeaturedDialog: false, + comment: { + id: null, + tags: [] + }, + asset: { + id: null, + }, +}; + +export default function reducer(state = initialState, action) { + switch (action.type) { + case OPEN_FEATURED_DIALOG: + return { + ...state, + comment: action.comment, + asset: action.asset, + showFeaturedDialog: true, + }; + case CLOSE_FEATURED_DIALOG: + return { + ...state, + featuredCommentId: null, + showFeaturedDialog: false, + }; + default : + return state; + } +} diff --git a/plugins/talk-plugin-featured-comments/client/translations.yml b/plugins/talk-plugin-featured-comments/client/translations.yml index ea504cc9e..460a76be9 100644 --- a/plugins/talk-plugin-featured-comments/client/translations.yml +++ b/plugins/talk-plugin-featured-comments/client/translations.yml @@ -9,6 +9,10 @@ en: notify_self_featured: 'The comment from {0} is now featured and approved' notify_featured: '{0} featured and approved comment "{1}"' notify_unfeatured: '{0} unfeatured comment "{1}"' + feature_comment: Feature comment? + are_you_sure: Are you sure you would like to feature this comment? + cancel: Cancel + yes_feature_comment: Yes, feature comment es: talk-plugin-featured-comments: un_feature: Desmarcar @@ -17,3 +21,7 @@ es: featured_comments: Comentarios Remarcados go_to_conversation: Ir al comentario tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos + feature_comment: Destacar comentario? + are_you_sure: Está seguro que desea destacar este comentario? + cancel: Cancelar + yes_feature_comment: Si, destacar comentario \ No newline at end of file