From c2406df46f117df6733715dd1a4f4233207d89b4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 8 Mar 2018 15:59:12 +0100
Subject: [PATCH] comment history blank state

---
 .../components/BlankCommentHistory.css        | 20 +++++++++++++++++++
 .../profile/components/BlankCommentHistory.js | 14 +++++++++++++
 .../tabs/profile/components/CommentHistory.js |  4 ++++
 locales/en.yml                                |  5 ++++-
 4 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.css
 create mode 100644 client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.js

diff --git a/client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.css b/client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.css
new file mode 100644
index 000000000..821396b73
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.css
@@ -0,0 +1,20 @@
+.root {
+  text-align: center;
+  padding-top: 24px;
+}
+
+.icon {
+  font-size: 64px;
+  color: #3a4a52;
+}
+
+.title {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.info {
+  margin-top: 0px;
+  font-size: 14px;
+  color: #7d8285;
+}
diff --git a/client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.js b/client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.js
new file mode 100644
index 000000000..1a193ef5c
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './BlankCommentHistory.css';
+import { Icon } from 'coral-ui';
+import cn from 'classnames';
+
+import t from 'coral-framework/services/i18n';
+
+export default () => (
+  <section className={cn(styles.root, 'talk-my-profile-comment-history-blank')}>
+    <Icon name="chat" className={styles.icon} />
+    <h1 className={styles.title}>{t('comment_history_blank.title')}</h1>
+    <p className={styles.info}>{t('comment_history_blank.info')}</p>
+  </section>
+);
diff --git a/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js b/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js
index 39f3bfd04..64d9e97ae 100644
--- a/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js
+++ b/client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Comment from '../containers/Comment';
 import LoadMore from './LoadMore';
+import BlankCommentHistory from './BlankCommentHistory';
 
 class CommentHistory extends React.Component {
   state = {
@@ -22,6 +23,9 @@ class CommentHistory extends React.Component {
 
   render() {
     const { navigate, comments, data, root } = this.props;
+    if (!comments.nodes.length) {
+      return <BlankCommentHistory />;
+    }
     return (
       <div className="talk-my-profile-comment-history">
         <div className="commentHistory__list">
diff --git a/locales/en.yml b/locales/en.yml
index 2bbe23254..d540e8c1e 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -358,6 +358,9 @@ en:
   report_notif: "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly."
   report_notif_remove: "Your report has been removed."
   reported: Reported
+  comment_history_blank:
+    title: You have not written any comments
+    info: A history of your comments will appear here
   settings:
     from_settings_page: "From the Profile Page you can see your comment history."
     my_comment_history: "My comment History"
@@ -474,4 +477,4 @@ en:
       close: "Close this Installer"
   admin_sidebar:
     view_options: "View Options"
-    sort_comments: "Sort Comments"
\ No newline at end of file
+    sort_comments: "Sort Comments"