load more btn

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
   })
 }

src/components/Articles/Articles.scss

@@ -56,6 +56,10 @@
     text-align: center;
     margin-bottom: 60px;
   }
+  & .articles-loadMore {
+    text-align: center;
+    margin-bottom: 30px;
+  }
 }
 
 .dark {

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 (

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
+                ? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} limit={limit} setLimit={setLimit} /> : null
-                : <Articles data={edges} limit={limit} />
+                : <Articles data={edges} limit={limit} setLimit={setLimit} />
               }
-              <span onClick={() => setLimit(limit + 2)}>load more</span>
             </Col >
             <Col lg={3} xs={12}>
               <Offers /> 

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;

src/templates/categoryTemplate.js

@@ -15,6 +15,8 @@ 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 /> 

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 />