Allow brand as search params in select device page

oursky · May 30, 2024 · dafb635 · dafb635
2 parents 0679630 + d7b8fe8
commit dafb635
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git 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;
+  }
 }
diff --git 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}`,
       };
     });