From 069195d1508fb5406d2a71dec3c080701fdbea78 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 15 Jul 2020 16:56:33 +0300
Subject: [PATCH] load more in sitemetadata

---
 gatsby-config.js                    | 6 ++++++
 src/components/Articles/Articles.js | 4 +++-
 src/hooks/useSiteMetadataQuery.js   | 6 ++++++
 src/pages/articles.js               | 4 +++-
 src/templates/categoryTemplate.js   | 4 ++--
 src/templates/tagTemplate.js        | 4 ++--
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 76efc39..af11530 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -29,6 +29,12 @@ module.exports = {
       telegram: 'https://t.me/devthread',
       twitter: 'https://twitter.com/devthread',
       yadzen: 'https://zen.yandex.ru/'
+    },
+    options: {
+      articles: {
+        onPage: 6,
+        onLoadMore: 2
+      }
     }
   },
   plugins: [
diff --git a/src/components/Articles/Articles.js b/src/components/Articles/Articles.js
index e07aeef..56eca50 100644
--- a/src/components/Articles/Articles.js
+++ b/src/components/Articles/Articles.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types'
+import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import ArticleCard from './ArticleCard/ArticleCard'
 import Newsletter from '../Newsletter/Newsletter'
 
 const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
+  const { siteMetadata: { options: { articles: { onLoadMore } } } } = useSiteMetadataQuery()
   return (
     <>
       <div className="articles">
@@ -21,7 +23,7 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
         <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>
+            : <button className='btn-loadMore' onClick={() => setLimit(limit + onLoadMore)}>Загрузить еще&nbsp;&nbsp;<span role='img' aria-label='load more'>👇</span></button>
           }
         </div>
       </div>
diff --git a/src/hooks/useSiteMetadataQuery.js b/src/hooks/useSiteMetadataQuery.js
index 872c89f..d48232d 100644
--- a/src/hooks/useSiteMetadataQuery.js
+++ b/src/hooks/useSiteMetadataQuery.js
@@ -21,6 +21,12 @@ const useSiteMetadata = () => {
             twitter
             yadzen
           }
+          options {
+            articles {
+              onPage
+              onLoadMore
+            }
+          }
         }
       }
     }
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 1850539..46f53a2 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -5,6 +5,7 @@ import { graphql } from 'gatsby'
 import { useLocation } from '@reach/router'
 import * as queryString from 'query-string'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -18,9 +19,10 @@ import SearchIcon from '../images/search-icon.svg'
 
 const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
   const { categories } = useCategoriesQuery()
+  const { siteMetadata: { options: { articles: { onPage } } } } = useSiteMetadataQuery()
   const { search } = useLocation()
   
-  let [limit, setLimit] = React.useState(6)
+  let [limit, setLimit] = React.useState(onPage)
   const [filtredArticles, setFiltredArticles] = React.useState([])
   const [query, setQuery] = React.useState(queryString.parse(search).search || '')
   
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 4862a91..00b4c0d 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -13,9 +13,9 @@ import Offers from '../components/Offers/Offers'
 
 const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
-  const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+  const { siteMetadata: { siteUrl, options: { articles: { onPage } } } } = useSiteMetadataQuery()
 
-  let [limit, setLimit] = React.useState(6)
+  let [limit, setLimit] = React.useState(onPage)
 
   return (
     <Layout>
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index caf9fd1..72464bc 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -13,9 +13,9 @@ import Offers from '../components/Offers/Offers'
 
 const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
-  const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+  const { siteMetadata: { siteUrl, options: { articles: { onPage } } } } = useSiteMetadataQuery()
   
-  let [limit, setLimit] = React.useState(6)
+  let [limit, setLimit] = React.useState(onPage)
 
   return (
     <Layout>