bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 10:19:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

load more articles on index page

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-16 19:27:55 +03:00
parent f56eea127a
commit 174de3ce39
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Offers/Offers.js
View File

@ -19,7 +19,7 @@ const Offers = () => {
const { books } = useBooksQuery() const { books } = useBooksQuery()
return ( return (
<div style={{ height: pathname === '/' ? '56%' : '78.5%' }} className="offers"> <div style={{ height: pathname === '/' ? '78%' : '78.5%' }} className="offers">
<Popular> <Popular>
{articles.map(({ node }, i) => <PopularItem key={i} slug={node.frontmatter.slug} title={node.frontmatter.title} />)} {articles.map(({ node }, i) => <PopularItem key={i} slug={node.frontmatter.slug} title={node.frontmatter.title} />)}
</Popular> </Popular>

8
src/pages/index.js
View File

@ -2,6 +2,7 @@ import React from "react"
import { Link, graphql } from 'gatsby' import { Link, graphql } from 'gatsby'
import { Main } from '../ui/ui' import { Main } from '../ui/ui'
import { Grid, Row, Col } from 'react-flexbox-grid' import { Grid, Row, Col } from 'react-flexbox-grid'
import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
import SEO from '../components/SEO/SEO' import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout' import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles' import Articles from '../components/Articles/Articles'
@ -10,6 +11,9 @@ import Offers from '../components/Offers/Offers'
import ArrowNext from '../images/arrow-next.svg' import ArrowNext from '../images/arrow-next.svg'
const IndexPage = ({ data: { allMarkdownRemark: edges } }) => { const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
const { siteMetadata: { options: { articles: { onPage } } } } = useSiteMetadataQuery()
let [limit, setLimit] = React.useState(onPage)
return ( return (
<Layout> <Layout>
<SEO /> <SEO />
@ -27,7 +31,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
</Row> </Row>
<Row> <Row>
<Col lg={9} xs={12}> <Col lg={9} xs={12}>
<Articles data={edges} /> <Articles data={edges} limit={limit} setLimit={setLimit} />
</Col> </Col>
<Col lg={3} xs={12}> <Col lg={3} xs={12}>
<Offers /> <Offers />
@ -41,7 +45,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
export const query = graphql` export const query = graphql`
{ {
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 6) { allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}) {
edges { edges {
node { node {
frontmatter { frontmatter {