upd search input

gatsby-config.js

@@ -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: {

package.json

@@ -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-helmet": "^6.1.0"
-    "react-instantsearch-dom": "^6.6.0",
-    "react-use-flexsearch": "^0.1.1"
   },
   "devDependencies": {
     "prettier": "2.0.5"

src/components/Articles/Search/Search.js

@@ -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 (

src/pages/articles.js

@@ -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(
+  const allArticles = edges
-    query,
+
-    localSearchPages.index,
+  const filterArticles = React.useCallback(arr => {
-    JSON.parse(localSearchPages.store)
+    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 />&nbsp;&nbsp;Ничего не найдено</p> : null : null}
+                  {query ? filtredArticles.length === 0 ? <p><SearchIcon />&nbsp;&nbsp;Ничего не найдено</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
-    }
   } 
 `
 

src/utils/algolia.js

@@ -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