Skip to content

Commit

Permalink
refactor search
Browse files Browse the repository at this point in the history
  • Loading branch information
Song Zheng committed Feb 22, 2020
1 parent 77c34ed commit 165e6ca
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 84 deletions.
75 changes: 0 additions & 75 deletions public/search.js

This file was deleted.

22 changes: 14 additions & 8 deletions src/home.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/* globals clientData */
const moment = require('moment')
const initSearch = require('./search')

const noteMap = {}

const contentStr = clientData.reduce((acc, note, idx) => {
const title = note.name.toLowerCase()
noteMap[title] = note.name
return acc + `
<div class="card">
<div class='card-body'>
Expand All @@ -27,13 +32,14 @@ Modified ${moment(note.mtimeMs).fromNow()}
module.exports = () => {
const containerElement = document.querySelector('#mainAppElement')
containerElement.innerHTML = `
<div class="row">
<div class="col-12">
<div class="card-columns">
${contentStr}
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="card-columns">
${contentStr}
</div>
<hr>
</div>
</div>
</div>
`
`
initSearch(noteMap)
}
73 changes: 73 additions & 0 deletions src/search.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
const initSearch = (noteMap) => {
const searchBox = document.querySelector('#searchBox')
const allNotes = document.querySelectorAll('.card-columns .card-title')

let resultElements = []
const resultContainer = document.querySelector('#resultListContainer')
searchBox.focus()
const search = () => {
const searchQuery = searchBox.value
if (searchQuery.length < 2) return
fetch(`/search/${searchQuery}`).then( r=> r.text() ).then(data => {
// invalidate old requests
if( searchBox.value !== searchQuery) return
const dataArr = data.split('\n').filter( d => d ).map( d => {
const result = d.substr(5) // get rid of data/ prefix
const resultArr = result.split(':')
const title = resultArr.shift()
const match = resultArr.join(':')
return {
title, match
}
})
resultContainer.innerHTML = ''
const newTitleMap = {...noteMap}
resultElements = dataArr.map( (obj, idx) => {
delete newTitleMap[obj.title.toLowerCase()]
return new Result(obj.title, obj.match, idx)
})
Object.keys(newTitleMap).forEach( title => {
if (!title.includes(searchQuery.toLowerCase())) {
return
}
resultElements.push(
new Result(newTitleMap[title], '', resultElements.length)
)
})
})
}
}

function Result(name, value, idx) {
const div = document.createElement('div')
div.className = 'resultContainer'
if (!idx) {
div.className += ' selected'
}
div.innerHTML = `
<p>
<span class="title">
${name}:
</span>
${value}
</p>
`
div.addEventListener('click', () => {
this.select()
})

resultContainer.append(div)
this.select = () => {
window.location = `/notes/${name}`
}
}

searchBox.addEventListener('keyup', (e) => {
console.log(e.key)
if (e.key === 'Enter') {
return resultElements[0].select()
}
search()
})

module.exports = initSearch
1 change: 0 additions & 1 deletion views/notes.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,4 @@ console.log(clientData)
</script>
<script src="/main.js"></script>

<script src="/search.js"></script>
<%- include('./layout/footer.ejs') %>

0 comments on commit 165e6ca

Please sign in to comment.