From 5240ccf9e55f462995b7cc2dc07929a3a45b5b04 Mon Sep 17 00:00:00 2001
From: pkong-ds <pkong.work@gmail.com>
Date: Fri, 31 May 2024 02:12:50 +0800
Subject: [PATCH 1/2] Support brand as search param on page load

---
 public/scripts/device.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/public/scripts/device.js b/public/scripts/device.js
index 37b2111..de50ba2 100644
--- a/public/scripts/device.js
+++ b/public/scripts/device.js
@@ -110,7 +110,6 @@ function handleSearchInput(viewModel) {
 }
 
 function initializeSearch(viewModel, containerId) {
-  console.log(containerId);
   const { autocomplete } = window["@algolia/autocomplete-js"];
   autocomplete({
     container: containerId,
@@ -187,9 +186,6 @@ function main() {
     window.modelItems,
     window.brandItems,
   );
-  if (isDebug) {
-    window.viewModel = viewModel;
-  }
 
   [
     "#device-list__header__autocomplete",
@@ -200,7 +196,15 @@ function main() {
 
   mobx.reaction(
     () => viewModel.selectedBrand,
-    (selectedBrand) => {
+    (selectedBrand, prevBrand) => {
+      // check target exist
+      const targetBrandListItem = document.querySelector(
+        `#device-brand-list__item-button__${selectedBrand}`,
+      );
+
+      if (targetBrandListItem == null) {
+        viewModel.selectedBrand = prevBrand;
+      }
       // Show non-selected styles for all brand tags
       const allBrandListItems = document.querySelectorAll(
         ".device-brand-list__item-button",
@@ -210,10 +214,6 @@ function main() {
       );
 
       // Show selected styles for target brand tags
-      const targetBrandListItem = document.querySelector(
-        `#device-brand-list__item-button__${selectedBrand}`,
-      );
-
       targetBrandListItem.classList.add(
         "device-brand-list__item-button--selected",
       );
@@ -252,4 +252,11 @@ function main() {
   brandSelect.addEventListener("change", () =>
     handleSelectBrandOption(brandSelect, viewModel),
   );
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const brandParam = urlParams.get("brand");
+
+  if (brandParam != null) {
+    viewModel.selectedBrand = brandParam;
+  }
 }

From d7b8fe86c24cecc6e1e05dd190c06d97720cef2d Mon Sep 17 00:00:00 2001
From: pkong-ds <pkong.work@gmail.com>
Date: Fri, 31 May 2024 02:14:16 +0800
Subject: [PATCH 2/2] Allow search brand

---
 src/scripts/algolia/generate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/algolia/generate.ts b/src/scripts/algolia/generate.ts
index e03b6fa..fcebf96 100644
--- a/src/scripts/algolia/generate.ts
+++ b/src/scripts/algolia/generate.ts
@@ -34,6 +34,6 @@ export const getBrandItems = (deviceManager: DeviceManager) =>
       return {
         id: v.id,
         name: v.name,
-        pathname: `/type/all`, // FIXME: add brand query param
+        pathname: `/type/all?brand=${v.id}`,
       };
     });