mirror of
https://github.com/sergeyyarkov/devthread.ru.git
synced 2026-10-11 02:09:04 +03:00
upd search input
This commit is contained in:
parent
65130e97d7
commit
b2d323eae4
@ -1,7 +1,3 @@
|
||||
const queries = require('./src/utils/algolia')
|
||||
|
||||
require('dotenv').config()
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: 'devthread.ru',
|
||||
@ -45,15 +41,6 @@ module.exports = {
|
||||
name: 'assets',
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-algolia`,
|
||||
options: {
|
||||
appId: process.env.GATSBY_ALGOLIA_APP_ID,
|
||||
apiKey: process.env.ALGOLIA_ADMIN_KEY,
|
||||
queries,
|
||||
chunkSize: 10000,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
options: {
|
||||
@ -137,56 +124,6 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-local-search',
|
||||
options: {
|
||||
name: 'pages',
|
||||
engine: 'flexsearch',
|
||||
engineOptions: 'speed',
|
||||
query: `
|
||||
{
|
||||
allMarkdownRemark(filter: { frontmatter: { templateKey: { eq: "article" } } }) {
|
||||
nodes {
|
||||
id
|
||||
frontmatter {
|
||||
slug
|
||||
title
|
||||
category
|
||||
image {
|
||||
childImageSharp {
|
||||
fluid(maxWidth: 960) {
|
||||
aspectRatio
|
||||
base64
|
||||
sizes
|
||||
src
|
||||
srcSet
|
||||
}
|
||||
}
|
||||
}
|
||||
tags
|
||||
description
|
||||
}
|
||||
rawMarkdownBody
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
ref: 'id',
|
||||
index: ['title', 'category', 'body', 'tags', 'description'],
|
||||
store: ['id', 'slug', 'title', 'category', 'tags', 'description', 'image'],
|
||||
normalizer: ({ data }) =>
|
||||
data.allMarkdownRemark.nodes.map(node => ({
|
||||
id: node.id,
|
||||
slug: node.frontmatter.slug,
|
||||
title: node.frontmatter.title,
|
||||
category: node.frontmatter.category,
|
||||
description: node.frontmatter.description,
|
||||
image: node.frontmatter.image,
|
||||
tags: node.frontmatter.tags,
|
||||
body: node.rawMarkdownBody,
|
||||
})),
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-react-svg',
|
||||
options: {
|
||||
|
||||
1090
package-lock.json
generated
1090
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -16,13 +16,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@reach/router": "^1.3.4",
|
||||
"algoliasearch": "^4.3.0",
|
||||
"dotenv": "^8.2.0",
|
||||
"esm": "^3.2.25",
|
||||
"gatsby": "^2.23.12",
|
||||
"gatsby-image": "^2.4.12",
|
||||
"gatsby-plugin-algolia": "^0.11.1",
|
||||
"gatsby-plugin-local-search": "^1.1.1",
|
||||
"gatsby-plugin-manifest": "^2.4.17",
|
||||
"gatsby-plugin-netlify-cms": "^4.3.9",
|
||||
"gatsby-plugin-react-helmet": "^3.3.8",
|
||||
@ -45,9 +42,7 @@
|
||||
"react-dom": "^16.12.0",
|
||||
"react-flexbox-grid": "^2.1.2",
|
||||
"react-github-btn": "^1.2.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-instantsearch-dom": "^6.6.0",
|
||||
"react-use-flexsearch": "^0.1.1"
|
||||
"react-helmet": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "2.0.5"
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react'
|
||||
import { navigate } from 'gatsby'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
const Search = ({ articlesLength, resultsLength, query, setQuery }) => {
|
||||
const Search = ({ allArticles, filterArticles, articlesLength, resultsLength, query, setQuery, setFiltredArticles }) => {
|
||||
const handleInput = e => {
|
||||
const query = e.target.value
|
||||
if (query === '') {
|
||||
@ -13,6 +13,7 @@ const Search = ({ articlesLength, resultsLength, query, setQuery }) => {
|
||||
|
||||
navigate(`/articles/?search=${query.trim()}`)
|
||||
setQuery(query)
|
||||
setFiltredArticles(filterArticles(allArticles))
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -2,10 +2,8 @@ import React from "react"
|
||||
import { Main } from '../ui/ui'
|
||||
import { Grid, Row, Col } from 'react-flexbox-grid'
|
||||
import { graphql } from 'gatsby'
|
||||
import { useFlexSearch } from 'react-use-flexsearch'
|
||||
import { useLocation } from '@reach/router'
|
||||
import * as queryString from 'query-string'
|
||||
import toFrontmatter from '../helpers/toFrontmatter'
|
||||
import useCategoriesQuery from '../hooks/useCategoriesQuery'
|
||||
|
||||
import SEO from '../components/SEO/SEO'
|
||||
@ -19,17 +17,29 @@ import Newsletter from '../components/Newsletter/Newsletter'
|
||||
|
||||
import SearchIcon from '../images/search-icon.svg'
|
||||
|
||||
const ArticlesPage = ({ data: { allMarkdownRemark: edges, localSearchPages }, }) => {
|
||||
const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
|
||||
const { categories } = useCategoriesQuery()
|
||||
const { search, pathname } = useLocation()
|
||||
|
||||
const [filtredArticles, setFiltredArticles] = React.useState([])
|
||||
const [query, setQuery] = React.useState(queryString.parse(search).search || '')
|
||||
|
||||
const results = useFlexSearch(
|
||||
query,
|
||||
localSearchPages.index,
|
||||
JSON.parse(localSearchPages.store)
|
||||
const allArticles = 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())
|
||||
)
|
||||
}, [query])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (query !== '') {
|
||||
setFiltredArticles(filterArticles(allArticles.edges))
|
||||
}
|
||||
}, [setFiltredArticles, filterArticles, allArticles.edges, query])
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
@ -45,9 +55,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges, localSearchPages }, })
|
||||
<Categories pathname={pathname}>
|
||||
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
|
||||
</Categories>
|
||||
<Search articlesLength={edges.edges.length} resultsLength={results.length} query={query} setQuery={setQuery} />
|
||||
<Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} />
|
||||
<div className="articles-info">
|
||||
{query ? results.length === 0 ? <p><SearchIcon /> Ничего не найдено</p> : null : null}
|
||||
{query ? filtredArticles.length === 0 ? <p><SearchIcon /> Ничего не найдено</p> : null : null}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
@ -55,7 +65,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges, localSearchPages }, })
|
||||
<Row>
|
||||
<Col lg={9} xs={12}>
|
||||
{query
|
||||
? results.length > 0 ? <Articles data={toFrontmatter(results)} /> : null
|
||||
? filtredArticles.length > 0 ? <Articles data={{edges: filtredArticles}} /> : null
|
||||
: <Articles data={edges} />
|
||||
}
|
||||
<Newsletter />
|
||||
@ -92,10 +102,6 @@ export const query = graphql`
|
||||
}
|
||||
}
|
||||
}
|
||||
localSearchPages {
|
||||
index
|
||||
store
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
const articlesQuery = `
|
||||
{
|
||||
articles: allMarkdownRemark(filter: { frontmatter: { templateKey: { eq: "article" } } }) {
|
||||
nodes {
|
||||
id
|
||||
frontmatter {
|
||||
slug
|
||||
title
|
||||
category
|
||||
image {
|
||||
childImageSharp {
|
||||
fluid(maxWidth: 960) {
|
||||
aspectRatio
|
||||
base64
|
||||
sizes
|
||||
src
|
||||
srcSet
|
||||
}
|
||||
}
|
||||
}
|
||||
tags
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const flatten = arr =>
|
||||
arr.map(({ frontmatter, ...rest }) => ({
|
||||
...frontmatter,
|
||||
...rest,
|
||||
}))
|
||||
|
||||
const settings = { attributesToSnippet: [`excerpt:20`] }
|
||||
|
||||
const queries = [
|
||||
{
|
||||
query: articlesQuery,
|
||||
transformer: (({ data }) => flatten(data.articles.nodes)),
|
||||
indexName: 'Articles',
|
||||
settings
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = queries
|
||||
Loading…
x
Reference in New Issue
Block a user