Issue-#545: Improve result render

gatsby-node.js

@@ -179,19 +179,15 @@ exports.createPages = ({ graphql, actions }) => {
 }
 
 const createSearchPage = async (createPage) => {
-  try {
-    const pageTemplate = path.resolve(
-      './src/components/Search/SearchComponent.jsx'
-    )
-    const url = `/search/`
+  const pageTemplate = path.resolve(
+    './src/components/Search/SearchComponent.jsx'
+  )
+  const url = `/search/`
 
-    createPage({
-      path: pageTemplate,
-      component: url
-    })
-  } catch (error) {
-    console.log(error.message)
-  }
+  createPage({
+    path: url,
+    component: pageTemplate
+  })
 }
 
 const createDeploymentsPage = async (createPage) => {

src/components/Search/SearchButton.jsx

@@ -5,8 +5,8 @@ import { IconButton } from '@material-ui/core'
 import SearchIcon from '@material-ui/icons/Search'
 const SearchButton = () => {
   return (
-    <IconButton>
-      <SearchIcon onClick={() => navigate('/search')} />
+    <IconButton onClick={() => navigate('/search')}>
+      <SearchIcon />
     </IconButton>
   )
 }

src/components/Search/SearchClient.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import * as JsSearch from 'js-search'
-import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
-import Pagination from '@material-ui/lab/Pagination'
 import TextField from '@material-ui/core/TextField'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import SearchIcon from '@material-ui/icons/Search'
+import SearchResultElement from './SearchResultElement'
+
 const useStyles = makeStyles((theme) => ({
   parent: {
     overflow: 'hidden',
@@ -89,7 +89,6 @@ const SearchClient = ({ searchableData }) => {
         <TextField
           variant="outlined"
           placeholder="Search"
-          fullwidth
           style={{
             margin: '10px auto',
             width: '100%'
@@ -113,9 +112,7 @@ const SearchClient = ({ searchableData }) => {
       >
         {searchState.touched ? (
           <div>
-            <div>Total results found: {searchState.searchResults.length}</div>
-
-            <List>
+            {/* <List>
               {searchState.searchResults.map((element) => (
                 <ListItem
                   style={{ before: { content: null } }}
@@ -124,7 +121,9 @@ const SearchClient = ({ searchableData }) => {
                   <Link to={element.slug}>{element.title} </Link>
                 </ListItem>
               ))}
-            </List>
+              
+            </List> */}
+            <ResultList searchResults={searchState.searchResults} />
           </div>
         ) : null}
       </div>
@@ -140,15 +139,14 @@ const ResultList = ({ searchResults }) => {
   const url = typeof window !== 'undefined' ? window.location.host : ''
   console.log('url', url)
   return (
-    <div style={{ maxHeight: '100%', overflowY: 'scroll' }}>
+    <div style={{ maxHeight: '100%' }}>
       <div>Total results found: {searchResults.length} </div>
-      <Pagination count={10} size="small" />
 
       <div>
-        <List style={{ maxHeight: '100%', overflowY: 'scroll' }}>
+        <List style={{ maxHeight: '100%' }}>
           {searchResults.map((element) => (
             <ListItem style={{ before: { content: null } }} key={element.id}>
-              <Link to={element.slug}>{element.title} </Link>
+              <SearchResultElement element={element} />
             </ListItem>
           ))}
         </List>

src/components/Search/SearchComponent.jsx

@@ -27,15 +27,17 @@ const SearchComponent = () => {
       }
     }
   `)
-  console.log('data', data)
   const searchableData = data.allMarkdownRemark.edges.map(({ node }) => {
+    var section = 'Concepts'
+    if (node.fields.slug.startsWith('/tutorials')) section = 'Tutorials'
+
     return {
       title: node.frontmatter.title,
       description: node.frontmatter.description,
-      slug:
-        node.fields.slug[0] === '/' ? node.fields.slug : '/' + node.fields.slug,
+      slug: node.fields.slug,
       id: node.id,
-      text: node.plainText
+      text: node.plainText,
+      section: section
     }
   })
 

src/components/Search/SearchResultElement.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import PropTypes from 'prop-types'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)'
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  }
+})
+
+const SearchResultElement = ({ element }) => {
+  const classes = useStyles()
+  const { slug, title, section, description } = element
+  return (
+    <Card container alignItems="center" style={{ width: '100%' }}>
+      <CardContent>
+        <Typography
+          className={classes.title}
+          color="textSecondary"
+          gutterBottom
+        >
+          {section}
+        </Typography>
+        <Typography variant="h6" component="h2">
+          <Link to={slug}>{title}</Link>
+        </Typography>
+        <Typography className={classes.pos} color="textSecondary">
+          {description ? description.substring(0, 100) + '...' : null}
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+SearchResultElement.propTypes = {
+  element: PropTypes.object.isRequired
+}
+
+export default SearchResultElement