diff --git a/pages/search/modules/dom.js b/pages/search/modules/dom.js
new file mode 100644
index 0000000..9acf086
--- /dev/null
+++ b/pages/search/modules/dom.js
@@ -0,0 +1,7 @@
+const tabView = (tab) =>
+ ``
+
+export const updateSearchResults = (state) => {
+ const container = document.getElementById('searchResults')
+ container.innerHTML = state.results.map(tabView).join('')
+}
diff --git a/pages/search/modules/store.js b/pages/search/modules/store.js
index 4ce5762..ece800a 100644
--- a/pages/search/modules/store.js
+++ b/pages/search/modules/store.js
@@ -7,33 +7,59 @@ export const init = ({
/* Initial state */
const state = {
tabs: [],
+ results: [],
+ query: '',
}
/* */
+ const addLabel = (tabs) => (tab) => ({
+ label: labels.id2label(tab.id, tabs),
+ ...tab,
+ })
+
+ const pickFields = (tab) => [
+ 'favIconUrl',
+ 'id',
+ 'label',
+ 'title',
+ 'url',
+ ].reduce((acc, x) => (acc[x] = tab[x], acc), {})
+
+ const addDisplayName = (tab) => ({
+ displayName: `
+ ${tab.label}
+ ${tab.title} / ${tab.url}`,
+ ...tab,
+ })
+
const shapeTabs = (tabs) => tabs
- .map((tab) => ({
- label: labels.id2label(tab.id, tabs),
- ...tab,
- }))
- .map((tab) => [
- 'favIconUrl',
- 'id',
- 'label',
- 'title',
- 'url',
- ].reduce((acc, x) => (acc[x] = tab[x], acc), {}))
+ .map(addLabel(tabs))
+ .map(pickFields)
+ .map(addDisplayName)
const fetchTabs = () =>
browserTabs.query({ currentWindow: true, active: false })
.then(shapeTabs)
.then((tabs) => tabs.reverse())
- .then((tabs) => void (state.tabs = tabs))
+ .then((tabs) => {
+ void (state.tabs = tabs)
+ void (state.results = tabs)
+ })
/* */
+ const updateResults = () => {
+ state.results = state.query.length === 0
+ ? state.tabs
+ : []
+ }
+ /* */
+
const updateState = () =>
- fetchTabs()
+ Promise.resolve()
+ .then(fetchTabs)
+ .then(updateResults)
.then(() => onStateUpdate(state))
updateState()
@@ -53,6 +79,10 @@ export const init = ({
browserTabs.remove(id)
.then(updateState)
},
+ updateQuery(query) {
+ state.query = query
+ updateState()
+ },
},
}
}
diff --git a/pages/search/search.js b/pages/search/search.js
index 836dbfd..49e174e 100644
--- a/pages/search/search.js
+++ b/pages/search/search.js
@@ -1,8 +1,7 @@
import * as Store from './modules/store.js'
+import * as dom from './modules/dom.js'
const store = Store.init({
tabs: browser.tabs,
- onStateUpdate: console.log,
+ onStateUpdate: dom.updateSearchResults,
})
-
-console.log(store.getCurrentState())