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

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