Implement Timestamp

Merge branch 'next' into timestamp

Fix test and translations

Merge branch 'timestamp' of github.com:coralproject/talk into timestamp

* 'timestamp' of github.com:coralproject/talk:
  Fix test and translations
  Implement Timestamp

src/core/client/stream/components/Comment.spec.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+import Comment from "./Comment";
+
+it("renders username and body", () => {
+  const props = {
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    createdAt: new Date("December 17, 1995 03:24:00").toISOString(),
+  };
+  const renderer = createRenderer();
+  renderer.render(<Comment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders with gutterBottom", () => {
+  const props = {
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    createdAt: new Date("December 17, 1995 03:24:00").toISOString(),
+    gutterBottom: true,
+  };
+  const renderer = createRenderer();
+  renderer.render(<Comment {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/stream/components/Comment.tsx

@@ -2,7 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 
-import { Typography } from "talk-ui/components";
+import { Timestamp, Typography } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
 
@@ -12,6 +12,7 @@ export interface CommentProps {
     username: string;
   } | null;
   body: string | null;
+  createdAt: string;
   gutterBottom?: boolean;
 }
 
@@ -24,6 +25,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <Typography className={styles.author} gutterBottom>
         {props.author && props.author.username}
       </Typography>
+      <Timestamp date={props.createdAt} />
       <Typography>{props.body}</Typography>
     </div>
   );

src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders username and body 1`] = `
+<div
+  className="root"
+>
+  <withPropsOnChange(Typography)
+    className="author"
+    gutterBottom={true}
+  >
+    Marvin
+  </withPropsOnChange(Typography)>
+  <withPropsOnChange(Timestamp)
+    date="1995-12-17T06:24:00.000Z"
+  />
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;
+
+exports[`renders with gutterBottom 1`] = `
+<div
+  className="root gutterBottom"
+>
+  <withPropsOnChange(Typography)
+    className="author"
+    gutterBottom={true}
+  >
+    Marvin
+  </withPropsOnChange(Typography)>
+  <withPropsOnChange(Timestamp)
+    date="1995-12-17T06:24:00.000Z"
+  />
+  <withPropsOnChange(Typography)>
+    Woof
+  </withPropsOnChange(Typography)>
+</div>
+`;

src/core/client/stream/containers/CommentContainer.tsx

@@ -20,6 +20,7 @@ const enhanced = withFragmentContainer<{ data: Data }>(
       author {
         username
       }
+      createdAt
       body
     }
   `