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

Issue-#545: Create search page

This commit is contained in:
Akshay 2021-09-13 20:45:55 +02:00
parent 01350950c4
commit 213e04a0be
10 changed files with 132 additions and 96 deletions

View File

@ -132,7 +132,7 @@ exports.createPages = ({ graphql, actions }) => {
await createSwaggerPages(createPage) await createSwaggerPages(createPage)
await createDeploymentsPage(createPage) await createDeploymentsPage(createPage)
await createSearchPage(createPage)
// API: ocean.js // API: ocean.js
const lastRelease = const lastRelease =
result.data.oceanJs.repository.releases.edges.filter( result.data.oceanJs.repository.releases.edges.filter(
@ -178,6 +178,16 @@ exports.createPages = ({ graphql, actions }) => {
}) })
} }
const createSearchPage = async (createPage) => {
const template = path.resolve('./src/components/Search/SearchComponent.jsx')
const slug = `/search/`
createPage({
path: slug,
component: template
})
}
const createDeploymentsPage = async (createPage) => { const createDeploymentsPage = async (createPage) => {
const template = path.resolve('./src/components/Deployments.jsx') const template = path.resolve('./src/components/Deployments.jsx')
const slug = `/concepts/deployments/` const slug = `/concepts/deployments/`

12
package-lock.json generated
View File

@ -4164,6 +4164,18 @@
"@babel/runtime": "^7.4.4" "@babel/runtime": "^7.4.4"
} }
}, },
"@material-ui/lab": {
"version": "4.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
"integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@material-ui/styles": { "@material-ui/styles": {
"version": "4.11.4", "version": "4.11.4",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",

View File

@ -18,6 +18,7 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^4.12.3", "@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@oceanprotocol/art": "^3.2.0", "@oceanprotocol/art": "^3.2.0",
"axios": "^0.21.4", "axios": "^0.21.4",
"classnames": "^2.3.1", "classnames": "^2.3.1",

View File

@ -2,7 +2,7 @@ import React from 'react'
import { Link, StaticQuery, graphql } from 'gatsby' import { Link, StaticQuery, graphql } from 'gatsby'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg' import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import styles from './Header.module.scss' import styles from './Header.module.scss'
import SearchComponent from './Search/SearchComponent' import SearchButton from './Search/SearchButton'
const query = graphql` const query = graphql`
query { query {
@ -48,7 +48,7 @@ const Header = () => (
{node.title} {node.title}
</Link> </Link>
))} ))}
<SearchComponent className={styles.section} /> <SearchButton />
</nav> </nav>
</div> </div>
</header> </header>

View File

@ -0,0 +1,13 @@
import React from 'react'
import { navigate } from 'gatsby'
import { IconButton } from '@material-ui/core'
import SearchIcon from '@material-ui/icons/Search'
const SearchButton = () => {
return (
<IconButton>
<SearchIcon onClick={() => navigate('/search')} />
</IconButton>
)
}
export default SearchButton

View File

