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

clean query on click

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-14 18:14:58 +03:00
parent ac1b840749
commit c3884e8834
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import { Link } from 'gatsby' import { Link } from 'gatsby'
const Categories = ({ children, pathname }) => { const Categories = ({ children, pathname, setQuery }) => {
return ( return (
<div className="articles-categories"> <div className="articles-categories">
<div className={pathname === `/articles` ? 'tag-item active' : 'tag-item'}> <div className={pathname === `/articles` ? 'tag-item active' : 'tag-item'}>
<Link to='/articles'>Все</Link> <Link onClick={() => setQuery('')} to='/articles'>Все</Link>
</div> </div>
{children} {children}
</div> </div>

8
src/pages/articles.js
View File

@ -35,10 +35,8 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
}, [query]) }, [query])
React.useEffect(() => { React.useEffect(() => {
if (query !== '') { if (query !== '') setFiltredArticles(filterArticles(allArticles.edges))
setFiltredArticles(filterArticles(allArticles.edges)) }, [setFiltredArticles, filterArticles, allArticles.edges, query, pathname])
}
}, [setFiltredArticles, filterArticles, allArticles.edges, query])
return ( return (
<Layout> <Layout>
@ -51,7 +49,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
<div className="articles-heading"> <div className="articles-heading">
<h1>Статьи</h1> <h1>Статьи</h1>
</div> </div>
<Categories pathname={pathname}> <Categories pathname={pathname} setQuery={setQuery}>
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)} {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories> </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} />