deleted page books & fix state in search

gatsby-config.js

@@ -23,7 +23,7 @@ module.exports = {
       },
       {
         name: 'Ресурсы',
-        link: '/books'
+        link: '/deleted'
       }
     ],
     social: {

src/components/Articles/Search/Search.js

@@ -2,18 +2,19 @@ import React from 'react'
 import { navigate } from 'gatsby'
 import PropTypes from 'prop-types'
 
-const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles, setLimit }) => {
+const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles, setLimit, onPage }) => {
 	const handleInput = e => {
 		const query = e.target.value
 		if (query === '') {
 			navigate('/articles/')
 			setQuery('')
+			setLimit(onPage)
 			return null
 		}
 		navigate(`/articles/?search=${query.trim()}`)
 		setQuery(query)
 		setFiltredArticles(filterArticles(allArticles))
-		setLimit(6)
+		setLimit(onPage)
 	}
 
 	return (

src/components/Offers/Books/BookItem.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types'
-import { Link } from 'gatsby'
-import slugify from '../../../helpers/slugify'
-
-const BookItem = ({ title }) => {
-  return (
-    <div className="book-item">
-      <Link to={`/books#${slugify(title)}`}>{title}</Link>
-    </div>
-  )
-}
-
-export default BookItem
-
-BookItem.propTypes = {
-  title: PropTypes.string
-}

src/components/Offers/Books/Books.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import BooksIcon from '../../../images/books-icon.svg'
-
-const Books = ({ children }) => {
-  return (
-    <div className="offers-books offer-box">
-      <div className="offers-books__heading offer-heading">
-        <BooksIcon />
-        Что почитать
-      </div>
-      <div className="offers-books__content">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Books

src/components/Offers/Offers.js

@@ -2,21 +2,17 @@ import React from 'react';
 import { useLocation } from '@reach/router'
 import usePopularArticlesQuery from '../../hooks/usePopularArticlesQuery'
 import useTagsQuery from '../../hooks/useTagsQuery'
-import useBooksQuery from '../../hooks/useBooksQuery'
 import Popular from './Popular/Popular'
 import Tags from './Tags/Tags'
-import Books from './Books/Books'
 import Subscription from './Subscription/Subscription'
 
 import PopularItem from './Popular/PopularItem'
 import TagItem from './Tags/TagItem'
-import BookItem from './Books/BookItem'
 
 const Offers = () => {
   const { pathname } = useLocation()
   const { articles } = usePopularArticlesQuery()
   const { tags } = useTagsQuery()
-  const { books } = useBooksQuery()
   
   return (
     <div style={{ height: pathname === '/' ? '78%' : '78.5%' }} className="offers">
@@ -26,9 +22,6 @@ const Offers = () => {
       <Tags>
         {tags.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
       </Tags>
-      <Books>
-        {books.map(({ node }, i) => <BookItem key={i} title={node.frontmatter.title} />)}
-      </Books>
       <Subscription />
     </div>
   )

src/hooks/useBooksQuery.js

@@ -1,20 +0,0 @@
-import { useStaticQuery, graphql } from 'gatsby'
-
-const useBooksQuery = () => {
-  const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
-    {
-      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "book"}}}) {
-        edges {
-          node {
-            frontmatter {
-              title
-            }
-          }
-        }
-      }
-    }
-  `)
-  return { books: edges }
-}
-
-export default useBooksQuery

src/pages/articles.js

@@ -36,10 +36,12 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
 			||	frontmatter.tags.join('').toLowerCase().includes(query.toLowerCase().trim())
 		)
   }, [query])
+  
 
   React.useEffect(() => {
+    setLimit(onPage)
     if (query !== '') setFiltredArticles(filterArticles(allArticles.edges))
-  }, [setFiltredArticles, filterArticles, allArticles.edges, query])
+  }, [setFiltredArticles, filterArticles, allArticles.edges, query, onPage])
 
   return (
     <Layout>
@@ -55,7 +57,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} setLimit={setLimit} />
+                <Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} setLimit={setLimit} onPage={onPage} />
                 <div className="articles-info">
                   {query && query !== ''  ? filtredArticles.length === 0 ? <p><SearchIcon />&nbsp;&nbsp;Ничего не найдено</p> : null : null}
                 </div>

src/pages/books.js

@@ -1,71 +0,0 @@
-import React from "react"
-import { Main } from '../ui/ui'
-import { Grid, Row, Col } from 'react-flexbox-grid'
-import { graphql } from 'gatsby'
-import SEO from '../components/SEO/SEO'
-import Layout from '../components/Layout/Layout'
-import Books from '../components/Books/Books'
-import Offers from '../components/Offers/Offers'
-import Newsletter from '../components/Newsletter/Newsletter'
-
-import BooksIcon from '../images/books-icon__large.svg'
-
-const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
-  return (
-    <Layout>
-      <SEO title='Ресурсы' />
-      <Main>
-        <Grid fluid>
-          <Row>
-            <Col lg={9} xs={12}>
-              <div className="books">
-                <div className="books-heading">
-                  <BooksIcon />
-                  <h1>Что почитать</h1>
-                </div>
-                <div className="books-description">
-                  <p>
-                    Здесь представлен список книг по программированию, которые стоило бы прочитать
-                  </p>
-                </div>
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col lg={9} xs={12}>
-              <Books data={edges} />
-              <Newsletter />
-            </Col>
-            <Col lg={3} xs={12}>
-              <Offers /> 
-            </Col>
-          </Row>
-        </Grid>
-      </Main>
-    </Layout>
-  )
-}
-
-export const query = graphql`
-  {
-    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "book"}}}) {
-      edges {
-        node {
-          frontmatter {
-            title
-            image {
-              childImageSharp {
-                fluid(maxWidth: 1400) {
-                  ...GatsbyImageSharpFluid
-                }
-              }
-            }
-          }
-          html
-        }
-      }
-    }
-  }
-`
-
-export default BooksPage