popular articles

src/components/Offers/Offers.js

@@ -1,34 +1,23 @@
 import React from 'react';
+import usePopularArticlesQuery from '../../hooks/usePopularArticlesQuery'
 import useTagsQuery from '../../hooks/useTagsQuery'
 import './Offers.scss'
+import Popular from './Popular/Popular'
+import PopularItem from './Popular/PopularItem'
 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 { articles } = usePopularArticlesQuery()
   const { tags } = useTagsQuery()
 
   return (
     <div className="offers">
-      <div className="offers-popular offer-box">
+      <Popular>
-        <div className="offers-popular__heading offer-heading">
+        {articles.map(({ node }, i) => <PopularItem key={i} slug={node.frontmatter.slug} title={node.frontmatter.title} />)}
-          <PopularIcon />
+      </Popular>
-          Популярные статьи</div>
-        <div className="offers-popular__content">
-          {[1,2,3,4,5].map(e => <div key={e} className="article-item">
-            <div className="article-item__title">
-              <a href="/">Lorem ipsum dolor sit amet, consectetur.</a>
-            </div>
-            <div className="article-item__views">
-              <ViewsIcon />
-              <span>4252</span>
-            </div>
-          </div>)}
-        </div>
-      </div>
       <Tags>
         {tags.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
       </Tags>

src/components/Offers/Offers.scss

@@ -17,7 +17,6 @@
     margin-bottom: 15px;
   }
   & .offers-popular {
-    min-height: 400px;
     &__content {
       & .article-item {
         margin-bottom: 10px;
@@ -50,7 +49,6 @@
     }
   }
   & .offers-books {
-    min-height: 330px;
     &__content {
       & .book-item {
         margin-bottom: 10px;

src/components/Offers/Popular/Popular.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import PopularIcon from '../../../images/popular-icon.svg'
+
+const Popular = ({ children }) => {
+  return (
+    <div className="offers-popular offer-box">
+      <div className="offers-popular__heading offer-heading">
+        <PopularIcon />
+        Популярные статьи</div>
+      <div className="offers-popular__content">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Popular

src/components/Offers/Popular/PopularItem.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'gatsby'
+
+import ViewsIcon from '../../../images/views-icon.svg'
+
+const PopularItem = ({ slug, title }) => {
+  return (
+    <div className="article-item">
+      <div className="article-item__title">
+        <Link to={`/article/${slug}`}>{title}</Link>
+      </div>
+      <div className="article-item__views">
+        <ViewsIcon />
+        <span>4252</span>
+      </div>
+    </div>
+  )
+}
+
+export default PopularItem

src/hooks/usePopularArticlesQuery.js

@@ -0,0 +1,21 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const usePopularArticlesQuery = () => {
+  const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
+    {
+      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}, popular: {eq: true}}}, sort: {fields: frontmatter___date, order: DESC}, limit: 5) {
+        edges {
+          node {
+            frontmatter {
+              slug
+              title
+            }
+          }
+        }
+      }
+    }
+  `)
+  return { articles: edges }
+}
+
+export default usePopularArticlesQuery

static/admin/config.yml

@@ -14,6 +14,7 @@ collections:
       - {label: "Slug", name: "slug", widget: "string"}
       - {label: "Время чтения", name: "time", widget: "string"}
       - {label: "Заголовок", name: "title", widget: "string"}
+      - {label: "Популярная статья", name: "popular", widget: "boolean", default: false}
       - {label: "Обложка", name: "image", widget: "image"}
       - {label: "Категория", name: "category", widget: "relation", collection: "categories", valueField: "title", searchFields: ["title"]}
       - {label: "Дата публикации", name: "date", widget: "datetime"}