Pluginize stop ignoring user feature in profile

client/coral-embed-stream/src/graphql/index.js

@@ -108,21 +108,6 @@ export default {
     `,
   },
   mutations: {
-    StopIgnoringUser: ({variables}) => ({
-      updateQueries: {
-        CoralEmbedStream_Profile: (previousData) => {
-          const noLongerIgnoredUserId = variables.id;
-
-          // remove noLongerIgnoredUserId from ignoredUsers
-          const updated = update(previousData, {me: {ignoredUsers: {
-            $apply: (ignoredUsers) => {
-              return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId);
-            }
-          }}});
-          return updated;
-        }
-      }
-    }),
     PostComment: ({
       variables: {comment: {asset_id, body, parent_id, tags = []}},
       state: {auth},

client/coral-settings/components/IgnoredUsers.css

@@ -1,24 +0,0 @@
-.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

@@ -1,43 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-import t from 'coral-framework/services/i18n';
-import styles from './IgnoredUsers.css';
-
-class IgnoredUsers extends Component {
-  static propTypes = {
-    users: PropTypes.arrayOf(PropTypes.shape({
-      username: PropTypes.string,
-      id: PropTypes.string,
-    })).isRequired,
-
-    // accepts { id }
-    stopIgnoring: PropTypes.func.isRequired,
-  }
-  render() {
-    const {users, stopIgnoring} = this.props;
-    return (
-      <div>
-        {
-          users.length
-            ? <p>{t('framework.because_you_ignored')}</p>
-            : null
-        }
-        <dl className={styles.ignoredUserList}>
-          {
-            users.map(({username, id}) => (
-              <span className={styles.ignoredUser} key={id}>
-                <dt key={id}>{ username }</dt>
-                <dd className={styles.stopListening}>
-                  <a
-                    onClick={() => stopIgnoring({id})}
-                    className={styles.link}>{t('framework.stop_ignoring')}</a>
-                </dd>
-              </span>
-            ))
-          }
-        </dl>
-      </div>
-    );
-  }
-}
-
-export default IgnoredUsers;

client/coral-settings/containers/ProfileContainer.js

@@ -3,12 +3,10 @@ import {compose, gql} from 'react-apollo';
 import React, {Component} from 'react';
 import {bindActionCreators} from 'redux';
 import {withQuery} from 'coral-framework/hocs';
-
-import {withStopIgnoringUser} from 'coral-framework/graphql/mutations';
+import Slot from 'coral-framework/components/Slot';
 
 import {link} from 'coral-framework/services/pym';
 import NotLoggedIn from '../components/NotLoggedIn';
-import IgnoredUsers from '../components/IgnoredUsers';
 import {Spinner} from 'coral-ui';
 import CommentHistory from 'talk-plugin-history/CommentHistory';
 
@@ -55,7 +53,7 @@ class ProfileContainer extends Component {
   };
 
   render() {
-    const {auth, auth: {user}, showSignInDialog, stopIgnoringUser, root, data} = this.props;
+    const {auth, auth: {user}, showSignInDialog, root, data} = this.props;
     const {me} = this.props.root;
     const loading = this.props.data.loading;
 
@@ -77,15 +75,11 @@ class ProfileContainer extends Component {
         <h2>{user.username}</h2>
         {emailAddress ? <p>{emailAddress}</p> : null}
 
-        {me.ignoredUsers && me.ignoredUsers.length
-          ? <div>
-            <h3>{t('framework.ignored_users')}</h3>
-            <IgnoredUsers
-              users={me.ignoredUsers}
-              stopIgnoring={stopIgnoringUser}
-            />
-          </div>
-          : null}
+        <Slot
+          fill="profileSections"
+          data={data}
+          queryData={{root}}
+        />
 
         <hr />
 
@@ -98,8 +92,10 @@ class ProfileContainer extends Component {
   }
 }
 
-// TODO: This Slot should be included in `talk-plugin-history` instead.
 const slots = [
+  'profileSections',
+
+  // TODO: This Slot should be included in `talk-plugin-history` instead.
   'commentContent',
 ];
 
@@ -143,10 +139,6 @@ const withProfileQuery = withQuery(
   query CoralEmbedStream_Profile {
     me {
       id
-      ignoredUsers {
-        id,
-        username,
-      }
       comments(query: {limit: 10}) {
         ...TalkSettings_CommentConnectionFragment
       }
@@ -165,6 +157,5 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withStopIgnoringUser,
   withProfileQuery
 )(ProfileContainer);

locales/en.yml

@@ -219,7 +219,6 @@ en:
   framework:
     banned_account_header: "Your account is currently banned."
     banned_account_body: "This means that you cannot Like, Report, or write comments."
-    because_you_ignored: "Because you ignored the following commenters, their comments are hidden."
     comment: comment
     comment_is_ignored: "This comment is hidden because you ignored this user."
     comments: comments
@@ -230,13 +229,11 @@ en:
       error: "Usernames can contain letters numbers and _ only"
       label: "New Username"
       msg: "Your account is currently suspended because your username has been deemed inappropriate. To restore your account please enter a new username. Please contact us if you have any questions."
-    ignored_users: "Ignored users"
     my_comments: "My Comments"
     my_profile: "My profile"
     new_count: "View {0} new {1}"
     profile: Profile
     show_all_comments: "Show all comments"
-    stop_ignoring: "Stop ignoring"
     success_bio_update: "Your biography has been updated"
     success_name_update: "Your username has been updated"
     success_update_settings: "The changes you have made have been applied to the comment stream on this article"

locales/es.yml

@@ -227,13 +227,11 @@ es:
       error: "Nombres de usuarios pueden solamente incluir letras, números y _"
       label: "Nuevo Nombre"
       msg: "Tu cuenta está suspendida porque tu nombre de usuario ha sido considerado no apropiado para el espacio. Para recuperar la cuenta, por favor ingresar un nuevo nombre de usuario. Contáctanos si tienes alguna pregunta."
-    ignored_users: "Usuarios ignorados"
     my_comments: "Mis Comentarios"
     my_profile: "Mi perfil"
     new_count: "Ver {0} {1} nuevo"
     profile: Perfil
     show_all_comments: "Mostrar todos los comentarios"
-    stop_ignoring: "No ignorar más"
     success_bio_update: "Tu biografia fue actualizada"
     success_name_update: "Tu nombre de usuario ha sido actualizado"
     success_update_settings: "La configuración de este articulo fue actualizada"

locales/fr.yml

@@ -188,7 +188,6 @@ fr:
       error: "Les noms d'utilisateur ne peuvent contenir que des chiffres, des lettres et \"_\""
       label: "Nouveau nom d'utilisateur"
       msg: "Votre compte est actuellement suspendu car votre nom d'utilisateur a été jugé inapproprié. Pour restaurer votre compte, entrez un nouveau nom d'utilisateur. Contactez-nous si vous avez des questions."
-    ignored_users: "Utilisateurs ignorés"
     my_comments: "Mes commentaires"
     my_profile: "Mon profil"
     new_count: "Voir {0} nouveau {1}"

locales/pt_BR.yml

@@ -214,7 +214,6 @@ pt_BR:
   framework:
     banned_account_header: "Sua conta está atualmente proibida."
     banned_account_body: "Isso significa que você não pode gostar, informar ou escrever comentários."
-    because_you_ignored: "Porque você ignorou os seguintes comentadores, seus comentários estão ocultos."
     comment: comentário
     comment_is_ignored: "Este comentário está oculto porque você ignorou esse usuário."
     comments: comentários
@@ -225,13 +224,11 @@ pt_BR:
       error: "Nomes de usuários podem conter números de letras e _ somente"
       label: "Novo usuário"
       msg: "Sua conta está suspensa porque seu nome de usuário foi considerado inapropriado. Para restaurar sua conta, insira um novo nome de usuário. Entre em contato conosco se você tiver alguma dúvida."
-    ignored_users: "Usuários ignorados"
     my_comments: "Meus comentários"
     my_profile: "Meu perfil"
     new_count: "Ver {0} {1}"
     profile: Perfil
     show_all_comments: "Exibir todos os comentários"
-    stop_ignoring: "Pare de ignorar"
     success_bio_update: "Sua biografia foi atualizada"
     success_name_update: "Seu nome de usuário foi atualizado"
     success_update_settings: "As alterações que você fez foram aplicadas no hilo de comentários neste artigo"

plugin-api/beta/client/hocs/index.js

@@ -5,4 +5,7 @@ export {default as withFragments} from 'coral-framework/hocs/withFragments';
 export {default as excludeIf} from 'coral-framework/hocs/excludeIf';
 export {default as connect} from 'coral-framework/hocs/connect';
 export {default as withEmit} from 'coral-framework/hocs/withEmit';
-export {withIgnoreUser} from 'coral-framework/graphql/mutations';
+export {
+  withIgnoreUser,
+  withStopIgnoringUser,
+} from 'coral-framework/graphql/mutations';

plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.css

@@ -0,0 +1,22 @@
+.list {
+  display: table;
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.listItem {
+  display: table-row;
+}
+
+.username {
+  display: table-cell;
+}
+
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  margin-left: 16px;
+  color: #D0011B;
+  text-decoration: underline;
+}

plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './IgnoredUserSection.css';
+import {t} from 'plugin-api/beta/client/services';
+
+export default ({ignoredUsers, stopIgnoringUser}) => (
+  <section>
+    <h3>{t('talk-plugin-ignore-user.section_title')}</h3>
+    <p>{t('talk-plugin-ignore-user.section_info')}</p>
+    <ul className={styles.list}>
+      {ignoredUsers.map(({username, id}) => (
+        <li className={styles.listItem} key={id}>
+          <span className={styles.username}>{username}</span>
+          <button
+            onClick={() => stopIgnoringUser({id})}
+            className={styles.button}
+          >
+            {t('talk-plugin-ignore-user.stop_ignoring')}
+          </button>
+        </li>
+      ))}
+    </ul>
+  </section>
+);

plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import IgnoredUserSection from '../components/IgnoredUserSection';
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf, withStopIgnoringUser} from 'plugin-api/beta/client/hocs';
+
+class IgnoredUserSectionContainer extends React.Component {
+
+  render() {
+    return <IgnoredUserSection
+      stopIgnoringUser={this.props.stopIgnoringUser}
+      ignoredUsers={this.props.root.me.ignoredUsers}
+    />;
+  }
+}
+
+const withIgnoredUserSectionFragments = withFragments({
+  root: gql`
+    fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery {
+      me {
+        id
+        ignoredUsers {
+          id,
+          username,
+        }
+      }
+    }
+  `,
+});
+
+const enhance = compose(
+  withIgnoredUserSectionFragments,
+  withStopIgnoringUser,
+  excludeIf(({root: {me}}) => me.ignoredUsers.length === 0),
+);
+
+export default enhance(IgnoredUserSectionContainer);

plugins/talk-plugin-ignore-user/client/index.js

@@ -1,5 +1,6 @@
 import IgnoreUserAction from './containers/IgnoreUserAction';
 import IgnoreUserConfirmation from './containers/IgnoreUserConfirmation';
+import IgnoredUserSection from './containers/IgnoredUserSection';
 import translations from './translations.yml';
 import update from 'immutability-helper';
 
@@ -17,10 +18,26 @@ export default {
         }
       }
     }),
+    StopIgnoringUser: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Profile: (previousData) => {
+          const noLongerIgnoredUserId = variables.id;
+
+          // remove noLongerIgnoredUserId from ignoredUsers
+          const updated = update(previousData, {me: {ignoredUsers: {
+            $apply: (ignoredUsers) => {
+              return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId);
+            }
+          }}});
+          return updated;
+        }
+      }
+    }),
   },
   slots: {
     authorMenuActions: [IgnoreUserAction],
-    ignoreUserConfirmation: [IgnoreUserConfirmation]
+    ignoreUserConfirmation: [IgnoreUserConfirmation],
+    profileSections: [IgnoredUserSection],
   },
   translations
 };

plugins/talk-plugin-ignore-user/client/translations.yml

@@ -1,5 +1,8 @@
 en:
   talk-plugin-ignore-user:
+    section_title: Ignored users
+    section_info: Because you ignored the following commenters, their comments are hidden.
+    stop_ignoring: Stop ignoring
     ignore_user: Ignore User
     cancel: Cancel
     confirmation: |
@@ -10,3 +13,13 @@ en:
     confirmation_title: Ignore {0}?
 es:
   talk-plugin-ignore-user:
+    section_title: "Usuarios ignorados"
+    stop_ignoring: "No ignorar más"
+fr:
+  talk-plugin-ignore-user:
+    section_title: "Utilisateurs ignorés"
+pt_Br:
+  talk-plugin-ignore-user:
+    section_title: "Usuários ignorados"
+    section_info: "Porque você ignorou os seguintes comentadores, seus comentários estão ocultos."
+    stop_ignoring: "Pare de ignorar"