diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index c912d1a72..165b3ce4c 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -57,7 +57,10 @@ class Stream extends React.Component {
constructor(props) {
super(props);
- this.state = resetCursors(this.state, props);
+ this.state = {
+ ...resetCursors(this.state, props),
+ keepCommentBox: false,
+ };
}
componentWillReceiveProps(next) {
@@ -68,6 +71,12 @@ class Stream extends React.Component {
this.setState(resetCursors);
return;
}
+
+ // Keep comment box when user was live suspended, banned, ...
+ if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) {
+ this.setState({keepCommentBox: true});
+ }
+
if (
prevComments && nextComments &&
nextComments.nodes.length < prevComments.nodes.length
@@ -133,6 +142,10 @@ class Stream extends React.Component {
return view;
}
+ userIsDegraged({auth: {user}} = this.props) {
+ return !can(user, 'INTERACT_WITH_COMMUNITY');
+ }
+
render() {
const {
commentClassNames,
@@ -150,6 +163,7 @@ class Stream extends React.Component {
pluginProps,
editName
} = this.props;
+ const {keepCommentBox} = this.state;
const view = this.getVisibleComments();
const open = asset.closedAt === null;
@@ -171,6 +185,8 @@ class Stream extends React.Component {
me.ignoredUsers.find((u) => u.id === comment.user.id)
);
};
+
+ const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
return (
@@ -199,10 +215,7 @@ class Stream extends React.Component {
editName={editName}
currentUsername={user.username}
/>}
- {loggedIn &&
- !banned &&
- !temporarilySuspended &&
- !highlightedComment &&
+ {showCommentBox &&
}
diff --git a/client/coral-embed-stream/src/components/TopRightMenu.js b/client/coral-embed-stream/src/components/TopRightMenu.js
index d65722b6d..4cd544379 100644
--- a/client/coral-embed-stream/src/components/TopRightMenu.js
+++ b/client/coral-embed-stream/src/components/TopRightMenu.js
@@ -12,7 +12,7 @@ export class TopRightMenu extends React.Component {
comment: PropTypes.shape({
user: PropTypes.shape({
id: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired
+ username: PropTypes.string.isRequired
}).isRequired
}).isRequired,
ignoreUser: PropTypes.func,
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index f5682bdd1..040d1a83e 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -34,7 +34,7 @@ export default withFragments({
}
user {
id
- name: username
+ username
}
action_summaries {
__typename
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 68f76ccc5..bf05caf29 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -12,6 +12,8 @@ import {getDefinitionName} from 'coral-framework/utils';
import {withQuery} from 'coral-framework/hocs';
import Embed from '../components/Embed';
import Stream from './Stream';
+import {addNotification} from 'coral-framework/actions/notification';
+import t from 'coral-framework/services/i18n';
import {setActiveTab} from '../actions/embed';
import {viewAllComments} from '../actions/stream';
@@ -20,12 +22,63 @@ const {logout, checkLogin} = authActions;
const {fetchAssetSuccess} = assetActions;
class EmbedContainer extends React.Component {
+ subscriptions = [];
+
+ subscribeToUpdates(props = this.props) {
+ if (props.auth.loggedIn) {
+ const newSubscriptions = [{
+ document: USER_BANNED_SUBSCRIPTION,
+ updateQuery: () => {
+ addNotification('info', t('your_account_has_been_banned'));
+ },
+ },
+ {
+ document: USER_SUSPENDED_SUBSCRIPTION,
+ updateQuery: () => {
+ addNotification('info', t('your_account_has_been_suspended'));
+ },
+ },
+ {
+ document: USERNAME_REJECTED_SUBSCRIPTION,
+ updateQuery: () => {
+ addNotification('info', t('your_username_has_been_rejected'));
+ },
+ }];
+
+ this.subscriptions = newSubscriptions.map((s) => props.data.subscribeToMore({
+ document: s.document,
+ variables: {
+ user_id: props.auth.user.id,
+ },
+ updateQuery: s.updateQuery,
+ }));
+ }
+ }
+
+ unsubscribe() {
+ this.subscriptions.forEach((unsubscribe) => unsubscribe());
+ this.subscriptions = [];
+ }
+
+ resubscribe(props) {
+ this.unsubscribe();
+ this.subscribeToUpdates(props);
+ }
+
+ componentDidMount() {
+ this.subscribeToUpdates();
+ }
+
+ componentWillUnmount() {
+ this.unsubscribe();
+ }
componentWillReceiveProps(nextProps) {
if (this.props.auth.loggedIn !== nextProps.auth.loggedIn) {
// Refetch after login/logout.
this.props.data.refetch();
+ this.resubscribe(nextProps);
}
const {fetchAssetSuccess} = this.props;
@@ -52,6 +105,45 @@ class EmbedContainer extends React.Component {
}
}
+const USER_BANNED_SUBSCRIPTION = gql`
+ subscription UserBanned($user_id: ID!) {
+ userBanned(user_id: $user_id){
+ id
+ status
+ canEditName
+ suspension {
+ until
+ }
+ }
+ }
+`;
+
+const USER_SUSPENDED_SUBSCRIPTION = gql`
+ subscription UserSuspended($user_id: ID!) {
+ userSuspended(user_id: $user_id){
+ id
+ status
+ canEditName
+ suspension {
+ until
+ }
+ }
+ }
+`;
+
+const USERNAME_REJECTED_SUBSCRIPTION = gql`
+ subscription UsernameRejected($user_id: ID!) {
+ usernameRejected(user_id: $user_id){
+ id
+ status
+ canEditName
+ suspension {
+ until
+ }
+ }
+ }
+`;
+
const EMBED_QUERY = gql`
query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
asset(id: $assetId, url: $assetUrl) {
@@ -95,6 +187,7 @@ const mapDispatchToProps = (dispatch) =>
setActiveTab,
viewAllComments,
fetchAssetSuccess,
+ addNotification,
},
dispatch
);
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index f6e1fd9ec..3491fc846 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -30,11 +30,8 @@ class StreamContainer extends React.Component {
subscriptions = [];
subscribeToUpdates() {
- const sub1 = this.props.data.subscribeToMore({
+ const newSubscriptions = [{
document: COMMENTS_EDITED_SUBSCRIPTION,
- variables: {
- assetId: this.props.root.asset.id,
- },
updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
// Ignore mutations from me.
@@ -52,13 +49,9 @@ class StreamContainer extends React.Component {
return removeCommentFromEmbedQuery(prev, commentEdited.id);
}
},
- });
-
- const sub2 = this.props.data.subscribeToMore({
+ },
+ {
document: COMMENTS_ADDED_SUBSCRIPTION,
- variables: {
- assetId: this.props.root.asset.id,
- },
updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
// Ignore mutations from me.
@@ -81,9 +74,15 @@ class StreamContainer extends React.Component {
return insertCommentIntoEmbedQuery(prev, commentAdded);
}
- });
+ }];
- this.subscriptions.push(sub1, sub2);
+ this.subscriptions = newSubscriptions.map((s) => this.props.data.subscribeToMore({
+ document: s.document,
+ variables: {
+ assetId: this.props.root.asset.id,
+ },
+ updateQuery: s.updateQuery,
+ }));
}
unsubscribe() {
@@ -173,7 +172,7 @@ const commentFragment = gql`
`;
const COMMENTS_ADDED_SUBSCRIPTION = gql`
- subscription onCommentAdded($assetId: ID!, $excludeIgnored: Boolean){
+ subscription CommentAdded($assetId: ID!, $excludeIgnored: Boolean){
commentAdded(asset_id: $assetId){
parent {
id
@@ -185,7 +184,7 @@ const COMMENTS_ADDED_SUBSCRIPTION = gql`
`;
const COMMENTS_EDITED_SUBSCRIPTION = gql`
- subscription onCommentEdited($assetId: ID!){
+ subscription CommentEdited($assetId: ID!){
commentEdited(asset_id: $assetId){
id
body
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 701a06fd5..a752493a3 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -335,33 +335,6 @@ button.comment__action-button[disabled],
display: inline-block;
}
-.coral-plugin-permalinks-container {
- /*position: relative;*/
- z-index: 2;
-}
-
-.coral-plugin-permalinks-popover {
- display: none;
- background-color: white;
- border: 1px solid black;
- position: absolute;
- padding: 5px;
-}
-
-.coral-plugin-permalinks-popover.active {
- display: block;
-}
-
-.coral-plugin-permalinks-copy-field {
- display: block;
- width: calc(100% - 5px);
-}
-
-.coral-plugin-permalinks-copied-text {
- float: right;
- margin: 8px;
-}
-
/* Flag Styles */
.coral-plugin-flags-popup-form {
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 5b42fa541..82eea8ef7 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -28,6 +28,7 @@ const snackbarStyles = {
// This function should return value of window.Coral
const Coral = {};
const Talk = (Coral.Talk = {});
+let notificationTimeout = null;
// build the URL to load in the pym iframe
function buildStreamIframeUrl(talkBaseUrl, query) {
@@ -110,14 +111,15 @@ function configurePymParent(pymParent, opts) {
snackbar.className = `coral-notif-${type}`;
snackbar.textContent = text;
- setTimeout(() => {
+ clearTimeout(notificationTimeout);
+ notificationTimeout = setTimeout(() => {
snackbar.style.transform = 'translate(-50%, 0)';
snackbar.style.opacity = 1;
- }, 0);
- setTimeout(() => {
- snackbar.style.opacity = 0;
- }, 5000);
+ notificationTimeout = setTimeout(() => {
+ snackbar.style.opacity = 0;
+ }, 7000);
+ }, 0);
});
// Helps child show notifications at the right scrollTop
diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js
index 5a05de28e..7ab12cf53 100644
--- a/client/coral-framework/reducers/auth.js
+++ b/client/coral-framework/reducers/auth.js
@@ -151,6 +151,20 @@ export default function auth (state = initialState, action) {
case actions.SET_REDIRECT_URI:
return state
.set('redirectUri', action.uri);
+ case 'APOLLO_SUBSCRIPTION_RESULT':
+ if (action.operationName === 'UserBanned' && state.getIn(['user', 'id']) === action.variables.user_id) {
+ return state
+ .mergeIn(['user'], action.result.data.userBanned);
+ }
+ if (action.operationName === 'UserSuspended' && state.getIn(['user', 'id']) === action.variables.user_id) {
+ return state
+ .mergeIn(['user'], action.result.data.userSuspended);
+ }
+ if (action.operationName === 'UsernameRejected' && state.getIn(['user', 'id']) === action.variables.user_id) {
+ return state
+ .mergeIn(['user'], action.result.data.usernameRejected);
+ }
+ return state;
default :
return state;
}
diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js
index 66b907ad8..7d453d96f 100644
--- a/client/coral-plugin-author-name/AuthorName.js
+++ b/client/coral-plugin-author-name/AuthorName.js
@@ -24,7 +24,7 @@ export default class AuthorName extends Component {
return (
- {author && author.name}
+ {author && author.username}
);
}
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 5105667ed..efa1d27ed 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -1,6 +1,7 @@
import React, {PropTypes} from 'react';
import t from 'coral-framework/services/i18n';
+import {can} from 'coral-framework/services/perms';
import Slot from 'coral-framework/components/Slot';
import {connect} from 'react-redux';
@@ -43,8 +44,14 @@ class CommentBox extends React.Component {
assetId,
parentId,
addNotification,
+ currentUser,
} = this.props;
+ if (!can(currentUser, 'INTERACT_WITH_COMMUNITY')) {
+ addNotification('error', t('error.NOT_AUTHORIZED'));
+ return;
+ }
+
let comment = {
asset_id: assetId,
parent_id: parentId,
@@ -126,7 +133,7 @@ class CommentBox extends React.Component {
handleChange = (e) => this.setState({body: e.target.value});
render () {
- const {styles, isReply, authorId, maxCharCount} = this.props;
+ const {styles, isReply, currentUser, maxCharCount} = this.props;
let {cancelButtonClicked} = this.props;
if (isReply && typeof cancelButtonClicked !== 'function') {
@@ -145,7 +152,7 @@ class CommentBox extends React.Component {
charCountEnable={this.props.charCountEnable}
bodyPlaceholder={t('comment.comment')}
bodyInputId={isReply ? 'replyText' : 'commentText'}
- saveComment={authorId && this.postComment}
+ saveComment={currentUser && this.postComment}
buttonContainerStart={
;
@@ -20,17 +21,17 @@ const getPopupMenu = [
(itemType) => {
const options = itemType === 'COMMENTS' ?
[
- {val: 'This comment is offensive', text: t('comment_offensive')},
- {val: 'This looks like an ad/marketing', text: t('marketing')},
- {val: 'I don\'t agree with this comment', text: t('no_agree_comment')},
- {val: 'Other', text: t('other')}
+ {val: comment.offensive, text: t('comment_offensive')},
+ {val: comment.spam, text: t('marketing')},
+ {val: comment.noagree, text: t('no_agree_comment')},
+ {val: comment.other, text: t('other')}
]
: [
- {val: 'This username is offensive', text: t('username_offensive')},
- {val: 'I don\'t like this username', text: t('no_like_username')},
- {val: 'This user is impersonating', text: t('user_impersonating')},
- {val: 'This looks like an ad/marketing', text: t('marketing')},
- {val: 'Other', text: t('other')}
+ {val: username.offensive, text: t('username_offensive')},
+ {val: username.nolike, text: t('no_like_username')},
+ {val: username.impersonating, text: t('user_impersonating')},
+ {val: username.spam, text: t('marketing')},
+ {val: username.other, text: t('other')}
];
return {
header: t('step_2_header'),
diff --git a/client/coral-plugin-flags/helpers/flagReasons.js b/client/coral-plugin-flags/helpers/flagReasons.js
new file mode 100644
index 000000000..514c57398
--- /dev/null
+++ b/client/coral-plugin-flags/helpers/flagReasons.js
@@ -0,0 +1,15 @@
+export default {
+ username: {
+ offensive: 'USERNAME_OFFENSIVE',
+ nolike: 'USERNAME_NOLIKE',
+ impersonating: 'USERNAME_IMPERSONATING',
+ spam: 'USERNAME_SPAM',
+ other: 'USERNAME_OTHER'
+ },
+ comment: {
+ offensive: 'COMMENT_OFFENSIVE',
+ spam: 'COMMENT_SPAM',
+ noagree: 'COMMENT_NOAGREE',
+ other: 'COMMENT_OTHER'
+ }
+};
diff --git a/client/coral-plugin-flags/index.js b/client/coral-plugin-flags/index.js
new file mode 100644
index 000000000..d896d34f5
--- /dev/null
+++ b/client/coral-plugin-flags/index.js
@@ -0,0 +1 @@
+export {default as FlagComment} from './components/FlagComment';
\ No newline at end of file
diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js
deleted file mode 100644
index 3d6df996f..000000000
--- a/client/coral-plugin-permalinks/PermalinkButton.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, {PropTypes} from 'react';
-const name = 'coral-plugin-permalinks';
-import {Button} from 'coral-ui';
-import styles from './styles.css';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-
-import t from 'coral-framework/services/i18n';
-
-export default class PermalinkButton extends React.Component {
-
- static propTypes = {
- articleURL: PropTypes.string.isRequired,
- commentId: PropTypes.string.isRequired
- }
-
- constructor (props) {
- super(props);
- this.state = {popoverOpen: false, copySuccessful: null, copyFailure: null};
- this.toggle = this.toggle.bind(this);
- this.copyPermalink = this.copyPermalink.bind(this);
- }
-
- toggle () {
-
- // I wish I could position this with a stylesheet, but top-level comments with
- // nested replies throws everything off, as well as very long comments
- this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
- this.setState({popoverOpen: !this.state.popoverOpen});
- }
-
- handleClickOutside = () => {
- this.setState({popoverOpen: false});
- }
-
- copyPermalink () {
- this.permalinkInput.select();
- try {
- document.execCommand('copy');
- this.setState({copySuccessful: true, copyFailure: null});
- } catch (err) {
- this.setState({copyFailure: true, copySuccessful: null});
- }
-
- setTimeout(() => {
- this.setState({copyFailure: null, copySuccessful: null});
- }, 3000);
- }
-
- render () {
- const {copySuccessful, copyFailure} = this.state;
- return (
-
-
-
-
this.popover = ref}
- className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
- this.permalinkInput = input}
- value={`${this.props.articleURL}#${this.props.commentId}`}
- onChange={() => {}} />
-
-
-
+
+
+
+
this.popover = ref}
+ className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}>
+
+ this.permalinkInput = input}
+ defaultValue={`${asset.url}#${this.props.commentId}`}
+ />
+
+
+
+
+