From 0c777cbad491fc8ded814651d4be52ce00309452 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 8 Feb 2017 08:59:38 -0800
Subject: [PATCH] Adding loadMore function.

---
 client/coral-embed-stream/src/Embed.js        | 19 +++++++++++++-
 .../graphql/queries/getCounts.graphql         | 10 ++++++++
 .../coral-framework/graphql/queries/index.js  | 25 +++++++++++++++++++
 .../graphql/queries/loadMore.graphql          |  7 ++++++
 .../graphql/queries/streamQuery.graphql       |  4 +--
 package.json                                  |  4 +--
 6 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 client/coral-framework/graphql/queries/getCounts.graphql
 create mode 100644 client/coral-framework/graphql/queries/loadMore.graphql

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index a853efead..3eb12b04f 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -3,7 +3,7 @@ import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
 
-import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
+import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui';
 
 const {logout, showSignInDialog, requestConfirmEmail} = authActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -77,6 +77,17 @@ class Embed extends Component {
     }
   }
 
+  loadMoreComments = () => {
+    this.props.loadMore({
+      limit: 10,
+      cursor: new Date(),
+      asset_id: this.props.asset.id,
+      sort: 'REVERSE_CHRONOLOGICAL'
+    })
+    .then((result) => console.log('result', result))
+    .catch((err) => console.log('err', err));
+  }
+
   render () {
     const {activeTab} = this.state;
     const {closedAt} = this.props.asset;
@@ -95,6 +106,8 @@ class Embed extends Component {
       return <Spinner />;
     }
 
+    console.log('Render', this.props.data);
+
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
@@ -155,6 +168,10 @@ class Embed extends Component {
               clearNotification={this.props.clearNotification}
               notification={{text: null}}
             />
+          <Button
+            onClick={() => this.loadMoreComments()}>
+            Load More
+          </Button>
         </TabContent>
          <TabContent show={activeTab === 1}>
            <SettingsContainer
diff --git a/client/coral-framework/graphql/queries/getCounts.graphql b/client/coral-framework/graphql/queries/getCounts.graphql
new file mode 100644
index 000000000..ff09a0498
--- /dev/null
+++ b/client/coral-framework/graphql/queries/getCounts.graphql
@@ -0,0 +1,10 @@
+query LoadCommentCounts($asset_id: ID, $limit: Int = 5, $sort: SORT_ORDER) {
+  asset(id: $asset_id) {
+    id
+    commentCount
+    comments(sort: $sort, limit: $limit) {
+      id
+      replyCount
+    }
+  }
+}
diff --git a/client/coral-framework/graphql/queries/index.js b/client/coral-framework/graphql/queries/index.js
index 7ce065baa..7916b9b28 100644
--- a/client/coral-framework/graphql/queries/index.js
+++ b/client/coral-framework/graphql/queries/index.js
@@ -1,5 +1,6 @@
 import {graphql} from 'react-apollo';
 import STREAM_QUERY from './streamQuery.graphql';
+import LOAD_MORE from './loadMore.graphql';
 import MY_COMMENT_HISTORY from './myCommentHistory.graphql';
 
 function getQueryVariable(variable) {
@@ -21,6 +22,30 @@ export const queryStream = graphql(STREAM_QUERY, {
     variables: {
       asset_url: getQueryVariable('asset_url')
     }
+  }),
+  props: ({data}) => ({
+    data,
+    loadMore: ({limit, cursor, parent_id, asset_id, sort}) => {
+      return data.fetchMore({
+        query: LOAD_MORE,
+        variables: {
+          limit,
+          cursor,
+          parent_id,
+          asset_id,
+          sort
+        },
+        updateQuery: ({asset}, {fetchMoreResult:{data:{new_top_level_comments}}}) => {
+          const comments = asset.comments.concat(new_top_level_comments);
+          return {
+            asset: {
+              ...asset,
+              comments
+            }
+          };
+        }
+      });
+    }
   })
 });
 
diff --git a/client/coral-framework/graphql/queries/loadMore.graphql b/client/coral-framework/graphql/queries/loadMore.graphql
new file mode 100644
index 000000000..a85eaecca
--- /dev/null
+++ b/client/coral-framework/graphql/queries/loadMore.graphql
@@ -0,0 +1,7 @@
+#import "../fragments/commentView.graphql"
+
+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
+  }
+}
diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql
index 583a2db13..bfd7cee33 100644
--- a/client/coral-framework/graphql/queries/streamQuery.graphql
+++ b/client/coral-framework/graphql/queries/streamQuery.graphql
@@ -18,9 +18,9 @@ query AssetQuery($asset_url: String!) {
             requireEmailConfirmation
         }
         commentCount
-        comments {
+        comments(limit: 2) {
             ...commentView
-            replies {
+            replies(limit: 2) {
                 ...commentView
             }
         }
diff --git a/package.json b/package.json
index 548119cfc..048d487be 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
   },
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
-    "apollo-client": "^0.7.3",
+    "apollo-client": "^0.8.3",
     "bcrypt": "^0.8.7",
     "body-parser": "^1.15.2",
     "cli-table": "^0.3.1",
@@ -82,7 +82,7 @@
     "passport": "^0.3.2",
     "passport-facebook": "^2.1.1",
     "passport-local": "^1.0.0",
-    "react-apollo": "^0.8.1",
+    "react-apollo": "^0.10.0",
     "redis": "^2.6.3",
     "uuid": "^2.0.3"
   },