From 2cbff1dfd78c2b81cf6c1015f977330648f45618 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 6 Jul 2020 22:33:59 +0300
Subject: [PATCH] tag offers

---
 src/components/Offers/Offers.js    | 50 ++----------------------------
 src/components/Offers/Offers.scss  |  1 -
 src/components/Offers/Tags/Tags.js | 32 +++++++++++++++++++
 src/hooks/useTagsQuery.js          | 20 ++++++++++++
 static/admin/config.yml            |  6 ++--
 5 files changed, 57 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Offers/Tags/Tags.js
 create mode 100644 src/hooks/useTagsQuery.js

diff --git a/src/components/Offers/Offers.js b/src/components/Offers/Offers.js
index 81cd169..bef189c 100644
--- a/src/components/Offers/Offers.js
+++ b/src/components/Offers/Offers.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import './Offers.scss'
+import Tags from './Tags/Tags'
 
 import PopularIcon from '../../images/popular-icon.svg'
 import ViewsIcon from '../../images/views-icon.svg'
-import TagIcon from '../../images/tag-icon.svg'
 import BooksIcon from '../../images/books-icon.svg'
 
 const Offers = () => {
@@ -25,53 +25,7 @@ const Offers = () => {
           </div>)}
         </div>
       </div>
-      <div className="offers-tags offer-box">
-        <div className="offers-tags__heading offer-heading">
-          <TagIcon />
-          Тэги
-        </div>
-        <div className="offers-tags__content">
-          <div className="tag-item">
-            <a href="/">serverless</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">reactjs</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">nodejs</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">graphql</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">seo</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">ооп</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">gatsby</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">nextjs</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">jquery</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">mysql</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">php</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">python</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">jekyll</a>
-          </div>
-        </div>
-      </div>
+      <Tags />
       <div className="offers-books offer-box">
         <div className="offers-books__heading offer-heading">
           <BooksIcon />
diff --git a/src/components/Offers/Offers.scss b/src/components/Offers/Offers.scss
index 340cd69..1d03a9b 100644
--- a/src/components/Offers/Offers.scss
+++ b/src/components/Offers/Offers.scss
@@ -44,7 +44,6 @@
     }
   }
   & .offers-tags {
-    min-height: 200px;
     &__content {
       display: flex;
       flex-wrap: wrap;
diff --git a/src/components/Offers/Tags/Tags.js b/src/components/Offers/Tags/Tags.js
new file mode 100644
index 0000000..7d34e60
--- /dev/null
+++ b/src/components/Offers/Tags/Tags.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import sligify from '../../../helpers/slugify'
+import useTagsQuery from '../../../hooks/useTagsQuery'
+
+import TagIcon from '../../../images/tag-icon.svg'
+
+const TagItem = ({ title }) => {
+  return (
+    <div className="tag-item">
+      <Link to={`/tag/${sligify(title)}`}>{title}</Link>
+    </div>
+  )
+}
+
+const Tags = () => {
+  const { edges } = useTagsQuery()
+
+  return (
+    <div className="offers-tags offer-box">
+      <div className="offers-tags__heading offer-heading">
+        <TagIcon />
+        Тэги
+      </div>
+      <div className="offers-tags__content">
+        {edges.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
+      </div>
+    </div>
+  )
+}
+
+export default Tags
\ No newline at end of file
diff --git a/src/hooks/useTagsQuery.js b/src/hooks/useTagsQuery.js
new file mode 100644
index 0000000..d3049e4
--- /dev/null
+++ b/src/hooks/useTagsQuery.js
@@ -0,0 +1,20 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const useTagsQuery = () => {
+  const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
+    {
+      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "tag"}}}) {
+        edges {
+          node {
+            frontmatter {
+              title
+            }
+          }
+        }
+      }
+    }
+  `)
+  return { edges }
+}
+
+export default useTagsQuery
\ No newline at end of file
diff --git a/static/admin/config.yml b/static/admin/config.yml
index 892963c..1a8c562 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -8,7 +8,7 @@ collections:
     label: "Article"
     folder: "content/articles"
     create: true
-    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    slug: "{{slug}}"
     fields:
       - {label: "Template Key", name: "templateKey", wisdget: "hidden", default: "article"}
       - {label: "Slug", name: "slug", widget: "string"}
@@ -24,7 +24,7 @@ collections:
     label: "Category"
     folder: 'content/categories'
     create: true
-    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    slug: "{{year}}-{{month}}-{{day}}"
     fields:
       - {label: "Template key", name: "templateKey", widget: "hidden", default: "category"}
       - {label: "Название категории", name: "title", widget: "string"}
@@ -32,7 +32,7 @@ collections:
     label: "Tag"
     folder: 'content/tags'
     create: true
-    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    slug: "{{year}}-{{month}}-{{day}}"
     fields:
       - {label: "Template key", name: "templateKey", widget: "hidden", default: "tag"}
       - {label: "Название тэга", name: "title", widget: "string"}
\ No newline at end of file