From f391d7b7ad6aadffcb90766a71b9abb3b99afa60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Fri, 14 Sep 2018 12:37:25 -0300
Subject: [PATCH] Working comment history, styling in progress

---
 .../profile/components/CommentHistory.tsx     | 13 ++++++++--
 .../profile/components/HistoryComment.tsx     | 26 +++++++++++++++++++
 .../containers/CommentHistoryContainer.tsx    |  2 ++
 .../server/graph/tenant/resolvers/user.ts     |  2 +-
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/core/client/stream/tabs/profile/components/HistoryComment.tsx

diff --git a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentHistory.tsx
index b2804adf8..256ce3514 100644
--- a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx
+++ b/src/core/client/stream/tabs/profile/components/CommentHistory.tsx
@@ -1,14 +1,23 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 import { CommentHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
+import HistoryComment from "./HistoryComment";
 
 export interface CommentHistoryProps {
   me: MeData;
 }
 
 const CommentHistory: StatelessComponent<CommentHistoryProps> = props => {
-  return <HorizontalGutter size="double">Comments</HorizontalGutter>;
+  const comments = props.me.comments.edges.map(edge => edge.node);
+  return (
+    <HorizontalGutter size="double">
+      <Typography variant="heading3">Comment History</Typography>
+      {comments.map(comment => (
+        <HistoryComment key={comment.id} comment={comment} />
+      ))}
+    </HorizontalGutter>
+  );
 };
 
 export default CommentHistory;
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
new file mode 100644
index 000000000..a315cb393
--- /dev/null
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { Flex, RelativeTime, Typography } from "talk-ui/components";
+import HTMLContent from "../../../components/HTMLContent";
+
+export interface CommentHistoryProps {
+  comment: {
+    body: string | null;
+    createdAt: string;
+  };
+}
+
+const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
+  return (
+    <Flex>
+      <Typography variant="bodyCopy">
+        {props.comment.body && <HTMLContent>{props.comment.body}</HTMLContent>}
+      </Typography>
+      <div>
+        <RelativeTime date={props.comment.createdAt} />
+      </div>
+    </Flex>
+  );
+};
+
+export default HistoryComment;
diff --git a/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx
index d46cec7d4..a009cdc4a 100644
--- a/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx
+++ b/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx
@@ -25,6 +25,8 @@ const enhanced = withFragmentContainer<CommentHistoryContainerProps>({
           node {
             id
             body
+            createdAt
+            replyCount
           }
         }
       }
diff --git a/src/core/server/graph/tenant/resolvers/user.ts b/src/core/server/graph/tenant/resolvers/user.ts
index 86bbbb90d..2458f26f2 100644
--- a/src/core/server/graph/tenant/resolvers/user.ts
+++ b/src/core/server/graph/tenant/resolvers/user.ts
@@ -2,7 +2,7 @@ import { GQLUserTypeResolver } from "talk-server/graph/tenant/schema/__generated
 import { User } from "talk-server/models/User";
 
 const User: GQLUserTypeResolver<User> = {
-  comments: (asset, input, ctx) =>
+  comments: (_, input, ctx) =>
     ctx.user ? ctx.loaders.Comments.forUser(ctx.user.id, input) : [],
 };