From bd45a806f99e945ce8c529761d848093565a5cd2 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 6 Jul 2020 22:45:20 +0300
Subject: [PATCH] render tag

---
 src/components/Offers/Offers.js       |  8 +++++++-
 src/components/Offers/Tags/TagItem.js | 13 +++++++++++++
 src/components/Offers/Tags/Tags.js    | 16 ++--------------
 src/hooks/useTagsQuery.js             |  2 +-
 4 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Offers/Tags/TagItem.js

diff --git a/src/components/Offers/Offers.js b/src/components/Offers/Offers.js
index bef189c..41f3a4f 100644
--- a/src/components/Offers/Offers.js
+++ b/src/components/Offers/Offers.js
@@ -1,12 +1,16 @@
 import React from 'react';
+import useTagsQuery from '../../hooks/useTagsQuery'
 import './Offers.scss'
 import Tags from './Tags/Tags'
+import TagItem from './Tags/TagItem'
 
 import PopularIcon from '../../images/popular-icon.svg'
 import ViewsIcon from '../../images/views-icon.svg'
 import BooksIcon from '../../images/books-icon.svg'
 
 const Offers = () => {
+  const { tags } = useTagsQuery()
+
   return (
     <div className="offers">
       <div className="offers-popular offer-box">
@@ -25,7 +29,9 @@ const Offers = () => {
           </div>)}
         </div>
       </div>
-      <Tags />
+      <Tags>
+        {tags.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
+      </Tags>
       <div className="offers-books offer-box">
         <div className="offers-books__heading offer-heading">
           <BooksIcon />
diff --git a/src/components/Offers/Tags/TagItem.js b/src/components/Offers/Tags/TagItem.js
new file mode 100644
index 0000000..598aa42
--- /dev/null
+++ b/src/components/Offers/Tags/TagItem.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'gatsby'
+import sligify from '../../../helpers/slugify'
+
+const TagItem = ({ title }) => {
+  return (
+    <div className="tag-item">
+      <Link to={`/tag/${sligify(title)}`}>{title}</Link>
+    </div>
+  )
+}
+
+export default TagItem
\ No newline at end of file
diff --git a/src/components/Offers/Tags/Tags.js b/src/components/Offers/Tags/Tags.js
index 7d34e60..baf6f72 100644
--- a/src/components/Offers/Tags/Tags.js
+++ b/src/components/Offers/Tags/Tags.js
@@ -1,20 +1,8 @@
 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()
+const Tags = ({ children }) => {
 
   return (
     <div className="offers-tags offer-box">
@@ -23,7 +11,7 @@ const Tags = () => {
         Тэги
       </div>
       <div className="offers-tags__content">
-        {edges.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
+        {children}
       </div>
     </div>
   )
diff --git a/src/hooks/useTagsQuery.js b/src/hooks/useTagsQuery.js
index d3049e4..6f92170 100644
--- a/src/hooks/useTagsQuery.js
+++ b/src/hooks/useTagsQuery.js
@@ -14,7 +14,7 @@ const useTagsQuery = () => {
       }
     }
   `)
-  return { edges }
+  return { tags: edges }
 }
 
 export default useTagsQuery
\ No newline at end of file