render random moreArticles

This commit is contained in:
Sergey Yarkov 2020-07-15 16:44:53 +03:00
parent e9d52b1853
commit 0af865962d
3 changed files with 13 additions and 10 deletions

View File

@ -8,12 +8,15 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
<>
<div className="articles">
<div className="articles-content">
{edges.map(({ node }, i) => {
{edges.length <= 0
? <p>Записей нет</p>
: edges.map(({ node }, i) => {
if (i < limit) {
return <ArticleCard key={i} data={node.frontmatter} />
}
return null
})}
})
}
</div>
<div className="articles-loadMore">
{edges.length === limit || edges.length <= limit

View File

@ -14,9 +14,9 @@ const MoreArticles = () => {
<h2>Вам также может понравится...</h2>
</div>
<div className="more-articles__content">
{edges.map(({ node }, e) => {
if (node.frontmatter.slug !== query) {
return <ArticleCard key={e} data={node.frontmatter} />
{edges.filter(({ node }) => node.frontmatter.slug !== query).sort(() => Math.random() - 0.5).map(({ node }, i) => {
if (i < 4) {
return <ArticleCard key={i} data={node.frontmatter} />
}
return null
})}

View File

@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby'
const useMoreArticlesQuery = () => {
const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
{
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, limit: 4) {
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 6) {
edges {
node {
frontmatter {