Adding loadMore function.

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

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
+    }
+  }
+}

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
+            }
+          };
+        }
+      });
+    }
   })
 });
 

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
+  }
+}

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
             }
         }

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"
   },