From d49a30c50af6b26826d3e2b0a7545bfd8bbeddeb Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 27 Sep 2018 14:56:28 +0200
Subject: [PATCH] fix: pass settings to deeper ReplyListContainer

---
 .../tabs/comments/components/ReplyList.tsx    | 17 ++-----
 .../containers/ReplyListContainer.tsx         | 25 ++++++++--
 .../ReplyListContainer.spec.tsx.snap          | 49 ++++++++++++++++++-
 src/core/client/stream/test/fixtures.ts       |  3 +-
 4 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
index 504ac09d0..d0a2cb3a7 100644
--- a/src/core/client/stream/tabs/comments/components/ReplyList.tsx
+++ b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
@@ -15,28 +15,19 @@ export interface ReplyListProps {
     id: string;
   };
   comments: ReadonlyArray<
-    { id: string } & PropTypesOf<typeof CommentContainer>["comment"]
+    { id: string; replyListElement?: React.ReactElement<any> } & PropTypesOf<
+      typeof CommentContainer
+    >["comment"]
   >;
   settings: PropTypesOf<typeof CommentContainer>["settings"];
   onShowAll?: () => void;
   hasMore?: boolean;
   disableShowAll?: boolean;
   indentLevel?: number;
-  ReplyListComponent?: React.ComponentType<any>;
   localReply?: boolean;
   disableReplies?: boolean;
 }
 
-function getReplyListElement(
-  { ReplyListComponent, me, asset }: ReplyListProps,
-  comment: PropTypesOf<typeof CommentContainer>["comment"]
-) {
-  if (!ReplyListComponent) {
-    return null;
-  }
-  return <ReplyListComponent me={me} comment={comment} asset={asset} />;
-}
-
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <HorizontalGutter
@@ -55,7 +46,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             localReply={props.localReply}
             disableReplies={props.disableReplies}
           />
-          {getReplyListElement(props, comment)}
+          {comment.replyListElement}
         </HorizontalGutter>
       ))}
       {props.hasMore && (
diff --git a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
index 130a355a8..d646e2d1b 100644
--- a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
@@ -14,20 +14,26 @@ import {
 } from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql";
 
 import { StatelessComponent } from "enzyme";
+import { FragmentKeys } from "talk-framework/lib/relay/types";
 import ReplyList from "../components/ReplyList";
 import LocalReplyListContainer from "./LocalReplyListContainer";
 
-export interface InnerProps {
+export interface BaseProps {
   me: MeData | null;
   asset: AssetData;
   comment: CommentData;
   settings: SettingsData;
   relay: RelayPaginationProp;
   indentLevel: number;
-  ReplyListComponent: React.ComponentType<any> | undefined;
   localReply: boolean | undefined;
 }
 
+export type InnerProps = BaseProps & {
+  ReplyListComponent:
+    | React.ComponentType<{ [P in FragmentKeys<BaseProps>]: any }>
+    | undefined;
+};
+
 // TODO: (cvle) This should be autogenerated.
 interface FragmentVariables {
   count: number;
@@ -46,7 +52,17 @@ export class ReplyListContainer extends React.Component<InnerProps> {
     ) {
       return null;
     }
-    const comments = this.props.comment.replies.edges.map(edge => edge.node);
+    const comments = this.props.comment.replies.edges.map(edge => ({
+      ...edge.node,
+      replyListElement: this.props.ReplyListComponent && (
+        <this.props.ReplyListComponent
+          me={this.props.me}
+          comment={edge.node}
+          asset={this.props.asset}
+          settings={this.props.settings}
+        />
+      ),
+    }));
     return (
       <ReplyList
         me={this.props.me}
@@ -58,7 +74,6 @@ export class ReplyListContainer extends React.Component<InnerProps> {
         hasMore={this.props.relay.hasMore()}
         disableShowAll={this.state.disableShowAll}
         indentLevel={this.props.indentLevel}
-        ReplyListComponent={this.props.ReplyListComponent}
         localReply={this.props.localReply}
       />
     );
@@ -92,7 +107,7 @@ function createReplyListContainer(
     settings: GraphQLTaggedNode;
   },
   query: GraphQLTaggedNode,
-  ReplyListComponent?: React.ComponentType<any>,
+  ReplyListComponent?: InnerProps["ReplyListComponent"],
   localReply?: boolean
 ) {
   return withProps({ indentLevel, ReplyListComponent, localReply })(
diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
index 96ee0a0a4..e9893372a 100644
--- a/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`renders correctly 1`] = `
 <ReplyList
-  ReplyListComponent={[Function]}
   asset={
     Object {
       "id": "asset-id",
@@ -31,9 +30,51 @@ exports[`renders correctly 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": <ReplyListComponent
+          asset={
+            Object {
+              "id": "asset-id",
+            }
+          }
+          comment={
+            Object {
+              "id": "comment-1",
+            }
+          }
+          me={null}
+          settings={
+            Object {
+              "reaction": Object {
+                "icon": "thumb_up_alt",
+                "label": "Respect",
+              },
+            }
+          }
+        />,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": <ReplyListComponent
+          asset={
+            Object {
+              "id": "asset-id",
+            }
+          }
+          comment={
+            Object {
+              "id": "comment-2",
+            }
+          }
+          me={null}
+          settings={
+            Object {
+              "reaction": Object {
+                "icon": "thumb_up_alt",
+                "label": "Respect",
+              },
+            }
+          }
+        />,
       },
     ]
   }
@@ -85,9 +126,11 @@ exports[`when has more replies renders hasMore 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": undefined,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": undefined,
       },
     ]
   }
@@ -138,9 +181,11 @@ exports[`when has more replies when showing all disables show all button 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": undefined,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": undefined,
       },
     ]
   }
@@ -191,9 +236,11 @@ exports[`when has more replies when showing all enable show all button after loa
     Array [
       Object {
         "id": "comment-1",
+        "replyListElement": undefined,
       },
       Object {
         "id": "comment-2",
+        "replyListElement": undefined,
       },
     ]
   }
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index 6fd0f7338..3eee6a7eb 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -1,7 +1,8 @@
 export const settings = {
   reaction: {
-    icon: "thumb_up_alt",
+    icon: "thumb_up",
     label: "Respect",
+    labelActive: "Respected",
   },
 };