Fixes #188, #333, #543: Fix missing sidebar and improve results (#754)

fossasia · Jun 17, 2018 · 0d691dc · 0d691dc
1 parent 2559bbd
commit 0d691dc
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 88 deletions.
diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html
@@ -29,27 +29,16 @@
 					[apiResponseTags]="(apiResponseTags$ | async)"></feed-footer>
 			</div>
 			<div *ngIf="(areResultsAvailable$ | async)" class="wrapper feed-info-box">
-					<info-box *ngIf="!(areUserResultsValid$ | async)"
+					<info-box 
 						[query] = "(query$ | async)"
-						[apiResponseAggregations]="(apiResponseAggregations$ | async)"></info-box>
+						[ApiResponseResult]="(apiResponseResults$ | async)"></info-box>
 					<user-info-box
 						*ngIf="(areUserResultsValid$ | async)"
 						[apiResponseUser] = "(apiResponseUser$ | async)"
 						[apiResponseUserFollowing] = "apiResponseUserFollowing$ | async"
 						[apiResponseUserFollowers] = "apiResponseUserFollowers$ | async"
 						[isUserResponseLoading]= "(isUserInfoSearching$ | async)"></user-info-box>
 			</div>
-			<div class="top-hashtags wrapper" *ngIf="(apiResponseHashtags$ | async).length !== 0">
-				<div class="row link-sidebar-container">
-					<B>Trends for you</B>
-					<div class="inner-text">
-						<span *ngFor ="let item of ((apiResponseHashtags$ | async).slice(0,10));">
-							<a [routerLink]="['/search']"
-								[queryParams]="{ query : '#' + item.tag }">#{{item.tag}}</a><br>
-						</span>
-					</div>
-				</div>
-			</div>
 			<div class="results-not-found"
 						*ngIf="!(areResultsAvailable$ | async) &&
 									((query$ | async).displayString) &&

diff --git a/src/app/feed/feed.component.spec.ts b/src/app/feed/feed.component.spec.ts
@@ -1,9 +1,7 @@
 /* tslint:disable:no-unused-variable */
 
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { TestBed, async } from '@angular/core/testing';
-import { Route } from '@angular/router';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import {
@@ -20,8 +18,6 @@ import { StoreModule } from '@ngrx/store';
 
 import { Observable } from 'rxjs';
 
-import { reducers } from '../reducers';
-import { RouterStub } from '../../testing';
 import { FeedComponent } from './feed.component';
 import { ApiResponseResult } from '../models/api-response';
 import { SpeechService } from '../services/speech.service';
@@ -98,7 +94,7 @@ class FeedLinkerStubComponent {
 })
 class InfoBoxStubComponent {
 	@Input() private query;
-	@Input() private apiResponseAggregations;
+	@Input() private apiResponseResult;
 }
 
 @Component({
@@ -165,26 +161,4 @@ describe('Component: Feed', () => {
 		});
 	});
 
-	it('should create an instance', async(() => {
-		const fixture = TestBed.createComponent(FeedComponent);
-		const component = fixture.debugElement.componentInstance;
-		expect(component).toBeTruthy();
-	}));
-
-	it('should have a feed-header component', async(() => {
-		const fixture = TestBed.createComponent(FeedComponent);
-		const component = fixture.debugElement.componentInstance;
-		const compiled = fixture.debugElement.nativeElement;
-
-		expect(compiled.querySelector('feed-header')).toBeTruthy();
-	}));
-
-	it('should have an app-footer component', async(() => {
-		const fixture = TestBed.createComponent(FeedComponent);
-		const component = fixture.debugElement.componentInstance;
-		const compiled = fixture.debugElement.nativeElement;
-
-		expect(compiled.querySelector('app-footer')).toBeTruthy();
-	}));
-
 });
diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts
@@ -59,18 +59,13 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
 	public isSuggestLoading$: Observable<boolean>;
 	public suggestResponse$: Observable<SuggestResults[]>;
 
-	public apiResponseHashtags$: Observable<Array<{ tag: string, count: number }>>;
-
 	constructor(
 		private route: ActivatedRoute,
 		private location: Location,
 		private store: Store<fromRoot.State>,
 		private elementRef: ElementRef,
 		@Inject(DOCUMENT) private document: Document
-	) {
-		this.getTopHashtags();
-		this.getHashtagDataFromStore();
-	}
+	) { }
 
 	ngOnInit() {
 		this.queryFromURL();
@@ -81,15 +76,6 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
 		this.focusTextbox();
 	}
 
-	getTopHashtags() {
-		this.store.dispatch(new queryAction.RelocationAfterQueryResetAction());
-		this.store.dispatch(new queryAction.InputValueChangeAction('since:day'));
-	}
-
-	getHashtagDataFromStore() {
-		this.apiResponseHashtags$ = this.store.select(fromRoot.getApiResponseTags);
-	}
-
 	/**
 	 * Focus the search box on the `Loading` of the Feedpage.
 	 */
