Finish porting to relay-1.7 including types

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

@@ -1,13 +1,14 @@
 import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
+import { PropTypesOf } from "talk-framework/types";
 import { Button, Typography } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
 export interface PermalinkViewProps {
-  comment: {} | null;
+  comment: PropTypesOf<typeof CommentContainer>["data"] | null;
   showAllCommentsHref: string | null;
   onShowAllComments: (e: MouseEvent<any>) => void;
 }

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

@@ -3,24 +3,27 @@ import { noop } from "lodash";
 import React from "react";
 import sinon, { SinonSpy } from "sinon";
 
+import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
 
 import ReplyList from "./ReplyList";
 
+const ReplyListN = removeFragmentRefs(ReplyList);
+
 it("renders correctly", () => {
-  const props: PropTypesOf<typeof ReplyList> = {
+  const props: PropTypesOf<typeof ReplyListN> = {
     commentID: "comment-id",
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
     onShowAll: noop,
     hasMore: false,
     disableShowAll: false,
   };
-  const wrapper = shallow(<ReplyList {...props} />);
+  const wrapper = shallow(<ReplyListN {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 describe("when there is more", () => {
-  const props: PropTypesOf<typeof ReplyList> = {
+  const props: PropTypesOf<typeof ReplyListN> = {
     commentID: "comment-id",
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
     onShowAll: sinon.spy(),
@@ -28,7 +31,7 @@ describe("when there is more", () => {
     disableShowAll: false,
   };
 
-  const wrapper = shallow(<ReplyList {...props} />);
+  const wrapper = shallow(<ReplyListN {...props} />);
   it("renders a load more button", () => {
     expect(wrapper).toMatchSnapshot();
   });
@@ -41,7 +44,7 @@ describe("when there is more", () => {
   });
 
   const wrapperDisabledButton = shallow(
-    <ReplyList {...props} disableShowAll />
+    <ReplyListN {...props} disableShowAll />
   );
   it("disables load more button", () => {
     expect(wrapperDisabledButton).toMatchSnapshot();

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

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import { PropTypesOf } from "talk-framework/types";
 import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
@@ -9,7 +10,9 @@ import Indent from "./Indent";
 
 export interface ReplyListProps {
   commentID: string;
-  comments: ReadonlyArray<{ id: string }>;
+  comments: ReadonlyArray<
+    { id: string } & PropTypesOf<typeof CommentContainer>["data"]
+  >;
   onShowAll: () => void;
   hasMore: boolean;
   disableShowAll: boolean;

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

@@ -3,12 +3,15 @@ import { noop } from "lodash";
 import React from "react";
 import sinon, { SinonSpy } from "sinon";
 
+import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
 
 import Stream from "./Stream";
 
+const StreamN = removeFragmentRefs(Stream);
+
 it("renders correctly", () => {
-  const props: PropTypesOf<typeof Stream> = {
+  const props: PropTypesOf<typeof StreamN> = {
     assetID: "asset-id",
     isClosed: false,
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
@@ -17,13 +20,13 @@ it("renders correctly", () => {
     hasMore: false,
     user: null,
   };
-  const wrapper = shallow(<Stream {...props} />);
+  const wrapper = shallow(<StreamN {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 describe("when use is logged in", () => {
   it("renders correctly", () => {
-    const props: PropTypesOf<typeof Stream> = {
+    const props: PropTypesOf<typeof StreamN> = {
       assetID: "asset-id",
       isClosed: false,
       comments: [{ id: "comment-1" }, { id: "comment-2" }],
@@ -32,13 +35,13 @@ describe("when use is logged in", () => {
       hasMore: false,
       user: {},
     };
-    const wrapper = shallow(<Stream {...props} />);
+    const wrapper = shallow(<StreamN {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });
 
 describe("when there is more", () => {
-  const props: PropTypesOf<typeof Stream> = {
+  const props: PropTypesOf<typeof StreamN> = {
     assetID: "asset-id",
     isClosed: false,
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
@@ -48,7 +51,7 @@ describe("when there is more", () => {
     user: null,
   };
 
-  const wrapper = shallow(<Stream {...props} />);
+  const wrapper = shallow(<StreamN {...props} />);
   it("renders a load more button", () => {
     expect(wrapper).toMatchSnapshot();
   });
@@ -58,7 +61,7 @@ describe("when there is more", () => {
     expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
   });
 
-  const wrapperDisabledButton = shallow(<Stream {...props} disableLoadMore />);
+  const wrapperDisabledButton = shallow(<StreamN {...props} disableLoadMore />);
   it("disables load more button", () => {
     expect(wrapperDisabledButton).toMatchSnapshot();
   });

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

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import { PropTypesOf } from "talk-framework/types";
 import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
@@ -14,11 +15,14 @@ import * as styles from "./Stream.css";
 export interface StreamProps {
   assetID: string;
   isClosed?: boolean;
-  comments: ReadonlyArray<{ id: string }>;
+  comments: ReadonlyArray<
+    { id: string } & PropTypesOf<typeof CommentContainer>["data"] &
+      PropTypesOf<typeof ReplyListContainer>["comment"]
+  >;
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
-  user: {} | null;
+  user: PropTypesOf<typeof UserBoxContainer>["user"] | null;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {