Merge pull request fossasia#730 from simsausaurabh/image

Fixes fossasia#729: Fix slow loading and high frequency of api call

src/app/effects/api-user-search.effects.ts

@@ -14,7 +14,6 @@ import 'rxjs/add/operator/takeUntil';
 import { UserService } from '../services';
 import * as userApiAction from '../actions/user-api';
 import { Query } from '../models';
-
 /**
  * Effects offer a way to isolate and easily test side-effects within your
  * application. StateUpdates is an observable of the latest state and
@@ -28,7 +27,6 @@ import { Query } from '../models';
  * At the end, what’s really happening is `ngrx/effects` is an `action generator` that dispatches
  * a `new action` as a result of a different action.
  */
-
 @Injectable()
 export class ApiUserSearchEffects {
 
@@ -40,10 +38,7 @@ export class ApiUserSearchEffects {
 					.map((action: userApiAction.UserSearchAction) => action.payload)
 					.switchMap(query => {
 						const nextSearch$ = this.actions$.ofType(userApiAction.ActionTypes.USER_SEARCH).skip(1);
-
-						const follow_count = 10;
-
-						return this.apiUserService.fetchQuery(query.screen_name, follow_count)
+						return this.apiUserService.fetchQuery(query.screen_name)
 												.takeUntil(nextSearch$)
 												.map(response => new userApiAction.UserSearchCompleteSuccessAction(response))
 												.catch(() => of(new userApiAction.UserSearchCompleteFailAction('')));
@@ -53,5 +48,4 @@ export class ApiUserSearchEffects {
 		private actions$: Actions,
 		private apiUserService: UserService
 	) { }
-
 }

src/app/feed/feed.component.html

@@ -5,7 +5,6 @@
 				[doCloseSuggestBox$]="doCloseSuggestBox$()"
 				(searchEvent)="search($event)"
 				(relocateEvent)="relocateURL($event)"></feed-header>
-
 		<div *ngIf="(isSearching$ | async)">
 			<div class="searching">
 			<!-- Hook Up the Material Design Progress Bar. -->
@@ -15,7 +14,6 @@
 			</div>
 		</div>
 		<br>
-
 		<div *ngIf="!(isSearching$ | async)" class="feed-wrapper">
 			<div *ngIf="(areResultsAvailable$ | async)" class="wrapper feed-results">
 				<div *ngFor="let item of (apiResponseResults$ | async); let i = index ">

src/app/feed/user-info-box/user-info-box.component.html

@@ -5,18 +5,18 @@
 	<div *ngIf="(!isUserResponseLoading)" class="wrapper">
 		<div class="image-gallery">
 			<div class="profile-banner-image">
-				<img src="{{ apiResponseUser.profile_banner_url }}/600x200"/>
+				<img class="banner" src="{{ apiResponseUser.profile_banner_url }}"/>
 			</div>
 			<div class="profile-image">
 				<img src="{{ apiResponseUser.profile_image_url }}"/>
 			</div>
 		</div>
-		<div class="description">
+		<div>
 			<div class="heading">
 				<h2>{{ apiResponseUser.name }}</h2>
 				<span>@{{ apiResponseUser.screen_name }}</span>
 			</div>
-			<div class="desc">
+			<div class="desc" *ngIf="apiResponseUser.description">
 				<feed-linker
 					[text]="apiResponseUser.description"
 					[useAll]="true"></feed-linker>
@@ -45,15 +45,15 @@ <h2>{{ apiResponseUser.name }}</h2>
 					</li>
 					<li class="list-item">
 						<span class="item-label">Website:</span>
-						<span class="item-content" *ngIf="apiResponseUser.entities.url"><a href="{{ apiResponseUser.entities.url.urls[0].url }}">{{ apiResponseUser.entities.url.urls[0].expanded_url }}</a></span>
+						<span class="item-content" *ngIf="apiResponseUser.entities"><a *ngIf="apiResponseUser.entities.url" href="{{ apiResponseUser.entities.url.urls[0].url }}">{{ apiResponseUser.entities.url.urls[0].expanded_url }}</a></span>
 					</li>
 				</ul>
 			</div>
 		</div>
 		<div class="followers gallery" *ngIf="apiResponseUserFollowers.length > 0">
 			<h3>Followers</h3>
 			<ul class="gallery-container">
-				<li class="gallery-item"  *ngFor="let item of (sortedApiResponseUserFollowers.slice(0,12)); let i = index ">
+				<li class="gallery-item"  *ngFor="let item of (sortedApiResponseUserFollowers.slice(0,3)); let i = index ">
 					<a [routerLink]="['/search']" [queryParams]="{ query : 'from:' + item.screen_name }">
 						<div class="item-image">
 							<img src="{{ item.profile_image_url }}"/>
@@ -76,7 +76,7 @@ <h3>Followers</h3>
 		<div class="following gallery" *ngIf="apiResponseUserFollowing.length > 0">
 			<h3>Following</h3>
 			<ul class="gallery-container">
-				<li class="gallery-item"  *ngFor="let item of (sortedApiResponseUserFollowing.slice(0,12)); let i = index ">
+				<li class="gallery-item"  *ngFor="let item of (sortedApiResponseUserFollowing.slice(0,3)); let i = index ">
 					<a [routerLink]="['/search']" [queryParams]="{ query : 'from:' + item.screen_name }">
 						<div class="item-image">
 							<img src="{{ item.profile_image_url }}"/>
@@ -98,6 +98,3 @@ <h3>Following</h3>
 		</div>
 	</div>
 </div>
-
-
-

src/app/feed/user-info-box/user-info-box.component.scss

@@ -43,7 +43,9 @@
 		}
 	}
 
-.description {
+.banner {
+	height: 200px;
+	width: 600px;
 }
 
 	.heading {

src/app/services/search.service.spec.ts

@@ -60,14 +60,11 @@ describe('Service: Search', () => {
 									`&startRecord=${searchServiceConfig.startRecord}` +
 									`&fields=created_at,screen_name,mentions,hashtags&limit=10`);
 		});
-
 		service
 			.fetchQuery(query, searchServiceConfig)
 			.subscribe((res) => {
 				expect(res).toEqual(result);
 				done();
-			});
+		});
 	});