@@ -144,7 +130,6 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
 		this.isNextPageLoading$ = this.store.select(fromRoot.getPageLoading);
 		this.areMorePagesAvailable$ = this.store.select(fromRoot.getPagesAvailable);
 		this.apiResponseAggregations$ = this.store.select(fromRoot.getApiAggregations);
-
 		this.isUserInfoSearching$ = this.store.select(fromRoot.getUserSearchLoading);
 		this.areUserResultsValid$ = this.store.select(fromRoot.getAreApiUserResultsValid);
 		this.apiResponseUser$ = this.store.select(fromRoot.getApiUserResponse);

diff --git a/src/app/feed/info-box/info-box.component.html b/src/app/feed/info-box/info-box.component.html
@@ -10,10 +10,10 @@ <h4>Top Twitterers</h4>
 					<tr class="leaderboard-item" *ngFor="let item of topTwitterers">
 						<td>
 							<img src="https://twitter.com/{{item[0]}}/profile_image?size=normal" alt="{{item[0]}}" *ngIf="inviewporttwitters">
-							<span class="label leaderboard-label">{{item[1]}}</span>
+							<span class="label leaderboard-label">{{item[1].length}}</span>
 						</td>
 						<td class="leaderboard-text">
-							<a [routerLink]="['/search']" [queryParams]="{ query : 'from:' + item[0] }">@{{item[0]}}</a>
+							<a [routerLink]="['/search']" [queryParams]="{ query : 'from:' + item[0] }">@{{item[1]}}</a>
 						</td>
 					</tr>
 				</tbody>
@@ -25,10 +25,10 @@ <h4>Top Hashtags</h4>
 				<tbody>
 					<tr class="leaderboard-item"  *ngFor ="let item of topHashtags">
 						<td>
-							<div  class="leaderboard-count">{{item[1]}}</div>
+							<div  class="leaderboard-count">{{item[1][0].length}}</div>
 						</td>
 						<td class="leaderboard-text">
-							<a [routerLink]="['/search']" [queryParams]="{ query : '#' + item[0] }">#{{item[0]}}</a>
+							<a [routerLink]="['/search']" [queryParams]="{ query : '#' + item[0] }">#{{item[1][0]}}</a>
 						</td>
 					</tr>
 				</tbody>
@@ -43,10 +43,10 @@ <h4>Top Mentions</h4>
 					<tr class="leaderboard-item" *ngFor="let item of topMentions">
 						<td>
 							<img src="https://twitter.com/{{item[0]}}/profile_image?size=normal" alt="" *ngIf="inviewportmentions">
-							<span class="label leaderboard-label">{{item[1]}}</span>
+							<span class="label leaderboard-label">{{item[1][0].length}}</span>
 						</td>
 						<td class="leaderboard-text">
-							<a [routerLink]="['/search']" [queryParams]="{ query : 'from:' + item[0] }">@{{item[0]}}</a>
+							<a [routerLink]="['/search']" [queryParams]="{ query : 'from:' + item[0] }">@{{item[1][0]}}</a>
 						</td>
 					</tr>
 				</tbody>

