oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

Issue-545: Format components

Browse Source
This commit is contained in:
Akshay 2021-09-11 17:56:14 +02:00
parent fd9e5184d4
commit 16d38100ec
2 changed files with 125 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gatsby-node.js
View File

@ -112,13 +112,11 @@ exports.createPages = ({ graphql, actions }) => {
fields {
slug
section
}
frontmatter {
title
description
title
description
}
}
}
}

231
src/components/SearchComponent.jsx
View File

@ -1,123 +1,138 @@
import React, {useState, useEffect} from "react"
import * as JsSearch from "js-search"
import {Link} from "gatsby"
import React, { useState, useEffect } from 'react'
import * as JsSearch from 'js-search'
import { Link } from 'gatsby'
import PropTypes from 'prop-types'
const SearchComponent = ({pageContext}) => {
const SearchComponent = ({ pageContext }) => {
const { searchData } = pageContext
const searchableData = searchData.map(({ node }) => {
return {
title: node.frontmatter.title,
description: node.frontmatter.description,
slug: node.fields.slug,
id: node.id
}
})
return (
<>
Search feature
<ClientSearch searchableData={searchableData} />
</>
)
}
const {searchData} = pageContext
console.log("searchData", searchData)
const state = useState({isLoading: false, isError: false, searchQuery: ''})
const searchableData = searchData.map(({node}) => {
return {title: node.frontmatter.title, description: node.frontmatter.description, slug: node.fields.slug}
SearchComponent.propTypes = {
pageContext: PropTypes.object.isRequired
}
const ClientSearch = ({ searchableData }) => {
const [searchState, setSearchState] = useState({
isLoading: true,
searchResults: [],
search: null,
isError: false,
termFrequency: true,
removeStopWords: false,
searchQuery: '',
selectedStrategy: '',
selectedSanitizer: ''
})
useEffect(() => {
rebuildIndex(searchableData)
}, [])
const rebuildIndex = (searchableData) => {
// const {
// removeStopWords,
// selectedStrategy,
// selectedSanitizer,
// termFrequency
// } = searchState
const dataToSearch = new JsSearch.Search('title')
dataToSearch.addIndex('title')
dataToSearch.addDocuments(searchableData)
setSearchState({
...searchState,
isLoading: false,
search: dataToSearch
})
return (
<>Search feature
<ClientSearch searchableData={searchableData}/>
</>
)
}
}
const ClientSearch = ({searchableData}) => {
const [searchState, setSearchState] = useState({
isLoading: true,
searchResults: [],
search: null,
isError: false,
termFrequency: true,
removeStopWords: false,
searchQuery: "",
selectedStrategy: "",
selectedSanitizer: ""
const searchData = (e) => {
const { search } = searchState
const queryResult = search.search(e.target.value)
setSearchState({
...searchState,
searchQuery: e.target.value,
searchResults: queryResult
})
}
const handleSubmit = (e) => {
e.preventDefault()
}
useEffect(() => {
rebuildIndex(searchableData)
}, []);
return (
<div>
<div style={{ margin: '0 auto' }}>
<form onSubmit={handleSubmit}>
<input
id="Search"
value={searchState.searchQuery}
onChange={searchData}
placeholder="Enter your search here"
style={{
margin: '0 auto',
width: '400px'
}}
/>
</form>
</div>
const rebuildIndex = (searchableData) => {
const {removeStopWords, selectedStrategy, selectedSanitizer, termFrequency} = searchState
const dataToSearch = new JsSearch.Search("title")
dataToSearch.addIndex('title')
<br />
dataToSearch.addDocuments(searchableData)
setSearchState({
...searchState,
isLoading: false,
search: dataToSearch
})
}
const searchData = e => {
const {search} = searchState
const queryResult = search.search(e.target.value)
setSearchState({
...searchState,
searchQuery: e.target.value,
searchResults: queryResult
})
}
const handleSubmit = (e) => {
e.preventDefault()
}
return (
<div>
<div style={
{margin: "0 auto"}
}>
<form onSubmit={handleSubmit}>
<input id="Search"
value={
searchState.searchQuery
}
onChange={searchData}
placeholder="Enter your search here"
style={
{
margin: "0 auto",
width: "400px"
}
}/>
</form>
</div>
<br/>
<div><ResultList searchResults={
searchState.searchResults
}/></div>
</div>
)
<div>
<ResultList searchResults={searchState.searchResults} />
</div>
</div>
)
}
const ResultList = ({searchResults}) => {
return (<div>
<div>
Total results found: {
searchResults.length
} </div>
<ul> {
searchResults.map((element) =>< li > <ResultElement title={
element.title
}
slug={
element.slug
}/></li>
)
} </ul>
</div>
)
ClientSearch.propTypes = {
searchableData: PropTypes.array.isRequired
}
const ResultElement = ({title, slug}) => {
return (
<>
<Link to={slug}>
{title} </Link>
</>
)
const ResultList = ({ searchResults }) => {
return (
<div>
<div>Total results found: {searchResults.length} </div>
<ul>
{searchResults.map((element) => (
<li key={element.id}>
<ResultElement title={element.title} slug={element.slug} />
</li>
))}
</ul>
</div>
)
}
ResultList.propTypes = {
searchResults: PropTypes.array.isRequired
}
const ResultElement = ({ title, slug }) => {
return (
<>
<Link to={slug}>{title} </Link>
</>
)
}
ResultElement.propTypes = {
title: PropTypes.string.isRequired,
slug: PropTypes.string.isRequired
}
export default SearchComponent