Manage ignored users UI

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 = <UserBox user={user} logout={() => this.props.logout().then(refetch)}  changeTab={this.changeTab}/>;
+
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
@@ -170,8 +172,8 @@ class Embed extends Component {
                 this.props.data.refetch();
               }}>{lang.t('showAllComments')}</Button>
           }
-          {loggedIn && <UserBox user={user} logout={() => this.props.logout().then(refetch)}  changeTab={this.changeTab}/>}
           <TabContent show={activeTab === 0}>
+            { loggedIn ? userBox : null }
             {
               openStream
                ? <div id="commentBox">
@@ -277,22 +279,23 @@ class Embed extends Component {
                   loadMore={this.props.loadMore} />
               </div>
             }
-        </TabContent>
-         <TabContent show={activeTab === 1}>
-           <ProfileContainer
-             loggedIn={loggedIn}
-             userData={this.props.userData}
-             showSignInDialog={this.props.showSignInDialog}
-           />
-         </TabContent>
-         <TabContent show={activeTab === 2}>
-           <RestrictedContent restricted={!loggedIn}>
-             <ConfigureStreamContainer
-               status={status}
-               onClick={this.toggleStatus}
-             />
-           </RestrictedContent>
-         </TabContent>
+          </TabContent>
+          <TabContent show={activeTab === 1}>
+            <ProfileContainer
+              loggedIn={loggedIn}
+              userData={this.props.userData}
+              showSignInDialog={this.props.showSignInDialog}
+            />
+          </TabContent>
+          <TabContent show={activeTab === 2}>
+            <RestrictedContent restricted={!loggedIn}>
+              { loggedIn ? userBox : null }
+              <ConfigureStreamContainer
+                status={status}
+                onClick={this.toggleStatus}
+              />
+            </RestrictedContent>
+          </TabContent>
         </div>
       </div>
     );

client/coral-embed-stream/style/default.css

@@ -1,5 +1,4 @@
 * {
-  font-weight: inherit;
   font-family: inherit;
   font-style: inherit;
 }

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
+    });
+  }
+});

client/coral-framework/graphql/queries/myIgnoredUsers.graphql

@@ -0,0 +1,6 @@
+query myIgnoredUsers {
+  myIgnoredUsers {
+    id,
+    username,
+  }
+}

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;
   }
 

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';
+}

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 (
+      <div>
+        {
+          users.length
+            ? <p>Because you ignored these, you do not see their comments.</p>
+            : null
+        }
+        <dl className={styles.ignoredUserList}>
+          {
+            users.map(({username, id}) => (
+              <span className={styles.ignoredUser}>
+                <dt key={id}>{ username }</dt>
+                <dd className={styles.stopListening}>
+                  <a className={styles.link}>Stop ignoring</a>
+                </dd>
+              </span>
+            ))
+          }
+        </dl>
+      </div>
+    );
+  }
+}
+
+export default IgnoredUsers;

client/coral-settings/components/ProfileHeader.css

@@ -1,8 +0,0 @@
-.header h1 {
-  margin: 4px 0;
-}
-
-.header h2 {
-  font-size: 13px;
-}
-

client/coral-settings/components/ProfileHeader.js

@@ -1,12 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './ProfileHeader.css';
-
-const ProfileHeader = ({username}) => (
-  <div className={styles.header}>
-    <h1>{username}</h1>
-  </div>
-);
-
-ProfileHeader.propTypes = {username: PropTypes.string.isRequired};
-
-export default ProfileHeader;

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 <Spinner/>;
     }
 
+    const localProfile = this.props.user.profiles.find(p => p.provider === 'local');
+    const emailAddress = localProfile && localProfile.id;
+
     return (
       <div>
-        <ProfileHeader username={this.props.userData.username} />
-        {
+        <h2>{this.props.userData.username}</h2>
+        { emailAddress
+          ? <p>{ emailAddress }</p>
+          : null
+        }
 
-          // Hiding bio until moderation can get figured out
-          /* <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
-            <Tab>{lang.t('allComments')} ({user.myComments.length})</Tab>
-              <Tab>{lang.t('profileSettings')}</Tab>
-          </TabBar>
-          <TabContent show={activeTab === 0}> */
+        {
+          myIgnoredUsersData.myIgnoredUsers && myIgnoredUsersData.myIgnoredUsers.length
+          ? (
+            <div>
+              <h3>Ignored users</h3>
+              <IgnoredUsers
+                users={myIgnoredUsersData.myIgnoredUsers}
+              />
+            </div>
+          )
+          : null
+        }
+
+        <hr />
+
+        <h3>My comments</h3>
+        {
           me.comments.length ?
             <CommentHistory
               comments={me.comments}
@@ -61,12 +78,6 @@ class ProfileContainer extends Component {
             />
           :
             <p>{lang.t('userNoComment')}</p>
-
-          // Hiding user bio pending effective moderation system.
-          /* </TabContent>
-          <TabContent show={activeTab === 1}>
-              <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />
-          </TabContent> */
         }
 
       </div>
@@ -87,5 +98,6 @@ const mapDispatchToProps = () => ({
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  myCommentHistory
+  myCommentHistory,
+  myIgnoredUsers,
 )(ProfileContainer);

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');