From 1176080aee8d541ef50b34fdf7daa3acf96a392c Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 19 Oct 2018 17:31:21 +0200 Subject: [PATCH 1/2] feat: Implement InReplyTo --- .../comments/components/Comment/Comment.css | 2 +- .../comments/components/Comment/Comment.tsx | 15 ++-- .../comments/components/Comment/InReplyTo.css | 9 +++ .../components/Comment/InReplyTo.spec.tsx | 14 ++++ .../comments/components/Comment/InReplyTo.tsx | 34 +++++++++ .../__snapshots__/Comment.spec.tsx.snap | 1 - .../__snapshots__/InReplyTo.spec.tsx.snap | 26 +++++++ .../containers/CommentContainer.spec.tsx | 46 +++++++++++++ .../comments/containers/CommentContainer.tsx | 10 +++ .../CommentContainer.spec.tsx.snap | 69 +++++++++++++++++++ .../__snapshots__/editComment.spec.tsx.snap | 22 +++--- .../__snapshots__/loadMore.spec.tsx.snap | 10 +-- .../__snapshots__/permalinkView.spec.tsx.snap | 16 ++--- ...permalinkViewCommentNotFound.spec.tsx.snap | 2 +- ...permalinkViewLoadMoreParents.spec.tsx.snap | 8 +-- .../__snapshots__/postComment.spec.tsx.snap | 16 ++--- .../postLocalReply.spec.tsx.snap | 52 +++++++------- .../__snapshots__/postReply.spec.tsx.snap | 20 +++--- .../__snapshots__/renderReplies.spec.tsx.snap | 12 ++-- .../__snapshots__/renderStream.spec.tsx.snap | 4 +- .../showAllReplies.spec.tsx.snap | 10 +-- .../showConversation.spec.tsx.snap | 14 ++-- .../ui/components/Typography/Typography.css | 4 ++ .../ui/components/Typography/Typography.tsx | 2 + src/core/client/ui/shared/typography.css | 8 +++ src/locales/en-US/stream.ftl | 1 + 26 files changed, 326 insertions(+), 101 deletions(-) create mode 100644 src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css create mode 100644 src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx create mode 100644 src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx create mode 100644 src/core/client/stream/tabs/comments/components/Comment/__snapshots__/InReplyTo.spec.tsx.snap diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.css b/src/core/client/stream/tabs/comments/components/Comment/Comment.css index 515dfe5d1..642206f36 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/Comment.css +++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.css @@ -4,7 +4,7 @@ background-color: var(--palette-primary-lightest); padding: var(--spacing-unit); } -.topBar { +.subBar { margin-bottom: calc(0.5 * var(--spacing-unit)); } .footer:not(:empty) { diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx index 6ebb427b9..ad463b581 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx +++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx @@ -7,6 +7,7 @@ import { Flex, HorizontalGutter } from "talk-ui/components"; import * as styles from "./Comment.css"; import EditedMarker from "./EditedMarker"; +import InReplyTo from "./InReplyTo"; import TopBarLeft from "./TopBarLeft"; import Username from "./Username"; @@ -20,6 +21,7 @@ export interface CommentProps { footer?: React.ReactNode; showEditedMarker?: boolean; highlight?: boolean; + parentAuthorName?: string | null; } const Comment: StatelessComponent = props => { @@ -28,12 +30,7 @@ const Comment: StatelessComponent = props => { role="article" className={cn(styles.root, { [styles.highlight]: props.highlight })} > - + {props.username && {props.username}} @@ -43,6 +40,12 @@ const Comment: StatelessComponent = props => { {props.topBarRight &&
{props.topBarRight}
} + {props.parentAuthorName && ( +
+ +
+ )} + {props.body || ""} {props.footer} diff --git a/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css new file mode 100644 index 000000000..3f5a70f00 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css @@ -0,0 +1,9 @@ +.icon { + color: var(--palette-grey-light); +} +.inReplyTo { + color: var(--palette-grey-light); +} +.username { + color: var(--palette-grey-dark); +} diff --git a/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx new file mode 100644 index 000000000..71391cf1d --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx @@ -0,0 +1,14 @@ +import { shallow } from "enzyme"; +import React from "react"; + +import { PropTypesOf } from "talk-framework/types"; + +import InReplyTo from "./InReplyTo"; + +it("renders correctly", () => { + const props: PropTypesOf = { + username: "Username", + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx new file mode 100644 index 000000000..39fc839f1 --- /dev/null +++ b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx @@ -0,0 +1,34 @@ +import { Localized } from "fluent-react/compat"; +import React, { StatelessComponent } from "react"; + +import { Flex, Icon, Typography } from "talk-ui/components"; +import styles from "./InReplyTo.css"; + +interface Props { + username: string; +} + +const InReplyTo: StatelessComponent = ({ username }) => { + const Username = () => ( + + {username} + + ); + + return ( + + reply{" "} + }> + + {"In reply to "} + + + + ); +}; + +export default InReplyTo; diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap index f1eceef62..d4ab9ae64 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap @@ -6,7 +6,6 @@ exports[`renders username and body 1`] = ` role="article" > + + reply + + + } + > + + In reply to <username><username> + + + +`; diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx index 44a71647d..c225bd148 100644 --- a/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx +++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx @@ -22,6 +22,7 @@ it("renders username and body", () => { id: "author-id", username: "Marvin", }, + parent: null, body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", editing: { @@ -59,6 +60,7 @@ it("renders body only", () => { id: "author-id", username: null, }, + parent: null, body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", editing: { @@ -94,6 +96,7 @@ it("hide reply button", () => { id: "author-id", username: "Marvin", }, + parent: null, body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", editing: { @@ -138,6 +141,7 @@ it("shows conversation link", () => { id: "author-id", username: "Marvin", }, + parent: null, body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", editing: { @@ -157,3 +161,45 @@ it("shows conversation link", () => { const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); + +it("renders in reply to", () => { + const props: PropTypesOf = { + me: null, + asset: { + url: "http://localhost/asset", + }, + comment: { + id: "comment-id", + author: { + id: "author-id", + username: "Marvin", + }, + parent: { + author: { + username: "ParentAuthor", + }, + }, + body: "Woof", + createdAt: "1995-12-17T03:24:00.000Z", + editing: { + edited: false, + editableUntil: "1995-12-17T03:24:30.000Z", + }, + pending: false, + }, + settings: { + reaction: { + icon: "thumb_up_alt", + label: "Respect", + }, + }, + indentLevel: 1, + showAuthPopup: noop as any, + setCommentID: noop as any, + localReply: false, + disableReplies: false, + }; + + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx index 9516d10ac..f3940dfce 100644 --- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx @@ -165,6 +165,11 @@ export class CommentContainer extends Component { blur={comment.pending || false} showEditedMarker={comment.editing.edited} highlight={highlight} + parentAuthorName={ + comment.parent && + comment.parent.author && + comment.parent.author.username + } topBarRight={ (editable && ( @@ -247,6 +252,11 @@ const enhanced = withSetCommentIDMutation( id username } + parent { + author { + username + } + } body createdAt editing { diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap index e1c085015..0281d7661 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -26,6 +26,7 @@ exports[`hide reply button 1`] = ` "edited": false, }, "id": "comment-id", + "parent": null, "pending": false, } } @@ -44,6 +45,7 @@ exports[`hide reply button 1`] = ` } id="comment-comment-id" indentLevel={1} + parentAuthorName={null} showEditedMarker={false} username="Marvin" /> @@ -81,6 +83,7 @@ exports[`renders body only 1`] = ` "edited": false, }, "id": "comment-id", + "parent": null, "pending": false, } } @@ -99,12 +102,74 @@ exports[`renders body only 1`] = ` } id="comment-comment-id" indentLevel={1} + parentAuthorName={null} showEditedMarker={false} username={null} /> `; +exports[`renders in reply to 1`] = ` + + + + + + + + + } + id="comment-comment-id" + indentLevel={1} + parentAuthorName="ParentAuthor" + showEditedMarker={false} + username="Marvin" + /> + +`; + exports[`renders username and body 1`] = ` @@ -191,6 +258,7 @@ exports[`shows conversation link 1`] = ` "edited": false, }, "id": "comment-id", + "parent": null, "pending": false, } } @@ -215,6 +283,7 @@ exports[`shows conversation link 1`] = ` } id="comment-comment-id" indentLevel={1} + parentAuthorName={null} showEditedMarker={false} username="Marvin" /> diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index 098a86e06..a7fddefbc 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -256,7 +256,7 @@ exports[`cancel edit: edit canceled 1`] = ` role="article" >
## Profile Tab profile-historyComment-viewConversation = View Conversation From d3f6762458fe7a10c200c5459461c8345a4653c8 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 19 Oct 2018 20:33:35 +0200 Subject: [PATCH 2/2] test: adapt snapshot --- .../__snapshots__/CommentContainer.spec.tsx.snap | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap index 7aa2d188a..6921cae4b 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -133,7 +133,12 @@ exports[`renders in reply to 1`] = ` id="comments-commentContainer-replyButton-comment-id" onClick={[Function]} /> -