);
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 46ac75dca..b7b325cf6 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -26,7 +26,7 @@ class Stream extends React.Component {
render() {
const {
root: {asset, asset: {comments}, comment, myIgnoredUsers},
- postItem,
+ postComment,
addNotification,
postFlag,
postDontAgree,
@@ -84,7 +84,7 @@ class Stream extends React.Component {
{user
?
@@ -196,7 +198,7 @@ class Stream extends React.Component {
Stream.propTypes = {
addNotification: PropTypes.func.isRequired,
- postItem: PropTypes.func.isRequired,
+ postComment: PropTypes.func.isRequired,
// dispatch action to add a tag to a comment
addCommentTag: PropTypes.func,
@@ -205,7 +207,10 @@ Stream.propTypes = {
removeCommentTag: PropTypes.func,
// dispatch action to ignore another user
- ignoreUser: React.PropTypes.func
+ ignoreUser: React.PropTypes.func,
+
+ // edit a comment, passed (id, asset_id, { body })
+ editComment: React.PropTypes.func,
};
export default Stream;
diff --git a/client/coral-embed-stream/src/components/TopRightMenu.css b/client/coral-embed-stream/src/components/TopRightMenu.css
index 5cddae125..0ce8a119b 100644
--- a/client/coral-embed-stream/src/components/TopRightMenu.css
+++ b/client/coral-embed-stream/src/components/TopRightMenu.css
@@ -20,5 +20,4 @@
position: relative;
transform: rotate(180deg);
top: 0;
- /*top: -0.25em;*/
}
diff --git a/client/coral-embed-stream/src/components/util.js b/client/coral-embed-stream/src/components/util.js
new file mode 100644
index 000000000..fe5258853
--- /dev/null
+++ b/client/coral-embed-stream/src/components/util.js
@@ -0,0 +1,10 @@
+/**
+ * Given a comment, return when the comment can no longer be edited
+ * @param {Object} comment
+ * @returns {Date} when the comment can no longer be edited.
+ */
+export const getEditableUntilDate = (comment) => {
+ const editing = comment && comment.editing;
+ const editableUntil = editing && editing.editableUntil && new Date(Date.parse(editing.editableUntil));
+ return editableUntil;
+};
diff --git a/client/coral-embed-stream/src/constants/config.js b/client/coral-embed-stream/src/constants/config.js
new file mode 100644
index 000000000..5821316c5
--- /dev/null
+++ b/client/coral-embed-stream/src/constants/config.js
@@ -0,0 +1 @@
+export const ADD_EXTERNAL_CONFIG = 'ADD_EXTERNAL_CONFIG';
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 9b48e0809..72a12c92e 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -1,6 +1,6 @@
import {gql} from 'react-apollo';
import Comment from '../components/Comment';
-import withFragments from 'coral-framework/hocs/withFragments';
+import {withFragments} from 'coral-framework/hocs';
import {getSlotsFragments} from 'coral-framework/helpers/plugins';
const pluginFragments = getSlotsFragments([
@@ -41,6 +41,10 @@ export default withFragments({
id
}
}
+ editing {
+ edited
+ editableUntil
+ }
${pluginFragments.spreads('comment')}
}
${pluginFragments.definitions('comment')}
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index d5399fc60..995df9001 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {compose, gql, graphql} from 'react-apollo';
+import {compose, gql} from 'react-apollo';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import isEqual from 'lodash/isEqual';
@@ -8,23 +8,21 @@ import renderComponent from 'recompose/renderComponent';
import {Spinner} from 'coral-ui';
import {authActions, assetActions, pym} from 'coral-framework';
-import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils';
+import {getDefinitionName} from 'coral-framework/utils';
+import {withQuery} from 'coral-framework/hocs';
import Embed from '../components/Embed';
-import {setCommentCountCache, viewAllComments} from '../actions/stream';
-import {setActiveTab} from '../actions/embed';
import Stream from './Stream';
+import {setActiveTab} from '../actions/embed';
+import {setCommentCountCache, viewAllComments} from '../actions/stream';
+
const {logout, checkLogin} = authActions;
const {fetchAssetSuccess} = assetActions;
class EmbedContainer extends React.Component {
- componentDidMount() {
- pym.sendMessage('childReady');
- }
-
componentWillReceiveProps(nextProps) {
- if(this.props.root.me && !nextProps.root.me) {
+ if (this.props.root.me && !nextProps.root.me) {
// Refetch because on logout `excludeIgnored` becomes `false`.
// TODO: logout via mutation and obsolete this?
@@ -32,7 +30,7 @@ class EmbedContainer extends React.Component {
}
const {fetchAssetSuccess} = this.props;
- if(!isEqual(nextProps.root.asset, this.props.root.asset)) {
+ if (!isEqual(nextProps.root.asset, this.props.root.asset)) {
// TODO: remove asset data from redux store.
fetchAssetSuccess(nextProps.root.asset);
@@ -47,7 +45,7 @@ class EmbedContainer extends React.Component {
}
componentDidUpdate(prevProps) {
- if(!isEqual(prevProps.root.comment, this.props.root.comment)) {
+ if (!isEqual(prevProps.root.comment, this.props.root.comment)) {
// Scroll to a permalinked comment if one is in the URL once the page is done rendering.
setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
@@ -75,7 +73,7 @@ const EMBED_QUERY = gql`
${Stream.fragments.root}
`;
-export const withQuery = graphql(EMBED_QUERY, {
+export const withEmbedQuery = withQuery(EMBED_QUERY, {
options: ({auth, commentId, assetId, assetUrl}) => ({
variables: {
assetId,
@@ -85,7 +83,6 @@ export const withQuery = graphql(EMBED_QUERY, {
excludeIgnored: Boolean(auth && auth.user && auth.user.id),
},
}),
- props: ({data}) => separateDataAndRoot(data),
});
const mapStateToProps = state => ({
@@ -95,24 +92,25 @@ const mapStateToProps = state => ({
assetId: state.stream.assetId,
assetUrl: state.stream.assetUrl,
activeTab: state.embed.activeTab,
+ config: state.config
});
const mapDispatchToProps = dispatch =>
- bindActionCreators({
- fetchAssetSuccess,
- checkLogin,
- setCommentCountCache,
- viewAllComments,
- logout,
- setActiveTab,
- }, dispatch);
+ bindActionCreators(
+ {
+ logout,
+ checkLogin,
+ setActiveTab,
+ viewAllComments,
+ fetchAssetSuccess,
+ setCommentCountCache
+ },
+ dispatch
+ );
export default compose(
connect(mapStateToProps, mapDispatchToProps),
- branch(
- props => !props.auth.checkedInitialLogin,
- renderComponent(Spinner),
- ),
- withQuery,
+ branch(props => !props.auth.checkedInitialLogin && props.config, renderComponent(Spinner)),
+ withEmbedQuery,
)(EmbedContainer);
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 16714df06..f19cc0a34 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -6,13 +6,17 @@ import uniqBy from 'lodash/uniqBy';
import sortBy from 'lodash/sortBy';
import isNil from 'lodash/isNil';
import {NEW_COMMENT_COUNT_POLL_INTERVAL} from '../constants/stream';
-import {postComment, postFlag, postDontAgree, deleteAction, addCommentTag, removeCommentTag, ignoreUser} from 'coral-framework/graphql/mutations';
+import {
+ withPostComment, withPostFlag, withPostDontAgree, withDeleteAction,
+ withAddCommentTag, withRemoveCommentTag, withIgnoreUser, withEditComment,
+} from 'coral-framework/graphql/mutations';
+
import {notificationActions, authActions} from 'coral-framework';
import {editName} from 'coral-framework/actions/user';
import {setCommentCountCache, setActiveReplyBox} from '../actions/stream';
import Stream from '../components/Stream';
import Comment from './Comment';
-import withFragments from 'coral-framework/hocs/withFragments';
+import {withFragments} from 'coral-framework/hocs';
import {getDefinitionName} from 'coral-framework/utils';
const {showSignInDialog} = authActions;
@@ -236,12 +240,13 @@ const mapDispatchToProps = dispatch =>
export default compose(
withFragments(fragments),
connect(mapStateToProps, mapDispatchToProps),
- postComment,
- postFlag,
- postDontAgree,
- addCommentTag,
- removeCommentTag,
- ignoreUser,
- deleteAction,
+ withPostComment,
+ withPostFlag,
+ withPostDontAgree,
+ withAddCommentTag,
+ withRemoveCommentTag,
+ withIgnoreUser,
+ withDeleteAction,
+ withEditComment,
)(StreamContainer);
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
new file mode 100644
index 000000000..daa8389b3
--- /dev/null
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -0,0 +1,270 @@
+import {gql} from 'react-apollo';
+import {add} from 'coral-framework/services/graphqlRegistry';
+import update from 'immutability-helper';
+
+const extension = {
+ fragments: {
+ EditCommentResponse: gql`
+ fragment CoralEmbedStream_EditCommentResponse on EditCommentResponse {
+ comment {
+ status
+ }
+ errors {
+ translation_key
+ }
+ }
+ `,
+ StopIgnoringUserResponse: gql`
+ fragment CoralEmbedStream_StopIgnoringUserResponse on StopIgnoringUserResponse {
+ errors {
+ translation_key
+ }
+ }
+ `,
+ IgnoreUserResponse: gql`
+ fragment CoralEmbedStream_IgnoreUserResponse on IgnoreUserResponse {
+ errors {
+ translation_key
+ }
+ }
+ `,
+ RemoveCommentTagResponse: gql`
+ fragment CoralEmbedStream_RemoveCommentTagResponse on RemoveCommentTagResponse {
+ comment {
+ id
+ tags {
+ name
+ }
+ }
+ errors {
+ translation_key
+ }
+ }
+ `,
+ AddCommentTagResponse: gql`
+ fragment CoralEmbedStream_AddCommentTagResponse on AddCommentTagResponse {
+ comment {
+ id
+ tags {
+ name
+ }
+ }
+ errors {
+ translation_key
+ }
+ }
+ `,
+ DeleteActionResponse: gql`
+ fragment CoralEmbedStream_DeleteActionResponse on DeleteActionResponse {
+ errors {
+ translation_key
+ }
+ }
+ `,
+ CreateFlagResponse: gql`
+ fragment CoralEmbedStream_CreateFlagResponse on CreateFlagResponse {
+ flag {
+ id
+ }
+ errors {
+ translation_key
+ }
+ }
+ `,
+ CreateDontAgreeResponse : gql`
+ fragment CoralEmbedStream_CreateDontAgreeResponse on CreateDontAgreeResponse {
+ dontagree {
+ id
+ }
+ errors {
+ translation_key
+ }
+ }
+ `,
+ CreateCommentResponse: gql`
+ fragment CoralEmbedStream_CreateCommentResponse on CreateCommentResponse {
+ comment {
+ ...CoralEmbedStream_CreateCommentResponse_Comment
+ replies {
+ ...CoralEmbedStream_CreateCommentResponse_Comment
+ }
+ }
+ errors {
+ translation_key
+ }
+ }
+
+ fragment CoralEmbedStream_CreateCommentResponse_Comment on Comment {
+ id
+ body
+ created_at
+ status
+ replyCount
+ tags {
+ name
+ }
+ user {
+ id
+ name: username
+ }
+ action_summaries {
+ count
+ current_user {
+ id
+ created_at
+ }
+ }
+ editing {
+ edited
+ editableUntil
+ }
+ }
+ `,
+ },
+ mutations: {
+ IgnoreUser: () => ({
+
+ // TODO: don't rely on refetching.
+ refetchQueries: [
+ 'EmbedQuery', 'myIgnoredUsers',
+ ],
+ }),
+ StopIgnoringUser: () => ({
+
+ // TODO: don't rely on refetching.
+ refetchQueries: [
+ 'EmbedQuery', 'myIgnoredUsers',
+ ],
+ }),
+ PostComment: ({
+ variables: {comment: {asset_id, body, parent_id, tags = []}},
+ state: {auth},
+ }) => ({
+ optimisticResponse: {
+ createComment: {
+ comment: {
+ user: {
+ id: auth.toJS().user.id,
+ name: auth.toJS().user.username
+ },
+ created_at: new Date().toISOString(),
+ body,
+ parent_id,
+ asset_id,
+ action_summaries: [],
+ tags,
+ status: null,
+ id: 'pending'
+ }
+ }
+ },
+ updateQueries: {
+ EmbedQuery: (previousData, {mutationResult: {data: {createComment: {comment}}}}) => {
+ if (previousData.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED') {
+ return previousData;
+ }
+
+ let updatedAsset;
+
+ // If posting a reply
+ if (parent_id) {
+ updatedAsset = {
+ ...previousData,
+ asset: {
+ ...previousData.asset,
+ comments: previousData.asset.comments.map((oldComment) => {
+ return oldComment.id === parent_id
+ ? {...oldComment, replies: [...oldComment.replies, comment], replyCount: oldComment.replyCount + 1}
+ : oldComment;
+ })
+ }
+ };
+ } else {
+
+ // If posting a top-level comment
+ updatedAsset = {
+ ...previousData,
+ asset: {
+ ...previousData.asset,
+ commentCount: previousData.asset.commentCount + 1,
+ comments: [comment, ...previousData.asset.comments]
+ }
+ };
+ }
+
+ return updatedAsset;
+ }
+ }
+ }),
+ EditComment: ({
+ variables: {id, edit},
+ }) => ({
+ updateQueries: {
+ EmbedQuery: (previousData, {mutationResult: {data: {editComment: {comment: {status}}}}}) => {
+ const updateCommentWithEdit = (comment, edit) => {
+ const {body} = edit;
+ const editedComment = update(comment, {
+ $merge: {
+ body
+ },
+ editing: {$merge:{edited:true}}
+ });
+ return editedComment;
+ };
+ const commentIsStillVisible = (comment) => {
+ return ! ((id === comment.id) && (['PREMOD', 'REJECTED'].includes(status)));
+ };
+ const resultReflectingEdit = update(previousData, {
+ asset: {
+ comments: {
+ $apply: comments => {
+ return comments.filter(commentIsStillVisible).map(comment => {
+ let replyWasEditedToBeHidden = false;
+ if (comment.id === id) {
+ return updateCommentWithEdit(comment, edit);
+ }
+ const commentWithUpdatedReplies = update(comment, {
+ replies: {
+ $apply: (comments) => {
+ return comments
+ .filter(c => {
+ if (commentIsStillVisible(c)) {
+ return true;
+ }
+ replyWasEditedToBeHidden = true;
+ return false;
+ })
+ .map(comment => {
+ if (comment.id === id) {
+ return updateCommentWithEdit(comment, edit);
+ }
+ return comment;
+ });
+ }
+ },
+ });
+
+ // If a reply was edited to be hdiden, then this parent needs its replyCount to be decremented.
+ if (replyWasEditedToBeHidden) {
+ return update(commentWithUpdatedReplies, {
+ replyCount: {
+ $apply: (replyCount) => {
+ return replyCount - 1;
+ }
+ }
+ });
+ }
+ return commentWithUpdatedReplies;
+ });
+ }
+ }
+ }
+ });
+ return resultReflectingEdit;
+ },
+ },
+ }),
+ },
+};
+
+add(extension);
diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index 2fd1e2731..0362f5644 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/client/coral-embed-stream/src/index.js
@@ -4,10 +4,13 @@ import {ApolloProvider} from 'react-apollo';
import {client} from 'coral-framework/services/client';
import {checkLogin} from 'coral-framework/actions/auth';
+import './graphql';
+import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
import reducers from './reducers';
import localStore, {injectReducers} from 'coral-framework/services/store';
import AppRouter from './AppRouter';
+import {pym} from 'coral-framework';
injectReducers(reducers);
@@ -16,6 +19,12 @@ const store = (window.opener && window.opener.coralStore) ? window.opener.coralS
// Don't run this in the popup.
if (store === localStore) {
store.dispatch(checkLogin());
+
+ pym.sendMessage('getConfig');
+
+ pym.onMessage('config', config => {
+ store.dispatch(addExternalConfig(JSON.parse(config)));
+ });
}
render(
diff --git a/client/coral-embed-stream/src/reducers/config.js b/client/coral-embed-stream/src/reducers/config.js
new file mode 100644
index 000000000..a602e7f59
--- /dev/null
+++ b/client/coral-embed-stream/src/reducers/config.js
@@ -0,0 +1,15 @@
+import {ADD_EXTERNAL_CONFIG} from '../constants/config';
+
+const initialState = {};
+
+export default function config(state = initialState, action) {
+ switch (action.type) {
+ case ADD_EXTERNAL_CONFIG:
+ return {
+ ...state,
+ ...action.config
+ };
+ default:
+ return state;
+ }
+}
diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js
index a9049fc14..590b87eea 100644
--- a/client/coral-embed-stream/src/reducers/index.js
+++ b/client/coral-embed-stream/src/reducers/index.js
@@ -1,7 +1,9 @@
-import stream from './stream';
import embed from './embed';
+import config from './config';
+import stream from './stream';
export default {
- stream,
embed,
+ stream,
+ config
};
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index d1afed204..42a0d7c85 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -191,12 +191,13 @@ hr {
}
.coral-plugin-commentbox-textarea {
+ color: #262626;
flex: 1;
- padding: 5px;
+ padding: 1em;
min-height: 100px;
margin-top: 10px;
font-size: 16px;
- border: 1px solid #ccc;
+ border: 1px solid #9E9E9E;
}
.coral-plugin-commentbox-button-container {
@@ -317,9 +318,7 @@ button.comment__action-button[disabled],
}
.coral-plugin-pubdate-text {
- color: #696969;
display: inline-block;
- font-size: .75rem;
margin-left: 5px;
}
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 950fa91bc..570a63aed 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -22,18 +22,18 @@ const snackbarStyles = {
transform: 'translate(-50%, 20px)',
bottom: 0,
boxSizing: 'border-box',
- fontFamily: 'Helvetica, \'Helvetica Neue\', Verdana, sans-serif'
+ fontFamily: 'Helvetica, "Helvetica Neue", Verdana, sans-serif'
};
// This function should return value of window.Coral
const Coral = {};
-const Talk = Coral.Talk = {};
+const Talk = (Coral.Talk = {});
// build the URL to load in the pym iframe
function buildStreamIframeUrl(talkBaseUrl, query) {
let url = [
talkBaseUrl,
- (talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/'
+ talkBaseUrl.match(/\/$/) ? '' : '/', // make sure no double-'/' if opts.talk already ends with '/'
'embed/stream?'
].join('');
@@ -44,11 +44,21 @@ function buildStreamIframeUrl(talkBaseUrl, query) {
// Set up postMessage listeners/handlers on the pymParent
// e.g. to resize the iframe, and navigate the host page
-function configurePymParent(pymParent) {
+function configurePymParent(pymParent, opts) {
let notificationOffset = 200;
- let ready = false;
let cachedHeight;
const snackbar = document.createElement('div');
+
+ // Sends config to pymChild
+ function sendConfig(config) {
+ pymParent.sendMessage('config', JSON.stringify(config));
+ }
+
+ // Sends config to the child
+ pymParent.onMessage('getConfig', function() {
+ sendConfig(opts || {});
+ });
+
snackbar.id = 'coral-notif';
for (let key in snackbarStyles) {
@@ -69,12 +79,12 @@ function configurePymParent(pymParent) {
}
});
- pymParent.onMessage('coral-clear-notification', function () {
+ pymParent.onMessage('coral-clear-notification', function() {
snackbar.style.opacity = 0;
});
// remove the permalink comment id from the hash
- pymParent.onMessage('coral-view-all-comments', function () {
+ pymParent.onMessage('coral-view-all-comments', function() {
window.history.replaceState(
{},
document.title,
@@ -82,7 +92,7 @@ function configurePymParent(pymParent) {
);
});
- pymParent.onMessage('coral-alert', function (message) {
+ pymParent.onMessage('coral-alert', function(message) {
const [type, text] = message.split('|');
snackbar.style.transform = 'translate(-50%, 20px)';
snackbar.style.opacity = 0;
@@ -110,39 +120,21 @@ function configurePymParent(pymParent) {
pymParent.sendMessage('position', position);
});
- // Tell child when parent's DOMContentLoaded
- pymParent.onMessage('childReady', function () {
- const interval = setInterval(function () {
- if (ready) {
- window.clearInterval(interval);
-
- // TODO: It's weird to me that this is sent here
- pymParent.sendMessage('DOMContentLoaded');
- }
- }, 100);
- });
-
// When end-user clicks link in iframe, open it in parent context
- pymParent.onMessage('navigate', function (url) {
+ pymParent.onMessage('navigate', function(url) {
window.open(url, '_blank').focus();
});
- // wait till images and other iframes are loaded before scrolling the page.
- // or do we want to be more aggressive and scroll when we hit DOM ready?
- document.addEventListener('DOMContentLoaded', function () {
- ready = true;
- });
-
// get dimensions of viewport
const viewport = () => {
let e = window, a = 'inner';
- if ( !( 'innerWidth' in window ) ){
+ if (!('innerWidth' in window)) {
a = 'client';
e = document.documentElement || document.body;
}
return {
- width : e[`${a}Width`],
- height : e[`${a}Height`]
+ width: e[`${a}Width`],
+ height: e[`${a}Height`]
};
};
}
@@ -156,18 +148,24 @@ function configurePymParent(pymParent) {
* @param {String} [opts.asset_url] - Asset URL
* @param {String} [opts.asset_id] - Asset ID
*/
-Talk.render = function (el, opts) {
+Talk.render = function(el, opts) {
if (!el) {
- throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
+ throw new Error(
+ 'Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.'
+ );
}
if (typeof el !== 'object') {
- throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
+ throw new Error(
+ `Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`
+ );
}
opts = opts || {};
// TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
if (!opts.talk) {
- throw new Error('Coral.Talk.render() expects opts.talk as the Talk Base URL');
+ throw new Error(
+ 'Coral.Talk.render() expects opts.talk as the Talk Base URL'
+ );
}
// Ensure el has an id, as pym can't directly accept the HTMLElement.
@@ -186,16 +184,21 @@ Talk.render = function (el, opts) {
try {
query.asset_url = document.querySelector('link[rel="canonical"]').href;
} catch (e) {
- console.warn('This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.');
+ console.warn(
+ 'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
+ );
query.asset_url = window.location.origin + window.location.pathname;
}
}
- configurePymParent(new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
- title: opts.title,
- id: `${el.id}_iframe`,
- name: `${el.id}_iframe`
- }));
+ configurePymParent(
+ new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
+ title: opts.title,
+ id: `${el.id}_iframe`,
+ name: `${el.id}_iframe`
+ }),
+ opts
+ );
};
export default Coral;
diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index a27231cb6..98c87845f 100644
--- a/client/coral-framework/actions/auth.js
+++ b/client/coral-framework/actions/auth.js
@@ -4,6 +4,7 @@ import * as Storage from '../helpers/storage';
import * as actions from '../constants/auth';
import coralApi, {base} from '../helpers/response';
import client from 'coral-framework/services/client';
+import jwtDecode from 'jwt-decode';
const lang = new I18n(translations);
import translations from './../translations';
@@ -108,14 +109,14 @@ export const changeView = view => dispatch => {
});
switch (view) {
- case 'SIGNUP':
- window.resizeTo(500, 800);
- break;
- case 'FORGOT':
- window.resizeTo(500, 400);
- break;
- default:
- window.resizeTo(500, 550);
+ case 'SIGNUP':
+ window.resizeTo(500, 800);
+ break;
+ case 'FORGOT':
+ window.resizeTo(500, 400);
+ break;
+ default:
+ window.resizeTo(500, 550);
}
};
@@ -138,7 +139,8 @@ const signInFailure = error => ({
// AUTH TOKEN
//==============================================================================
-const handleAuthToken = token => dispatch => {
+export const handleAuthToken = token => dispatch => {
+ Storage.setItem('exp', jwtDecode(token).exp);
Storage.setItem('token', token);
dispatch({type: 'HANDLE_AUTH_TOKEN'});
};
@@ -156,11 +158,13 @@ export const fetchSignIn = formData => dispatch => {
})
.catch(error => {
if (error.metadata) {
+
// the user might not have a valid email. prompt the user user re-request the confirmation email
dispatch(
signInFailure(lang.t('error.emailNotVerified', error.metadata))
);
} else {
+
// invalid credentials
dispatch(signInFailure(lang.t('error.emailPasswordError')));
}
@@ -288,8 +292,12 @@ export const fetchForgotPassword = email => dispatch => {
//==============================================================================
export const logout = () => dispatch => {
- Storage.clear();
- dispatch({type: actions.LOGOUT});
+ return coralApi('/auth', {method: 'DELETE'})
+ .then(() => {
+ dispatch({type: actions.LOGOUT});
+ Storage.removeItem('token');
+ fetchMe();
+ });
};
//==============================================================================
@@ -310,6 +318,7 @@ export const checkLogin = () => dispatch => {
coralApi('/auth')
.then(result => {
if (!result.user) {
+ Storage.removeItem('token');
throw new Error('Not logged in');
}
@@ -321,6 +330,7 @@ export const checkLogin = () => dispatch => {
dispatch(checkLoginFailure(`${error.translation_key}`));
});
};
+
export const validForm = () => ({type: actions.VALID_FORM});
export const invalidForm = error => ({type: actions.INVALID_FORM, error});
@@ -351,6 +361,7 @@ export const requestConfirmEmail = (email, redirectUri) => dispatch => {
dispatch(verifyEmailSuccess());
})
.catch(err => {
+
// email might have already been verifyed
dispatch(verifyEmailFailure(err));
});
diff --git a/client/coral-framework/components/Slot.css b/client/coral-framework/components/Slot.css
index 6048da181..6a95d79ad 100644
--- a/client/coral-framework/components/Slot.css
+++ b/client/coral-framework/components/Slot.css
@@ -1,3 +1,7 @@
.inline {
display: inline-block;
}
+
+.debug {
+ background-color: coral;
+}
\ No newline at end of file
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index 8e2dd9502..939068e83 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -1,12 +1,13 @@
import React from 'react';
import cn from 'classnames';
import styles from './Slot.css';
+import {connect} from 'react-redux';
import {getSlotElements} from 'coral-framework/helpers/plugins';
-export default function Slot ({fill, inline = false, ...rest}) {
+function Slot ({fill, inline = false, plugin_config: config, ...rest}) {
return (
-
- {getSlotElements(fill, rest)}
+
+ {getSlotElements(fill, {...rest, config})}
);
}
@@ -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/fragments.js b/client/coral-framework/graphql/fragments.js
new file mode 100644
index 000000000..f4948ed05
--- /dev/null
+++ b/client/coral-framework/graphql/fragments.js
@@ -0,0 +1,2 @@
+// fragments defined here are automatically registered.
+export default {};
diff --git a/client/coral-framework/graphql/fragments/actionSummaryView.graphql b/client/coral-framework/graphql/fragments/actionSummaryView.graphql
deleted file mode 100644
index 4ac232bf6..000000000
--- a/client/coral-framework/graphql/fragments/actionSummaryView.graphql
+++ /dev/null
@@ -1,8 +0,0 @@
-fragment actionSummaryView on ActionSummary {
- __typename
- count
- current_user {
- id
- created_at
- }
-}
diff --git a/client/coral-framework/graphql/fragments/commentView.graphql b/client/coral-framework/graphql/fragments/commentView.graphql
deleted file mode 100644
index 0ed5e00b8..000000000
--- a/client/coral-framework/graphql/fragments/commentView.graphql
+++ /dev/null
@@ -1,18 +0,0 @@
-#import "../fragments/actionSummaryView.graphql"
-
-fragment commentView on Comment {
- id
- body
- created_at
- status
- tags {
- name
- }
- user {
- id
- name: username
- }
- action_summaries {
- ...actionSummaryView
- }
-}
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
new file mode 100644
index 000000000..66e68be97
--- /dev/null
+++ b/client/coral-framework/graphql/mutations.js
@@ -0,0 +1,171 @@
+import {gql} from 'react-apollo';
+import withMutation from '../hocs/withMutation';
+
+export const withPostComment = withMutation(
+ gql`
+ mutation PostComment($comment: CreateCommentInput!) {
+ createComment(comment: $comment) {
+ ...CreateCommentResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ postComment: comment => {
+ return mutate({
+ variables: {
+ comment
+ },
+ });
+ }
+ }),
+ });
+
+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!) {
+ createFlag(flag: $flag) {
+ ...CreateFlagResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ postFlag: (flag) => {
+ return mutate({
+ variables: {
+ flag
+ }
+ });
+ }}),
+ });
+
+export const withPostDontAgree = withMutation(
+ gql`
+ mutation CreateDontAgree($dontagree: CreateDontAgreeInput!) {
+ createDontAgree(dontagree: $dontagree) {
+ ...CreateDontAgreeResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ postDontAgree: (dontagree) => {
+ return mutate({
+ variables: {
+ dontagree
+ }
+ });
+ }}),
+ });
+
+export const withDeleteAction = withMutation(
+ gql`
+ mutation DeleteAction($id: ID!) {
+ deleteAction(id:$id) {
+ ...DeleteActionResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ deleteAction: (id) => {
+ return mutate({
+ variables: {
+ id
+ }
+ });
+ }}),
+ });
+
+export const withAddCommentTag = withMutation(
+ gql`
+ mutation AddCommentTag($id: ID!, $tag: String!) {
+ addCommentTag(id:$id, tag:$tag) {
+ ...AddCommentTagResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ addCommentTag: ({id, tag}) => {
+ return mutate({
+ variables: {
+ id,
+ tag
+ }
+ });
+ }}),
+ });
+
+export const withRemoveCommentTag = withMutation(
+ gql`
+ mutation RemoveCommentTag($id: ID!, $tag: String!) {
+ removeCommentTag(id:$id, tag:$tag) {
+ ...RemoveCommentTagResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ removeCommentTag: ({id, tag}) => {
+ return mutate({
+ variables: {
+ id,
+ tag
+ }
+ });
+ }}),
+ });
+
+export const withIgnoreUser = withMutation(
+ gql`
+ mutation IgnoreUser($id: ID!) {
+ ignoreUser(id:$id) {
+ ...IgnoreUserResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ ignoreUser: ({id}) => {
+ return mutate({
+ variables: {
+ id,
+ },
+ });
+ }}),
+ });
+
+export const withStopIgnoringUser = withMutation(
+ gql`
+ mutation StopIgnoringUser($id: ID!) {
+ stopIgnoringUser(id:$id) {
+ ...StopIgnoringUserResponse
+ }
+ }
+ `, {
+ props: ({mutate}) => ({
+ stopIgnoringUser: ({id}) => {
+ return mutate({
+ variables: {
+ id,
+ },
+ });
+ }}),
+ });
+
diff --git a/client/coral-framework/graphql/mutations/addCommentTag.graphql b/client/coral-framework/graphql/mutations/addCommentTag.graphql
deleted file mode 100644
index 5fd63868e..000000000
--- a/client/coral-framework/graphql/mutations/addCommentTag.graphql
+++ /dev/null
@@ -1,13 +0,0 @@
-mutation AddCommentTag ($id: ID!, $tag: String!) {
- addCommentTag(id:$id, tag:$tag) {
- comment {
- id
- tags {
- name
- }
- }
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/deleteAction.graphql b/client/coral-framework/graphql/mutations/deleteAction.graphql
deleted file mode 100644
index f8adf371c..000000000
--- a/client/coral-framework/graphql/mutations/deleteAction.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-mutation deleteAction ($id: ID!) {
- deleteAction(id:$id) {
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/ignoreUser.graphql b/client/coral-framework/graphql/mutations/ignoreUser.graphql
deleted file mode 100644
index ad3c399f3..000000000
--- a/client/coral-framework/graphql/mutations/ignoreUser.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-mutation ignoreUser ($id: ID!) {
- ignoreUser(id:$id) {
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
deleted file mode 100644
index bdd7fd1a1..000000000
--- a/client/coral-framework/graphql/mutations/index.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import {graphql} from 'react-apollo';
-import POST_COMMENT from './postComment.graphql';
-import POST_FLAG from './postFlag.graphql';
-import POST_DONT_AGREE from './postDontAgree.graphql';
-import DELETE_ACTION from './deleteAction.graphql';
-import ADD_COMMENT_TAG from './addCommentTag.graphql';
-import REMOVE_COMMENT_TAG from './removeCommentTag.graphql';
-import IGNORE_USER from './ignoreUser.graphql';
-import STOP_IGNORING_USER from './stopIgnoringUser.graphql';
-
-import commentView from '../fragments/commentView.graphql';
-
-export const postComment = graphql(POST_COMMENT, {
- options: () => ({
- fragments: commentView
- }),
- props: ({ownProps, mutate}) => ({
- postItem: comment => {
- const {asset_id, body, parent_id, tags = []} = comment;
- return mutate({
- variables: {
- comment
- },
- optimisticResponse: {
- createComment: {
- comment: {
- user: {
- id: ownProps.auth.user.id,
- name: ownProps.auth.user.username
- },
- created_at: new Date().toISOString(),
- body,
- parent_id,
- asset_id,
- action_summaries: [],
- tags,
- status: null,
- id: 'pending'
- }
- }
- },
- updateQueries: {
- EmbedQuery: (oldData, {mutationResult: {data: {createComment: {comment}}}}) => {
-
- if (oldData.asset.settings.moderation === 'PRE' || comment.status === 'PREMOD' || comment.status === 'REJECTED') {
- return oldData;
- }
-
- let updatedAsset;
-
- // If posting a reply
- if (parent_id) {
- updatedAsset = {
- ...oldData,
- asset: {
- ...oldData.asset,
- comments: oldData.asset.comments.map((oldComment) => {
- return oldComment.id === parent_id
- ? {...oldComment, replies: [...oldComment.replies, comment], replyCount: oldComment.replyCount + 1}
- : oldComment;
- })
- }
- };
- } else {
-
- // If posting a top-level comment
- updatedAsset = {
- ...oldData,
- asset: {
- ...oldData.asset,
- commentCount: oldData.asset.commentCount + 1,
- comments: [comment, ...oldData.asset.comments]
- }
- };
- }
-
- return updatedAsset;
- }
- }
- });
- }
- }),
-});
-
-export const postFlag = graphql(POST_FLAG, {
- props: ({mutate}) => ({
- postFlag: (flag) => {
- return mutate({
- variables: {
- flag
- }
- });
- }}),
-});
-
-export const postDontAgree = graphql(POST_DONT_AGREE, {
- props: ({mutate}) => ({
- postDontAgree: (dontagree) => {
- return mutate({
- variables: {
- dontagree
- }
- });
- }}),
-});
-
-export const deleteAction = graphql(DELETE_ACTION, {
- props: ({mutate}) => ({
- deleteAction: (id) => {
- return mutate({
- variables: {
- id
- }
- });
- }}),
-});
-
-export const addCommentTag = graphql(ADD_COMMENT_TAG, {
- props: ({mutate}) => ({
- addCommentTag: ({id, tag}) => {
- return mutate({
- variables: {
- id,
- tag
- }
- });
- }}),
-});
-
-export const removeCommentTag = graphql(REMOVE_COMMENT_TAG, {
- props: ({mutate}) => ({
- removeCommentTag: ({id, tag}) => {
- return mutate({
- variables: {
- id,
- tag
- }
- });
- }}),
-});
-
-// TODO: don't rely on refetching.
-export const ignoreUser = graphql(IGNORE_USER, {
- props: ({mutate}) => ({
- ignoreUser: ({id}) => {
- return mutate({
- variables: {
- id,
- },
- refetchQueries: [
- 'EmbedQuery', 'myIgnoredUsers',
- ]
- });
- }}),
-});
-
-// TODO: don't rely on refetching.
-export const stopIgnoringUser = graphql(STOP_IGNORING_USER, {
- props: ({mutate}) => {
- return {
- stopIgnoringUser: ({id}) => {
- return mutate({
- variables: {
- id,
- },
- refetchQueries: [
- 'EmbedQuery', 'myIgnoredUsers',
- ]
- });
- }
- };
- }
-});
diff --git a/client/coral-framework/graphql/mutations/postComment.graphql b/client/coral-framework/graphql/mutations/postComment.graphql
deleted file mode 100644
index f98558804..000000000
--- a/client/coral-framework/graphql/mutations/postComment.graphql
+++ /dev/null
@@ -1,16 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-mutation CreateComment ($comment: CreateCommentInput!) {
- createComment(comment: $comment) {
- comment {
- ...commentView
- replyCount
- replies {
- ...commentView
- }
- }
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/postDontAgree.graphql b/client/coral-framework/graphql/mutations/postDontAgree.graphql
deleted file mode 100644
index 6e36d48b8..000000000
--- a/client/coral-framework/graphql/mutations/postDontAgree.graphql
+++ /dev/null
@@ -1,10 +0,0 @@
-mutation CreateDontAgree($dontagree: CreateDontAgreeInput!) {
- createDontAgree(dontagree:$dontagree) {
- dontagree {
- id
- }
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/postFlag.graphql b/client/coral-framework/graphql/mutations/postFlag.graphql
deleted file mode 100644
index cabc2feef..000000000
--- a/client/coral-framework/graphql/mutations/postFlag.graphql
+++ /dev/null
@@ -1,10 +0,0 @@
-mutation CreateFlag($flag: CreateFlagInput!) {
- createFlag(flag:$flag) {
- flag {
- id
- }
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/removeCommentTag.graphql b/client/coral-framework/graphql/mutations/removeCommentTag.graphql
deleted file mode 100644
index 3826b0703..000000000
--- a/client/coral-framework/graphql/mutations/removeCommentTag.graphql
+++ /dev/null
@@ -1,13 +0,0 @@
-mutation RemoveCommentTag ($id: ID!, $tag: String!) {
- removeCommentTag(id:$id, tag:$tag) {
- comment {
- id
- tags {
- name
- }
- }
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/mutations/stopIgnoringUser.graphql b/client/coral-framework/graphql/mutations/stopIgnoringUser.graphql
deleted file mode 100644
index 042452ff5..000000000
--- a/client/coral-framework/graphql/mutations/stopIgnoringUser.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-mutation stopIgnoringUser ($id: ID!) {
- stopIgnoringUser(id:$id) {
- errors {
- translation_key
- }
- }
-}
diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
deleted file mode 100644
index d76614a68..000000000
--- a/client/coral-framework/graphql/queries/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {graphql} from 'react-apollo';
-import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
-import MY_IGNORED_USERS from './myIgnoredUsers.graphql';
-
-export const myCommentHistory = graphql(MY_COMMENT_HISTORY, {});
-
-export const myIgnoredUsers = graphql(MY_IGNORED_USERS, {
- props: ({data}) => {
- return ({
- myIgnoredUsersData: data
- });
- }
-});
diff --git a/client/coral-framework/graphql/queries/myCommentHistory.graphql b/client/coral-framework/graphql/queries/myCommentHistory.graphql
deleted file mode 100644
index 0b37b192a..000000000
--- a/client/coral-framework/graphql/queries/myCommentHistory.graphql
+++ /dev/null
@@ -1,14 +0,0 @@
-query myCommentHistory {
- me {
- comments {
- id
- body
- asset {
- id
- title
- url
- }
- created_at
- }
- }
-}
diff --git a/client/coral-framework/graphql/queries/myIgnoredUsers.graphql b/client/coral-framework/graphql/queries/myIgnoredUsers.graphql
deleted file mode 100644
index d81531e37..000000000
--- a/client/coral-framework/graphql/queries/myIgnoredUsers.graphql
+++ /dev/null
@@ -1,6 +0,0 @@
-query myIgnoredUsers {
- myIgnoredUsers {
- id,
- username,
- }
-}
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 20aee7abb..bde7f9d68 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -3,9 +3,9 @@ import merge from 'lodash/merge';
import flatten from 'lodash/flatten';
import flattenDeep from 'lodash/flattenDeep';
import uniq from 'lodash/uniq';
+import pick from 'lodash/pick';
import plugins from 'pluginsConfig';
-import {gql} from 'react-apollo';
-import {getDefinitionName} from 'coral-framework/utils';
+import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
export const pluginReducers = merge(
...plugins
@@ -21,23 +21,32 @@ 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) {
- return components
+ const res = components
.map(c => c.fragments)
.filter(fragments => fragments)
.reduce((res, fragments) => {
Object.keys(fragments).forEach(key => {
if (!(key in res)) {
- res[key] = {spreads: '', definitions: ''};
+ res[key] = {spreads: [], definitions: []};
}
- res[key].spreads += `...${getDefinitionName(fragments[key])}\n`;
- res[key].definitions = gql`${res[key].definitions}${fragments[key]}`;
+ res[key].spreads.push(getDefinitionName(fragments[key]));
+ res[key].definitions.push(fragments[key]);
});
return res;
}, {});
+
+ Object.keys(res).forEach(key => {
+
+ // Assemble arguments for `gql` to call it directly without using template literals.
+ res[key].spreads = `...${res[key].spreads.join('\n...')}\n`;
+ res[key].definitions = mergeDocuments(res[key].definitions);
+ });
+
+ return res;
}
/**
@@ -73,3 +82,9 @@ export function getSlotsFragments(slots) {
};
}
+export function getGraphQLExtensions() {
+ return plugins
+ .map(o => pick(o.module, ['mutations', 'queries', 'fragments']))
+ .filter(o => o);
+}
+
diff --git a/client/coral-framework/helpers/storage.js b/client/coral-framework/helpers/storage.js
index aea85bdeb..fa20fa168 100644
--- a/client/coral-framework/helpers/storage.js
+++ b/client/coral-framework/helpers/storage.js
@@ -1,8 +1,8 @@
let available, error;
function storageAvailable(type) {
+ let storage = window[type], x = '__storage_test__';
try {
- let storage = window[type], x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
@@ -14,17 +14,17 @@ function storageAvailable(type) {
// everything except Firefox
(e.code === 22 ||
- // Firefox
+ // Firefox
- e.code === 1014 ||
+ e.code === 1014 ||
- // test name field too, because code might not be present
+ // test name field too, because code might not be present
- // everything except Firefox
- e.name === 'QuotaExceededError' ||
+ // everything except Firefox
+ e.name === 'QuotaExceededError' ||
- // Firefox
- e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+ // Firefox
+ e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0
@@ -32,34 +32,62 @@ function storageAvailable(type) {
}
}
-export function getItem(item = '') {
+function lazyCheckStorage() {
if (typeof available === 'undefined') {
available = storageAvailable('localStorage');
}
+}
+
+export function getItem(item = '') {
+ lazyCheckStorage();
if (available) {
return localStorage.getItem(item);
} else {
- console.error(`Cannot get from localStorage. localStorage is not available. ${error}`);
+ console.error(
+ `Cannot get from localStorage. localStorage is not available. ${error}`
+ );
}
}
export function setItem(item = '', value) {
- if (typeof available === 'undefined') {
- available = storageAvailable('localStorage');
- }
+ lazyCheckStorage();
if (available) {
return localStorage.setItem(item, value);
} else {
- console.error(`Cannot set localStorage. localStorage is not available. ${error}`);
+ console.error(
+ `Cannot set localStorage. localStorage is not available. ${error}`
+ );
+ }
+}
+
+export function removeItem(item = '') {
+ lazyCheckStorage();
+
+ if (available) {
+ return localStorage.removeItem(item);
+ } else {
+ console.error(
+ `Cannot remove item from localStorage. localStorage is not available. ${error}`
+ );
}
}
export function clear() {
+ lazyCheckStorage();
+
if (available) {
return localStorage.clear();
} else {
- console.error(`Cannot clear localStorage. localStorage is not available. ${error}`);
+ console.error(
+ `Cannot clear localStorage. localStorage is not available. ${error}`
+ );
}
}
+
+// Enable this to debug WEB Storage events
+// window.addEventListener('storage', function(e) {
+// const msg = `${e.key} " was changed in page ${e.url} from ${e.oldValue} to ${e.newValue}`;
+// console.log(msg);
+// });
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
new file mode 100644
index 000000000..ef4c2ac74
--- /dev/null
+++ b/client/coral-framework/hocs/index.js
@@ -0,0 +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 a2686d94b..a5060f27a 100644
--- a/client/coral-framework/hocs/withFragments.js
+++ b/client/coral-framework/hocs/withFragments.js
@@ -1,11 +1,7 @@
import React from 'react';
+import {getDisplayName} from '../helpers/hoc';
// TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
-
-function getDisplayName(WrappedComponent) {
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
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
new file mode 100644
index 000000000..c08a53614
--- /dev/null
+++ b/client/coral-framework/hocs/withMutation.js
@@ -0,0 +1,96 @@
+import * as React from 'react';
+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/graphqlRegistry';
+import {store} from 'coral-framework/services/store';
+import {getDefinitionName} from '../utils';
+
+/**
+ * Exports a HOC with the same signature as `graphql`, that will
+ * apply mutation options registered in the graphRegistry.
+ */
+export default (document, config) => WrappedComponent => {
+ config = {
+ ...config,
+ options: config.options || {},
+ props: config.props || (data => ({mutate: data.mutate()})),
+ };
+ const wrappedProps = (data) => {
+ const name = getDefinitionName(document);
+ const callbacks = getMutationOptions(name);
+ const mutate = (base) => {
+ const variables = base.variables || config.options.variables;
+ const configs = callbacks.map(cb => cb({variables, state: store.getState()}));
+
+ const optimisticResponse = merge(
+ base.optimisticResponse || config.options.optimisticResponse,
+ ...configs.map(cfg => cfg.optimisticResponse),
+ );
+
+ const refetchQueries = flatten(uniq([
+ base.refetchQueries || config.options.refetchQueries,
+ ...configs.map(cfg => cfg.refetchQueries),
+ ].filter(i => i)));
+
+ const updateCallbacks =
+ [base.update || config.options.update]
+ .concat(...configs.map(cfg => cfg.update))
+ .filter(i => i);
+
+ const update = (proxy, result) => {
+ updateCallbacks.forEach(cb => cb(proxy, result));
+ };
+
+ const updateQueries =
+ [
+ base.updateQueries || config.options.updateQueries,
+ ...configs.map(cfg => cfg.updateQueries)
+ ]
+ .filter(i => i)
+ .reduce((res, map) => {
+ Object.keys(map).forEach(key => {
+ if (!(key in res)) {
+ res[key] = map[key];
+ } else {
+ const existing = res[key];
+ res[key] = (prev, result) => {
+ const next = existing(prev, result);
+ return map[key](next, result);
+ };
+ }
+ });
+ return res;
+ }, {});
+
+ const wrappedConfig = {
+ variables,
+ optimisticResponse,
+ refetchQueries,
+ updateQueries,
+ update,
+ };
+ if (isEmpty(wrappedConfig.optimisticResponse)) {
+ delete wrappedConfig.optimisticResponse;
+ }
+ return data.mutate(wrappedConfig);
+ };
+ return config.props({...data, mutate});
+ };
+
+ // Lazily resolve fragments from graphRegistry to support circular dependencies.
+ let memoized = null;
+ const getWrapped = () => {
+ if (!memoized) {
+ memoized = graphql(resolveFragments(document), {...config, props: wrappedProps})(WrappedComponent);
+ }
+ return memoized;
+ };
+
+ return (props) => {
+ const Wrapped = getWrapped();
+ return
;
+ };
+};
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
new file mode 100644
index 000000000..a29d25241
--- /dev/null
+++ b/client/coral-framework/hocs/withQuery.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {graphql} from 'react-apollo';
+import {getQueryOptions, resolveFragments} from 'coral-framework/services/graphqlRegistry';
+import {getDefinitionName, separateDataAndRoot} from '../utils';
+
+/**
+ * Exports a HOC with the same signature as `graphql`, that will
+ * apply query options registered in the graphRegistry.
+ */
+export default (document, config) => WrappedComponent => {
+ config = {
+ ...config,
+ options: config.options || {},
+ props: config.props || (({data}) => separateDataAndRoot(data)),
+ };
+
+ const wrappedOptions = (data) => {
+ const base = (typeof config.options === 'function') ? config.options(data) : config.options;
+ const name = getDefinitionName(document);
+ const configs = getQueryOptions(name);
+ const reducerCallbacks =
+ [base.reducer || (i => i)]
+ .concat(...configs.map(cfg => cfg.reducer))
+ .filter(i => i);
+
+ const reducer = reducerCallbacks.reduce(
+ (a, b) => (prev, ...rest) =>
+ b(a(prev, ...rest), ...rest),
+ );
+
+ return {
+ ...base,
+ reducer,
+ };
+ };
+
+ let memoized = null;
+ const getWrapped = () => {
+ if (!memoized) {
+ memoized = graphql(resolveFragments(document), {...config, options: wrappedOptions})(WrappedComponent);
+ }
+ return memoized;
+ };
+
+ return (props) => {
+ const Wrapped = getWrapped();
+ return
;
+ };
+};
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/services/client.js b/client/coral-framework/services/client.js
index 07bd13ca1..47ea9c352 100644
--- a/client/coral-framework/services/client.js
+++ b/client/coral-framework/services/client.js
@@ -1,5 +1,5 @@
import ApolloClient, {addTypename} from 'apollo-client';
-import getNetworkInterface from './transport';
+import {networkInterface} from './transport';
// import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
@@ -11,8 +11,6 @@ import getNetworkInterface from './transport';
// getNetworkInterface(),
// wsClient,
// );
-const networkInterface = getNetworkInterface();
-
export const client = new ApolloClient({
connectToDevTools: true,
queryTransformer: addTypename,
diff --git a/client/coral-framework/services/graphqlRegistry.js b/client/coral-framework/services/graphqlRegistry.js
new file mode 100644
index 000000000..78d27d038
--- /dev/null
+++ b/client/coral-framework/services/graphqlRegistry.js
@@ -0,0 +1,198 @@
+import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
+import {getGraphQLExtensions} from 'coral-framework/helpers/plugins';
+import globalFragments from 'coral-framework/graphql/fragments';
+import uniq from 'lodash/uniq';
+
+const fragments = {};
+const mutationOptions = {};
+const queryOptions = {};
+
+const getTypeName = (ast) => ast.definitions[0].typeCondition.name.value;
+
+/**
+ * Add fragment
+ *
+ * Example:
+ * addFragment('MyFragment', gql`
+ * fragment Plugin_MyFragment on Comment {
+ * body
+ * }
+ * `);
+ */
+export function addFragment(key, document) {
+ const type = getTypeName(document);
+ const name = getDefinitionName(document);
+ if (!(key in fragments)) {
+ fragments[key] = {type, names: [name], documents: [document]};
+ } else {
+ if (type !== fragments[key].type) {
+ console.error(`Type mismatch ${type} !== ${fragments[key].type}`);
+ }
+ fragments[key].names.push(name);
+ fragments[key].documents.push(document);
+ }
+}
+
+/**
+ * Add mutation options.
+ *
+ * Example:
+ * // state is the current redux state, which is sometimes
+ * // necessary to fill the optimistic response.
+ * addMutationOptions('PostComment', ({variables, state}) => ({
+ * optimisticResponse: {
+ * CreateComment: {
+ * extra: '',
+ * },
+ * },
+ * refetchQueries: [],
+ * updateQueries: {
+ * EmbedQuery: (previous, data) => {
+ * return previous;
+ * },
+ * },
+ * update: (proxy, result) => {
+ * },
+ * })
+ */
+export function addMutationOptions(key, config) {
+ if (!(key in mutationOptions)) {
+ mutationOptions[key] = [config];
+ } else {
+ mutationOptions[key].push(config);
+ }
+}
+
+/**
+ * Add query options.
+ *
+ * Example:
+ * addQueryOptions('EmbedQuery', {
+ * reducer: (previousResult, action, variables) => previousResult,
+ * });
+ */
+export function addQueryOptions(key, config) {
+ if (!(key in queryOptions)) {
+ queryOptions[key] = [config];
+ } else {
+ queryOptions[key].push(config);
+ }
+}
+
+/**
+ * Add all fragments, mutation options, and query options defined in the object.
+ *
+ * Example:
+ * add({
+ * fragments: {
+ * CreateCommentResponse: gql`
+ * fragment CoralRandomEmoji_CreateCommentResponse on CreateCommentResponse {
+ * [...]
+ * }`,
+ * },
+ * mutations: {
+ * // state is the current redux state, which is sometimes
+ * // necessary to fill the optimistic response.
+ * PostComment: ({variables, state}) => ({
+ * optimisticResponse: {
+ * [...]
+ * },
+ * refetchQueries: [],
+ * updateQueries: {
+ * EmbedQuery: (previous, data) => {
+ * return previous;
+ * },
+ * },
+ * update: (proxy, result) => {
+ * },
+ * })
+ * },
+ * queries: {
+ * EmbedQuery: {
+ * reducer: (previousResult, action, variables) => {
+ * return previousResult;
+ * },
+ * },
+ * },
+ * });
+ */
+export function add(extension) {
+ Object.keys(extension.fragments || []).forEach(key => addFragment(key, extension.fragments[key]));
+ Object.keys(extension.mutations || []).forEach(key => addMutationOptions(key, extension.mutations[key]));
+ Object.keys(extension.queries || []).forEach(key => addQueryOptions(key, extension.queries[key]));
+}
+
+/**
+ * Get a list of mutation options.
+ */
+export function getMutationOptions(key) {
+ init();
+ return mutationOptions[key] || [];
+}
+
+/**
+ * Get a list of query options.
+ */
+export function getQueryOptions(key) {
+ init();
+ return queryOptions[key] || [];
+}
+
+/**
+ * Get a document with a fragment named `key`, which contains
+ * all fragments added under this key.
+ */
+export function getFragmentDocument(key) {
+ init();
+
+ if (!(key in fragments)) {
+ return '';
+ }
+
+ let documents = fragments[key] ? fragments[key].documents : [];
+ let fields = fragments[key] ? `...${fragments[key].names.join('\n...')}\n` : ' __typename';
+
+ // Assemble arguments for `gql` to call it directly without using template literals.
+ const main = `
+ fragment ${key} on ${fragments[key].type} {
+ ${fields}
+ }
+ `;
+ return mergeDocuments([main, ...documents]);
+}
+
+// The fragments and configs are lazily loaded to allow circular dependencies to work.
+// TODO: We might want to change this to an explicit add after we have lazy Queries and Mutations.
+let initialized = false;
+
+function init() {
+ if (initialized) { return; }
+ initialized = true;
+
+ // Add fragments from framework.
+ [globalFragments].forEach(map =>
+ Object.keys(map).forEach(key => addFragment(key, map[key]))
+ );
+
+ // Add configs from plugins.
+ getGraphQLExtensions().forEach(ext => add(ext));
+}
+
+export function resolveFragments(document) {
+ if (document.loc.source) {
+
+ // resolve fragments from registry
+ const matchedSubFragments = document.loc.source.body.match(/\.\.\.(.*)/g) || [];
+ const subFragments =
+ uniq(matchedSubFragments.map(f => f.replace('...', '')))
+ .map(key => getFragmentDocument(key))
+ .filter(i => i);
+
+ if (subFragments.length > 0) {
+ return mergeDocuments([document, ...subFragments]);
+ }
+ } else {
+ console.warn('Can only resolve fragments from documents definied using the gql tag.');
+ }
+ return document;
+}
diff --git a/client/coral-framework/services/transport.js b/client/coral-framework/services/transport.js
index 2bd6ac636..e421ca3da 100644
--- a/client/coral-framework/services/transport.js
+++ b/client/coral-framework/services/transport.js
@@ -1,11 +1,31 @@
import {createNetworkInterface} from 'apollo-client';
+import * as Storage from '../helpers/storage';
-export default function getNetworkInterface(apiUrl = '/api/v1/graph/ql', headers = {}) {
- return new createNetworkInterface({
- uri: apiUrl,
- opts: {
- credentials: 'same-origin',
- headers,
- },
- });
-}
+//==============================================================================
+// NETWORK INTERFACE
+//==============================================================================
+
+const networkInterface = createNetworkInterface({
+ uri: '/api/v1/graph/ql',
+ opts: {
+ credentials: 'same-origin'
+ }
+});
+
+//==============================================================================
+// MIDDLEWARES
+//==============================================================================
+
+networkInterface.use([{
+ applyMiddleware(req, next) {
+ if (!req.options.headers) {
+ req.options.headers = {}; // Create the header object if needed.
+ }
+ req.options.headers['authorization'] = `Bearer ${Storage.getItem('token')}`;
+ next();
+ }
+}]);
+
+export {
+ networkInterface
+};
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-framework/utils/index.js b/client/coral-framework/utils/index.js
index 598fb59ab..70ce89bf7 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -1,3 +1,5 @@
+import {gql} from 'react-apollo';
+
export const getTotalActionCount = (type, comment) => {
return comment.action_summaries
.filter(s => s.__typename === type)
@@ -61,3 +63,11 @@ export function separateDataAndRoot(
root,
};
}
+
+export function mergeDocuments(documents) {
+ const main = typeof documents[0] === 'string' ? documents[0] : documents[0].loc.source.body;
+ const substitutions = documents.slice(1);
+ const literals = [main, ...substitutions.map(() => '\n')];
+ return gql.apply(null, [literals, ...substitutions]);
+}
+
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 5d0906b6e..34c08cc57 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -1,31 +1,49 @@
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,
- postItem,
+ postComment,
setCommentCountCache,
commentCountCache,
isReply,
@@ -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
};
@@ -46,18 +64,18 @@ class CommentBox extends React.Component {
// Execute preSubmit Hooks
this.state.hooks.preSubmit.forEach(hook => hook());
- postItem(comment, 'comments')
+ postComment(comment, 'comments')
.then(({data}) => {
const postedComment = data.createComment.comment;
// 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,79 +145,50 @@ 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
-
-
-