pages/search: render results

pages/search/modules/dom.js

@@ -0,0 +1,7 @@
+const tabView = (tab) =>
+  `<button class='tab'>${tab.displayName}</button>`
+
+export const updateSearchResults = (state) => {
+  const container = document.getElementById('searchResults')
+  container.innerHTML = state.results.map(tabView).join('')
+}

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: `
+      <span>${tab.label}</span>
+      <span>${tab.title} / ${tab.url}</span>`,
+    ...tab,
+  })
+
   const shapeTabs = (tabs) => tabs
-    .map((tab) => ({
+    .map(addLabel(tabs))
-      label: labels.id2label(tab.id, tabs),
+    .map(pickFields)
-      ...tab,
+    .map(addDisplayName)
-    }))
-    .map((tab) => [
-      'favIconUrl',
-      'id',
-      'label',
-      'title',
-      'url',
-    ].reduce((acc, x) => (acc[x] = tab[x], acc), {}))
 
   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()
+      },
     },
   }
 }

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())