Working comment history, styling in progress

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;

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;

src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx

@@ -25,6 +25,8 @@ const enhanced = withFragmentContainer<CommentHistoryContainerProps>({
           node {
             id
             body
+            createdAt
+            replyCount
           }
         }
       }

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) : [],
 };