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);
 }
 
-.sideBar {
-  min-width: 110px;
+.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: 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);

src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap

@@ -1,409 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-flex Flex-justifyCenter"
->
-  <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-half"
-    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-      >
-        <div
-          aria-hidden="true"
-        >
-          <div>
-            <div
-              className=""
-            >
-              <div
-                className=" RTE-toolbarDisabled Toolbar-toolbar"
-              >
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Bold"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_bold
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Italic"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_italic
-                  </span>
-                </button>
-                <button
-                  className="Button-button"
-                  disabled={false}
-                  onClick={[Function]}
-                  title="Blockquote"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
-                  >
-                    format_quote
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-hidden="true"
-                className="RTE-placeholder RTE-placeholder "
-              >
-                Post a comment
-              </div>
-              <div
-                aria-placeholder="Post a comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                contentEditable={false}
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "",
-                  }
-                }
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onCut={[Function]}
-                onFocus={[Function]}
-                onInput={[Function]}
-                onKeyDown={[Function]}
-                onPaste={[Function]}
-                onSelect={[Function]}
-              />
-            </div>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="submit"
-        >
-          Sign in and join the conversation
-        </button>
-      </div>
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-            >
-              <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Markus
-                </span>
-                <div
-                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                >
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
-                  >
-                    2018-07-06T18:24:00.000Z
-                  </time>
-                </div>
-              </div>
-            </div>
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-            >
-              <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Markus
-                </span>
-                <div
-                  className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                >
-                  <time
-                    className="Timestamp-root RelativeTime-root"
-                    dateTime="2018-07-06T18:24:00.000Z"
-                    title="2018-07-06T18:24:00.000Z"
-                  >
-                    2018-07-06T18:24:00.000Z
-                  </time>
-                </div>
-              </div>
-            </div>
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "I like yoghurt",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-with-replies"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-with-replies"
-          role="log"
-        >
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-              >
-                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                  >
-                    Markus
-                  </span>
-                  <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                  >
-                    <time
-                      className="Timestamp-root RelativeTime-root"
-                      dateTime="2018-07-06T18:24:00.000Z"
-                      title="2018-07-06T18:24:00.000Z"
-                    >
-                      2018-07-06T18:24:00.000Z
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-              >
-                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                  >
-                    Lukas
-                  </span>
-                  <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                  >
-                    <time
-                      className="Timestamp-root RelativeTime-root"
-                      dateTime="2018-07-06T18:20:00.000Z"
-                      title="2018-07-06T18:20:00.000Z"
-                    >
-                      2018-07-06T18:20:00.000Z
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

src/core/server/graph/tenant/loaders/users.ts

@@ -1,6 +1,5 @@
 import DataLoader from "dataloader";
 import Context from "talk-server/graph/tenant/context";
-// import { retrieveCommentUserConnection } from "talk-server/models/comment";
 import { retrieveManyUsers, User } from "talk-server/models/user";
 
 export default (ctx: Context) => ({