Presentational components, events, tabs and more

src/core/client/stream/tabs/profile/components/CommentsHistory.tsx

@@ -4,35 +4,28 @@ import { StatelessComponent } from "react";
 import { HorizontalGutter, Typography } from "talk-ui/components";
 import HistoryComment from "./HistoryComment";
 
-interface Me {
-  readonly comments: {
-    readonly edges: ReadonlyArray<{
-      readonly node: {
-        readonly id: string;
-        readonly body: string | null;
-        readonly createdAt: any;
-        readonly replyCount: number | null;
-        readonly asset: {
-          readonly title: string | null;
-        };
-      };
-    }>;
+interface Comment {
+  readonly id: string;
+  readonly body: string | null;
+  readonly createdAt: any;
+  readonly replyCount: number | null;
+  readonly asset: {
+    readonly title: string | null;
   };
 }
 
 interface CommentsHistoryProps {
   onGoToConversation: (id: string) => void;
-  me: Me;
+  comments: Comment[];
 }
 
 const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
-  const comments = props.me.comments.edges.map(edge => edge.node);
   return (
     <HorizontalGutter>
       <Localized id="profile-historyComment-commentHistory">
         <Typography variant="heading3">Comment History</Typography>
       </Localized>
-      {comments.map(comment => (
+      {props.comments.map(comment => (
         <HistoryComment
           key={comment.id}
           comment={comment}

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

@@ -20,9 +20,10 @@ export class CommentsHistoryContainer extends React.Component<
     this.props.setCommentID({ id });
   };
   public render() {
+    const comments = this.props.me.comments.edges.map(edge => edge.node);
     return (
       <CommentsHistory
-        me={this.props.me}
+        comments={comments}
         onGoToConversation={this.onGoToConversation}
       />
     );