From c756b22302c2d4e0792c9a5c006e050edaed7e6b Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 13 Feb 2017 15:15:27 -0500
Subject: [PATCH] Switching Load More to stateless component.

---
 client/coral-embed-stream/src/Embed.js      | 26 ++++++---------------
 client/coral-embed-stream/src/LoadMore.js   |  4 ++--
 client/coral-embed-stream/style/default.css |  1 +
 client/coral-framework/translations.json    |  2 ++
 4 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index 3acbc30d9..116c8d34e 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, 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
diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js
index ce96f18b9..e871af410 100644
--- a/client/coral-embed-stream/src/LoadMore.js
+++ b/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)}>
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 8d93f08e9..fd075be43 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -309,4 +309,5 @@ hr {
 
 .coral-load-more {
   width: 100%;
+  text-align: center;
 }
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index 9b56ba92c..031e132ec 100644
--- a/client/coral-framework/translations.json
+++ b/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",