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

load more btn

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-15 16:02:04 +03:00
parent 40607d546c
commit e9d52b1853
7 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Articles/Articles.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import ArticleCard from './ArticleCard/ArticleCard'
import Newsletter from '../Newsletter/Newsletter'
const Articles = ({ data: { edges }, limit = 6 }) => {
const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
return (
<>
<div className="articles">
@ -15,6 +15,12 @@ const Articles = ({ data: { edges }, limit = 6 }) => {
return null
})}
</div>
<div className="articles-loadMore">
{edges.length === limit || edges.length <= limit
? null
: <button className='btn-loadMore' onClick={() => setLimit(limit + 2)}>Загрузить еще&nbsp;&nbsp;<span role='img' aria-label='load more'>👇</span></button>
}
</div>
</div>
<Newsletter />
</>
@ -25,6 +31,8 @@ export default Articles
Articles.propTypes = {
data: PropTypes.shape({
edges: PropTypes.array
edges: PropTypes.array,
limit: PropTypes.number,
setLimit: PropTypes.func
})
}

4
src/components/Articles/Articles.scss
View File

@ -56,6 +56,10 @@
text-align: center;
margin-bottom: 60px;
}
& .articles-loadMore {
text-align: center;
margin-bottom: 30px;
}
}
.dark {

3
src/components/Articles/Search/Search.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { navigate } from 'gatsby'
import PropTypes from 'prop-types'
const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles }) => {
const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles, setLimit }) => {
const handleInput = e => {
const query = e.target.value
if (query === '') {
@ -14,6 +14,7 @@ const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, qu
navigate(`/articles/?search=${query.trim()}`)
setQuery(query)
setFiltredArticles(filterArticles(allArticles))
setLimit(6)
}
return (

7
src/pages/articles.js
View File

@ -53,7 +53,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
<Categories setQuery={setQuery}>
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories>
<Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} />
<Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} setLimit={setLimit} />
<div className="articles-info">
{query && query !== '' ? filtredArticles.length === 0 ? <p><SearchIcon />&nbsp;&nbsp;Ничего не найдено</p> : null : null}
</div>
@ -63,10 +63,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
<Row>
<Col lg={9} xs={12}>
{query && query !== ''
? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} /> : null
: <Articles data={edges} limit={limit} />
? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} limit={limit} setLimit={setLimit} /> : null
: <Articles data={edges} limit={limit} setLimit={setLimit} />
}
<span onClick={() => setLimit(limit + 2)}>load more</span>
</Col >
<Col lg={3} xs={12}>
<Offers />

8
src/styles/global.scss
View File

@ -22,6 +22,14 @@
}
}
.btn-loadMore {
background: none;
text-decoration: underline;
color: #6ab0f3;
cursor: pointer;
font-size: 15px;
}
.tag-item {
margin-bottom: 13px;
margin-right: 5px;

6
src/templates/categoryTemplate.js
View File

@ -15,6 +15,8 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
const { categories } = useCategoriesQuery()
const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
let [limit, setLimit] = React.useState(6)
return (
<Layout>
<SEO title={title} canonical={`${siteUrl}/articles`} />
@ -30,14 +32,14 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories>
<div className="articles-info">
<p>Показано {edges.edges.length} из категории "{title}"</p>
<p>Найдено {edges.edges.length} из категории "{title}"</p>
</div>
</div>
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Articles data={edges} limit={limit} setLimit={setLimit} />
</Col>
<Col lg={3} xs={12}>
<Offers />

6
src/templates/tagTemplate.js
View File

@ -15,6 +15,8 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
const { categories } = useCategoriesQuery()
const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
let [limit, setLimit] = React.useState(6)
return (
<Layout>
<SEO title={title} canonical={`${siteUrl}/articles`} />
@ -30,14 +32,14 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories>
<div className="articles-info">
<p>Показано {edges.edges.length} по тегу "{title}"</p>
<p>Найдено {edges.edges.length} по тегу "{title}"</p>
</div>
</div>
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Articles data={edges} limit={limit} setLimit={setLimit} />
</Col>
<Col lg={3} xs={12}>
<Offers />