diff --git a/src/components/Articles/Articles.js b/src/components/Articles/Articles.js index 8991d94..12c7cd6 100644 --- a/src/components/Articles/Articles.js +++ b/src/components/Articles/Articles.js @@ -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 ( <>
- {edges.map(({ node }, e) => )} + {edges.map(({ node }, i) => { + if (i < limit) { + return + } + return null + })}
diff --git a/src/components/Articles/Categories/Categories.js b/src/components/Articles/Categories/Categories.js index 3cf709e..0968a8a 100644 --- a/src/components/Articles/Categories/Categories.js +++ b/src/components/Articles/Categories/Categories.js @@ -4,7 +4,6 @@ import { Link } from 'gatsby' const Categories = ({ children, setQuery = () => null }) => { const { search, pathname } = useLocation() - return (
{ 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 ( @@ -63,8 +64,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => { {query && query !== '' ? filtredArticles.length > 0 ? : null - : + : } + setLimit(limit + 2)}>load more diff --git a/src/pages/index.js b/src/pages/index.js index 3b4bc81..3cee0c6 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 } }) => { - @@ -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 {