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 { fields {
slug slug
section section
} }
frontmatter { frontmatter {
title title
description description
} }
} }
} }
} }

231
src/components/SearchComponent.jsx
View File

@ -1,123 +1,138 @@
import React, {useState, useEffect} from "react" import React, { useState, useEffect } from 'react'
import * as JsSearch from "js-search" import * as JsSearch from 'js-search'
import {Link} from "gatsby" 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 SearchComponent.propTypes = {
console.log("searchData", searchData) pageContext: PropTypes.object.isRequired
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} 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 searchData = (e) => {
const [searchState, setSearchState] = useState({ const { search } = searchState
isLoading: true, const queryResult = search.search(e.target.value)
searchResults: [], setSearchState({
search: null, ...searchState,
isError: false, searchQuery: e.target.value,
termFrequency: true, searchResults: queryResult
removeStopWords: false,
searchQuery: "",
selectedStrategy: "",
selectedSanitizer: ""
}) })
}
const handleSubmit = (e) => {
e.preventDefault()
}
useEffect(() => { return (
rebuildIndex(searchableData) <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) => { <br />
const {removeStopWords, selectedStrategy, selectedSanitizer, termFrequency} = searchState
const dataToSearch = new JsSearch.Search("title")
dataToSearch.addIndex('title')
dataToSearch.addDocuments(searchableData) <div>
setSearchState({ <ResultList searchResults={searchState.searchResults} />
...searchState, </div>
isLoading: false, </div>
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>
)
} }
ClientSearch.propTypes = {
const ResultList = ({searchResults}) => { searchableData: PropTypes.array.isRequired
return (<div>
<div>
Total results found: {
searchResults.length
} </div>
<ul> {
searchResults.map((element) =>< li > <ResultElement title={
element.title
}
slug={
element.slug
}/></li>
)
} </ul>
</div>
)
} }
const ResultElement = ({title, slug}) => { const ResultList = ({ searchResults }) => {
return ( return (
<> <div>
<Link to={slug}> <div>Total results found: {searchResults.length} </div>
{title} </Link> <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 export default SearchComponent