);
}
@@ -14,3 +15,8 @@ export default function Slot ({fill, inline = false, ...rest}) {
Slot.propTypes = {
fill: React.PropTypes.string
};
+
+const mapStateToProps = ({config: {plugin_config = {}}}) => ({plugin_config});
+
+export default connect(mapStateToProps, null)(Slot);
+
diff --git a/client/coral-framework/constants/asset.js b/client/coral-framework/constants/asset.js
index c26dd099d..40f746706 100644
--- a/client/coral-framework/constants/asset.js
+++ b/client/coral-framework/constants/asset.js
@@ -8,4 +8,3 @@ export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
export const OPEN_COMMENTS = 'OPEN_COMMENTS';
export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
-
diff --git a/client/coral-framework/constants/config.js b/client/coral-framework/constants/config.js
deleted file mode 100644
index 5dca44ba9..000000000
--- a/client/coral-framework/constants/config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const UPDATE_CONFIG_REQUEST = 'UPDATE_CONFIG_REQUEST';
-export const UPDATE_CONFIG_SUCCESS = 'UPDATE_CONFIG_SUCCESS';
-export const UPDATE_CONFIG_FAILURE = 'UPDATE_CONFIG_FAILURE';
-
-export const UPDATE_CONFIG = 'UPDATE_CONFIG';
-
-export const OPEN_COMMENTS = 'OPEN_COMMENTS';
-export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
-export const ADD_ITEM = 'ADD_ITEM';
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 1f1179b58..66e68be97 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -20,6 +20,27 @@ export const withPostComment = withMutation(
}),
});
+export const withEditComment = withMutation(
+ gql`
+ mutation EditComment($id: ID!, $asset_id: ID!, $edit: EditCommentInput) {
+ editComment(id:$id, asset_id:$asset_id, edit:$edit) {
+ ...EditCommentResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ editComment: (id, asset_id, edit) => {
+ return mutate({
+ variables: {
+ id,
+ asset_id,
+ edit,
+ },
+ });
+ }
+ }),
+ });
+
export const withPostFlag = withMutation(
gql`
mutation PostFlag($flag: CreateFlagInput!) {
diff --git a/client/coral-framework/helpers/hoc.js b/client/coral-framework/helpers/hoc.js
new file mode 100644
index 000000000..bb034b179
--- /dev/null
+++ b/client/coral-framework/helpers/hoc.js
@@ -0,0 +1,3 @@
+export function getDisplayName(WrappedComponent) {
+ return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index bcf6e4c50..e55715e4b 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -21,7 +21,7 @@ export function getSlotElements(slot, props = {}) {
.filter(o => o.module.slots[slot])
.map(o => o.module.slots[slot]));
return components
- .map((component, i) => React.createElement(component, {...props, key: i}));
+ .map((component, i) => React.createElement(component, {key: i, ...props}));
}
function getComponentFragments(components) {
diff --git a/client/coral-framework/helpers/strings.js b/client/coral-framework/helpers/strings.js
new file mode 100644
index 000000000..0a267da59
--- /dev/null
+++ b/client/coral-framework/helpers/strings.js
@@ -0,0 +1,4 @@
+export function capitalize(str) {
+ const newString = new String(str);
+ return newString.charAt(0).toUpperCase() + newString.slice(1);
+}
diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js
index d624a3308..ef4c2ac74 100644
--- a/client/coral-framework/hocs/index.js
+++ b/client/coral-framework/hocs/index.js
@@ -1,3 +1,5 @@
export {default as withFragments} from './withFragments';
export {default as withMutation} from './withMutation';
export {default as withQuery} from './withQuery';
+export {default as withReaction} from './withReaction';
+
diff --git a/client/coral-framework/hocs/withFragments.js b/client/coral-framework/hocs/withFragments.js
index bcc362ca3..a5060f27a 100644
--- a/client/coral-framework/hocs/withFragments.js
+++ b/client/coral-framework/hocs/withFragments.js
@@ -1,8 +1,7 @@
import React from 'react';
-import {getDisplayName} from 'recompose';
+import {getDisplayName} from '../helpers/hoc';
// TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
-
export default fragments => WrappedComponent => {
class WithFragments extends React.Component {
render() {
diff --git a/client/coral-framework/hocs/withMutation.js b/client/coral-framework/hocs/withMutation.js
index 844d4ef49..59a4fb627 100644
--- a/client/coral-framework/hocs/withMutation.js
+++ b/client/coral-framework/hocs/withMutation.js
@@ -3,6 +3,7 @@ import {graphql} from 'react-apollo';
import merge from 'lodash/merge';
import uniq from 'lodash/uniq';
import flatten from 'lodash/flatten';
+import isEmpty from 'lodash/isEmpty';
import {getMutationOptions, resolveFragments} from 'coral-framework/services/registry';
import {store} from 'coral-framework/services/store';
import {getDefinitionName} from '../utils';
@@ -71,6 +72,9 @@ export default (document, config) => WrappedComponent => {
updateQueries,
update,
};
+ if (isEmpty(wrappedConfig.optimisticResponse)) {
+ delete wrappedConfig.optimisticResponse;
+ }
return data.mutate(wrappedConfig);
};
return config.props({...data, mutate});
diff --git a/client/coral-framework/hocs/withReaction.js b/client/coral-framework/hocs/withReaction.js
new file mode 100644
index 000000000..c383dbed8
--- /dev/null
+++ b/client/coral-framework/hocs/withReaction.js
@@ -0,0 +1,243 @@
+import React from 'react';
+import get from 'lodash/get';
+import uuid from 'uuid/v4';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getDisplayName} from '../helpers/hoc';
+import {compose, gql, graphql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {showSignInDialog} from 'coral-framework/actions/auth';
+import {capitalize} from 'coral-framework/helpers/strings';
+import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
+
+export default reaction => WrappedComponent => {
+ if (typeof reaction !== 'string') {
+ console.error('Reaction must be a valid string');
+ return null;
+ }
+
+ reaction = reaction.toLowerCase();
+
+ class WithReactions extends React.Component {
+ render() {
+ const {comment} = this.props;
+
+ const reactionSummary = getMyActionSummary(
+ `${capitalize(reaction)}ActionSummary`,
+ comment
+ );
+
+ const count = getTotalActionCount(
+ `${capitalize(reaction)}ActionSummary`,
+ comment
+ );
+
+ const alreadyReacted = () => !!reactionSummary;
+
+ const withReactionProps = {reactionSummary, count, alreadyReacted};
+
+ return
;
+ }
+ }
+
+ const isReaction = a =>
+ a.__typename === `${capitalize(reaction)}ActionSummary`;
+
+ const COMMENT_FRAGMENT = gql`
+ fragment ${capitalize(reaction)}Button_updateFragment on Comment {
+ action_summaries {
+ ... on ${capitalize(reaction)}ActionSummary {
+ count
+ current_user {
+ id
+ }
+ }
+ }
+ }
+ `;
+
+ const withDeleteReaction = graphql(
+ gql`
+ mutation deleteReaction($id: ID!) {
+ deleteAction(id:$id) {
+ errors {
+ translation_key
+ }
+ }
+ }
+ `,
+ {
+ props: ({mutate, ownProps}) => ({
+ deleteReaction: () => {
+
+ const reactionSummary = getMyActionSummary(
+ `${capitalize(reaction)}ActionSummary`,
+ ownProps.comment
+ );
+
+ const reactionData = {
+ id: reactionSummary.current_user.id,
+ commentId: ownProps.comment.id
+ };
+
+ return mutate({
+ variables: {id: reactionData.id},
+ optimisticResponse: {
+ deleteAction: {
+ __typename: 'DeleteActionResponse',
+ errors: null
+ }
+ },
+ update: proxy => {
+ const fragmentId = `Comment_${reactionData.commentId}`;
+
+ // Read the data from our cache for this query.
+ const data = proxy.readFragment({
+ fragment: COMMENT_FRAGMENT,
+ id: fragmentId
+ });
+
+ // Check whether we liked this comment.
+ const idx = data.action_summaries.findIndex(isReaction);
+ if (
+ idx < 0 ||
+ get(data.action_summaries[idx], 'current_user.id') !== reactionData.id
+ ) {
+ return;
+ }
+
+ data.action_summaries[idx] = {
+ ...data.action_summaries[idx],
+ count: data.action_summaries[idx].count - 1,
+ current_user: null
+ };
+
+ // Write our data back to the cache.
+ proxy.writeFragment({
+ fragment: COMMENT_FRAGMENT,
+ id: fragmentId,
+ data
+ });
+ }
+ });
+ }
+ })
+ }
+ );
+
+ const withPostReaction = graphql(
+ gql`
+ mutation create${capitalize(reaction)}($${reaction}: Create${capitalize(reaction)}Input!) {
+ create${capitalize(reaction)}(${reaction}: $${reaction}) {
+ ${reaction} {
+ id
+ }
+ errors {
+ translation_key
+ }
+ }
+ }
+ `,
+ {
+ props: ({mutate, ownProps}) => ({
+ postReaction: () => {
+
+ const reactionData = {
+ item_id: ownProps.comment.id,
+ item_type: 'COMMENTS'
+ };
+
+ return mutate({
+ variables: {[reaction]: reactionData},
+ optimisticResponse: {
+ [`create${capitalize(reaction)}`]: {
+ __typename: `Create${capitalize(reaction)}Response`,
+ errors: null,
+ [reaction]: {
+ __typename: `${capitalize(reaction)}Action`,
+ id: uuid()
+ }
+ }
+ },
+ update: (proxy, mutationResult) => {
+ const fragmentId = `Comment_${reactionData.item_id}`;
+
+ // Read the data from our cache for this query.
+ const data = proxy.readFragment({
+ fragment: COMMENT_FRAGMENT,
+ id: fragmentId
+ });
+
+ // Add our comment from the mutation to the end.
+ let idx = data.action_summaries.findIndex(isReaction);
+
+ // Check whether we already reactioned this comment.
+ if (idx >= 0 && data.action_summaries[idx].current_user) {
+ return;
+ }
+
+ if (idx < 0) {
+
+ // Add initial action when it doesn't exist.
+ data.action_summaries.push({
+ __typename: `${capitalize(reaction)}ActionSummary`,
+ count: 0,
+ current_user: null
+ });
+ idx = data.action_summaries.length - 1;
+ }
+
+ data.action_summaries[idx] = {
+ ...data.action_summaries[idx],
+ count: data.action_summaries[idx].count + 1,
+ current_user: mutationResult.data[
+ `create${capitalize(reaction)}`
+ ][reaction]
+ };
+
+ // Write our data back to the cache.
+ proxy.writeFragment({
+ fragment: COMMENT_FRAGMENT,
+ id: fragmentId,
+ data
+ });
+ }
+ });
+ }
+ })
+ }
+ );
+
+ const mapDispatchToProps = dispatch =>
+ bindActionCreators({showSignInDialog}, dispatch);
+
+ const enhance = compose(
+ withFragments({
+ root: gql`
+ fragment ${capitalize(reaction)}Button_root on RootQuery {
+ me {
+ status
+ }
+ }
+ `,
+ comment: gql`
+ fragment ${capitalize(reaction)}Button_comment on Comment {
+ action_summaries {
+ ... on ${capitalize(reaction)}ActionSummary {
+ count
+ current_user {
+ id
+ }
+ }
+ }
+ }`
+ }),
+ connect(null, mapDispatchToProps),
+ withDeleteReaction,
+ withPostReaction
+ );
+
+ WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
+
+ return enhance(WithReactions);
+};
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index 88ead57af..40860fc3a 100644
--- a/client/coral-framework/translations.json
+++ b/client/coral-framework/translations.json
@@ -22,9 +22,21 @@
"comment": "comment",
"comments": "comments",
"commentIsIgnored": "This comment is hidden because you ignored this user.",
+ "editComment": {
+ "bodyInputLabel": "Edit this comment",
+ "saveButton": "Save changes",
+ "editWindowExpired": "You can no longer edit this comment. The time window to do so has expired. Why not post another one?",
+ "editWindowExpiredClose": "Close",
+ "editWindowTimerPrefix": "Edit Window: ",
+ "second": "second",
+ "secondsPlural": "seconds",
+ "unexpectedError": "Unexpected error while saving changes. Sorry!"
+ },
"error": {
+ "editWindowExpired": "You can no longer edit this comment. The time window to do so has expired.",
"emailNotVerified": "Email address {0} not verified.",
"email": "Not a valid E-Mail",
+ "networkError": "Failed to connect to server. Check your internet connection and try again.",
"password": "Password must be at least 8 characters",
"username": "Usernames can contain letters, numbers and _ only",
"confirmPassword": "Passwords don't match. Please, check again",
@@ -61,9 +73,21 @@
"comments": "commentarios",
"commentIsIgnored": "Este comentario está escondido porque has ignorado al usuario.",
"showAllComments": "Mostrar todos los comentarios",
+ "editComment": {
+ "bodyInputLabel": "Editar este comentario",
+ "saveButton": "Guardar cambios",
+ "editWindowExpired": "Ya no puedes editar este comentario. La ventana de tiempo para hacerlo ha caducado. ¿Por qué no publicar otro?",
+ "editWindowExpiredClose": "Cerca",
+ "editWindowTimerPrefix": "Ventana de edición: ",
+ "second": "segundo",
+ "secondsPlural": "segundos",
+ "unexpectedError": "Unexpected error while saving changes. Sorry!"
+ },
"error": {
+ "editWindowExpired": "Ya no puedes editar este comentario. La ventana de tiempo para hacerlo ha caducado.",
"emailNotVerified": "E-mail {0} no verificado.",
"email": "No es un e-mail válido",
+ "networkError": "Error al conectar con el servidor. Compruebe su conexión a Internet y vuelva a intentarlo.",
"password": "La contraseña debe tener por lo menos 8 caracteres",
"username": "Los nombres pueden contener letras, números y _",
"organizationName": "El nombre de la organización debe contener letras y/o números.",
diff --git a/client/coral-plugin-api/index.js b/client/coral-plugin-api/index.js
new file mode 100644
index 000000000..f0f5ad9cc
--- /dev/null
+++ b/client/coral-plugin-api/index.js
@@ -0,0 +1 @@
+export {withReaction} from '../coral-framework/hocs';
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index e19224179..34c08cc57 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -1,28 +1,46 @@
import React, {PropTypes} from 'react';
-import {Button} from 'coral-ui';
-import {connect} from 'react-redux';
import {I18n} from '../coral-framework';
import translations from './translations.json';
import Slot from 'coral-framework/components/Slot';
+import {connect} from 'react-redux';
+import {CommentForm} from './CommentForm';
-const name = 'coral-plugin-commentbox';
+export const name = 'coral-plugin-commentbox';
+// Given a newly posted comment's status, show a notification to the user
+// if needed
+export const notifyForNewCommentStatus = (addNotification, status) => {
+ if (status === 'REJECTED') {
+ addNotification('error', lang.t('comment-post-banned-word'));
+ } else if (status === 'PREMOD') {
+ addNotification('success', lang.t('comment-post-notif-premod'));
+ }
+};
+
+/**
+ * Container for posting a new Comment
+ */
class CommentBox extends React.Component {
-
constructor(props) {
super(props);
this.state = {
username: '',
- body: '',
+
+ // incremented on successful post to clear form
+ postedCount: 0,
hooks: {
preSubmit: [],
postSubmit: []
}
};
}
-
- postComment = () => {
+ static get defaultProps() {
+ return {
+ setCommentCountCache: () => {}
+ };
+ }
+ postComment = ({body}) => {
const {
commentPostedHandler,
postComment,
@@ -37,7 +55,7 @@ class CommentBox extends React.Component {
let comment = {
asset_id: assetId,
parent_id: parentId,
- body: this.state.body,
+ body,
...this.props.commentBox
};
@@ -53,11 +71,11 @@ class CommentBox extends React.Component {
// Execute postSubmit Hooks
this.state.hooks.postSubmit.forEach(hook => hook(data));
+ notifyForNewCommentStatus(addNotification, postedComment.status);
+
if (postedComment.status === 'REJECTED') {
- addNotification('error', lang.t('comment-post-banned-word'));
!isReply && setCommentCountCache(commentCountCache);
} else if (postedComment.status === 'PREMOD') {
- addNotification('success', lang.t('comment-post-notif-premod'));
!isReply && setCommentCountCache(commentCountCache);
}
@@ -69,7 +87,8 @@ class CommentBox extends React.Component {
console.error(err);
!isReply && setCommentCountCache(commentCountCache);
});
- this.setState({body: ''});
+
+ this.setState({postedCount: this.state.postedCount + 1});
}
registerHook = (hookType = '', hook = () => {}) => {
@@ -126,69 +145,39 @@ class CommentBox extends React.Component {
const {styles, isReply, authorId, maxCharCount} = this.props;
let {cancelButtonClicked} = this.props;
- const length = this.state.body.length;
- const enablePostComment = !length || (maxCharCount && length > maxCharCount);
-
if (isReply && typeof cancelButtonClicked !== 'function') {
console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply');
cancelButtonClicked = () => {};
}
return
-
-
- {isReply ? lang.t('reply') : lang.t('comment')}
-
-