For a new comer in Loklak, it’s not really easy to understand the complete codebase to just get results for a query without explicitly using navigation route i.e. ‘/search’. In order to help newcomers to easily understand a simple way to get results for a query in the codebase, I am writing this blog post.
Setting up a query
A sample searchQuery will be created of type Query. And following discussion will provide a way to get the results for a sample query – ‘from:Fossasia’ (Last 30 days tweets from FOSSASIA).
searchQuery: Query = { displayString: ‘from:FOSSASIA, queryString: ‘from:FOSSASIA’, routerString: ‘from:FOSSASIA’, filter: { video: false, image: false }, location: null, timeBound: { since: null, until: null }, from: true }
Process discussed here can be used to get results in any class file within Loklak Search.
Using necessary imports
First step would be to add all necessary imports.
import { OnInit } from ‘@angular/core’; import { Store } from ‘@ngrx/store’; import { Observable } from ‘rxjs/Observable’; import * as fromRoot from ‘../../reducers’; import { Query } from ‘../../models/query’; import * as searchAction from ‘../../actions/api’; import { ApiResponseResult } from ‘../../models/api-response’;
Note: No need to import OnInit, if the class already implements it (OnInit is one of the Angular’s Lifecycle Hooks which controls the changes when the component containing it gets loaded initially).
The Query is used to define the type of searchQuery variable created above. And ApiResponseResult is the type of result which will be obtained on searching the searchQuery.
Declaring response variables and store object
Next step would be to declare the variables with the type of response and create store object of type Store with the current State of the application.
public isSearching$: Observable<boolean>; public apiResponseResults$: Observable<ApiResponseResult[]>; constructor( private store: Store<fromRoot.State> ) { }
isSearching$ holds an Observable which can be subscribed to get a boolean value which states the current status of searching of query. apiResponseResults$ holds the actual response of query.
Dispatching a SearchAction
The most crucial part comes here to dispatch a SearchAction with the created searchQuery as payload. A new method would be created with void as return type to dispatch the SearchAction.
private queryFromURL(): void { this.store.dispatch( new searchAction.SearchAction(this.searchQuery) ); }
Selecting and storing results from store
A new method would be created to store the current searching status along with the response of input query in isSearching$ and apiResponseResults$ respectively. Now the selector for the reducer function corresponding to the search and api response entities would be called.
private getDataFromStore(): void { this.isSearching$ = this.store.select(fromRoot.getSearchLoading); this.apiResponseResults$ = this.store.select( fromRoot.getApiResponseEntities ); }
Dispatching and Selecting on view Init
create ngOnInit() method, If you have not already done and call the respective dispatching and select method inside it respectively.
ngOnInit() { this.queryFromURL(); this.getDataFromStore(); }
How should one test the results?
Call these lines inside any method and look for the results on browser console window.
console.log(this.isSearching$); console.log(this.apiResponseResults$);
Resources
- Loklak Search: Ngrx pattern
- Ngrx platform: Official Docs