Implement reply

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

@@ -0,0 +1,20 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import IndentedComment from "./IndentedComment";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof IndentedComment> = {
+    indentLevel: 1,
+    id: "comment-id",
+    author: {
+      username: "Marvin",
+    },
+    body: "Woof",
+    createdAt: "1995-12-17T03:24:00.000Z",
+  };
+  const wrapper = shallow(<IndentedComment {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,17 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReplyButton from "./ReplyButton";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReplyButton> = {
+    id: "id",
+    onClick: noop,
+    active: true,
+  };
+  const wrapper = shallow(<ReplyButton {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -4,12 +4,14 @@ import React, { EventHandler, MouseEvent, StatelessComponent } from "react";
 import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
 
 interface Props {
+  id?: string;
   onClick?: EventHandler<MouseEvent<HTMLButtonElement>>;
   active?: boolean;
 }
 
 const ReplyButton: StatelessComponent<Props> = props => (
   <Button
+    id={props.id}
     onClick={props.onClick}
     variant="ghost"
     size="small"

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Indent
+  level={1}
+>
+  <Comment
+    author={
+      Object {
+        "username": "Marvin",
+      }
+    }
+    body="Woof"
+    createdAt="1995-12-17T03:24:00.000Z"
+    id="comment-id"
+  />
+</Indent>
+`;

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Button)
+  active={true}
+  id="id"
+  onClick={[Function]}
+  size="small"
+  variant="ghost"
+>
+  <MatchMediaWithContext
+    gtWidth="xs"
+  >
+    <withPropsOnChange(ButtonIcon)>
+      reply
+    </withPropsOnChange(ButtonIcon)>
+  </MatchMediaWithContext>
+  <Localized
+    id="comments-replyButton-reply"
+  >
+    <span>
+      Reply
+    </span>
+  </Localized>
+</withPropsOnChange(Button)>
+`;

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

@@ -20,6 +20,7 @@ interface FormProps {
 }
 
 export interface ReplyCommentFormProps {
+  id: string;
   className?: string;
   onSubmit: OnSubmit<FormProps>;
   onCancel?: EventHandler<MouseEvent<any>>;
@@ -27,73 +28,73 @@ export interface ReplyCommentFormProps {
   initialValues?: FormProps;
 }
 
-const ReplyCommentForm: StatelessComponent<ReplyCommentFormProps> = props => (
-  <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
-    {({ handleSubmit, submitting }) => (
-      <form
-        className={props.className}
-        autoComplete="off"
-        onSubmit={handleSubmit}
-        id="comments-replyCommentForm-form"
-      >
-        <FormSpy onChange={props.onChange} />
-        <HorizontalGutter>
-          <Field name="body" validate={required}>
-            {({ input, meta }) => (
-              <div>
-                <Localized id="comments-replyCommentForm-rteLabel">
-                  <AriaInfo
-                    component="label"
-                    htmlFor="comments-replyCommentForm-field"
+const ReplyCommentForm: StatelessComponent<ReplyCommentFormProps> = props => {
+  const inputID = `comments-replyCommentForm-rte-${props.id}`;
+  return (
+    <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
+      {({ handleSubmit, submitting }) => (
+        <form
+          className={props.className}
+          autoComplete="off"
+          onSubmit={handleSubmit}
+          id={`comments-replyCommentForm-form-${props.id}`}
+        >
+          <FormSpy onChange={props.onChange} />
+          <HorizontalGutter>
+            <Field name="body" validate={required}>
+              {({ input, meta }) => (
+                <div>
+                  <Localized id="comments-replyCommentForm-rteLabel">
+                    <AriaInfo component="label" htmlFor={inputID}>
+                      Write a reply
+                    </AriaInfo>
+                  </Localized>
+                  <Localized
+                    id="comments-replyCommentForm-rte"
+                    attrs={{ placeholder: true }}
                   >
-                    Write a reply
-                  </AriaInfo>
-                </Localized>
-                <Localized
-                  id="comments-replyCommentForm-rte"
-                  attrs={{ placeholder: true }}
+                    <RTE
+                      inputId={inputID}
+                      onChange={({ html }) => input.onChange(html)}
+                      value={input.value}
+                      placeholder="Write a reply"
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <Typography align="right" color="error" gutterBottom>
+                        {meta.error || meta.submitError}
+                      </Typography>
+                    )}
+                </div>
+              )}
+            </Field>
+            <Flex direction="row" justifyContent="flex-end" itemGutter="half">
+              <Localized id="comments-replyCommentForm-cancel">
+                <Button
+                  variant="outlined"
+                  disabled={submitting}
+                  onClick={props.onCancel}
                 >
-                  <RTE
-                    inputId="comments-replyCommentForm-field"
-                    onChange={({ html }) => input.onChange(html)}
-                    value={input.value}
-                    placeholder="Write a reply"
-                  />
-                </Localized>
-                {meta.touched &&
-                  (meta.error || meta.submitError) && (
-                    <Typography align="right" color="error" gutterBottom>
-                      {meta.error || meta.submitError}
-                    </Typography>
-                  )}
-              </div>
-            )}
-          </Field>
-          <Flex direction="row" justifyContent="flex-end" itemGutter="half">
-            <Localized id="comments-replyCommentForm-cancel">
-              <Button
-                variant="outlined"
-                disabled={submitting}
-                onClick={props.onCancel}
-              >
-                Cancel
-              </Button>
-            </Localized>
-            <Localized id="comments-replyCommentForm-submit">
-              <Button
-                color="primary"
-                variant="filled"
-                disabled={submitting}
-                type="submit"
-              >
-                Submit
-              </Button>
-            </Localized>
-          </Flex>
-        </HorizontalGutter>
-      </form>
-    )}
-  </Form>
-);
+                  Cancel
+                </Button>
+              </Localized>
+              <Localized id="comments-replyCommentForm-submit">
+                <Button
+                  color="primary"
+                  variant="filled"
+                  disabled={submitting}
+                  type="submit"
+                >
+                  Submit
+                </Button>
+              </Localized>
+            </Flex>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
 
 export default ReplyCommentForm;