fix(angular/query-suggestions): fix mobile layout, use ais-hits for results and add types

Author: dhayab

Angular InstantSearch/query-suggestions/src/app/app.component.css

@@ -49,8 +49,10 @@
   margin-bottom: 2rem;
 }
 
-.ais-Hits-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
+@media (min-width: 900px) {
+  .ais-Hits-list {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+  }
 }

Angular InstantSearch/query-suggestions/src/app/app.component.html

@@ -22,12 +22,15 @@ <h1 class="header-title">
     <ais-configure [searchParameters]="searchParameters"></ais-configure>
     <div class="search-panel">
       <div class="search-panel__results">
-        <ais-hits>
-          <ng-template let-hits="hits" let-results="results">
-            <div *ngIf="hits.length === 0">
-              No results found matching <strong>{{ results?.query }}</strong>.
+        <ais-stats>
+          <ng-template let-state="state">
+            <div *ngIf="state.nbHits === 0">
+              No hits for <strong>{{ state.query }}</strong>.
             </div>
-
+          </ng-template>
+        </ais-stats>
+        <ais-hits>
+          <ng-template let-hits="hits">
             <ol class="ais-Hits-list">
               <li class="ais-Hits-item" *ngFor="let hit of hits">
                 <ais-highlight attribute="name" [hit]="hit"></ais-highlight>

Angular InstantSearch/query-suggestions/src/app/autocomplete.component.ts

@@ -1,3 +1,4 @@
+import type { Hit } from '@algolia/client-search';
 import {
   Component,
   EventEmitter,
@@ -21,6 +22,16 @@ export type QuerySuggestion = {
   category: string | null;
 };
 
+type QuerySuggestionHit = Hit<{
+  instant_search?: {
+    facets?: {
+      exact_matches?: {
+        categories?: ReadonlyArray<{ value: string; count: number }>;
+      };
+    };
+  };
+}>;
+
 @Component({
   selector: 'app-autocomplete',
   template: `
@@ -81,12 +92,13 @@ export class AutocompleteComponent extends TypedBaseWidget<
     super('AutocompleteComponent');
   }
 
-  hasCategory(hit: any) {
-    return !!hit?.instant_search?.facets?.exact_matches?.categories?.length;
+  hasCategory(hit: QuerySuggestionHit) {
+    return !!hit.instant_search?.facets?.exact_matches?.categories?.length;
   }
 
-  getCategory(hit: any) {
-    const [category] = hit.instant_search.facets.exact_matches.categories;
+  getCategory(hit: QuerySuggestionHit) {
+    const [category] =
+      hit.instant_search?.facets?.exact_matches?.categories || [];
     return category.value;
   }