From 00c2305ff73d38c7dc28c9fbc02754cb2937458d Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 14 Feb 2017 18:29:59 -0500
Subject: [PATCH 1/3] Adding view more button to replies.

---
 client/coral-embed-stream/src/Comment.js      | 13 +++++++++
 client/coral-embed-stream/src/Embed.js        |  1 +
 client/coral-embed-stream/src/LoadMore.js     | 15 ++++++----
 client/coral-embed-stream/src/Stream.js       |  2 ++
 client/coral-embed-stream/style/default.css   | 10 +++++++
 .../coral-framework/graphql/queries/index.js  | 28 +++++++++++++++----
 .../graphql/queries/loadMore.graphql          |  1 +
 .../graphql/queries/streamQuery.graphql       |  1 +
 8 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 3bf787a9c..034c44f6a 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -17,6 +17,7 @@ import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
+import LoadMore from 'coral-embed-stream/src/LoadMore';
 
 import styles from './Comment.css';
 
@@ -89,6 +90,7 @@ class Comment extends React.Component {
       showSignInDialog,
       postLike,
       postFlag,
+      loadMore,
       setActiveReplyBox,
       activeReplyBox,
       deleteAction
@@ -172,6 +174,17 @@ class Comment extends React.Component {
               comment={reply} />;
           })
         }
