From 97aa599223804c8c0c6c15f6ece8b93db4f46e35 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Fri, 3 Jul 2020 17:12:55 +0300 Subject: [PATCH] articles --- .../Articles/ArticleCard/ArticleCard.js | 18 +++++++------- src/components/Articles/Articles.js | 4 ++-- .../Articles/MoreArticles/MoreArticles.js | 13 +++++++++- src/hooks/useMoreArticlesQuery.js | 24 +++++++++++++++++++ src/pages/articles.js | 22 +++++++++++++++-- src/pages/index.js | 22 +++++++++++++++-- src/templates/articleTemplate.js | 2 +- 7 files changed, 87 insertions(+), 18 deletions(-) create mode 100644 src/hooks/useMoreArticlesQuery.js diff --git a/src/components/Articles/ArticleCard/ArticleCard.js b/src/components/Articles/ArticleCard/ArticleCard.js index d2a3da2..7b66a00 100644 --- a/src/components/Articles/ArticleCard/ArticleCard.js +++ b/src/components/Articles/ArticleCard/ArticleCard.js @@ -1,31 +1,29 @@ import React from 'react'; +import { Link } from 'gatsby' import './ArticleCard.scss' -const ArticleCard = ({ data }) => { +const ArticleCard = ({ data: { slug, title, category, description, tags } }) => { return (
- + article - +
-

Lorem ipsum dolor sit amet, consectetur.

+

{title}

- Javascript + {category}

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non autem hoc: igitur ne illud quidem. Uterque enim summo bono fruitur, id est voluptate. Hoc tu nunc in illo probas + {description}

diff --git a/src/components/Articles/Articles.js b/src/components/Articles/Articles.js index 0d4d483..593c484 100644 --- a/src/components/Articles/Articles.js +++ b/src/components/Articles/Articles.js @@ -2,11 +2,11 @@ import React from 'react'; import ArticleCard from './ArticleCard/ArticleCard' import './Articles.scss' -const Articles = () => { +const Articles = ({ data: { edges } }) => { return (
- {[1,2,3,4].map(e => )} + {edges.map(({ node }, e) => )}
) diff --git a/src/components/Articles/MoreArticles/MoreArticles.js b/src/components/Articles/MoreArticles/MoreArticles.js index cfea4c9..e8028a4 100644 --- a/src/components/Articles/MoreArticles/MoreArticles.js +++ b/src/components/Articles/MoreArticles/MoreArticles.js @@ -1,15 +1,26 @@ import React from 'react'; +import { useLocation } from '@reach/router' +import useMoreArticlesQuery from '../../../hooks/useMoreArticlesQuery' import ArticleCard from '../ArticleCard/ArticleCard' import './MoreArticles.scss' const MoreArticles = () => { + const { edges } = useMoreArticlesQuery() + const { pathname } = useLocation() + const query = pathname.split('/')[pathname.split('/').length - 1] + return (

Вам также может понравится...

- {[1,2,3,4].map(e => )} + {edges.map(({ node }, e) => { + if (node.frontmatter.slug !== query) { + return + } + return null + })}
) diff --git a/src/hooks/useMoreArticlesQuery.js b/src/hooks/useMoreArticlesQuery.js new file mode 100644 index 0000000..561ba18 --- /dev/null +++ b/src/hooks/useMoreArticlesQuery.js @@ -0,0 +1,24 @@ +import { useStaticQuery, graphql } from 'gatsby' + +const useMoreArticlesQuery = () => { + const { allMarkdownRemark: { edges } } = useStaticQuery(graphql` + { + allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, limit: 4) { + edges { + node { + frontmatter { + slug + title + category + tags + description + } + } + } + } + } + `) + return { edges } +} + +export default useMoreArticlesQuery \ No newline at end of file diff --git a/src/pages/articles.js b/src/pages/articles.js index 740e7d9..f86b89a 100644 --- a/src/pages/articles.js +++ b/src/pages/articles.js @@ -6,7 +6,7 @@ import Articles from '../components/Articles/Articles' import Offers from '../components/Offers/Offers' import Newsletter from '../components/Newsletter/Newsletter' -const ArticlesPage = () => { +const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => { return ( @@ -59,7 +59,7 @@ const ArticlesPage = () => {
- +
@@ -72,4 +72,22 @@ const ArticlesPage = () => { ) } +export const query = graphql` + { + allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}) { + edges { + node { + frontmatter { + slug + title + category + tags + description + } + } + } + } + } +` + export default ArticlesPage diff --git a/src/pages/index.js b/src/pages/index.js index bfc1ecd..e6a485d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -9,7 +9,7 @@ import Newsletter from '../components/Newsletter/Newsletter' import ArrowNext from '../images/arrow-next.svg' -const IndexPage = () => { +const IndexPage = ({ data: { allMarkdownRemark: edges } }) => { return ( @@ -28,7 +28,7 @@ const IndexPage = () => {
- +
@@ -41,4 +41,22 @@ const IndexPage = () => { ) } +export const query = graphql` + { + allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}) { + edges { + node { + frontmatter { + slug + title + category + tags + description + } + } + } + } + } +` + export default IndexPage diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js index 1cfbf9b..f2307f9 100644 --- a/src/templates/articleTemplate.js +++ b/src/templates/articleTemplate.js @@ -9,7 +9,7 @@ import { graphql } from "gatsby" export default function Template ({ data }) { const { markdownRemark } = data const { frontmatter, html } = markdownRemark - console.log(markdownRemark.frontmatter) + return (