From 3d9c94d36ac03b13be1cad157bc9b391edb0293f Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Thu, 1 Aug 2019 17:18:12 -0400
Subject: [PATCH] [CORL-456] add empty state for comment history (#2432)

* add empty state for comment history

* localize strings

* fix string casing
---
 .../Profile/CommentHistory/CommentHistory.css |  7 ++++
 .../Profile/CommentHistory/CommentHistory.tsx | 37 +++++++++++++++++--
 src/locales/en-US/stream.ftl                  |  2 +
 3 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css

diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css
new file mode 100644
index 000000000..1822f207f
--- /dev/null
+++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css
@@ -0,0 +1,7 @@
+.emptyHistoryIcon {
+  margin: 0 0 var(--spacing-3) 0;
+}
+
+.emptyHistory {
+  padding: var(--spacing-2) 0 0 0 !important;
+}
\ No newline at end of file
diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
index e3e4961c2..7d8545d88 100644
--- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
+++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx
@@ -2,10 +2,18 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Button, HorizontalGutter, Typography } from "coral-ui/components";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  Icon,
+  Typography,
+} from "coral-ui/components";
 
 import HistoryCommentContainer from "./HistoryCommentContainer";
 
+import styles from "./CommentHistory.css";
+
 interface CommentHistoryProps {
   story: PropTypesOf<typeof HistoryCommentContainer>["story"];
   comments: Array<
@@ -19,9 +27,30 @@ interface CommentHistoryProps {
 const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
   return (
     <HorizontalGutter size="double" data-testid="profile-commentHistory">
-      <Localized id="profile-historyComment-commentHistory">
-        <Typography variant="heading3">Comment History</Typography>
-      </Localized>
+      {props.comments.length > 0 && (
+        <Localized id="profile-historyComment-commentHistory">
+          <Typography variant="heading3">Comment History</Typography>
+        </Localized>
+      )}
+      {props.comments.length < 1 && (
+        <Flex
+          direction="column"
+          alignItems="center"
+          className={styles.emptyHistory}
+        >
+          <div className={styles.emptyHistoryIcon}>
+            <Icon size="xl">chat_bubble_outline</Icon>
+          </div>
+          <Localized id="profile-commentHistory-empty">
+            <Typography gutterBottom variant="heading2">
+              You have not written any comments
+            </Typography>
+          </Localized>
+          <Localized id="profile-commentHistory-empty-subheading">
+            <Typography>A history of your comments will appear here</Typography>
+          </Localized>
+        </Flex>
+      )}
       {props.comments.map(comment => (
         <HistoryCommentContainer
           key={comment.id}
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 047c3d890..3cbe52718 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -154,6 +154,8 @@ profile-historyComment-story = Story: {$title}
 profile-profileQuery-errorLoadingProfile = Error loading profile
 profile-profileQuery-storyNotFound = Story not found
 profile-commentHistory-loadMore = Load More
+profile-commentHistory-empty = You have not written any comments
+profile-commentHistory-empty-subheading = A history of your comments will appear here
 
 ### Settings
 profile-settings-ignoredCommenters = Ignored Commenters