feat: add supprot for deeplinking

src/app/search-ui/deeplink.service.ts

@@ -0,0 +1,33 @@
+import { FormGroup } from '@angular/forms';
+import { QueryParams } from './deeplink.service';
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { AlgoliaService } from '@app/core/algolia/algolia.service';
+
+export interface QueryParams {
+  q: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeeplinkService {
+  constructor(private router: Router, private route: ActivatedRoute, private search: AlgoliaService) {}
+
+  registerFormGroup(form: FormGroup) {
+    this.route.queryParams.subscribe((query: QueryParams) => {
+      if (query.q) {
+        form.setValue({
+          query: query.q
+        });
+      }
+    });
+  }
+
+  syncUrl(queryParams: Params) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams
+    });
+  }
+}

src/app/search-ui/search-input/search-input.component.ts

@@ -1,3 +1,4 @@
+import { DeeplinkService } from './../deeplink.service';
 import { Component, OnInit, EventEmitter, Output, ViewChild, ElementRef, AfterContentInit } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 import { filter, distinctUntilChanged, debounceTime, tap, map } from 'rxjs/operators';
@@ -15,7 +16,7 @@ export class SearchInputComponent implements OnInit, AfterContentInit {
 
   searchGroup: FormGroup;
 
-  constructor() {
+  constructor(private deeplink: DeeplinkService) {
     this.query = new EventEmitter();
     this.clear = new EventEmitter();
     this.searchGroup = new FormGroup({
@@ -26,22 +27,28 @@ export class SearchInputComponent implements OnInit, AfterContentInit {
   ngOnInit() {
     this.searchGroup.valueChanges
       .pipe(
-        // prettier-ignore
         map(event => event.query),
         // debounceTime(100),
         distinctUntilChanged()
       )
       .subscribe(value => {
         if (value.length === 0) {
           this.clear.emit();
+          this.deeplink.syncUrl({
+            q: null
+          });
         } else {
           this.query.emit(value);
+          this.deeplink.syncUrl({
+            q: value
+          });
         }
       });
   }
 
   ngAfterContentInit() {
     this.inputRef.nativeElement.focus();
+    this.deeplink.registerFormGroup(this.searchGroup);
   }
 
   clearValue() {

src/app/search-ui/search/search.component.html

@@ -10,7 +10,7 @@
 
     <div class="sorting-options">
       <mat-button-toggle-group (change)="onSortOptionChange($event)" #group="matButtonToggleGroup" *ngIf="applications.length > 0">
-        <mat-button-toggle [checked]="sortOption" value="applications">
+        <mat-button-toggle [checked]="sortOption" value="relevance_desc">
           Most Relevant
         </mat-button-toggle>
         <mat-button-toggle [checked]="sortOption" value="price_asc">

src/app/search-ui/search/search.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterContentInit } from '@angular/core';
 import { Observable, PartialObserver, Subject } from 'rxjs';
 import { filter, switchMap, share, switchMapTo } from 'rxjs/operators';
 import { MatSnackBar, MatButtonToggleChange } from '@angular/material';
@@ -34,7 +34,7 @@ export class SearchComponent implements OnInit {
   isInfiniteScrollRequested: boolean;
   lastResultCount = Infinity;
 
-  constructor(private search: AlgoliaService, public snackBar: MatSnackBar) {
+  constructor(private search: AlgoliaService, private snackBar: MatSnackBar) {
     this.applications = [];
     this.searchCategories = [];
     this.search.configure({
@@ -103,15 +103,15 @@ export class SearchComponent implements OnInit {
 
   onSortOptionChange(changeEvent: MatButtonToggleChange) {
     switch (changeEvent.value) {
-      case 'applications':
-        this.search.sortByRelevance();
-        break;
       case 'rating_desc':
         this.search.sortByRatingDesc();
         break;
       case 'price_asc':
         this.search.sortByPriceAsc();
         break;
+      case 'relevance_desc':
+      default:
+        this.search.sortByRelevance();
     }
   }
 }