From 4107fd367f6ebf39953c8d5220397863bf6a096c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 22 Sep 2018 00:55:55 +0200
Subject: [PATCH] Implement LocalReplyListContainer

---
 src/core/client/stream/local/local.graphql    |  1 +
 .../tabs/comments/components/ReplyList.tsx    |  6 +-
 .../containers/LocalReplyListContainer.tsx    | 63 +++++++++++++++++++
 .../containers/ReplyListContainer.tsx         | 10 ++-
 4 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx

diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 62e52d4e8..6c01257c5 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -21,6 +21,7 @@ type AuthPopup {
 
 extend type Comment {
   pending: Boolean
+  localReplies: CommentsConnection
 }
 
 type Local {
diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
index e942ae5a9..735c49600 100644
--- a/src/core/client/stream/tabs/comments/components/ReplyList.tsx
+++ b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
@@ -17,9 +17,9 @@ export interface ReplyListProps {
   comments: ReadonlyArray<
     { id: string } & PropTypesOf<typeof CommentContainer>["comment"]
   >;
-  onShowAll: () => void;
-  hasMore: boolean;
-  disableShowAll: boolean;
+  onShowAll?: () => void;
+  hasMore?: boolean;
+  disableShowAll?: boolean;
   indentLevel?: number;
   ReplyListComponent?: React.ComponentType<any>;
 }
diff --git a/src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx b/src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx
new file mode 100644
index 000000000..ddafe99a7
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx
@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import { graphql } from "react-relay";
+
+import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
+import { PropTypesOf } from "talk-framework/types";
+import { LocalReplyListContainer_asset as AssetData } from "talk-stream/__generated__/LocalReplyListContainer_asset.graphql";
+import { LocalReplyListContainer_comment as CommentData } from "talk-stream/__generated__/LocalReplyListContainer_comment.graphql";
+import { LocalReplyListContainer_me as MeData } from "talk-stream/__generated__/LocalReplyListContainer_me.graphql";
+
+import ReplyList from "../components/ReplyList";
+
+interface InnerProps {
+  indentLevel: number;
+  me: MeData;
+  asset: AssetData;
+  comment: CommentData;
+}
+
+export class LocalReplyListContainer extends Component<InnerProps> {
+  public render() {
+    if (!this.props.comment.localReplies) {
+      return null;
+    }
+    return (
+      <ReplyList
+        me={this.props.me}
+        comment={this.props.comment}
+        comments={this.props.comment.localReplies.edges.map(e => e.node)}
+        asset={this.props.asset}
+        indentLevel={this.props.indentLevel}
+      />
+    );
+  }
+}
+
+const enhanced = withFragmentContainer<InnerProps>({
+  me: graphql`
+    fragment LocalReplyListContainer_me on User {
+      ...CommentContainer_me
+    }
+  `,
+  asset: graphql`
+    fragment LocalReplyListContainer_asset on Asset {
+      ...CommentContainer_asset
+    }
+  `,
+  comment: graphql`
+    fragment LocalReplyListContainer_comment on Comment {
+      id
+      localReplies {
+        edges {
+          node {
+            id
+            ...CommentContainer_comment
+          }
+        }
+      }
+    }
+  `,
+})(LocalReplyListContainer);
+
+export type LocalReplyListContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
index f9744f55a..c707cdc94 100644
--- a/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
@@ -3,6 +3,7 @@ import { graphql, GraphQLTaggedNode, RelayPaginationProp } from "react-relay";
 import { withProps } from "recompose";
 
 import { withPaginationContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
 import { ReplyListContainer1_asset as AssetData } from "talk-stream/__generated__/ReplyListContainer1_asset.graphql";
 import { ReplyListContainer1_comment as CommentData } from "talk-stream/__generated__/ReplyListContainer1_comment.graphql";
 import { ReplyListContainer1_me as MeData } from "talk-stream/__generated__/ReplyListContainer1_me.graphql";
@@ -12,6 +13,7 @@ import {
 } from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql";
 
 import ReplyList from "../components/ReplyList";
+import LocalReplyListContainer from "./LocalReplyListContainer";
 
 export interface InnerProps {
   me: MeData | null;
@@ -121,11 +123,13 @@ const ReplyListContainer5 = createReplyListContainer(
     me: graphql`
       fragment ReplyListContainer5_me on User {
         ...CommentContainer_me
+        ...LocalReplyListContainer_me
       }
     `,
     asset: graphql`
       fragment ReplyListContainer5_asset on Asset {
         ...CommentContainer_asset
+        ...LocalReplyListContainer_asset
       }
     `,
     comment: graphql`
@@ -142,6 +146,7 @@ const ReplyListContainer5 = createReplyListContainer(
             node {
               id
               ...CommentContainer_comment
+              ...LocalReplyListContainer_comment
             }
           }
         }
@@ -162,7 +167,10 @@ const ReplyListContainer5 = createReplyListContainer(
           @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
       }
     }
-  `
+  `,
+  (props: PropTypesOf<typeof LocalReplyListContainer>) => (
+    <LocalReplyListContainer {...props} indentLevel={6} />
+  )
 );
 
 const ReplyListContainer4 = createReplyListContainer(