From d6e8559122d1592506f6b862554e78d8de7203c1 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sat, 4 Jul 2020 23:36:10 +0300
Subject: [PATCH] categories component

---
 content/categories/2020-07-02-test.md         |  1 -
 .../categories/2020-07-04-second-category.md  |  1 -
 .../Articles/Categories/Categories.js         | 20 +++++++++++
 src/hooks/useCategoriesQuery.js               | 20 +++++++++++
 src/pages/articles.js                         | 36 ++-----------------
 src/templates/categoryTemplate.js             | 36 ++-----------------
 6 files changed, 46 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Articles/Categories/Categories.js
 create mode 100644 src/hooks/useCategoriesQuery.js

diff --git a/content/categories/2020-07-02-test.md b/content/categories/2020-07-02-test.md
index 1078035..5c049a8 100644
--- a/content/categories/2020-07-02-test.md
+++ b/content/categories/2020-07-02-test.md
@@ -1,5 +1,4 @@
 ---
 templateKey: category
-slug: category-1
 title: First category
 ---
diff --git a/content/categories/2020-07-04-second-category.md b/content/categories/2020-07-04-second-category.md
index b58cbf3..94d119b 100644
--- a/content/categories/2020-07-04-second-category.md
+++ b/content/categories/2020-07-04-second-category.md
@@ -1,5 +1,4 @@
 ---
 templateKey: category
-slug: category-2
 title: Second category
 ---
diff --git a/src/components/Articles/Categories/Categories.js b/src/components/Articles/Categories/Categories.js
new file mode 100644
index 0000000..54dccef
--- /dev/null
+++ b/src/components/Articles/Categories/Categories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'gatsby'
+import slugify from '../../../helpers/slugify'
+import useCategoriesQuery from '../../../hooks/useCategoriesQuery'
+
+const Categories = () => {
+  const { edges } = useCategoriesQuery()
+  return (
+    <div className="articles-categories">
+      <div className="tag-item">
+        <Link to='/articles'>Все</Link>
+      </div>
+      {edges.map(({ node }) => <div className="tag-item">
+        <Link to={`/category/${slugify(node.frontmatter.title)}`}>{node.frontmatter.title}</Link>
+      </div>)}
+    </div>
+  )
+}
+
+export default Categories
\ No newline at end of file
diff --git a/src/hooks/useCategoriesQuery.js b/src/hooks/useCategoriesQuery.js
new file mode 100644
index 0000000..fd962ea
--- /dev/null
+++ b/src/hooks/useCategoriesQuery.js
@@ -0,0 +1,20 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const useCategoriesQuery = () => {
+  const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
+    {
+      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "category"}}}) {
+        edges {
+          node {
+            frontmatter {
+              title
+            }
+          }
+        }
+      }
+    }
+  `)
+  return { edges }
+}
+
+export default useCategoriesQuery
\ No newline at end of file
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 35a1dbe..445337f 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -1,8 +1,9 @@
 import React from "react"
-import { Link, graphql } from 'gatsby'
+import { graphql } from 'gatsby'
 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 Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
@@ -18,38 +19,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <div className="articles-categories">
-                  <div className="tag-item">
-                    <Link to='/'>Все</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Javascript</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>GraphQL</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Reactjs</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>SEO оптимизация</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Web разработка</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>pet-проекты</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Nodejs</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>ООП</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Новости</Link>
-                  </div>
-                </div>
+                <Categories />
                 <div className="articles-search">
                   <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
                   <span>278</span>
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 9409f75..991ec31 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -1,8 +1,9 @@
 import React from "react"
-import { Link, graphql } from 'gatsby'
+import { graphql } from 'gatsby'
 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 Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
@@ -18,38 +19,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges } }) => {
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <div className="articles-categories">
-                  <div className="tag-item">
-                    <Link to='/'>Все</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Javascript</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>GraphQL</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Reactjs</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>SEO оптимизация</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Web разработка</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>pet-проекты</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Nodejs</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>ООП</Link>
-                  </div>
-                  <div className="tag-item">
-                    <Link to='/'>Новости</Link>
-                  </div>
-                </div>
+                <Categories />
                 <div className="articles-search">
                   <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
                   <span>278</span>