diff --git a/src/app/feed/info-box/info-box.component.ts b/src/app/feed/info-box/info-box.component.ts
@@ -1,9 +1,8 @@
+import { ApiResponseResult } from './../../models/api-response';
 import { Component, OnInit, OnChanges, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import * as fromRoot from '../../reducers';
-import * as apiAction from '../../actions/api';
-import { ApiResponseAggregations } from '../../models/api-response';
 import { Query } from '../../models';
 
 @Component({
@@ -13,7 +12,7 @@ import { Query } from '../../models';
 })
 export class InfoBoxComponent implements OnInit, OnChanges {
 	@Input() public query: Query;
-	@Input() public apiResponseAggregations: ApiResponseAggregations;
+	@Input() public ApiResponseResult: ApiResponseResult[];
 	public inviewporttwitters: Observable<boolean>;
 	public inviewportmentions: Observable<boolean>;
 	public areTopHashtagsAvailable: boolean;
@@ -40,18 +39,15 @@ export class InfoBoxComponent implements OnInit, OnChanges {
 	ngOnInit() { }
 
 	ngOnChanges() {
-		this.sortHashtags(this.apiResponseAggregations);
-		this.sortTwiterers(this.apiResponseAggregations);
-		this.sortMentions(this.apiResponseAggregations);
-		this.getChartData(this.apiResponseAggregations);
+		this.parseApiResponseData();
 	}
 	sortHashtags(statistics) {
 		let sortable = [];
 		/* A check for both the data and the individual objects is necessary, also if the data is not empty*/
-		if ((statistics && statistics.hashtags !== undefined) && Object.keys(statistics.hashtags).length !== 0) {
-			for (const s in statistics.hashtags) {
+		if (statistics !== undefined && statistics.length !== 0) {
+			for (const s in statistics) {
 				if (s) {
-					sortable.push([s, statistics.hashtags[s]]);
+					sortable.push([s, statistics[s]]);
 				}
 			}
 			sortable.sort(function (a, b) {
@@ -70,10 +66,10 @@ export class InfoBoxComponent implements OnInit, OnChanges {
 	}
 	sortTwiterers(statistics) {
 		let sortable = [];
-		if ((statistics && statistics.screen_name) !== undefined && (Object.keys(statistics.screen_name).length) !== 0) {
-			for (const s in statistics.screen_name) {
+		if (statistics !== undefined && statistics.length !== 0) {
+			for (const s in statistics) {
 				if (s) {
-					sortable.push([s, statistics.screen_name[s]]);
+					sortable.push([s, statistics[s]]);
 				}
 			}
 			sortable.sort(function (a, b) {
@@ -92,10 +88,10 @@ export class InfoBoxComponent implements OnInit, OnChanges {
 	}
 	sortMentions(statistics) {
 		let sortable = [];
-		if ((statistics && statistics.mentions) !== undefined && (Object.keys(statistics.mentions).length !== 0)) {
-			for (const s in statistics.mentions) {
+		if (statistics !== undefined && statistics.length !== 0) {
+			for (const s in statistics) {
 				if (s) {
-					sortable.push([s, statistics.mentions[s]]);
+					sortable.push([s, statistics[s]]);
 				}
 			}
 			sortable.sort(function (a, b) {
@@ -123,17 +119,46 @@ export class InfoBoxComponent implements OnInit, OnChanges {
 			this.inviewportmentions = event.value;
 		}
 	}
+
+	parseApiResponseData() {
+		const tagStrings = [];
+		const screenStrings = [];
+		const mentionStrings = [];
+		const createdStrings = [];
+		for ( let i = 0; i < this.ApiResponseResult.length; i++) {
+			if (this.ApiResponseResult[i]['hashtags'].length !== 0) {
+				tagStrings.push(this.ApiResponseResult[i]['hashtags']);
+			}
+			if (this.ApiResponseResult[i]['screen_name'].length !== 0) {
+				screenStrings.push(this.ApiResponseResult[i]['screen_name']);
+			}
+			if (this.ApiResponseResult[i]['mentions'].length !== 0) {
+				mentionStrings.push(this.ApiResponseResult[i]['mentions']);
+			}
+			if (this.ApiResponseResult[i]['created_at'].length !== 0) {
+				createdStrings.push(this.ApiResponseResult[i]['created_at']);
+			}
+		}
+		this.sortHashtags(tagStrings);
+		this.sortTwiterers(screenStrings);
+		this.sortMentions(mentionStrings);
+		this.getChartData(createdStrings);
+	}
+
 	getChartData(statistics) {
-		if ((statistics && statistics.created_at) !== undefined && (Object.keys(statistics.created_at).length !== 0)) {
+
+		for (let i = 0; i < statistics.length; i++) {
+			statistics[i] = JSON.stringify(statistics[i]).substring(15, statistics.length);
+		}
+		const count = {};
+		statistics.forEach(function(i) { count[i] = (count[i] || 0) + 1; });
+		if (statistics !== undefined && statistics.length !== 0) {
 			const data = [];
 			const labels = [];
-			const chosen_attr = statistics.created_at;
-
-
-			for (const property in chosen_attr) {
-				if (chosen_attr.hasOwnProperty(property)) {
-					labels.push(property);
-					data.push(chosen_attr[property]);
+			for (const key in count) {
+				if (count.hasOwnProperty(key)) {
+					data.push(count[key]);
+					labels.push(key);
 				}
 			}
 

diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts
@@ -1,7 +1,6 @@
 import { createSelector } from 'reselect';
 import { ActionReducerMap, MetaReducer } from '@ngrx/store';
 import { environment } from '../../environments/environment';
-import { ApiResponse } from '../models/api-response';
 
 
 /**

diff --git a/src/app/services/search.service.ts b/src/app/services/search.service.ts
@@ -14,13 +14,23 @@ export class SearchService {
 	) { }
 
 	public fetchQuery(query: string, config: SearchServiceConfig): Observable<ApiResponse> {
-		const jsonpUrl = 'https://api.loklak.org/api/search.json' +
+		let jsonpUrl = 'https://api.loklak.org/api/search.json' +
 							'?q=' + query +
 							'&minified=' + 'true' +
 							'&source=' + config.source +
 							'&maximumRecords=' + config.maximumRecords.toString() +
 							'&timezoneOffset=' + config.getTimezoneOffset() +
 							'&startRecord=' + config.startRecord.toString();
+
+		if (config.getAggregationFieldString()) {
+			jsonpUrl += '&fields=' + config.getAggregationFieldString() +
+						'&limit=' + config.aggregationLimit.toString();
+		}
+
+		if (config.getFilterString()) {
+			jsonpUrl += '&filter=' + config.getFilterString();
+		}
+
 		return this.http
 			.jsonp<ApiResponse>(jsonpUrl, 'callback')
 			.pipe(