Save comment draft + test

src/core/client/stream/containers/PostCommentFormContainer.spec.tsx

@@ -0,0 +1,99 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+import sinon from "sinon";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { timeout } from "talk-common/utils";
+import { createFakePymStorage } from "talk-framework/testHelpers";
+import { PostCommentFormContainer } from "./PostCommentFormContainer";
+
+const contextKey = "postCommentFormBody";
+
+it("renders correctly", async () => {
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: (() => {}) as any,
+    assetID: "asset-id",
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders with initialValues", async () => {
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: (() => {}) as any,
+    assetID: "asset-id",
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  await props.pymSessionStorage.setItem(contextKey, "Hello World!");
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("save values", async () => {
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: (() => {}) as any,
+    assetID: "asset-id",
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  await props.pymSessionStorage.setItem(contextKey, "Hello World!");
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  wrapper
+    .first()
+    .props()
+    .onChange({ values: { body: "changed" } });
+  expect(await props.pymSessionStorage.getItem(contextKey)).toBe("changed");
+});
+
+it("creates a comment", async () => {
+  const assetID = "asset-id";
+  const input = { body: "Hello World!" };
+  const createCommentStub = sinon.stub();
+  const form = { reset: noop };
+  const formMock = sinon.mock(form);
+  formMock
+    .expects("reset")
+    .withArgs({})
+    .once();
+
+  const props: PropTypesOf<typeof PostCommentFormContainer> = {
+    // tslint:disable-next-line:no-empty
+    createComment: createCommentStub,
+    assetID,
+    pymSessionStorage: createFakePymStorage(),
+  };
+
+  await props.pymSessionStorage.setItem(contextKey, "Hello World!");
+
+  const wrapper = shallow(<PostCommentFormContainer {...props} />);
+  await timeout();
+  wrapper.update();
+  wrapper
+    .first()
+    .props()
+    .onSubmit(input, form);
+  expect(
+    createCommentStub.calledWith({
+      assetID,
+      ...input,
+    })
+  ).toBeTruthy();
+  await timeout();
+  formMock.verify();
+});

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

@@ -1,6 +1,8 @@
-import React, { Component, ReactNode } from "react";
+import React, { Component } from "react";
 
+import { withContext } from "talk-framework/lib/bootstrap";
 import { BadUserInputError } from "talk-framework/lib/errors";
+import { PymStorage } from "talk-framework/lib/storage";
 import { PropTypesOf } from "talk-framework/types";
 
 import PostCommentForm, {
@@ -11,17 +13,48 @@ import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 interface InnerProps {
   createComment: CreateCommentMutation;
   assetID: string;
-  children?: ReactNode;
+  pymSessionStorage: PymStorage;
 }
 
-class PostCommentFormContainer extends Component<InnerProps> {
-  private onSubmit: PostCommentFormProps["onSubmit"] = async (input, form) => {
+interface State {
+  initialValues?: PostCommentFormProps["initialValues"];
+  initialized: boolean;
+}
+
+const contextKey = "postCommentFormBody";
+
+export class PostCommentFormContainer extends Component<InnerProps, State> {
+  public state: State = { initialized: false };
+
+  constructor(props: InnerProps) {
+    super(props);
+    this.init();
+  }
+
+  private async init() {
+    const body = await this.props.pymSessionStorage.getItem(contextKey);
+    if (body) {
+      this.setState({
+        initialValues: {
+          body,
+        },
+      });
+    }
+    this.setState({
+      initialized: true,
+    });
+  }
+
+  private handleOnSubmit: PostCommentFormProps["onSubmit"] = async (
+    input,
+    form
+  ) => {
     try {
       await this.props.createComment({
         assetID: this.props.assetID,
         ...input,
       });
-      form.reset();
+      form.reset({});
     } catch (error) {
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
@@ -31,11 +64,31 @@ class PostCommentFormContainer extends Component<InnerProps> {
     }
     return undefined;
   };
+
+  private handleOnChange: PostCommentFormProps["onChange"] = state => {
+    if (state.values.body) {
+      this.props.pymSessionStorage.setItem(contextKey, state.values.body);
+    } else {
+      this.props.pymSessionStorage.removeItem(contextKey);
+    }
+  };
+
   public render() {
-    return <PostCommentForm onSubmit={this.onSubmit} />;
+    if (!this.state.initialized) {
+      return null;
+    }
+    return (
+      <PostCommentForm
+        onSubmit={this.handleOnSubmit}
+        onChange={this.handleOnChange}
+        initialValues={this.state.initialValues}
+      />
+    );
   }
 }
 
-const enhanced = withCreateCommentMutation(PostCommentFormContainer);
+const enhanced = withContext(({ pymSessionStorage }) => ({
+  pymSessionStorage,
+}))(withCreateCommentMutation(PostCommentFormContainer));
 export type PostCommentFormContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

src/core/client/stream/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<PostCommentForm
+  onChange={[Function]}
+  onSubmit={[Function]}
+/>
+`;
+
+exports[`renders with initialValues 1`] = `
+<PostCommentForm
+  initialValues={
+    Object {
+      "body": "Hello World!",
+    }
+  }
+  onChange={[Function]}
+  onSubmit={[Function]}
+/>
+`;