Issue-#545: Create search page

gatsby-node.js

@@ -132,7 +132,7 @@ exports.createPages = ({ graphql, actions }) => {
         await createSwaggerPages(createPage)
 
         await createDeploymentsPage(createPage)
-
+        await createSearchPage(createPage)
         // API: ocean.js
         const lastRelease =
           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 template = path.resolve('./src/components/Deployments.jsx')
   const slug = `/concepts/deployments/`

package-lock.json

@@ -4164,6 +4164,18 @@
         "@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": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",

package.json

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

src/components/Header.jsx

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

src/components/Search/SearchButton.jsx

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

src/components/Search/SearchClient.jsx

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

src/components/Search/SearchComponent.jsx

@@ -3,6 +3,8 @@ import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
 
 import SearchClient from './SearchClient'
+import Layout from '../../components/Layout'
+import HeaderSection from '../../components/HeaderSection'
 
 const SearchComponent = () => {
   const data = useStaticQuery(graphql`
@@ -30,15 +32,27 @@ const SearchComponent = () => {
     return {
       title: node.frontmatter.title,
       description: node.frontmatter.description,
-      slug: node.fields.slug,
+      slug:
+        node.fields.slug[0] === '/' ? node.fields.slug : '/' + node.fields.slug,
       id: node.id,
       text: node.plainText
     }
   })
+
   return (
-    <>
+    <Layout location={location}>
+      <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>
   )
 }
 

src/components/Search/SearchComponent.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.searchform input[type=text] {
+.searchform input[type='text'] {
   float: right;
   padding: 6px;
   border: none;

src/pages/index.jsx

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