From e9d52b1853f67d65a338678800be97b98cb6a425 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 15 Jul 2020 16:02:04 +0300
Subject: [PATCH] load more btn

---
 src/components/Articles/Articles.js      | 12 ++++++++++--
 src/components/Articles/Articles.scss    |  4 ++++
 src/components/Articles/Search/Search.js |  3 ++-
 src/pages/articles.js                    |  7 +++----
 src/styles/global.scss                   |  8 ++++++++
 src/templates/categoryTemplate.js        |  8 +++++---
 src/templates/tagTemplate.js             |  6 ++++--
 7 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/Articles/Articles.js b/src/components/Articles/Articles.js
index 12c7cd6..891a196 100644
--- a/src/components/Articles/Articles.js
+++ b/src/components/Articles/Articles.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import ArticleCard from './ArticleCard/ArticleCard'
 import Newsletter from '../Newsletter/Newsletter'
 
-const Articles = ({ data: { edges }, limit = 6 }) => {
+const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
   return (
     <>
       <div className="articles">
@@ -15,6 +15,12 @@ const Articles = ({ data: { edges }, limit = 6 }) => {
             return null
           })}
         </div>
+        <div className="articles-loadMore">
+          {edges.length === limit || edges.length <= limit 
+            ? null
+            : <button className='btn-loadMore' onClick={() => setLimit(limit + 2)}>Загрузить еще&nbsp;&nbsp;<span role='img' aria-label='load more'>👇</span></button>
+          }
+        </div>
       </div>
       <Newsletter />
     </>
@@ -25,6 +31,8 @@ export default Articles
 
 Articles.propTypes = {
   data: PropTypes.shape({
-    edges: PropTypes.array
+    edges: PropTypes.array,
+    limit: PropTypes.number,
+    setLimit: PropTypes.func
   })
 }
\ No newline at end of file
diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss
index dc5681b..653fd75 100644
--- a/src/components/Articles/Articles.scss
+++ b/src/components/Articles/Articles.scss
@@ -56,6 +56,10 @@
     text-align: center;
     margin-bottom: 60px;
   }
+  & .articles-loadMore {
+    text-align: center;
+    margin-bottom: 30px;
+  }
 }
 
 .dark {
diff --git a/src/components/Articles/Search/Search.js b/src/components/Articles/Search/Search.js
index bb6562d..654c276 100644
--- a/src/components/Articles/Search/Search.js
+++ b/src/components/Articles/Search/Search.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { navigate } from 'gatsby'
 import PropTypes from 'prop-types'
 
-const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles }) => {
+const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles, setLimit }) => {
 	const handleInput = e => {
 		const query = e.target.value
 		if (query === '') {
@@ -14,6 +14,7 @@ const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, qu
 		navigate(`/articles/?search=${query.trim()}`)
 		setQuery(query)
 		setFiltredArticles(filterArticles(allArticles))
+		setLimit(6)
 	}
 
 	return (
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 707e1dc..1850539 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -53,7 +53,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
                 <Categories setQuery={setQuery}>
                   {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
                 </Categories>
-                <Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} />
+                <Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} setLimit={setLimit} />
                 <div className="articles-info">
                   {query && query !== ''  ? filtredArticles.length === 0 ? <p><SearchIcon />&nbsp;&nbsp;Ничего не найдено</p> : null : null}
                 </div>
@@ -63,10 +63,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
           <Row>
             <Col lg={9} xs={12}>
               {query && query !== '' 
-                ? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} /> : null
-                : <Articles data={edges} limit={limit} />
+                ? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} limit={limit} setLimit={setLimit} /> : null
+                : <Articles data={edges} limit={limit} setLimit={setLimit} />
               }
-              <span onClick={() => setLimit(limit + 2)}>load more</span>
             </Col >
             <Col lg={3} xs={12}>
               <Offers /> 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index bf612b2..5763a7c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -22,6 +22,14 @@
   }
 }
 
+.btn-loadMore {
+  background: none;
+  text-decoration: underline;
+  color: #6ab0f3;
+  cursor: pointer;
+  font-size: 15px;
+}
+
 .tag-item {
   margin-bottom: 13px;
   margin-right: 5px;
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index ab9a3df..4862a91 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -14,7 +14,9 @@ import Offers from '../components/Offers/Offers'
 const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
   const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
- 
+
+  let [limit, setLimit] = React.useState(6)
+
   return (
     <Layout>
       <SEO title={title} canonical={`${siteUrl}/articles`} />
@@ -30,14 +32,14 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
                   {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
                 </Categories>
                 <div className="articles-info">
-                  <p>Показано {edges.edges.length} из категории "{title}"</p>
+                  <p>Найдено {edges.edges.length} из категории "{title}"</p>
                 </div>
               </div>
             </Col>
           </Row>
           <Row>
             <Col lg={9} xs={12}>
-              <Articles data={edges} /> 
+              <Articles data={edges} limit={limit} setLimit={setLimit} /> 
             </Col>
             <Col lg={3} xs={12}>
               <Offers /> 
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index 198eeb6..caf9fd1 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -15,6 +15,8 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
   const { categories } = useCategoriesQuery()
   const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
   
+  let [limit, setLimit] = React.useState(6)
+
   return (
     <Layout>
       <SEO title={title} canonical={`${siteUrl}/articles`} />
@@ -30,14 +32,14 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
                   {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
                 </Categories>
                 <div className="articles-info">
-                  <p>Показано {edges.edges.length} по тегу "{title}"</p>
+                  <p>Найдено {edges.edges.length} по тегу "{title}"</p>
                 </div>
               </div>
             </Col>
           </Row>
           <Row>
             <Col lg={9} xs={12}>
-              <Articles data={edges} /> 
+              <Articles data={edges} limit={limit} setLimit={setLimit} /> 
             </Col>
             <Col lg={3} xs={12}>
               <Offers />