From cb2cfe1581ec7d65aaa4c05e130a9a2ba521b36c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 14 Sep 2018 17:52:55 -0300 Subject: [PATCH] Adding View Conversation functionality and styling --- ...CommentHistory.tsx => CommentsHistory.tsx} | 13 +- .../profile/components/HistoryComment.css | 14 +- .../profile/components/HistoryComment.tsx | 58 ++- .../tabs/profile/components/Profile.tsx | 10 +- .../containers/CommentHistoryContainer.tsx | 37 -- .../containers/CommentsHistoryContainer.tsx | 58 +++ .../profile/containers/ProfileContainer.tsx | 2 +- .../__snapshots__/renderReplies.spec.tsx.snap | 409 ------------------ src/core/server/graph/tenant/loaders/users.ts | 1 - 9 files changed, 128 insertions(+), 474 deletions(-) rename src/core/client/stream/tabs/profile/components/{CommentHistory.tsx => CommentsHistory.tsx} (55%) delete mode 100644 src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx create mode 100644 src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx delete mode 100644 src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap diff --git a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx similarity index 55% rename from src/core/client/stream/tabs/profile/components/CommentHistory.tsx rename to src/core/client/stream/tabs/profile/components/CommentsHistory.tsx index 256ce3514..879759d71 100644 --- a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx +++ b/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 = props => { +const CommentsHistory: StatelessComponent = props => { const comments = props.me.comments.edges.map(edge => edge.node); return ( Comment History {comments.map(comment => ( - + ))} ); }; -export default CommentHistory; +export default CommentsHistory; diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css index b0a8f73cb..2ab426a8a 100644 --- a/src/core/client/stream/tabs/profile/components/HistoryComment.css +++ b/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; } diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx index c5f73f2cc..6af681546 100644 --- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx +++ b/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 = props => { return ( - - - {props.comment.body && {props.comment.body}} - - - schedule - {props.comment.createdAt} + + + + {props.comment.body && ( + {props.comment.body} + )} + + + + launch + + View Conversation + + + + schedule + {props.comment.createdAt} + + - + {!!props.comment.replyCount && ( + + reply + Replies {props.comment.replyCount} + + )} + ); }; diff --git a/src/core/client/stream/tabs/profile/components/Profile.tsx b/src/core/client/stream/tabs/profile/components/Profile.tsx index 516b7ac74..ff2450690 100644 --- a/src/core/client/stream/tabs/profile/components/Profile.tsx +++ b/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["me"] & - PropTypesOf["me"] + PropTypesOf["me"] | null; } const Profile: StatelessComponent = props => { return ( - - - {props.me && } - + + {props.me && } ); }; diff --git a/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx deleted file mode 100644 index a009cdc4a..000000000 --- a/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx +++ /dev/null @@ -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 ; - } -} -const enhanced = withFragmentContainer({ - me: graphql` - fragment CommentHistoryContainer_me on User { - comments { - edges { - node { - id - body - createdAt - replyCount - } - } - } - } - `, -})(CommentHistoryContainer); - -export default enhanced; diff --git a/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx new file mode 100644 index 000000000..fb6ba6344 --- /dev/null +++ b/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 ( + + ); + } +} +const enhanced = withFragmentContainer({ + 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; diff --git a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx index 6ece17835..3b91aec77 100644 --- a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx +++ b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx @@ -22,7 +22,7 @@ const enhanced = withFragmentContainer({ me: graphql` fragment ProfileContainer_me on User { ...UserBoxContainer_me - ...CommentHistoryContainer_me + ...CommentsHistoryContainer_me } `, })(StreamContainer); diff --git a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap deleted file mode 100644 index 1b2669c4e..000000000 --- a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap +++ /dev/null @@ -1,409 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders comment stream 1`] = ` -
-
-
-
- - -
-
- -
-
-
-
-
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
- - Markus - -
- -
-
-
-
-
- -
-
-
-
-
-
-
- - Lukas - -
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-`; diff --git a/src/core/server/graph/tenant/loaders/users.ts b/src/core/server/graph/tenant/loaders/users.ts index 558981daa..0b77b370a 100644 --- a/src/core/server/graph/tenant/loaders/users.ts +++ b/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) => ({