wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-12 13:01:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add edited marker

Browse Source
This commit is contained in:
Chi Vinh Le
2018-09-12 17:05:31 +02:00
parent cf070ddb0f
commit b1e7c6d2d4
36 changed files with 640 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/Comment/Comment.spec.tsx
+1
View File
@@ -14,6 +14,7 @@ it("renders username and body", () => {
createdAt: "1995-12-17T03:24:00.000Z",
topBarRight: "topBarRight",
footer: "footer",
showEditedMarker: true,
};
const wrapper = shallow(<Comment {...props} />);
expect(wrapper).toMatchSnapshot();
src/core/client/stream/components/Comment/Comment.tsx
+6 -1
View File
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
import { Flex } from "talk-ui/components";
import * as styles from "./Comment.css";
import EditedMarker from "./EditedMarker";
import HTMLContent from "./HTMLContent";
import Timestamp from "./Timestamp";
import TopBarLeft from "./TopBarLeft";
@@ -17,6 +18,7 @@ export interface CommentProps {
createdAt: string;
topBarRight?: React.ReactNode;
footer?: React.ReactNode;
showEditedMarker?: boolean;
}
const Comment: StatelessComponent<CommentProps> = props => {
@@ -32,7 +34,10 @@ const Comment: StatelessComponent<CommentProps> = props => {
props.author.username && (
<Username>{props.author.username}</Username>
)}
<Timestamp>{props.createdAt}</Timestamp>
<Flex direction="row" alignItems="baseline" itemGutter>
<Timestamp>{props.createdAt}</Timestamp>
{props.showEditedMarker && <EditedMarker />}
</Flex>
</TopBarLeft>
{props.topBarRight && <div>{props.topBarRight}</div>}
</Flex>
src/core/client/stream/components/Comment/EditedMarker.css
+3
View File
@@ -0,0 +1,3 @@
.root {
composes: detail from "talk-ui/shared/typography.css";
}
src/core/client/stream/components/Comment/EditedMarker.spec.tsx
+9
View File
@@ -0,0 +1,9 @@
import { shallow } from "enzyme";
import React from "react";
import EditedMarker from "./EditedMarker";
it("renders correctly", () => {
const wrapper = shallow(<EditedMarker />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/components/Comment/EditedMarker.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Localized } from "fluent-react/compat";
import React, { StatelessComponent } from "react";
import styles from "./EditedMarker.css";
const EditedMarker: StatelessComponent = () => (
<div className={styles.root}>
(
<Localized id="comments-editedMarker-edited">
<span>Edited</span>
</Localized>
)
</div>
);
export default EditedMarker;
src/core/client/stream/components/Comment/HTMLContent.tsx
+9 -14
View File
@@ -1,22 +1,17 @@
import React from "react";
import dompurify from "dompurify";
import React, { StatelessComponent } from "react";
import styles from "./HTMLContent.css";
interface ContentProps {
interface HTMLContentProps {
children: string;
}
class HTMLContent extends React.Component<ContentProps> {
public render() {
const { children } = this.props;
return (
<div
className={styles.root}
dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
/>
);
}
}
const HTMLContent: StatelessComponent<HTMLContentProps> = ({ children }) => (
<div
className={styles.root}
dangerouslySetInnerHTML={{ __html: dompurify.sanitize(children) }}
/>
);
export default HTMLContent;
src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+10 -3
View File
@@ -14,9 +14,16 @@ exports[`renders username and body 1`] = `
<Username>
Marvin
</Username>
<Timestamp>
1995-12-17T03:24:00.000Z
</Timestamp>
<withPropsOnChange(Flex)
alignItems="baseline"
direction="row"
itemGutter={true}
>
<Timestamp>
1995-12-17T03:24:00.000Z
</Timestamp>
<EditedMarker />
</withPropsOnChange(Flex)>
</TopBarLeft>
<div>
topBarRight
src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap
+17
View File
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div
className="EditedMarker-root"
>
(
<Localized
id="comments-editedMarker-edited"
>
<span>
Edited
</span>
</Localized>
)
</div>
`;
src/core/client/stream/components/PoweredBy.tsx
+1 -5
View File
@@ -14,11 +14,7 @@ const PoweredBy: StatelessComponent<Props> = props => {
id="comments-poweredBy"
logo={<Typography variant="heading4" container="span" />}
>
<Typography
variant="inputDescription"
container="span"
color="textSecondary"
>
<Typography variant="detail" container="span" color="textSecondary">
{"Powered by <logo>The Coral Project</logo>"}
</Typography>
</Localized>
src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
+1 -1
View File
@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
<withPropsOnChange(Typography)
color="textSecondary"
container="span"
variant="inputDescription"
variant="detail"
>
Powered by &lt;logo&gt;The Coral Project&lt;/logo&gt;
</withPropsOnChange(Typography)>
src/core/client/stream/containers/CommentContainer.spec.tsx
+2
View File
@@ -24,6 +24,7 @@ it("renders username and body", () => {
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
edited: false,
editableUntil: "1995-12-17T03:24:30.000Z",
},
pending: false,
@@ -50,6 +51,7 @@ it("renders body only", () => {
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
edited: false,
editableUntil: "1995-12-17T03:24:30.000Z",
},
pending: false,
src/core/client/stream/containers/CommentContainer.tsx
+2
View File
@@ -113,6 +113,7 @@ export class CommentContainer extends Component<InnerProps, State> {
body={comment.body}
createdAt={comment.createdAt}
blur={comment.pending || false}
showEditedMarker={comment.editing.edited}
topBarRight={
(editable && (
<Localized id="comments-commentContainer-editButton">
@@ -173,6 +174,7 @@ const enhanced = withShowAuthPopupMutation(
body
createdAt
editing {
edited
editableUntil
}
pending
src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+2
View File
@@ -24,6 +24,7 @@ exports[`renders body only 1`] = `
</React.Fragment>
}
indentLevel={1}
showEditedMarker={false}
/>
</React.Fragment>
`;
@@ -52,6 +53,7 @@ exports[`renders username and body 1`] = `
</React.Fragment>
}
indentLevel={1}
showEditedMarker={false}
/>
</React.Fragment>
`;
src/core/client/stream/mutations/EditCommentMutation.ts
+6
View File
@@ -19,6 +19,9 @@ const mutation = graphql`
editComment(input: $input) {
comment {
body
editing {
edited
}
}
clientMutationId
}
@@ -40,6 +43,9 @@ function commit(environment: Environment, input: EditCommentInput) {
editComment: {
id: input.commentID,
body: input.body,
editing: {
edited: true,
},
clientMutationId: (clientMutationId++).toString(),
},
} as any, // TODO: (cvle) generated types should contain one for the optimistic response.
src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
+126 -73
View File
@@ -151,7 +151,7 @@ exports[`cancel edit: edit canceled 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -205,13 +205,17 @@ exports[`cancel edit: edit canceled 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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>
<button
@@ -282,13 +286,17 @@ exports[`cancel edit: edit canceled 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -478,7 +486,7 @@ exports[`edit a comment: edit form 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -697,13 +705,17 @@ exports[`edit a comment: edit form 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -893,7 +905,7 @@ exports[`edit a comment: optimistic response 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -1112,13 +1124,17 @@ exports[`edit a comment: optimistic response 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -1308,7 +1324,7 @@ exports[`edit a comment: render stream 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -1362,13 +1378,17 @@ exports[`edit a comment: render stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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>
<button
@@ -1439,13 +1459,17 @@ exports[`edit a comment: render stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -1635,7 +1659,7 @@ exports[`edit a comment: server response 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -1689,13 +1713,26 @@ exports[`edit a comment: server response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
className="EditedMarker-root"
>
(
<span>
Edited
</span>
)
</div>
</div>
</div>
<div>
<button
@@ -1766,13 +1803,17 @@ exports[`edit a comment: server response 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -1962,7 +2003,7 @@ exports[`shows expiry message: edit form closed 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -2016,13 +2057,17 @@ exports[`shows expiry message: edit form closed 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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>
<button
@@ -2093,13 +2138,17 @@ exports[`shows expiry message: edit form closed 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -2289,7 +2338,7 @@ exports[`shows expiry message: edit time expired 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -2485,13 +2534,17 @@ exports[`shows expiry message: edit time expired 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+50 -30
View File
@@ -166,13 +166,17 @@ exports[`loads more comments 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -227,13 +231,17 @@ exports[`loads more comments 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -288,13 +296,17 @@ exports[`loads more comments 1`] = `
>
Isabelle
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:14:00.000Z"
title="2018-07-06T18:14:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:14:00.000Z
</time>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:14:00.000Z"
title="2018-07-06T18:14:00.000Z"
>
2018-07-06T18:14:00.000Z
</time>
</div>
</div>
</div>
<div
@@ -499,13 +511,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -560,13 +576,17 @@ exports[`renders comment stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+20 -12
View File
@@ -41,13 +41,17 @@ exports[`renders permalink view 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -250,13 +254,17 @@ exports[`show all comments 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+10 -6
View File
@@ -198,13 +198,17 @@ exports[`show all comments 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+83 -51
View File
@@ -145,7 +145,7 @@ exports[`post a comment: optimistic response 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -199,13 +199,17 @@ exports[`post a comment: optimistic response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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>
<button
@@ -276,13 +280,17 @@ exports[`post a comment: optimistic response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -337,13 +345,17 @@ exports[`post a comment: optimistic response 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -533,7 +545,7 @@ exports[`post a comment: server response 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -587,13 +599,17 @@ exports[`post a comment: server response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -648,13 +664,17 @@ exports[`post a comment: server response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -709,13 +729,17 @@ exports[`post a comment: server response 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -905,7 +929,7 @@ exports[`renders comment stream 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -959,13 +983,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -1020,13 +1048,17 @@ exports[`renders comment stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+104 -64
View File
@@ -151,7 +151,7 @@ exports[`post a reply: open reply form 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -205,13 +205,17 @@ exports[`post a reply: open reply form 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -393,13 +397,17 @@ exports[`post a reply: open reply form 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -589,7 +597,7 @@ exports[`post a reply: optimistic response 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -643,13 +651,17 @@ exports[`post a reply: optimistic response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -826,13 +838,17 @@ exports[`post a reply: optimistic response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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>
<button
@@ -904,13 +920,17 @@ exports[`post a reply: optimistic response 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -1100,7 +1120,7 @@ exports[`post a reply: server response 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -1154,13 +1174,17 @@ exports[`post a reply: server response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -1216,13 +1240,17 @@ exports[`post a reply: server response 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -1278,13 +1306,17 @@ exports[`post a reply: server response 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -1474,7 +1506,7 @@ exports[`renders comment stream 1`] = `
className="PostCommentForm-poweredBy"
>
<span
className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
className="Typography-root Typography-detail Typography-colorTextSecondary"
>
Powered by
<span
@@ -1528,13 +1560,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -1589,13 +1625,17 @@ exports[`renders comment stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+40 -24
View File
@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -227,13 +231,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -289,13 +297,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -346,13 +358,17 @@ exports[`renders comment stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+20 -12
View File
@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -227,13 +231,17 @@ exports[`renders comment stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+50 -30
View File
@@ -166,13 +166,17 @@ exports[`renders comment stream 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -228,13 +232,17 @@ exports[`renders comment stream 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -460,13 +468,17 @@ exports[`show all replies 1`] = `
>
Markus
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:24:00.000Z
</time>
<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
@@ -522,13 +534,17 @@ exports[`show all replies 1`] = `
>
Lukas
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:20:00.000Z"
title="2018-07-06T18:20:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:20:00.000Z
</time>
<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
@@ -579,13 +595,17 @@ exports[`show all replies 1`] = `
>
Isabelle
</span>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:14:00.000Z"
title="2018-07-06T18:14:00.000Z"
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
>
2018-07-06T18:14:00.000Z
</time>
<time
className="Timestamp-root RelativeTime-root"
dateTime="2018-07-06T18:14:00.000Z"
title="2018-07-06T18:14:00.000Z"
>
2018-07-06T18:14:00.000Z
</time>
</div>
</div>
</div>
<div
src/core/client/stream/test/editComment.spec.tsx
+3
View File
@@ -36,6 +36,9 @@ function createTestRenderer() {
comment: {
id: assets[0].comments.edges[0].node.id,
body: "Edited! (from server)",
editing: {
edited: true,
},
},
clientMutationId: "0",
})
src/core/client/stream/test/fixtures.ts
+4
View File
@@ -21,6 +21,7 @@ export const comments = [
createdAt: "2018-07-06T18:24:00.000Z",
replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
editing: {
edited: false,
editableUntil: "2018-07-06T18:24:30.000Z",
},
},
@@ -31,6 +32,7 @@ export const comments = [
createdAt: "2018-07-06T18:20:00.000Z",
replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
editing: {
edited: false,
editableUntil: "2018-07-06T18:20:30.000Z",
},
},
@@ -41,6 +43,7 @@ export const comments = [
createdAt: "2018-07-06T18:14:00.000Z",
replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
editing: {
edited: false,
editableUntil: "2018-07-06T18:14:30.000Z",
},
},
@@ -78,6 +81,7 @@ export const commentWithReplies = {
},
},
editing: {
edited: false,
editableUntil: "2018-07-06T18:24:30.000Z",
},
};
src/core/client/stream/test/postComment.spec.tsx
+1
View File
@@ -42,6 +42,7 @@ beforeEach(() => {
body: "<strong>Hello world! (from server)</strong>",
createdAt: "2018-07-06T18:24:00.000Z",
editing: {
edited: false,
editableUntil: "2018-07-06T18:24:30.000Z",
},
},
src/core/client/stream/test/postReply.spec.tsx
+1
View File
@@ -46,6 +46,7 @@ beforeEach(() => {
pageInfo: { endCursor: null, hasNextPage: false },
},
editing: {
edited: false,
editableUntil: "2018-07-06T18:24:30.000Z",
},
},