From ce05970d51f55e66b2ca74b3cef92c9d6ce7d011 Mon Sep 17 00:00:00 2001
From: sergeyyarkov <serzh.yarkov@gmail.com>
Date: Sun, 5 Jul 2020 13:05:05 +0300
Subject: [PATCH] showing length

---
 src/components/Articles/Articles.scss    | 13 ++++++++++++-
 src/components/Articles/Search/Search.js | 17 +++++++++++++++++
 src/pages/articles.js                    |  6 ++----
 src/templates/categoryTemplate.js        | 11 ++++++-----
 4 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Articles/Search/Search.js

diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss
index 018d42a..dc5681b 100644
--- a/src/components/Articles/Articles.scss
+++ b/src/components/Articles/Articles.scss
@@ -29,7 +29,7 @@
     margin-bottom: 10px;
   }
   & .articles-search {
-    margin-bottom: 35px;
+    margin-bottom: 20px;
     & input {
       width: 90%;
       height: 45px;
@@ -41,6 +41,12 @@
       font-weight: 700;
     }
   }
+  & .articles-info {
+    margin-bottom: 20px;
+    & p {
+      font-size: 18px;
+    }
+  }
   & .articles-content {
     display: flex;
     justify-content: space-between;
@@ -76,6 +82,11 @@
       color: $white-clr;
     }
   }
+  & .articles-info {
+    & p {
+      color: $white-clr;
+    }
+  }
 }
 
 @media (max-width: 1023px) {
diff --git a/src/components/Articles/Search/Search.js b/src/components/Articles/Search/Search.js
new file mode 100644
index 0000000..152fb43
--- /dev/null
+++ b/src/components/Articles/Search/Search.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Search = ({ articlesLength }) => {
+	const [length, setLength] = React.useState(0)
+	React.useEffect(() => {
+		setLength(articlesLength)
+	}, [articlesLength])
+	
+	return (
+		<div className="articles-search">
+			<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
+			<span>{length}</span>
+    </div>
+	)
+}
+
+export default Search
\ No newline at end of file
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 445337f..c18b346 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -4,6 +4,7 @@ import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Categories from '../components/Articles/Categories/Categories'
+import Search from '../components/Articles/Search/Search'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
@@ -20,10 +21,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                   <h1>Статьи</h1>
                 </div>
                 <Categories />
-                <div className="articles-search">
-                  <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
-                  <span>278</span>
-                </div>
+                <Search articlesLength={edges.edges.length} />
               </div>
             </div>
           </div>
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 39bc78b..90a7f72 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -3,14 +3,15 @@ import { graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
+import Search from '../components/Articles/Search/Search'
 import Categories from '../components/Articles/Categories/Categories'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
-const CategoryPage = ({ data: { allMarkdownRemark: edges } }) => {
+const CategoryPage = ({ data: { allMarkdownRemark: edges }, pathContext: { title } }) => {
   return (
     <Layout>
-      <SEO title='Категория' />
+      <SEO title={title} />
       <main>
         <div className="container-fluid">
           <div className="row">
@@ -20,9 +21,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges } }) => {
                   <h1>Статьи</h1>
                 </div>
                 <Categories />
-                <div className="articles-search">
-                  <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
-                  <span>{edges.edges.length}</span>
+                <Search articlesLength={edges.edges.length} />
+                <div className="articles-info">
+                  <p>Показано {edges.edges.length} из категории "{title}"</p>
                 </div>
               </div>
             </div>