diff --git a/src/app/search-ui/deeplink.service.ts b/src/app/search-ui/deeplink.service.ts new file mode 100644 index 0000000..5ee052f --- /dev/null +++ b/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 + }); + } +} diff --git a/src/app/search-ui/search-input/search-input.component.ts b/src/app/search-ui/search-input/search-input.component.ts index 1c41ad4..ac6e4ca 100644 --- a/src/app/search-ui/search-input/search-input.component.ts +++ b/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,7 +27,6 @@ export class SearchInputComponent implements OnInit, AfterContentInit { ngOnInit() { this.searchGroup.valueChanges .pipe( - // prettier-ignore map(event => event.query), // debounceTime(100), distinctUntilChanged() @@ -34,14 +34,21 @@ export class SearchInputComponent implements OnInit, AfterContentInit { .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() { diff --git a/src/app/search-ui/search/search.component.html b/src/app/search-ui/search/search.component.html index b21ad9a..729cab0 100644 --- a/src/app/search-ui/search/search.component.html +++ b/src/app/search-ui/search/search.component.html @@ -10,7 +10,7 @@
- + Most Relevant diff --git a/src/app/search-ui/search/search.component.ts b/src/app/search-ui/search/search.component.ts index 9f1ce75..9e1ea27 100644 --- a/src/app/search-ui/search/search.component.ts +++ b/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(); } } }