From ae2259b2ba52a735e9d1be6e5fc45086dd53da0d Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Sat, 20 Jan 2024 21:36:46 +0100
Subject: [PATCH] pages/search: render results

---
 pages/search/modules/dom.js   |  7 +++++
 pages/search/modules/store.js | 56 +++++++++++++++++++++++++++--------
 pages/search/search.js        |  5 ++--
 3 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 pages/search/modules/dom.js

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) =>
+  `<button class='tab'>${tab.displayName}</button>`
+
+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: `
+      <span>${tab.label}</span>
+      <span>${tab.title} / ${tab.url}</span>`,
+    ...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())