render upd

src/components/Articles/Articles.js

@@ -3,12 +3,17 @@ import PropTypes from 'prop-types'
 import ArticleCard from './ArticleCard/ArticleCard'
 import Newsletter from '../Newsletter/Newsletter'
 
-const Articles = ({ data: { edges } }) => {
+const Articles = ({ data: { edges }, limit = 6 }) => {
   return (
     <>
       <div className="articles">
         <div className="articles-content">
-          {edges.map(({ node }, e) => <ArticleCard key={e} data={node.frontmatter} />)}
+          {edges.map(({ node }, i) => {
+            if (i < limit) {
+              return <ArticleCard key={i} data={node.frontmatter} />
+            }
+            return null
+          })}
         </div>
       </div>
       <Newsletter />

src/components/Articles/Categories/Categories.js

@@ -4,7 +4,6 @@ import { Link } from 'gatsby'
 
 const Categories = ({ children, setQuery = () => null }) => {
   const { search, pathname } = useLocation()
-
   return (
     <div className="articles-categories">
       <div className={

src/pages/articles.js

@@ -18,8 +18,9 @@ import SearchIcon from '../images/search-icon.svg'
 
 const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
   const { categories } = useCategoriesQuery()
-  const { search, pathname } = useLocation()
+  const { search } = useLocation()
   
+  let [limit, setLimit] = React.useState(6)
   const [filtredArticles, setFiltredArticles] = React.useState([])
   const [query, setQuery] = React.useState(queryString.parse(search).search || '')
   
@@ -27,16 +28,16 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
 
   const filterArticles = React.useCallback(arr => {
     return arr.filter(({ node: { frontmatter } }) => 
-				frontmatter.title.toLowerCase().includes(query.toLowerCase())
+				frontmatter.title.toLowerCase().includes(query.toLowerCase().trim())
-			||	frontmatter.description.toLowerCase().includes(query.toLowerCase())
+			||	frontmatter.description.toLowerCase().includes(query.toLowerCase().trim())
-			||	frontmatter.category.toLowerCase().includes(query.toLowerCase())
+			||	frontmatter.category.toLowerCase().includes(query.toLowerCase().trim())
-			||	frontmatter.tags.join('').toLowerCase().includes(query.toLowerCase())
+			||	frontmatter.tags.join('').toLowerCase().includes(query.toLowerCase().trim())
 		)
   }, [query])
 
   React.useEffect(() => {
     if (query !== '') setFiltredArticles(filterArticles(allArticles.edges))
-  }, [setFiltredArticles, filterArticles, allArticles.edges, query, pathname])
+  }, [setFiltredArticles, filterArticles, allArticles.edges, query])
 
   return (
     <Layout>
@@ -63,8 +64,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
             <Col lg={9} xs={12}>
               {query && query !== '' 
                 ? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} /> : null
-                : <Articles data={edges} />
+                : <Articles data={edges} limit={limit} />
               }
+              <span onClick={() => setLimit(limit + 2)}>load more</span>
             </Col >
             <Col lg={3} xs={12}>
               <Offers /> 

src/pages/index.js

@@ -6,7 +6,6 @@ import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Offers from '../components/Offers/Offers'
-import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
@@ -29,7 +28,6 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
           <Row>
             <Col lg={9} xs={12}>
               <Articles data={edges} /> 
-              <Newsletter />
             </Col>
             <Col lg={3} xs={12}>
               <Offers /> 
@@ -43,7 +41,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
 
 export const query = graphql`
   {
-    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 12) {
+    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 6) {
       edges {
         node {
           frontmatter {