From 5b2f52a2839e9cf81dd334083ccc4578f2b42a1f Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 13 Feb 2017 13:22:50 -0500
Subject: [PATCH] Restyling Load More button.

---
 client/coral-embed-stream/src/LoadMore.js   | 31 +++++++++++++++++++++
 client/coral-embed-stream/style/default.css |  6 ++++
 2 files changed, 37 insertions(+)
 create mode 100644 client/coral-embed-stream/src/LoadMore.js

diff --git a/client/coral-embed-stream/src/LoadMore.js b/client/coral-embed-stream/src/LoadMore.js
new file mode 100644
index 000000000..ce96f18b9
--- /dev/null
+++ b/client/coral-embed-stream/src/LoadMore.js
@@ -0,0 +1,31 @@
+import React 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 = (id, comments, loadMore) => {
+
+  if (!comments.length) {
+    return;
+  }
+
+  loadMore({
+    limit: 10,
+    cursor: comments[comments.length - 1].created_at,
+    asset_id: id,
+    sort: 'REVERSE_CHRONOLOGICAL'
+  });
+};
+
+const LoadMore = ({id, comments, loadMore}) => comments.length > 5 ?
+  <Button
+    className='coral-load-more'
+    onClick={() => loadMoreComments(id, comments, loadMore)}>
+    {
+      lang.t('loadMore')
+    }
+  </Button>
+  : null;
+
+export default LoadMore;
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 2d7f478c1..8d93f08e9 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -304,3 +304,9 @@ hr {
 .close-comments-alert i.material-icons {
   font-size: 16px !important;
 }
+
+/* Load More */
+
+.coral-load-more {
+  width: 100%;
+}