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 => {

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

@@ -16,7 +16,7 @@ const AppContainer: StatelessComponent<InnerProps> = ({
   return <App showPermalinkView={!!commentID} />;
 };
 
-const enhanced = withLocalStateContainer<Local>(
+const enhanced = withLocalStateContainer(
   graphql`
     fragment AppContainerLocal on Local {
       commentID

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

@@ -28,7 +28,7 @@ export const CommentContainer: StatelessComponent<InnerProps> = props => {
   return <Comment {...rest} {...props.data} />;
 };
 
-const enhanced = withFragmentContainer<{ data: Data }>({
+const enhanced = withFragmentContainer<InnerProps>({
   data: graphql`
     fragment CommentContainer on Comment {
       ...CommentContainer_comment @relay(mask: false)

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

@@ -19,7 +19,7 @@ export const PermalinkContainer: StatelessComponent<InnerProps> = ({
   ) : null;
 };
 
-const enhanced = withLocalStateContainer<Local>(
+const enhanced = withLocalStateContainer(
   graphql`
     fragment PermalinkButtonContainerLocal on Local {
       assetURL

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

@@ -52,9 +52,7 @@ const enhanced = withContext(ctx => ({
   pym: ctx.pym,
 }))(
   withSetCommentIDMutation(
-    withFragmentContainer<{
-      comment: CommentData | null;
-    }>({
+    withFragmentContainer<PermalinkViewContainerProps>({
       comment: graphql`
         fragment PermalinkViewContainer_comment on Comment {
           ...CommentContainer

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

@@ -67,7 +67,6 @@ interface FragmentVariables {
 }
 
 const enhanced = withPaginationContainer<
-  { comment: Data },
   InnerProps,
   FragmentVariables,
   ReplyListContainerPaginationQueryVariables

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

@@ -64,7 +64,6 @@ interface FragmentVariables {
 }
 
 const enhanced = withPaginationContainer<
-  { asset: AssetData; user: UserData | null },
   InnerProps,
   FragmentVariables,
   StreamContainerPaginationQueryVariables

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

@@ -78,7 +78,7 @@ export class UserBoxContainer extends Component<InnerProps> {
 const enhanced = withSignOutMutation(
   withSetAuthPopupStateMutation(
     withShowAuthPopupMutation(
-      withLocalStateContainer<Local>(
+      withLocalStateContainer(
         graphql`
           fragment UserBoxContainerLocal on Local {
             authPopup {
@@ -89,7 +89,7 @@ const enhanced = withSignOutMutation(
           }
         `
       )(
-        withFragmentContainer<{ user: UserData | null }>({
+        withFragmentContainer<InnerProps>({
           user: graphql`
             fragment UserBoxContainer_user on User {
               username

src/core/client/stream/queries/PermalinkViewQuery.tsx

@@ -48,7 +48,7 @@ const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
   />
 );
 
-const enhanced = withLocalStateContainer<Local>(
+const enhanced = withLocalStateContainer(
   graphql`
     fragment PermalinkViewQueryLocal on Local {
       commentID

src/core/client/stream/queries/StreamQuery.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { ReadyState } from "react-relay";
 import {
@@ -23,6 +24,13 @@ export const render = ({
   }
 
   if (props) {
+    if (!props.asset) {
+      return (
+        <Localized id="comments-streamQuery-assetNotFound">
+          <div>Asset not found</div>
+        </Localized>
+      );
+    }
     return <StreamContainer asset={props.asset} user={props.me} />;
   }
 
@@ -54,7 +62,7 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
   />
 );
 
-const enhanced = withLocalStateContainer<Local>(
+const enhanced = withLocalStateContainer(
   graphql`
     fragment StreamQueryLocal on Local {
       assetID