+        {
+          comment.replies &&
+          <div className='coral-load-more-replies'>
+            <LoadMore
+              id={asset.id}
+              comments={comment.replies}
+              parentId={comment.id}
+              moreComments={comment.replyCount > comment.replies.length}
+              loadMore={loadMore}/>
+          </div>
+        }
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index e5eec37cb..d58107934 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -151,6 +151,7 @@ class Embed extends Component {
               currentUser={user}
               postLike={this.props.postLike}
               postFlag={this.props.postFlag}
+              loadMore={this.props.loadMore}
               deleteAction={this.props.deleteAction}
               showSignInDialog={this.props.showSignInDialog}
               comments={asset.comments} />
diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js
index e871af410..e07c1aa35 100644
--- a/client/coral-embed-stream/src/LoadMore.js
+++ b/client/coral-embed-stream/src/LoadMore.js
@@ -4,24 +4,29 @@ import translations from 'coral-framework/translations.json';
 import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 
-const loadMoreComments = (id, comments, loadMore) => {
+const loadMoreComments = (id, comments, loadMore, parentId) => {
 
   if (!comments.length) {
     return;
   }
 
+  const cursor = parentId
+    ? comments[1].created_at
+    : comments[comments.length - 1].created_at;
+
   loadMore({
     limit: 10,
-    cursor: comments[comments.length - 1].created_at,
+    cursor,
     asset_id: id,
-    sort: 'REVERSE_CHRONOLOGICAL'
+    parent_id: parentId,
+    sort: parentId ? 'CHRONOLOGICAL' : 'REVERSE_CHRONOLOGICAL'
   });
 };
 
-const LoadMore = ({id, comments, loadMore, moreComments}) => moreComments ?
+const LoadMore = ({id, comments, loadMore, moreComments, parentId}) => moreComments ?
   <Button
     className='coral-load-more'
-    onClick={() => loadMoreComments(id, comments, loadMore)}>
+    onClick={() => loadMoreComments(id, comments, loadMore, parentId)}>
     {
       lang.t('loadMore')
     }
diff --git a/client/coral-embed-stream/src/Stream.js b/client/coral-embed-stream/src/Stream.js
index 6119cfc66..2f0f4b01b 100644
--- a/client/coral-embed-stream/src/Stream.js
+++ b/client/coral-embed-stream/src/Stream.js
@@ -39,6 +39,7 @@ class Stream extends React.Component {
       addNotification,
       postFlag,
       postLike,
+      loadMore,
       deleteAction,
       showSignInDialog,
       refetch
@@ -59,6 +60,7 @@ class Stream extends React.Component {
               currentUser={currentUser}
               postLike={postLike}
               postFlag={postFlag}
+              loadMore={loadMore}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}
               key={comment.id}
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index b2385616e..825262b56 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -317,3 +317,13 @@ button.coral-load-more {
 button.coral-load-more:hover {
   background-color: #4399FF;
 }
+
+.coral-load-more-replies {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.coral-load-more-replies button.coral-load-more {
+  width: initial;
+}
diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
index a08f87c3c..83d5bfb76 100644
--- a/client/coral-framework/graphql/queries/index.js
+++ b/client/coral-framework/graphql/queries/index.js
@@ -26,6 +26,7 @@ export const queryStream = graphql(STREAM_QUERY, {
   props: ({data}) => ({
     data,
     loadMore: ({limit, cursor, parent_id, asset_id, sort}) => {
+      console.log('parent_id', parent_id);
       return data.fetchMore({
         query: LOAD_MORE,
         variables: {
@@ -35,13 +36,28 @@ export const queryStream = graphql(STREAM_QUERY, {
           asset_id,
           sort
         },
-        updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => ({
-          ...oldData,
-          asset: {
-            ...oldData.asset,
-            comments: [...oldData.asset.comments, ...new_top_level_comments]
+        updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) =>
+        
+          // If loading more replies
+          parent_id ? {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: oldData.asset.comments.map((comment) =>
+                comment.id === parent_id
+                ? {...comment, replies: [...comment.replies, ...new_top_level_comments]}
+                : comment)
+            }
+          }
+
+          // If loading more top-level comments
+          : {
+            ...oldData,
+            asset: {
+              ...oldData.asset,
+              comments: [...oldData.asset.comments, ...new_top_level_comments]
+            }
           }
-        })
       });
     }
   })
diff --git a/client/coral-framework/graphql/queries/loadMore.graphql b/client/coral-framework/graphql/queries/loadMore.graphql
index c7dca9bf3..10b3c2e34 100644
--- a/client/coral-framework/graphql/queries/loadMore.graphql
+++ b/client/coral-framework/graphql/queries/loadMore.graphql
@@ -3,6 +3,7 @@
 query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER) {
   new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort}) {
     ...commentView
+    replyCount
     replies(limit: 3) {
         ...commentView
     }
diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql
index bab18490d..18f2a8c75 100644
--- a/client/coral-framework/graphql/queries/streamQuery.graphql
+++ b/client/coral-framework/graphql/queries/streamQuery.graphql
@@ -20,6 +20,7 @@ query AssetQuery($asset_url: String!) {
         commentCount
         comments(limit: 10) {
             ...commentView
+            replyCount
             replies(limit: 3) {
                 ...commentView
             }

From fbf543727b374882cdd864e2791cce7adcede838 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 14 Feb 2017 18:54:51 -0500
Subject: [PATCH 2/3] Moving load more limit to constant.

---
 client/coral-embed-stream/src/LoadMore.js    | 3 ++-
 client/coral-framework/constants/comments.js | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-framework/constants/comments.js

diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js
index e07c1aa35..ff56f6065 100644
--- a/client/coral-embed-stream/src/LoadMore.js
+++ b/client/coral-embed-stream/src/LoadMore.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
+import {ADDTL_COMMENTS_ON_LOAD_MORE} from 'coral-framework/constants/comments';
 import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 
@@ -15,7 +16,7 @@ const loadMoreComments = (id, comments, loadMore, parentId) => {
     : comments[comments.length - 1].created_at;
 
   loadMore({
-    limit: 10,
+    limit: ADDTL_COMMENTS_ON_LOAD_MORE,
     cursor,
     asset_id: id,
     parent_id: parentId,
diff --git a/client/coral-framework/constants/comments.js b/client/coral-framework/constants/comments.js
new file mode 100644
index 000000000..17ea2223e
--- /dev/null
+++ b/client/coral-framework/constants/comments.js
@@ -0,0 +1 @@
+export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;

From 88843486f1e996a2690b00f615d2efc45d275b42 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 15 Feb 2017 13:21:34 -0500
Subject: [PATCH 3/3] Removing log statement.

---
 client/coral-framework/graphql/queries/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
index 83d5bfb76..09b3159d0 100644
--- a/client/coral-framework/graphql/queries/index.js
+++ b/client/coral-framework/graphql/queries/index.js
@@ -26,7 +26,6 @@ export const queryStream = graphql(STREAM_QUERY, {
   props: ({data}) => ({
     data,
     loadMore: ({limit, cursor, parent_id, asset_id, sort}) => {
-      console.log('parent_id', parent_id);
       return data.fetchMore({
         query: LOAD_MORE,
         variables: {
@@ -37,7 +36,7 @@ export const queryStream = graphql(STREAM_QUERY, {
           sort
         },
         updateQuery: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) =>
-        
+
           // If loading more replies
           parent_id ? {
             ...oldData,