From 174de3ce393d4789762b9faeb86936acdb1b96f3 Mon Sep 17 00:00:00 2001
From: sergeyyarkov <serzh.yarkov@gmail.com>
Date: Thu, 16 Jul 2020 19:27:55 +0300
Subject: [PATCH] load more articles on index page

---
 src/components/Offers/Offers.js | 2 +-
 src/pages/index.js              | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Offers/Offers.js b/src/components/Offers/Offers.js
index 7ec0a21..2f39a5a 100644
--- a/src/components/Offers/Offers.js
+++ b/src/components/Offers/Offers.js
@@ -19,7 +19,7 @@ const Offers = () => {
   const { books } = useBooksQuery()
   
   return (
-    <div style={{ height: pathname === '/' ? '56%' : '78.5%' }} className="offers">
+    <div style={{ height: pathname === '/' ? '78%' : '78.5%' }} className="offers">
       <Popular>
         {articles.map(({ node }, i) => <PopularItem key={i} slug={node.frontmatter.slug} title={node.frontmatter.title} />)}
       </Popular>
diff --git a/src/pages/index.js b/src/pages/index.js
index 3cee0c6..ecfc151 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,6 +2,7 @@ import React from "react"
 import { Link, graphql } from 'gatsby'
 import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
@@ -10,6 +11,9 @@ import Offers from '../components/Offers/Offers'
 import ArrowNext from '../images/arrow-next.svg'
 
 const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
+  const { siteMetadata: { options: { articles: { onPage } } } } = useSiteMetadataQuery()
+  let [limit, setLimit] = React.useState(onPage)
+
   return (
     <Layout>
       <SEO />
@@ -27,7 +31,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
           </Row>
           <Row>
             <Col lg={9} xs={12}>
-              <Articles data={edges} /> 
+              <Articles data={edges} limit={limit} setLimit={setLimit} /> 
             </Col>
             <Col lg={3} xs={12}>
               <Offers /> 
@@ -41,7 +45,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
 
 export const query = graphql`
   {
-    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 6) {
+    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}) {
       edges {
         node {
           frontmatter {