Implement initial search

Author: i80and

Makefile

@@ -7,7 +7,7 @@ help: ## Show this help message
 
 build: | tools/node_modules ## Build the documentation under build/<git branch>
 	hugo -d build/$(GIT_BRANCH)
-	$(NODE) tools/genindex.js content/tutorials build/$(GIT_BRANCH)/ --config config.toml
+	$(NODE) tools/genindex.js content/tutorials build/$(GIT_BRANCH)/search.json --config config.toml
 
 serve: ## Host the documentation on port 1313
 	hugo serve

themes/mongodb-tutorials/package.json

@@ -4,8 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npm run build:js && npm run build:css",
-    "build:js": "./node_modules/.bin/webpack",
+    "build": "npm run build:js && npm run build:search && npm run build:css",
+    "build:js": "./node_modules/.bin/webpack --config webpack/webpack.config.js",
+    "build:search": "./node_modules/.bin/webpack --config webpack/webpack-search.config.js",
     "build:css": "./node_modules/.bin/lessc src/styles/app.less static/style.css"
   },
   "keywords": [],
@@ -20,7 +21,8 @@
     "less": "^2.7.2",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "webpack": "^2.2.1"
+    "webpack": "^2.2.1",
+    "lunr": "i80and/lunr.js#19a85e62ae8103a48ce5a1fad507f758cf6016d9"
   },
   "devDependencies": {
     "webpack": "^2.2.1"

themes/mongodb-tutorials/src/SearchChannel.js

@@ -0,0 +1,53 @@
+export default class SearchChannel {
+  constructor(url) {
+    this.worker = new Worker('worker-search.js')
+
+    this.pending = null
+    this.busy = false
+
+    this.loaded = false
+    this.loadingTime = null
+    this.loadWaiter = new Promise((resolve) => {
+      this.worker.onmessage = (ev) => {
+        if (ev.data.loaded) {
+          this.loaded = true
+          this.loadingTime = ev.data.loaded
+          return resolve(this.loadingTime)
+        }
+
+        if (ev.data.results) {
+          this.onresults(ev.data.results)
+        }
+
+        this.busy = false
+        if (this.pending !== null) {
+          this.search(this.pending)
+        }
+      }
+    })
+
+    this.worker.postMessage({ 'load': url })
+    this.onresults = (results) => {}
+  }
+
+  search(query) {
+    if (!this.busy) {
+      if (!query) {
+        this.onresults([])
+      } else {
+        this.worker.postMessage({ 'search': query })
+      }
+      this.pending = null
+      this.busy = true
+    } else {
+      this.pending = query
+    }
+  }
+
+  load() {
+    if (this.loadingTime !== null) {
+      return new Promise((resolve, reject) => resolve(this.loadingTime))
+    }
+    return this.loadWaiter
+  }
+}

themes/mongodb-tutorials/src/index.js

@@ -2,13 +2,14 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 import Facet from './facet.js'
+import Search from './Search.js'
 import TutorialList from './tutorialList.js'
 
-
 class App extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
+      searchResults: null,
       options: [
         { name: "MongoDB", facet: 'product', active: false },
         { name: "Atlas", facet: 'product', active: false },
@@ -93,6 +94,10 @@ class App extends React.Component {
     this.setState({ options })
   }
 
+  onResults = (results) => {
+    this.setState({searchResults: results})
+  }
+
   render () {
     // TODO: This should be possible with reduce
     let facetNames = []
@@ -115,7 +120,7 @@ class App extends React.Component {
         return { facet: option.facet, name: option.name } // remove active field for stringification
       })
 
-    const tutorials = this.state.tutorials.filter(tutorial => {
+    const tutorialsMatchingFacets = this.state.tutorials.filter(tutorial => {
       let shouldInclude = true // by default show all the tutorials
 
       activeOptions.map(option => {
@@ -129,8 +134,17 @@ class App extends React.Component {
       return shouldInclude
     })
 
+    let tutorials = tutorialsMatchingFacets
+    if (this.state.searchResults !== null) {
+      const tutorialsSet = new Set(tutorialsMatchingFacets.map(tutorial => tutorial.url))
+      tutorials = this.state.searchResults.filter(slug => {
+        return tutorialsSet.has(slug)
+      })
+    }
+
     return (
       <div>
+        <Search onResults={this.onResults} />
         <a onClick={this.clearFacets}>Clear Filters</a>
         { facets }
         <TutorialList tutorials={ tutorials } />

themes/mongodb-tutorials/src/search.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import SearchChannel from './SearchChannel.js'
+
+export default class Search extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      searcher: new SearchChannel('/search.json'),
+      timeout: -1,
+      loaded: false,
+      searchText: ''
+    }
+
+
+    this.state.searcher.load().then(() => {
+      this.setState({loaded: true})
+    }).catch((err) => console.error(err))
+
+    this.state.searcher.onresults = props.onResults
+  }
+
+  get placeholder() {
+    if (!this.state.searcher.loaded) {
+      return 'Loading...'
+    }
+
+    return 'search by keywords'
+  }
+
+  onInput = (event) => {
+    this.setState({
+      searchText: event.target.value
+    })
+
+    if (this.state.timeout !== -1) {
+      clearTimeout(this.state.timeout)
+    }
+
+    this.setState({timeout:
+      this.state.timeout = setTimeout(() => {
+        this.state.searcher.search(this.state.searchText)
+      }, 250)})
+  }
+
+  render() {
+    return <input type="search" placeholder={this.placeholder} value={this.state.searchText} disabled={!this.state.searcher.loaded} onInput={this.onInput} />
+  }
+}

themes/mongodb-tutorials/src/worker-search.js

@@ -0,0 +1,37 @@
+'use strict'
+import lunr from 'lunr'
+
+let searchIndex = null
+let slugMapping = []
+
+function load(url) {
+    let start
+    return fetch(url).then((response) => {
+        start = performance.now()
+        return response.json()
+    }).then((data) => {
+        searchIndex = lunr.Index.load(data)
+        slugMapping = data.slugs
+        return (performance.now() - start) / 1000
+    })
+}
+
+function search(query) {
+    const start = performance.now()
+    const results = searchIndex.search(query).map((row) => {
+        return slugMapping[row.ref]
+    })
+    // console.log((performance.now() - start) / 1000)
+    return results
+}
+
+self.onmessage = function(ev) {
+    if (ev.data.load !== undefined) {
+        load(ev.data.load).then((enlapsed) => {
+            self.postMessage({ 'loaded': enlapsed })
+        })
+    } else if (ev.data.search !== undefined) {
+        const results = search(ev.data.search)
+        self.postMessage({ 'results': results })
+    }
+}