From d89f17cd8348e6e8f2b7a97a6ea1ee257f398f10 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Tue, 7 Jul 2020 15:34:36 +0300
Subject: [PATCH] renred upd

---
 src/components/Articles/Categories/Categories.js |  9 ++-------
 .../Articles/Categories/CategoryItem.js          | 16 ++++++++++++++++
 src/components/Offers/Offers.js                  |  2 +-
 src/hooks/useCategoriesQuery.js                  |  2 +-
 src/pages/articles.js                            |  7 ++++++-
 src/styles/global.scss                           |  8 ++++++++
 src/templates/categoryTemplate.js                |  7 ++++++-
 src/templates/tagTemplate.js                     |  7 ++++++-
 8 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Articles/Categories/CategoryItem.js

diff --git a/src/components/Articles/Categories/Categories.js b/src/components/Articles/Categories/Categories.js
index 8c4ee77..91dceb6 100644
--- a/src/components/Articles/Categories/Categories.js
+++ b/src/components/Articles/Categories/Categories.js
@@ -1,18 +1,13 @@
 import React from 'react';
 import { Link } from 'gatsby'
-import slugify from '../../../helpers/slugify'
-import useCategoriesQuery from '../../../hooks/useCategoriesQuery'
 
-const Categories = () => {
-  const { edges } = useCategoriesQuery()
+const Categories = ({ children }) => {
   return (
     <div className="articles-categories">
       <div className="tag-item">
         <Link to='/articles'>Все</Link>
       </div>
-      {edges.map(({ node }, i) => <div key={i} className="tag-item">
-        <Link to={`/category/${slugify(node.frontmatter.title)}`}>{node.frontmatter.title}</Link>
-      </div>)}
+      {children}
     </div>
   )
 }
diff --git a/src/components/Articles/Categories/CategoryItem.js b/src/components/Articles/Categories/CategoryItem.js
new file mode 100644
index 0000000..c997baf
--- /dev/null
+++ b/src/components/Articles/Categories/CategoryItem.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useLocation } from '@reach/router'
+import { Link } from 'gatsby'
+import slugify from '../../../helpers/slugify'
+
+const CategoryItem = ({ title }) => {
+  const { pathname } = useLocation()
+  return (
+    <div className={pathname === `/category/${slugify(title)}` ? 'tag-item active' : 'tag-item'}>
+      <Link to={`/category/${slugify(title)}`}>{title}</Link>
+    </div>
+  )
+}
+
+export default CategoryItem
+
diff --git a/src/components/Offers/Offers.js b/src/components/Offers/Offers.js
index 41f3a4f..b273d11 100644
--- a/src/components/Offers/Offers.js
+++ b/src/components/Offers/Offers.js
@@ -51,7 +51,7 @@ const Offers = () => {
           <p>
             В нашем канале telegram вы не пропустите новые статьи, присоединяйтесь к другим разработчикам
           </p>
-          <a href="/" target="_blank" className="btn-primary">Подписаться</a>
+          <a href="https://t.me/devthread" rel='noreferrer' target="_blank" className="btn-primary">Подписаться</a>
         </div>
       </div>
     </div>
diff --git a/src/hooks/useCategoriesQuery.js b/src/hooks/useCategoriesQuery.js
index fd962ea..ed37f91 100644
--- a/src/hooks/useCategoriesQuery.js
+++ b/src/hooks/useCategoriesQuery.js
@@ -14,7 +14,7 @@ const useCategoriesQuery = () => {
       }
     }
   `)
-  return { edges }
+  return { categories: edges }
 }
 
 export default useCategoriesQuery
\ No newline at end of file
diff --git a/src/pages/articles.js b/src/pages/articles.js
index c18b346..98f17fd 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -1,14 +1,17 @@
 import React from "react"
 import { graphql } from 'gatsby'
+import useCategoriesQuery from '../hooks/useCategoriesQuery'
 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 CategoryItem from '../components/Articles/Categories/CategoryItem'
 import Search from '../components/Articles/Search/Search'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
 const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
+  const { categories } = useCategoriesQuery()
   return (
     <Layout>
       <SEO title='Статьи' />
@@ -20,7 +23,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories />
+                <Categories>
+                  {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
+                </Categories>
                 <Search articlesLength={edges.edges.length} />
               </div>
             </div>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5aa8677..582bd7f 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -39,6 +39,10 @@
       color: #3972f4;
     }
   }
+  &.active a {
+    background: #d8e3fd;
+    color: #3972f4;
+  }
 }
 
 .inner {
@@ -114,6 +118,10 @@
         color: #99c9f7;
       }
     }
+    &.active a {
+      color: #5183F5;
+      background: #111;
+    }
   }
   & .inner {
     border-bottom: 1px solid rgba(153, 153, 153, 0.2);
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 8777e9b..3953b67 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -1,14 +1,17 @@
 import React from "react"
 import { graphql } from 'gatsby'
+import useCategoriesQuery from '../hooks/useCategoriesQuery'
 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 CategoryItem from '../components/Articles/Categories/CategoryItem'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
 const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
+  const { categories } = useCategoriesQuery()
   return (
     <Layout>
       <SEO title={title} />
@@ -20,7 +23,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories />
+                <Categories>
+                  {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
+                </Categories>
                 <Search articlesLength={edges.edges.length} />
                 <div className="articles-info">
                   <p>Показано {edges.edges.length} из категории "{title}"</p>
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index 88471b6..9c04618 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -1,14 +1,17 @@
 import React from "react"
 import { graphql } from 'gatsby'
+import useCategoriesQuery from '../hooks/useCategoriesQuery'
 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 CategoryItem from '../components/Articles/Categories/CategoryItem'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
 const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
+  const { categories } = useCategoriesQuery()
   return (
     <Layout>
       <SEO title={title} />
@@ -20,7 +23,9 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories />
+                <Categories>
+                  {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
+                </Categories>
                 <Search articlesLength={edges.edges.length} />
                 <div className="articles-info">
                   <p>Показано {edges.edges.length} по тегу "{title}"</p>