From ef78654d233ee1efc2b222c487245908e1920571 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 8 Mar 2018 16:17:15 +0100
Subject: [PATCH] Ignore user blank state

---
 .../client/components/IgnoredUserSection.css  |  4 ++
 .../client/components/IgnoredUserSection.js   | 45 ++++++++++++-------
 .../client/containers/IgnoredUserSection.js   | 13 +++---
 .../client/translations.yml                   |  3 +-
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.css b/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.css
index b279101ea..898290094 100644
--- a/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.css
+++ b/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.css
@@ -20,3 +20,7 @@
   color: #D0011B;
   text-decoration: underline;
 }
+
+.blank {
+  color: #7d8285;
+}
diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js b/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js
index d199eb635..b8ada5328 100644
--- a/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js
+++ b/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js
@@ -1,23 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './IgnoredUserSection.css';
 import { t } from 'plugin-api/beta/client/services';
 
-export default ({ ignoredUsers, stopIgnoringUser }) => (
+const IgnoreUserSection = ({ ignoredUsers, stopIgnoringUser }) => (
   <section className={'talk-plugin-ignore-user-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>
+    {!ignoredUsers.length && (
+      <p className={styles.blank}>{t('talk-plugin-ignore-user.blank_info')}</p>
+    )}
+    {!!ignoredUsers.length && (
+      <div>
+        <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>
+      </div>
+    )}
   </section>
 );
+
+IgnoreUserSection.propTypes = {
+  ignoredUsers: PropTypes.array.isRequired,
+  stopIgnoringUser: PropTypes.func.isRequired,
+};
+
+export default IgnoreUserSection;
diff --git a/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js b/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js
index ae402286c..36bb477c4 100644
--- a/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js
+++ b/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js
@@ -1,9 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import IgnoredUserSection from '../components/IgnoredUserSection';
 import { compose, gql } from 'react-apollo';
 import {
   withFragments,
-  excludeIf,
   withStopIgnoringUser,
 } from 'plugin-api/beta/client/hocs';
 
@@ -18,6 +18,11 @@ class IgnoredUserSectionContainer extends React.Component {
   }
 }
 
+IgnoredUserSectionContainer.propTypes = {
+  stopIgnoringUser: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+};
+
 const withIgnoredUserSectionFragments = withFragments({
   root: gql`
     fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery {
@@ -32,10 +37,6 @@ const withIgnoredUserSectionFragments = withFragments({
   `,
 });
 
-const enhance = compose(
-  withIgnoredUserSectionFragments,
-  withStopIgnoringUser,
-  excludeIf(({ root: { me } }) => me.ignoredUsers.length === 0)
-);
+const enhance = compose(withIgnoredUserSectionFragments, withStopIgnoringUser);
 
 export default enhance(IgnoredUserSectionContainer);
diff --git a/plugins/talk-plugin-ignore-user/client/translations.yml b/plugins/talk-plugin-ignore-user/client/translations.yml
index 4f32c535d..33e5b10ed 100644
--- a/plugins/talk-plugin-ignore-user/client/translations.yml
+++ b/plugins/talk-plugin-ignore-user/client/translations.yml
@@ -13,6 +13,7 @@ da:
     confirmation_title: Ignore {0}?
 en:
   talk-plugin-ignore-user:
+    blank_info: You are currently not ignoring any users
     section_title: Ignored users
     section_info: Because you ignored the following commenters, their comments are hidden.
     stop_ignoring: Stop ignoring
@@ -68,7 +69,7 @@ nl_NL:
     ignore_user: Gebruiker negeren
     cancel: Annuleren
     confirmation: |
-      Wanneer je een gebruiker negeert, zullen al zijn/haar reacties voor jou worden verborgen. Je kunt 
+      Wanneer je een gebruiker negeert, zullen al zijn/haar reacties voor jou worden verborgen. Je kunt
       dit later ongedaan maken vanuit Mijn profiel.
     notify_success: |
       Je negeert nu {0}. Je kunt dit ongedaan maken vanuit Mijn profiel.