-
 });
-

src/app/services/suggest.service.spec.ts

@@ -50,6 +50,7 @@ describe('Service: Suggest', () => {
 			expect(connection.request.url).toEqual(
 				`https://api.loklak.org/api/suggest.json` +
 									`?q=${query}` +
+									'&count=4' +
 									`&callback=JSONP_CALLBACK` +
 									`&minified=true` +
 									`&order=desc` +

src/app/services/suggest.service.ts

@@ -14,7 +14,7 @@ export class SuggestService {
 	private static minified_results = true;
 	private static order = 'desc';
 	private static orderby = 'query_count';
-
+	private static count = '4';
 
 	constructor(
 		private jsonp: Jsonp
@@ -24,6 +24,7 @@ export class SuggestService {
 	public fetchQuery(query: string): Observable<SuggestResponse> {
 		const searchParams = new URLSearchParams();
 		searchParams.set('q', query);
+		searchParams.set('count', SuggestService.count);
 		searchParams.set('callback', 'JSONP_CALLBACK');
 		searchParams.set('minified', SuggestService.minified_results.toString());
 		searchParams.set('order', SuggestService.order);

src/app/services/user.service.spec.ts

@@ -35,7 +35,7 @@ describe('Service: UserSearch', () => {
 
 	const result = MockApiResponseResult;
 	const user = 'Fossasia';
-	const follow_count = 10;
+	const follow_count = 4;
 
 
 	it('should create an instance of user search service',
@@ -60,7 +60,7 @@ describe('Service: UserSearch', () => {
 		});
 
 		service
-			.fetchQuery(user, follow_count)
+			.fetchQuery(user)
 			.subscribe((res) => {
 				expect(res).toEqual(result);
 				done();

src/app/services/user.service.ts

@@ -12,25 +12,26 @@ import { UserResponse } from '../models/api-user-response';
 export class UserService {
 	private static readonly apiUrl: URL = new URL('https://api.loklak.org/api/user.json');
 	private static minified_results = true;
+	private static followers = '4';
+	private static following = '4';
 
 	constructor(
 		private jsonp: Jsonp
 	) { }
 
 	// TODO: make the searchParams as configureable model rather than this approach.
-	public fetchQuery(user: string, follow_count: number): Observable<UserResponse> {
+	public fetchQuery(user: string): Observable<UserResponse> {
 		const screen_name = user.charAt(0).toUpperCase() + user.slice(1);
 		const searchParams = new URLSearchParams();
 		searchParams.set('screen_name', screen_name);
-		searchParams.set('followers', follow_count.toString());
-		searchParams.set('following', follow_count.toString());
+		searchParams.set('followers', UserService.followers);
+		searchParams.set('following', UserService.following);
 		searchParams.set('callback', 'JSONP_CALLBACK');
 		searchParams.set('minified', UserService.minified_results.toString());
 		return this.jsonp.get(UserService.apiUrl.toString(), {search : searchParams})
 								.map(this.extractData)
 								.retry(2)
 								.catch(this.handleError);
-
 	}
 
 	private extractData(res: Response): UserResponse {