From fcd2deb06a05c0bddf640edb865eee51dd8cd3e1 Mon Sep 17 00:00:00 2001
From: sergeyyarkov <serzh.yarkov@gmail.com>
Date: Sun, 5 Jul 2020 13:19:15 +0300
Subject: [PATCH] active links

---
 src/components/Articles/Search/Search.js | 7 +------
 src/components/Header/Header.js          | 4 +++-
 src/templates/articleTemplate.js         | 6 ++++--
 src/templates/categoryTemplate.js        | 2 +-
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Articles/Search/Search.js b/src/components/Articles/Search/Search.js
index 152fb43..07015f6 100644
--- a/src/components/Articles/Search/Search.js
+++ b/src/components/Articles/Search/Search.js
@@ -1,15 +1,10 @@
 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>
+			<span>{articlesLength}</span>
     </div>
 	)
 }
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 85744e9..d2977ae 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useLocation } from '@reach/router'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import ThemeContext from '../../context/ThemeContext'
@@ -13,6 +14,7 @@ import SunIcon from '../../images/sun-icon.svg'
 const Header = ({ title, menuLinks }) => {
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
+  const { pathname } = useLocation()
 
   React.useEffect(() =>  {
     isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
@@ -26,7 +28,7 @@ const Header = ({ title, menuLinks }) => {
   const renderLinks = () => {
     return (
       <ul>
-        {menuLinks.map((page, i) => <li key={i}><Link to={page.link}>{page.name}</Link></li>)}
+        {menuLinks.map((page, i) => <li key={i} className={page.link === pathname ? 'active' : null}><Link to={page.link}>{page.name}</Link></li>)}
       </ul>
     )
   }
diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js
index 02b9192..aa88937 100644
--- a/src/templates/articleTemplate.js
+++ b/src/templates/articleTemplate.js
@@ -6,7 +6,7 @@ import MoreArticles from '../components/Articles/MoreArticles/MoreArticles'
 import Newsletter from '../components/Newsletter/Newsletter'
 import { graphql } from "gatsby"
 
-export default function Template ({ data }) {
+const articleTemplate = ({ data }) => {
   const { markdownRemark } = data
   const { frontmatter, html } = markdownRemark
 
@@ -52,4 +52,6 @@ export const pageQuery = graphql`
       }
     }
   }
-`
\ No newline at end of file
+`
+
+export default articleTemplate
\ No newline at end of file
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 90a7f72..a5888aa 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -8,7 +8,7 @@ import Categories from '../components/Articles/Categories/Categories'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
-const CategoryPage = ({ data: { allMarkdownRemark: edges }, pathContext: { title } }) => {
+const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   return (
     <Layout>
       <SEO title={title} />