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,54 +81,45 @@ const SearchClient = ({ searchableData }) => {
   }
 
   return (
-    <>
-      <Button
-        variant="outlined"
-        onClick={handleOpen}
-        disableRipple
-        startIcon={<SearchIcon />}
+    <div style={{ height: '100%' }}>
+      <form onSubmit={handleSubmit}>
+        <input
+          id="Search"
+          value={searchState.searchQuery}
+          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
-      </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}>
-                  <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>
+        {searchState.touched ? (
+          <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>
-        </Fade>
-      </Modal>
-    </>
+        ) : null}
+      </div>
+    </div>
   )
 }
 
@@ -146,16 +128,20 @@ 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>
-        {searchResults.map((element) => (
-          <ListItem style={{ before: { content: null } }} key={element.id}>
-            <Link to={element.slug}>{element.title} </Link>
-          </ListItem>
-        ))}
-      </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>
+            </ListItem>
+          ))}
+        </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 (
-    <>
-      <SearchClient searchableData={searchableData} />
-    </>
+    <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,10 +1,10 @@
 @import 'variables';
 
-.searchform input[type=text] {
-    float: right;
-    padding: 6px;
-    border: none;
-    margin-top: 8px;
-    margin-right: 16px;
-    font-size: 17px;
-}
+.searchform input[type='text'] {
+  float: right;
+  padding: 6px;
+  border: none;
+  margin-top: 8px;
+  margin-right: 16px;
+  font-size: 17px;
+}

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>

src/pages/index.module.scss

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