Switching Load More to stateless component.

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, Button} from 'coral-ui';
+import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
 
 const {logout, showSignInDialog, requestConfirmEmail} = authActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -25,6 +25,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 {
 
@@ -77,20 +78,6 @@ class Embed extends Component {
     }
   }
 
-  loadMoreComments = () => {
-
-    if (!this.props.asset.comments.length) {
-      return;
-    }
-
-    this.props.loadMore({
-      limit: 10,
-      cursor: this.props.asset.comments[this.props.asset.comments.length - 1].created_at,
-      asset_id: this.props.asset.id,
-      sort: 'REVERSE_CHRONOLOGICAL'
-    });
-  }
-
   render () {
     const {activeTab} = this.state;
     const {closedAt} = this.props.asset;
@@ -170,10 +157,11 @@ class Embed extends Component {
               clearNotification={this.props.clearNotification}
               notification={{text: null}}
             />
-          <Button
-            onClick={() => this.loadMoreComments()}>
-            Load More
-          </Button>
+          <LoadMore
+            id={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

@@ -1,7 +1,7 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
-import Button from 'coral-ui';
+import {Button} from 'coral-ui';
 const lang = new I18n(translations);
 
 const loadMoreComments = (id, comments, loadMore) => {
@@ -18,7 +18,7 @@ const loadMoreComments = (id, comments, loadMore) => {
   });
 };
 
-const LoadMore = ({id, comments, loadMore}) => comments.length > 5 ?
+const LoadMore = ({id, comments, loadMore, moreComments}) => moreComments ?
   <Button
     className='coral-load-more'
     onClick={() => loadMoreComments(id, comments, loadMore)}>

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

@@ -309,4 +309,5 @@ hr {
 
 .coral-load-more {
   width: 100%;
+  text-align: center;
 }

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 display name has been updated",
     "contentNotAvailable": "This content is not available",
+    "loadMore": "Load 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 display name 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": "",
     "error": {
       "emailNotVerified": "Dirección de correo electrónico {0} no verificada.",
       "email": "No es un email válido",