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

render upd

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-14 23:42:24 +03:00
parent cf24c24c36
commit 40607d546c
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,12 +3,17 @@ import PropTypes from 'prop-types'
import ArticleCard from './ArticleCard/ArticleCard'
import Newsletter from '../Newsletter/Newsletter'
const Articles = ({ data: { edges } }) => {
const Articles = ({ data: { edges }, limit = 6 }) => {
return (
<>
<div className="articles">
<div className="articles-content">
{edges.map(({ node }, e) => <ArticleCard key={e} data={node.frontmatter} />)}
{edges.map(({ node }, i) => {
if (i < limit) {
return <ArticleCard key={i} data={node.frontmatter} />
}
return null
})}
</div>
</div>
<Newsletter />

1
src/components/Articles/Categories/Categories.js
View File

@ -4,7 +4,6 @@ import { Link } from 'gatsby'
const Categories = ({ children, setQuery = () => null }) => {
const { search, pathname } = useLocation()
return (
<div className="articles-categories">
<div className={

16
src/pages/articles.js
View File

@ -18,8 +18,9 @@ import SearchIcon from '../images/search-icon.svg'
const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
const { categories } = useCategoriesQuery()
const { search, pathname } = useLocation()
const { search } = useLocation()
let [limit, setLimit] = React.useState(6)
const [filtredArticles, setFiltredArticles] = React.useState([])
const [query, setQuery] = React.useState(queryString.parse(search).search || '')
@ -27,16 +28,16 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
const filterArticles = React.useCallback(arr => {
return arr.filter(({ node: { frontmatter } }) =>
frontmatter.title.toLowerCase().includes(query.toLowerCase())
|| frontmatter.description.toLowerCase().includes(query.toLowerCase())
|| frontmatter.category.toLowerCase().includes(query.toLowerCase())
|| frontmatter.tags.join('').toLowerCase().includes(query.toLowerCase())
frontmatter.title.toLowerCase().includes(query.toLowerCase().trim())
|| frontmatter.description.toLowerCase().includes(query.toLowerCase().trim())
|| frontmatter.category.toLowerCase().includes(query.toLowerCase().trim())
|| frontmatter.tags.join('').toLowerCase().includes(query.toLowerCase().trim())
)
}, [query])
React.useEffect(() => {
if (query !== '') setFiltredArticles(filterArticles(allArticles.edges))
}, [setFiltredArticles, filterArticles, allArticles.edges, query, pathname])
}, [setFiltredArticles, filterArticles, allArticles.edges, query])
return (
<Layout>
@ -63,8 +64,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
<Col lg={9} xs={12}>
{query && query !== ''
? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} /> : null
: <Articles data={edges} />
: <Articles data={edges} limit={limit} />
}
<span onClick={() => setLimit(limit + 2)}>load more</span>
</Col >
<Col lg={3} xs={12}>
<Offers />

4
src/pages/index.js
View File

@ -6,7 +6,6 @@ import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles'
import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter'
import ArrowNext from '../images/arrow-next.svg'
@ -29,7 +28,6 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
<Row>
<Col lg={9} xs={12}>
<Articles data={edges} />
<Newsletter />
</Col>
<Col lg={3} xs={12}>
<Offers />
@ -43,7 +41,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
export const query = graphql`
{
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 12) {
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 6) {
edges {
node {
frontmatter {