mirror of
https://github.com/sergeyyarkov/devthread.ru.git
synced 2026-10-11 10:19:13 +03:00
deleted page books & fix state in search
This commit is contained in:
parent
12d9490e46
commit
61b3be89aa
@ -23,7 +23,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
name: 'Ресурсы',
|
||||
link: '/books'
|
||||
link: '/deleted'
|
||||
}
|
||||
],
|
||||
social: {
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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
|
||||
}
|
||||
@ -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
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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
|
||||
@ -37,9 +37,11 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
|
||||
)
|
||||
}, [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 /> Ничего не найдено</p> : null : null}
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
Loading…
x
Reference in New Issue
Block a user