diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 3afd749cb..86bd29c13 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -152,6 +152,8 @@ class Embed extends Component { ? asset.comments[0].created_at : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString(); + const userBox = this.props.logout().then(refetch)} changeTab={this.changeTab}/>; + return (
@@ -170,8 +172,8 @@ class Embed extends Component { this.props.data.refetch(); }}>{lang.t('showAllComments')} } - {loggedIn && this.props.logout().then(refetch)} changeTab={this.changeTab}/>} + { loggedIn ? userBox : null } { openStream ?
@@ -277,22 +279,23 @@ class Embed extends Component { loadMore={this.props.loadMore} />
} -
- - - - - - - - + + + + + + + { loggedIn ? userBox : null } + + +
); diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 2b252b323..3c40908f5 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -1,5 +1,4 @@ * { - font-weight: inherit; font-family: inherit; font-style: inherit; } diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js index 32bdfb6c9..5bbe58f7a 100644 --- a/client/coral-framework/graphql/queries/index.js +++ b/client/coral-framework/graphql/queries/index.js @@ -3,6 +3,7 @@ import STREAM_QUERY from './streamQuery.graphql'; import LOAD_MORE from './loadMore.graphql'; import GET_COUNTS from './getCounts.graphql'; import MY_COMMENT_HISTORY from './myCommentHistory.graphql'; +import MY_IGNORED_USERS from './myIgnoredUsers.graphql'; import uniqBy from 'lodash/uniqBy'; import sortBy from 'lodash/sortBy'; import isNil from 'lodash/isNil'; @@ -144,3 +145,11 @@ export const queryStream = graphql(STREAM_QUERY, { }); 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/myIgnoredUsers.graphql b/client/coral-framework/graphql/queries/myIgnoredUsers.graphql new file mode 100644 index 000000000..d81531e37 --- /dev/null +++ b/client/coral-framework/graphql/queries/myIgnoredUsers.graphql @@ -0,0 +1,6 @@ +query myIgnoredUsers { + myIgnoredUsers { + id, + username, + } +} diff --git a/client/coral-plugin-history/Comment.css b/client/coral-plugin-history/Comment.css index 2c0dee094..bc2134639 100644 --- a/client/coral-plugin-history/Comment.css +++ b/client/coral-plugin-history/Comment.css @@ -1,6 +1,7 @@ @custom-media --big-viewport (min-width: 780px); .myComment { + margin: 1em 0; border-bottom: 1px solid lightgrey; display: flex; align-items: baseline; @@ -24,6 +25,9 @@ .sidebar { ul { + margin-top: 0; + margin-bottom: 0; + list-style-type: none; min-width: 136px; } diff --git a/client/coral-settings/components/IgnoredUsers.css b/client/coral-settings/components/IgnoredUsers.css new file mode 100644 index 000000000..716140256 --- /dev/null +++ b/client/coral-settings/components/IgnoredUsers.css @@ -0,0 +1,24 @@ +.ignoredUser { + display: table-row; +} + +.ignoredUserList { + display: table; +} + +.ignoredUser > * { + display: table-cell; +} + +.stopListening { + color: #D0011B; +} + +.link { + text-decoration: underline; + cursor: pointer; +} + +.stopListening:before { + content: '\00a0\00a0\00a0\00a0'; +} \ No newline at end of file diff --git a/client/coral-settings/components/IgnoredUsers.js b/client/coral-settings/components/IgnoredUsers.js new file mode 100644 index 000000000..5719337d4 --- /dev/null +++ b/client/coral-settings/components/IgnoredUsers.js @@ -0,0 +1,32 @@ +import React, {Component} from 'react'; + +import styles from './IgnoredUsers.css'; + +export class IgnoredUsers extends Component { + render() { + const {users} = this.props; + return ( +
+ { + users.length + ?

Because you ignored these, you do not see their comments.

+ : null + } +
+ { + users.map(({username, id}) => ( + +
{ username }
+
+ Stop ignoring +
+
+ )) + } +
+
+ ); + } +} + +export default IgnoredUsers; diff --git a/client/coral-settings/components/ProfileHeader.css b/client/coral-settings/components/ProfileHeader.css deleted file mode 100644 index f97c4731e..000000000 --- a/client/coral-settings/components/ProfileHeader.css +++ /dev/null @@ -1,8 +0,0 @@ -.header h1 { - margin: 4px 0; -} - -.header h2 { - font-size: 13px; -} - diff --git a/client/coral-settings/components/ProfileHeader.js b/client/coral-settings/components/ProfileHeader.js deleted file mode 100644 index 24b2222bd..000000000 --- a/client/coral-settings/components/ProfileHeader.js +++ /dev/null @@ -1,12 +0,0 @@ -import React, {PropTypes} from 'react'; -import styles from './ProfileHeader.css'; - -const ProfileHeader = ({username}) => ( -
-

{username}

-
-); - -ProfileHeader.propTypes = {username: PropTypes.string.isRequired}; - -export default ProfileHeader; diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js index 9a8117e87..480c9e1fe 100644 --- a/client/coral-settings/containers/ProfileContainer.js +++ b/client/coral-settings/containers/ProfileContainer.js @@ -3,12 +3,12 @@ import {compose} from 'react-apollo'; import React, {Component} from 'react'; import I18n from 'coral-framework/modules/i18n/i18n'; -import {myCommentHistory} from 'coral-framework/graphql/queries'; +import {myCommentHistory, myIgnoredUsers} from 'coral-framework/graphql/queries'; import {link} from 'coral-framework/services/PymConnection'; import NotLoggedIn from '../components/NotLoggedIn'; +import IgnoredUsers from '../components/IgnoredUsers'; import {Spinner} from 'coral-ui'; -import ProfileHeader from '../components/ProfileHeader'; import CommentHistory from 'coral-plugin-history/CommentHistory'; import translations from '../translations'; @@ -31,7 +31,7 @@ class ProfileContainer extends Component { } render() { - const {loggedIn, asset, showSignInDialog, data} = this.props; + const {loggedIn, asset, showSignInDialog, data, myIgnoredUsersData} = this.props; const {me} = this.props.data; if (!loggedIn || !me) { @@ -42,17 +42,34 @@ class ProfileContainer extends Component { return ; } + const localProfile = this.props.user.profiles.find(p => p.provider === 'local'); + const emailAddress = localProfile && localProfile.id; + return (
- - { +

{this.props.userData.username}

+ { emailAddress + ?

{ emailAddress }

+ : null + } - // Hiding bio until moderation can get figured out - /* - {lang.t('allComments')} ({user.myComments.length}) - {lang.t('profileSettings')} - - */ + { + myIgnoredUsersData.myIgnoredUsers && myIgnoredUsersData.myIgnoredUsers.length + ? ( +
+

Ignored users

+ +
+ ) + : null + } + +
+ +

My comments

+ { me.comments.length ? :

{lang.t('userNoComment')}

- - // Hiding user bio pending effective moderation system. - /*
- - - */ }
@@ -87,5 +98,6 @@ const mapDispatchToProps = () => ({ export default compose( connect(mapStateToProps, mapDispatchToProps), - myCommentHistory + myCommentHistory, + myIgnoredUsers, )(ProfileContainer); diff --git a/test/graph/mutations/ignoreUser.js b/test/graph/mutations/ignoreUser.js index 7dd103e5b..6ede39477 100644 --- a/test/graph/mutations/ignoreUser.js +++ b/test/graph/mutations/ignoreUser.js @@ -30,6 +30,7 @@ describe('graph.mutations.ignoreUser', () => { } `; + // @TODO (bengo) - test a user can't ignore themselves it('users can ignoreUser', async () => { const user = await UsersService.createLocalUser('usernameA@example.com', 'password', 'usernameA'); const userToIgnore = await UsersService.createLocalUser('usernameB@example.com', 'password', 'usernameB');