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

deleted page books & fix state in search

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-17 21:56:13 +03:00
parent 12d9490e46
commit 61b3be89aa
8 changed files with 8 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby-config.js
View File

@ -23,7 +23,7 @@ module.exports = {
},
{
name: 'Ресурсы',
link: '/books'
link: '/deleted'
}
],
social: {

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

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

18
src/components/Offers/Books/BookItem.js
View File

@ -1,18 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import slugify from '../../../helpers/slugify'
const BookItem = ({ title }) => {
return (
<div className="book-item">
<Link to={`/books#${slugify(title)}`}>{title}</Link>
</div>
)
}
export default BookItem
BookItem.propTypes = {
title: PropTypes.string
}

19
src/components/Offers/Books/Books.js
View File

@ -1,19 +0,0 @@
import React from 'react';
import BooksIcon from '../../../images/books-icon.svg'
const Books = ({ children }) => {
return (
<div className="offers-books offer-box">
<div className="offers-books__heading offer-heading">
<BooksIcon />
Что почитать
</div>
<div className="offers-books__content">
{children}
</div>
</div>
)
}
export default Books

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

@ -2,21 +2,17 @@ import React from 'react';
import { useLocation } from '@reach/router'
import usePopularArticlesQuery from '../../hooks/usePopularArticlesQuery'
import useTagsQuery from '../../hooks/useTagsQuery'
import useBooksQuery from '../../hooks/useBooksQuery'
import Popular from './Popular/Popular'
import Tags from './Tags/Tags'
import Books from './Books/Books'
import Subscription from './Subscription/Subscription'
import PopularItem from './Popular/PopularItem'
import TagItem from './Tags/TagItem'
import BookItem from './Books/BookItem'
const Offers = () => {
const { pathname } = useLocation()
const { articles } = usePopularArticlesQuery()
const { tags } = useTagsQuery()
const { books } = useBooksQuery()
return (
<div style={{ height: pathname === '/' ? '78%' : '78.5%' }} className="offers">
@ -26,9 +22,6 @@ const Offers = () => {
<Tags>
{tags.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
</Tags>
<Books>
{books.map(({ node }, i) => <BookItem key={i} title={node.frontmatter.title} />)}
</Books>
<Subscription />
</div>
)

20
src/hooks/useBooksQuery.js
View File

@ -1,20 +0,0 @@
import { useStaticQuery, graphql } from 'gatsby'
const useBooksQuery = () => {
const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
{
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "book"}}}) {
edges {
node {
frontmatter {
title
}
}
}
}
}
`)
return { books: edges }
}
export default useBooksQuery

6
src/pages/articles.js
View File

@ -36,10 +36,12 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
|| frontmatter.tags.join('').toLowerCase().includes(query.toLowerCase().trim())
)
}, [query])
React.useEffect(() => {
setLimit(onPage)
if (query !== '') setFiltredArticles(filterArticles(allArticles.edges))
}, [setFiltredArticles, filterArticles, allArticles.edges, query])
}, [setFiltredArticles, filterArticles, allArticles.edges, query, onPage])
return (
<Layout>
@ -55,7 +57,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} setLimit={setLimit} />
<Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} setLimit={setLimit} onPage={onPage} />
<div className="articles-info">
{query && query !== '' ? filtredArticles.length === 0 ? <p><SearchIcon />&nbsp;&nbsp;Ничего не найдено</p> : null : null}
</div>

71
src/pages/books.js
View File

@ -1,71 +0,0 @@
import React from "react"
import { Main } from '../ui/ui'
import { Grid, Row, Col } from 'react-flexbox-grid'
import { graphql } from 'gatsby'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Books from '../components/Books/Books'
import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter'
import BooksIcon from '../images/books-icon__large.svg'
const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
return (
<Layout>
<SEO title='Ресурсы' />
<Main>
<Grid fluid>
<Row>
<Col lg={9} xs={12}>
<div className="books">
<div className="books-heading">
<BooksIcon />
<h1>Что почитать</h1>
</div>
<div className="books-description">
<p>
Здесь представлен список книг по программированию, которые стоило бы прочитать
</p>
</div>
</div>
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Books data={edges} />
<Newsletter />
</Col>
<Col lg={3} xs={12}>
<Offers />
</Col>
</Row>
</Grid>
</Main>
</Layout>
)
}
export const query = graphql`
{
allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "book"}}}) {
edges {
node {
frontmatter {
title
image {
childImageSharp {
fluid(maxWidth: 1400) {
...GatsbyImageSharpFluid
}
}
}
}
html
}
}
}
}
`
export default BooksPage