Merge branch 'master' into flags-button

client/coral-embed-stream/src/Embed.js

@@ -26,6 +26,7 @@ import ChangeDisplayNameContainer from '../../coral-sign-in/containers/ChangeDis
 import SettingsContainer from 'coral-settings/containers/SettingsContainer';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
+import LoadMore from './LoadMore';
 
 class Embed extends Component {
 
@@ -158,6 +159,11 @@ class Embed extends Component {
               clearNotification={this.props.clearNotification}
               notification={{text: null}}
             />
+          <LoadMore
+            assetId={asset.id}
+            comments={asset.comments}
+            moreComments={asset.commentCount > asset.comments.length}
+            loadMore={this.props.loadMore}/>
         </TabContent>
          <TabContent show={activeTab === 1}>
            <SettingsContainer

client/coral-embed-stream/src/LoadMore.js

@@ -0,0 +1,40 @@
+import React, {PropTypes} from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations.json';
+import {Button} from 'coral-ui';
+const lang = new I18n(translations);
+
+const loadMoreComments = (assetId, comments, loadMore) => {
+
+  if (!comments.length) {
+    return;
+  }
+
+  loadMore({
+    limit: 10,
+    cursor: comments[comments.length - 1].created_at,
+    assetId,
+    sort: 'REVERSE_CHRONOLOGICAL'
+  });
+};
+
+const LoadMore = ({assetId, comments, loadMore, moreComments}) => (
+  moreComments
+  ? <Button
+      className='coral-load-more'
+      onClick={() => loadMoreComments(assetId, comments, loadMore)}>
+      {
+        lang.t('loadMore')
+      }
+    </Button>
+  : null
+);
+
+LoadMore.propTypes = {
+  assetId: PropTypes.string.isRequired,
+  comments: PropTypes.array.isRequired,
+  moreComments: PropTypes.bool.isRequired,
+  loadMore: PropTypes.func.isRequired
+};
+
+export default LoadMore;

client/coral-embed-stream/src/Stream.js

@@ -47,8 +47,8 @@ class Stream extends React.Component {
     return (
       <div>
         {
-          comments.map(comment => {
-            return <Comment
+          comments.map(comment =>
+            <Comment
               refetch={refetch}
               setActiveReplyBox={this.setActiveReplyBox}
               activeReplyBox={this.state.activeReplyBox}
@@ -63,8 +63,8 @@ class Stream extends React.Component {
               showSignInDialog={showSignInDialog}
               key={comment.id}
               reactKey={comment.id}
-              comment={comment} />;
-          })
+              comment={comment} />
+          )
         }
       </div>
     );

client/coral-embed-stream/style/default.css

@@ -304,3 +304,16 @@ hr {
 .close-comments-alert i.material-icons {
   font-size: 16px !important;
 }
+
+/* Load More */
+
+button.coral-load-more {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  background-color: #2376D8;
+}
+
+button.coral-load-more:hover {
+  background-color: #4399FF;
+}

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,28 @@ 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: (oldData, {fetchMoreResult:{data:{new_top_level_comments}}}) => ({
+          ...oldData,
+          asset: {
+            ...oldData.asset,
+            comments: [...oldData.asset.comments, ...new_top_level_comments]
+          }
+        })
+      });
+    }
   })
 });
 

client/coral-framework/graphql/queries/loadMore.graphql

@@ -0,0 +1,10 @@
+#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
+    replies(limit: 3) {
+        ...commentView
+    }
+  }
+}

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -18,9 +18,9 @@ query AssetQuery($asset_url: String!) {
             requireEmailConfirmation
         }
         commentCount
-        comments {
+        comments(limit: 10) {
             ...commentView
-            replies {
+            replies(limit: 3) {
                 ...commentView
             }
         }

client/coral-framework/translations.json

@@ -3,6 +3,7 @@
     "successUpdateSettings": "The changes you have made have been applied to the comment stream on this article",
     "successNameUpdate": "Your username has been updated",
     "contentNotAvailable": "This content is not available",
+    "loadMore": "View more",
     "bannedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Flag, or write comments. Please contact moderator@fakeurl.com for more information",
     "editName": {
       "msg": "Your account is currently suspended because your username has been deemed inappropriate. To restore your account, please enter a new username. You may contact moderator@fakeurl.com for more information.",
@@ -35,6 +36,7 @@
     "contentNotAvailable": "El contenido no se encuentra disponible",
     "bannedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios. Por favor, contacta moderator@fakeurl for more information",
     "editNameMsg": "",
+    "loadMore": "Ver más",
     "error": {
       "emailNotVerified": "Dirección de correo electrónico {0} no verificada.",
       "email": "No es un email válido",

client/coral-plugin-stream/Stream.js

@@ -19,7 +19,6 @@ class Stream extends Component {
   }
 
   render() {
-    console.log(this.props);
     const {data} = this.props;
     return <div>
       <button onClick={this.logMeIn.bind(this)}>Login or whatever</button>