hrz-89846: refactoring

spryker · Sep 20, 2023 · 1b9d569 · 1b9d569
1 parent 0fee42e
commit 1b9d569
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/libs/domain/search/box/box.component.spec.ts b/libs/domain/search/box/box.component.spec.ts
@@ -218,8 +218,6 @@ describe('SearchBoxComponent', () => {
   });
 
   describe('when typing a query string', () => {
-    const callback = vi.fn();
-
     beforeEach(async () => {
       element = await fixture(html`<oryx-search-box></oryx-search-box>`);
 
@@ -253,9 +251,7 @@ describe('SearchBoxComponent', () => {
         const typeahead = element.renderRoot.querySelector('oryx-typeahead');
 
         typeahead?.toggleAttribute('open', true);
-        typeahead?.dispatchEvent(
-          new CustomEvent('oryx.search', { detail: {} })
-        );
+        typeahead?.dispatchEvent(new CustomEvent('oryx.search'));
       });
 
       it('should get the link from service without params', () => {
@@ -272,12 +268,12 @@ describe('SearchBoxComponent', () => {
     describe('and query is provided', () => {
       const q = 'test';
       beforeEach(async () => {
-        element = await fixture(html`<oryx-search-box></oryx-search-box>`);
+        element = await fixture(
+          html`<oryx-search-box .query=${q}></oryx-search-box>`
+        );
         element.renderRoot
           .querySelector('oryx-typeahead')
-          ?.dispatchEvent(
-            new CustomEvent('oryx.search', { detail: { query: q } })
-          );
+          ?.dispatchEvent(new CustomEvent('oryx.search'));
       });
 
       it('should get the link from service with params', () => {

diff --git a/libs/domain/search/box/box.component.ts b/libs/domain/search/box/box.component.ts
@@ -15,8 +15,6 @@ import {
   Size,
   computed,
   debounce,
-  effect,
-  elementEffect,
   hydrate,
   signalAware,
   signalProperty,
@@ -70,8 +68,13 @@ export class SearchBoxComponent
     )
   );
 
-  @elementEffect()
-  protected queryEffect = effect(() => this.query$.next(this.query));
+  protected $link = computed(() =>
+    this.semanticLinkService.get({
+      type: RouteType.ProductList,
+      ...(this.query ? { params: { q: this.query } } : {}),
+    })
+  );
+
   protected $raw = computed(() => this.suggestion$);
   protected $suggestion = computed(() => {
     const query = this.query?.trim();
@@ -86,7 +89,7 @@ export class SearchBoxComponent
     return html`
       <oryx-typeahead
         @oryx.search=${this.onSearch}
-        @oryx.typeahead=${debounce(this.onTypeahead.bind(this), 300)}
+        @oryx.typeahead=${this.onTypeahead}
         .clearIcon=${IconTypes.Close}
         ?float=${this.$options().float}
       >
@@ -139,20 +142,23 @@ export class SearchBoxComponent
 
   protected onTypeahead(event: CustomEvent<SearchEventDetail>): void {
     this.query = event.detail.query;
+
+    this.assignSuggestionQuery();
   }
 
-  protected onSearch(e: CustomEvent<SearchEventDetail>): void {
-    const q = e.detail.query;
-
-    this.semanticLinkService
-      .get({
-        type: RouteType.ProductList,
-        ...(q ? { params: { q } } : {}),
-      })
-      .subscribe((link) => {
-        this.routerService.navigate(link!);
-        this.onClose();
-      });
+  protected assignSuggestionQuery = debounce(() => {
+    this.query$.next(this.query);
+  }, 300);
+
+  protected onSearch(): void {
+    const link = this.$link();
+
+    if (!link) {
+      return;
+    }
+
+    this.routerService.navigate(link);
+    this.onClose();
   }
 
   protected isNothingFound(suggestion: Suggestion | null | undefined): boolean {