From 1f47f51806fa5383bf8dba4aa8025218b9c45397 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Sun, 3 Jun 2018 18:36:56 +0300
Subject: [PATCH] add show more button

close #25
---
 web/app/common/constants.js                   |  4 +++
 .../root/__show-more/root__show-more.scss     | 24 +++++++++++++++++
 web/app/components/root/index.js              |  1 +
 web/app/components/root/root.jsx              | 26 +++++++++++++++----
 web/app/components/thread/thread.jsx          |  1 +
 5 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/root/__show-more/root__show-more.scss

diff --git a/web/app/common/constants.js b/web/app/common/constants.js
index 3060a35f..5580fab3 100644
--- a/web/app/common/constants.js
+++ b/web/app/common/constants.js
@@ -6,6 +6,7 @@ const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
 const DEFAULT_LAST_COMMENTS_MAX = 15;
 const DEFAULT_MAX_COMMENT_SIZE = 1000;
+const MAX_SHOWN_ROOT_COMMENTS = 10;
 const DEFAULT_SORT = '-score';
 const PROVIDER_NAMES = {
   google: 'Google',
@@ -13,6 +14,7 @@ const PROVIDER_NAMES = {
   github: 'GitHub',
 };
 const LS_COLLAPSE_KEY = '__remarkCollapsed';
+const LS_SORT_KEY = '__remarkSort';
 
 module.exports = {
   BASE_URL,
@@ -23,7 +25,9 @@ module.exports = {
   COMMENT_NODE_CLASSNAME_PREFIX,
   DEFAULT_LAST_COMMENTS_MAX,
   DEFAULT_MAX_COMMENT_SIZE,
+  MAX_SHOWN_ROOT_COMMENTS,
   PROVIDER_NAMES,
   DEFAULT_SORT,
   LS_COLLAPSE_KEY,
+  LS_SORT_KEY,
 };
diff --git a/web/app/components/root/__show-more/root__show-more.scss b/web/app/components/root/__show-more/root__show-more.scss
new file mode 100644
index 00000000..8c171808
--- /dev/null
+++ b/web/app/components/root/__show-more/root__show-more.scss
@@ -0,0 +1,24 @@
+.root__show-more {
+  display: block;
+  width: 300px;
+  max-width: 100%;
+  height: 36px;
+  margin: 20px auto;
+  padding: 0;
+  background: #259C9A;
+  border-radius: 4px;
+  border: 0;
+  font-size: 14px;
+  line-height: 36px;
+  box-shadow: none;
+  color: #fff;
+  cursor: pointer;
+
+  &:hover, &:focus {
+    background: #0aa;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/web/app/components/root/index.js b/web/app/components/root/index.js
index 9d32ab28..a3a0ec53 100644
--- a/web/app/components/root/index.js
+++ b/web/app/components/root/index.js
@@ -8,5 +8,6 @@ require('./__input/root__input.scss');
 require('./__preloader/root__preloader.scss');
 require('./__pinned-comment/root__pinned-comment.scss');
 require('./__pinned-comments/root__pinned-comments.scss');
+require('./__show-more/root__show-more.scss');
 require('./__thread/root__thread.scss');
 require('./__threads/root__threads.scss');
diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx
index 8ebdef08..3d4a34a6 100644
--- a/web/app/components/root/root.jsx
+++ b/web/app/components/root/root.jsx
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import api from 'common/api';
 
-import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX, DEFAULT_SORT } from 'common/constants';
+import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX, DEFAULT_SORT, LS_SORT_KEY, MAX_SHOWN_ROOT_COMMENTS } from 'common/constants';
 import { url } from 'common/settings';
 import store from 'common/store';
 
@@ -12,8 +12,6 @@ import Input from 'components/input';
 import Preloader from 'components/preloader';
 import Thread from 'components/thread';
 
-const LS_SORT_KEY = '__remarkSort';
-
 export default class Root extends Component {
   constructor(props) {
     super(props);
@@ -31,6 +29,7 @@ export default class Root extends Component {
       isCommentsListLoading: false,
       user: {},
       sort,
+      commentsShown: MAX_SHOWN_ROOT_COMMENTS,
     };
 
     this.addComment = this.addComment.bind(this);
@@ -42,6 +41,7 @@ export default class Root extends Component {
     this.onSortChange = this.onSortChange.bind(this);
     this.onUnblockSomeone = this.onUnblockSomeone.bind(this);
     this.checkUrlHash = this.checkUrlHash.bind(this);
+    this.showMore = this.showMore.bind(this);
   }
 
   componentWillMount() {
@@ -170,7 +170,13 @@ export default class Root extends Component {
     store.replaceComment(comment);
   }
 
-  render({}, { config = {}, comments = [], user, sort, isLoaded, isBlockedVisible, isCommentsListLoading, bannedUsers }) {
+  showMore() {
+    this.setState({
+      commentsShown: this.state.commentsShown + MAX_SHOWN_ROOT_COMMENTS,
+    });
+  }
+
+  render({}, { config = {}, comments = [], user, sort, isLoaded, isBlockedVisible, isCommentsListLoading, bannedUsers, commentsShown }) {
     if (!isLoaded) {
       return (
         <div id={NODE_ID}>
@@ -232,8 +238,9 @@ export default class Root extends Component {
                   !!comments.length && !isCommentsListLoading && (
                     <div className="root__threads" role="list">
                       {
-                        comments.map(thread => (
+                        comments.slice(0, commentsShown).map(thread => (
                           <Thread
+                            key={thread.comment.id}
                             mix="root__thread"
                             mods={{ level: 0 }}
                             data={thread}
@@ -242,6 +249,15 @@ export default class Root extends Component {
                           />
                         ))
                       }
+
+                      {
+                        commentsShown < comments.length && (
+                          <button
+                            className="root__show-more"
+                            onClick={this.showMore}
+                          >Show more</button>
+                        )
+                      }
                     </div>
                   )
                 }
diff --git a/web/app/components/thread/thread.jsx b/web/app/components/thread/thread.jsx
index f22bbe21..e691c819 100644
--- a/web/app/components/thread/thread.jsx
+++ b/web/app/components/thread/thread.jsx
@@ -74,6 +74,7 @@ export default class Thread extends Component {
         {
           !collapsed && !!replies.length && replies.map(thread => (
             <Thread
+              key={thread.comment.id}
               data={thread}
               mods={{ level: mods.level < 5 ? mods.level + 1 : mods.level }}
               onReply={props.onReply}