Adding View Conversation functionality and styling

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

@@ -1,23 +1,28 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
-import { CommentHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql";
+import { CommentsHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql";
 import { HorizontalGutter, Typography } from "talk-ui/components";
 import HistoryComment from "./HistoryComment";
 
 export interface CommentHistoryProps {
+  goToConversation: () => void;
   me: MeData;
 }
 
-const CommentHistory: StatelessComponent<CommentHistoryProps> = props => {
+const CommentsHistory: StatelessComponent<CommentHistoryProps> = props => {
   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} />
+        <HistoryComment
+          key={comment.id}
+          comment={comment}
+          goToConversation={props.goToConversation}
+        />
       ))}
     </HorizontalGutter>
   );
 };
 
-export default CommentHistory;
+export default CommentsHistory;

src/core/client/stream/tabs/profile/components/HistoryComment.css

@@ -2,6 +2,16 @@
   color: var(--palette-text-secondary);
 }
 
+.button,
+.text {
+  color: var(--palette-text-secondary);
+  font-family: var(--font-family-sans-serif);
+  font-weight: var(--font-weight-medium);
+  font-size: calc(14rem / var(--rem-base));
+  line-height: calc(18em / 14);
+  letter-spacing: 0;
+}
+
 .sideBar {
-  min-width: 110px;
+  min-width: 180px;
 }

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

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 import Timestamp from "talk-stream/components/Timestamp";
-import { Flex, Icon, Typography } from "talk-ui/components";
+import {
+  BaseButton,
+  Flex,
+  HorizontalGutter,
+  Icon,
+  Typography,
+} from "talk-ui/components";
 import HTMLContent from "../../../components/HTMLContent";
 import * as styles from "./HistoryComment.css";
 
@@ -9,25 +15,49 @@ export interface CommentHistoryProps {
   comment: {
     body: string | null;
     createdAt: string;
+    replyCount: number | null;
   };
+  goToConversation: () => void;
 }
 
 const HistoryComment: StatelessComponent<CommentHistoryProps> = props => {
   return (
-    <Flex direction="row" justifyContent="space-between">
-      <Typography variant="bodyCopy">
-        {props.comment.body && <HTMLContent>{props.comment.body}</HTMLContent>}
-      </Typography>
-      <Flex
-        direction="row"
-        alignItems="baseline"
-        itemGutter="half"
-        className={styles.sideBar}
-      >
-        <Icon className={styles.icon}>schedule</Icon>
-        <Timestamp>{props.comment.createdAt}</Timestamp>
+    <HorizontalGutter>
+      <Flex direction="row" justifyContent="space-between">
+        <Typography variant="bodyCopy">
+          {props.comment.body && (
+            <HTMLContent>{props.comment.body}</HTMLContent>
+          )}
+        </Typography>
+        <HorizontalGutter className={styles.sideBar}>
+          <Flex direction="row" alignItems="center" itemGutter="half">
+            <Icon className={styles.icon}>launch</Icon>
+            <BaseButton
+              className={styles.button}
+              onClick={props.goToConversation}
+              anchor
+            >
+              View Conversation
+            </BaseButton>
+          </Flex>
+          <Flex direction="row" alignItems="center" itemGutter="half">
+            <Icon className={styles.icon}>schedule</Icon>
+            <Timestamp>{props.comment.createdAt}</Timestamp>
+          </Flex>
+        </HorizontalGutter>
       </Flex>
-    </Flex>
+      {!!props.comment.replyCount && (
+        <Flex
+          direction="row"
+          alignItems="center"
+          itemGutter="half"
+          className={styles.text}
+        >
+          <Icon className={styles.icon}>reply</Icon>
+          <span>Replies {props.comment.replyCount}</span>
+        </Flex>
+      )}
+    </HorizontalGutter>
   );
 };
 

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

@@ -3,22 +3,20 @@ import { StatelessComponent } from "react";
 import { PropTypesOf } from "talk-framework/types";
 import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
 import { HorizontalGutter } from "talk-ui/components";
-import CommentHistoryContainer from "../containers/CommentHistoryContainer";
+import CommentsHistoryContainer from "../containers/CommentsHistoryContainer";
 
 export interface ProfileProps {
   me:
     | PropTypesOf<typeof UserBoxContainer>["me"] &
-        PropTypesOf<typeof CommentHistoryContainer>["me"]
+        PropTypesOf<typeof CommentsHistoryContainer>["me"]
     | null;
 }
 
 const Profile: StatelessComponent<ProfileProps> = props => {
   return (
     <HorizontalGutter size="double">
-      <HorizontalGutter size="half">
-        <UserBoxContainer me={props.me} />
-        {props.me && <CommentHistoryContainer me={props.me} />}
-      </HorizontalGutter>
+      <UserBoxContainer me={props.me} />
+      {props.me && <CommentsHistoryContainer me={props.me} />}
     </HorizontalGutter>
   );
 };

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

@@ -1,37 +0,0 @@
-import React from "react";
-import { graphql } from "react-relay";
-
-import { withFragmentContainer } from "talk-framework/lib/relay";
-import { CommentHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql";
-
-import CommentHistory from "../components/CommentHistory";
-
-interface CommentHistoryContainerProps {
-  me: CommentsData;
-}
-
-export class CommentHistoryContainer extends React.Component<
-  CommentHistoryContainerProps
-> {
-  public render() {
-    return <CommentHistory me={this.props.me} />;
-  }
-}
-const enhanced = withFragmentContainer<CommentHistoryContainerProps>({
-  me: graphql`
-    fragment CommentHistoryContainer_me on User {
-      comments {
-        edges {
-          node {
-            id
-            body
-            createdAt
-            replyCount
-          }
-        }
-      }
-    }
-  `,
-})(CommentHistoryContainer);
-
-export default enhanced;

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { graphql } from "react-relay";
+import {
+  withFragmentContainer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
+import { CommentsHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql";
+import { CommentsHistoryContainerLocal as Local } from "talk-stream/__generated__/CommentsHistoryContainerLocal.graphql";
+import CommentsHistory from "../components/CommentsHistory";
+
+interface CommentsHistoryContainerProps {
+  local: Local;
+  me: CommentsData;
+}
+
+export class CommentsHistoryContainer extends React.Component<
+  CommentsHistoryContainerProps
+> {
+  private goToConversation = () => {
+    if (this.props.local.assetURL) {
+      window.open(this.props.local.assetURL, "_blank");
+    }
+  };
+  public render() {
+    return (
+      <CommentsHistory
+        me={this.props.me}
+        goToConversation={this.goToConversation}
+      />
+    );
+  }
+}
+const enhanced = withFragmentContainer<CommentsHistoryContainerProps>({
+  me: graphql`
+    fragment CommentsHistoryContainer_me on User {
+      comments {
+        edges {
+          node {
+            id
+            body
+            createdAt
+            replyCount
+          }
+        }
+      }
+    }
+  `,
+})(
+  withLocalStateContainer(
+    graphql`
+      fragment CommentsHistoryContainerLocal on Local {
+        assetURL
+      }
+    `
+  )(CommentsHistoryContainer)
+);
+
+export default enhanced;

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

@@ -22,7 +22,7 @@ const enhanced = withFragmentContainer<ProfileContainerProps>({
   me: graphql`
     fragment ProfileContainer_me on User {
       ...UserBoxContainer_me
-      ...CommentHistoryContainer_me
+      ...CommentsHistoryContainer_me
     }
   `,
 })(StreamContainer);