@ -3,26 +3,26 @@ import * as JsSearch from 'js-search'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import Modal from '@material-ui/core/Modal'
import Backdrop from '@material-ui/core/Backdrop'
import Fade from '@material-ui/core/Fade'
import List from '@material-ui/core/List' import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem' import ListItem from '@material-ui/core/ListItem'
import styles from './SearchComponent.module.scss'
import Button from '@material-ui/core/Button'
import SearchIcon from '@material-ui/icons/Search'
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
modal: { parent: {
display: 'flex', overflow: 'hidden',
alignItems: 'top', position: 'relative',
justifyContent: 'center' width: '100%'
}, },
paper: { child: {
backgroundColor: theme.palette.background.paper, background: 'green',
boxShadow: theme.shadows[5], height: '100%',
padding: theme.spacing(2, 4, 3), width: '50%',
margin: theme.spacing(3) position: 'absolute',
right: 0,
top: 0
},
root: {
margin: 'auto',
width: '50%'
} }
})) }))
@ -41,15 +41,6 @@ const SearchClient = ({ searchableData }) => {
}) })
const classes = useStyles() const classes = useStyles()
const [open, setOpen] = React.useState(false)
const handleOpen = () => {
setOpen(true)
}
const handleClose = () => {
setOpen(false)
}
useEffect(() => { useEffect(() => {
rebuildIndex(searchableData) rebuildIndex(searchableData)
@ -90,54 +81,45 @@ const SearchClient = ({ searchableData }) => {
} }
return ( return (
<> <div style={{ height: '100%' }}>
<Button <form onSubmit={handleSubmit}>
variant="outlined" <input
onClick={handleOpen} id="Search"
disableRipple value={searchState.searchQuery}
startIcon={<SearchIcon />} onChange={searchData}
placeholder="Search..."
style={{
margin: '0 auto',
width: '400px',
border: '1px solid'
}}
type="text"
/>
</form>
<div
id="result-list-conatiner"
style={{ overflowY: 'scroll', height: '100%' }}
className={classes.parent}
> >
Search {searchState.touched ? (
</Button> <div>
<Modal <div>Total results found: {searchState.searchResults.length}</div>
className={classes.modal}
open={open} <List>
onClose={handleClose} {searchState.searchResults.map((element) => (
closeAfterTransition <ListItem
BackdropComponent={Backdrop} style={{ before: { content: null } }}
BackdropProps={{ key={element.id}
timeout: 500 >
}} <Link to={element.slug}>{element.title} </Link>
> </ListItem>
<Fade in={open}> ))}
<div className={classes.paper}> </List>
<div>
<div style={{ margin: '0 auto' }}>
<form onSubmit={handleSubmit} className={styles.searchform}>
<input
id="Search"
value={searchState.searchQuery}
onChange={searchData}
placeholder="Search..."
style={{
margin: '0 auto',
width: '400px',
border: '1px solid'
}}
type="text"
/>
</form>
</div>
<div>
{searchState.touched ? (
<ResultList searchResults={searchState.searchResults} />
) : null}
</div>
</div>
</div> </div>
</Fade> ) : null}
</Modal> </div>
</> </div>
) )
} }
@ -146,16 +128,20 @@ SearchClient.propTypes = {
} }
const ResultList = ({ searchResults }) => { const ResultList = ({ searchResults }) => {
const url = typeof window !== 'undefined' ? window.location.host : ''
console.log('url', url)
return ( return (
<div> <div style={{ maxHeight: '100%', overflowY: 'scroll' }}>
<div>Total results found: {searchResults.length} </div> <div>Total results found: {searchResults.length} </div>
<List> <div>
{searchResults.map((element) => ( <List style={{ maxHeight: '100%', overflowY: 'scroll' }}>
<ListItem style={{ before: { content: null } }} key={element.id}> {searchResults.map((element) => (
<Link to={element.slug}>{element.title} </Link> <ListItem style={{ before: { content: null } }} key={element.id}>
</ListItem> <Link to={element.slug}>{element.title} </Link>
))} </ListItem>
</List> ))}
</List>
</div>
</div> </div>
) )
} }

View File

@ -3,6 +3,8 @@ import React from 'react'
import { useStaticQuery, graphql } from 'gatsby' import { useStaticQuery, graphql } from 'gatsby'
import SearchClient from './SearchClient' import SearchClient from './SearchClient'
import Layout from '../../components/Layout'
import HeaderSection from '../../components/HeaderSection'
const SearchComponent = () => { const SearchComponent = () => {
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
@ -30,15 +32,27 @@ const SearchComponent = () => {
return { return {
title: node.frontmatter.title, title: node.frontmatter.title,
description: node.frontmatter.description, description: node.frontmatter.description,
slug: node.fields.slug, slug:
node.fields.slug[0] === '/' ? node.fields.slug : '/' + node.fields.slug,
id: node.id, id: node.id,
text: node.plainText text: node.plainText
} }
}) })
return ( return (
<> <Layout location={location}>
<SearchClient searchableData={searchableData} /> <HeaderSection title="Search" />
</> <main>
<article style={{ height: '400px' }}>
<div
id="search-client-container"
style={{ margin: 'auto', width: '50%', height: '100%' }}
>
<SearchClient searchableData={searchableData} />
</div>
</article>
</main>
</Layout>
) )
} }

View File

@ -1,10 +1,10 @@
@import 'variables'; @import 'variables';
.searchform input[type=text] { .searchform input[type='text'] {
float: right; float: right;
padding: 6px; padding: 6px;
border: none; border: none;
margin-top: 8px; margin-top: 8px;
margin-right: 16px; margin-right: 16px;
font-size: 17px; font-size: 17px;
} }

View File

@ -9,7 +9,7 @@ import HeaderHome from '../components/HeaderHome'
import Repositories from '../components/Repositories' import Repositories from '../components/Repositories'
import { ReactComponent as Arrow } from '../images/arrow.svg' import { ReactComponent as Arrow } from '../images/arrow.svg'
import styles from './index.module.scss' import styles from './index.module.scss'
import SearchComponent from '../components/Search/SearchComponent' import SearchButton from '../components/Search/SearchButton'
const SectionBox = ({ to, children, ...props }) => const SectionBox = ({ to, children, ...props }) =>
to ? ( to ? (
@ -68,7 +68,7 @@ const IndexPage = ({ data, location }) => (
))} ))}
</ul> </ul>
<div className={styles.searchButton}> <div className={styles.searchButton}>
<SearchComponent /> <SearchButton />
</div> </div>
<Repositories /> <Repositories />
</Content> </Content>

View File

@ -116,4 +116,4 @@
.searchButton { .searchButton {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
} }