Fixes fossasia#46: Implement news sub tab with results from news orga…

…nizations

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { EffectsModule } from '@ngrx/effects';
 
 import { JsonpModule } from '@angular/http';
 import { SpeechService } from './services/speech.service';
+import { ShareNewsStatusService } from './services/share-news-status.service';
 
 import { reducer } from './reducers';
 import {
@@ -126,7 +127,8 @@ import { SpeechComponent } from './speech/speech.component';
 		SearchService,
 		UserService,
 		SuggestService,
-		SpeechService
+		SpeechService,
+		ShareNewsStatusService
 	],
 	bootstrap: [AppComponent]
 })

src/app/feed/feed-advanced-search/feed-advanced-search.component.html

@@ -12,6 +12,10 @@
 			(click)="getFilterResults($event.currentTarget.value)">
 			Videos
 		</button>
+		<button [class.selected]="selectedTab === 'news'" class="tab" value="news"
+			(click)="getFilterResults($event.currentTarget.value)">
+			News
+		</button>
 	</div>
 
 	<div class="tools">

src/app/feed/feed-advanced-search/feed-advanced-search.component.spec.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/material';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { reducer } from '../../reducers';
+import { ShareNewsStatusService } from '../../services/share-news-status.service';
 
 describe('Component: FeedAdvancedSearchComponent', () => {
 	beforeEach(() => {
@@ -26,6 +27,9 @@ describe('Component: FeedAdvancedSearchComponent', () => {
 			],
 			declarations: [
 				FeedAdvancedSearchComponent
+			],
+			providers: [
+				ShareNewsStatusService
 			]
 		});
 	});

src/app/feed/feed-advanced-search/feed-advanced-search.component.ts

@@ -9,13 +9,14 @@ import {
 	ElementRef
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-
+import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import * as fromRoot from '../../reducers';
 import * as queryAction from '../../actions/query';
 
 import { Query, FilterList, TimeBound } from '../../models';
 import { countrycodearray } from '../../shared/countrycode/countrycode';
+import { ShareNewsStatusService } from '../../services/share-news-status.service';
 
 @Component({
 	selector: 'feed-advanced-search',
@@ -49,8 +50,10 @@ export class FeedAdvancedSearchComponent implements OnInit {
 	private location = null;
 
 	constructor(
+		private router: Router,
 		private store: Store<fromRoot.State>,
-		private elementRef: ElementRef
+		private elementRef: ElementRef,
+		private sharedNewsStatus: ShareNewsStatusService
 	) { }
 
 	ngOnInit() {
@@ -72,27 +75,35 @@ export class FeedAdvancedSearchComponent implements OnInit {
 
 	public getFilterResults(value: string) {
 		if (value === 'all') {
+			this.sharedNewsStatus.changeStatus(false);
 			this.selectedTab = 'all';
 			this.filterList = {
 				image: false,
 				video: false
 			};
 		}
 		else if (value === 'image') {
+			this.sharedNewsStatus.changeStatus(false);
 			this.selectedTab = 'image';
 			this.filterList = {
 				image: true,
 				video: false
 			};
 		}
 		else if (value === 'video') {
+			this.sharedNewsStatus.changeStatus(false);
 			this.selectedTab = 'video';
 			this.filterList = {
 				image: false,
 				video: true
 			};
 		}
+		else if (value === 'news') {
+			this.selectedTab = 'news';
+			this.sharedNewsStatus.changeStatus(true);
+		}
 		else {
+			this.sharedNewsStatus.changeStatus(false);
 			this.selectedTab = 'all';
 			this.filterList = {
 				image: false,

src/app/feed/feed-header/feed-header.component.spec.ts

@@ -14,6 +14,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { reducer } from '../../reducers';
 import { SpeechService } from '../../services/speech.service';
 import { SpeechComponent } from '../../speech/speech.component';
+import { ShareNewsStatusService } from '../../services/share-news-status.service';
 
 @Component({
 	selector: 'service-box',
@@ -40,7 +41,10 @@ describe('Component: FeedHeader', () => {
 				ServiceBoxStubComponent,
 				SpeechComponent
 			],
-			providers: [ SpeechService ]
+			providers: [
+				SpeechService,
+				ShareNewsStatusService
+			]
 		});
 	});
 

src/app/feed/feed-news/feed-news.component.html

@@ -0,0 +1,7 @@
+<div class="feed-wrapper">
+	<div class="wrapper feed-results">
+	  <div *ngFor="let item of (apiResponseResults$ | async); let i = index ">
+		<app-feed-card [feedItem]="item" [feedIndex]="i"></app-feed-card>
+	  </div>
+	</div>
+</div>

src/app/feed/feed-news/feed-news.component.scss

@@ -0,0 +1 @@
+@import "../feed.component.scss";

src/app/feed/feed-news/feed-news.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedNewsComponent } from './feed-news.component';
+
+describe('FeedNewsComponent', () => {
+	let component: FeedNewsComponent;
+	let fixture: ComponentFixture<FeedNewsComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ FeedNewsComponent ]
+	})
+	.compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(FeedNewsComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/feed/feed-news/feed-news.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+import { Store } from '@ngrx/store';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import * as fromRoot from '../../reducers';
+import { Query, parseStringToQuery } from '../../models/query';
+import * as queryAction from '../../actions/query';
+import { ApiResponseResult } from '../../models/api-response';
+
+@Component({
+	selector: 'app-feed-news',
+	templateUrl: './feed-news.component.html',
+	styleUrls: ['./feed-news.component.scss']
+})
+export class FeedNewsComponent implements OnInit, OnDestroy {
+
+	private __subscriptions__: Subscription[] = new Array<Subscription>();
+	public query$: Observable<Query>;
+	public isSearching$: Observable<boolean>;
+	public areResultsAvailable$: Observable<boolean>;
+	public apiResponseResults$: Observable<ApiResponseResult[]>;
+	searchQuery: Query = {
+		displayString: 'from:CNN',
+		queryString: 'from:CNN',
+		routerString: 'from:CNN',
+		filter: { video: false, image: false },
+		location: null,
+		timeBound: { since: null, until: null },
+		from: true
+	}
+	constructor(
+		private route: ActivatedRoute,
+		private store: Store<fromRoot.State>,
+	) { }
+
+	ngOnInit() {
+		this.queryFromURL();
+		this.getDataFromStore();
+	}
+
+	private queryFromURL(): void {
+		this.__subscriptions__.push(
+			this.route.queryParams
+				.subscribe((params: Params) => {
+					const queryParam = params['query'] || '';
+					const query: Query = parseStringToQuery(queryParam);
+					this.store.dispatch(new queryAction.RelocationAfterQuerySetAction());
+					this.store.dispatch(new queryAction.QueryChangeAction(this.searchQuery));
+				})
+		);
+	}
+
+	private getDataFromStore(): void {
+		this.query$ = this.store.select(fromRoot.getQuery);
+		this.query$.subscribe(value => console.log(value.queryString));
+		this.isSearching$ = this.store.select(fromRoot.getSearchLoading);
+		this.areResultsAvailable$ = this.store.select(fromRoot.getAreResultsAvailable);
+		this.apiResponseResults$ = this.store.select(fromRoot.getApiResponseEntities);
+	}
+
+	ngOnDestroy() {
+		this.__subscriptions__.forEach(subscription => subscription.unsubscribe());
+	}
+}

src/app/feed/feed.component.html

@@ -5,7 +5,7 @@
 				[doCloseSuggestBox$]="doCloseSuggestBox$()"
 				(searchEvent)="search($event)"
 				(relocateEvent)="relocateURL($event)"></feed-header>
-		<div *ngIf="(isSearching$ | async)">
+		<div *ngIf="(isSearching$ | async) && !shareNewsStatus.getSharedNewsStatus()">
 			<div class="searching">
 			<!-- Hook Up the Material Design Progress Bar. -->
 			</div>
@@ -14,7 +14,7 @@
 			</div>
 		</div>
 		<br>
-		<div *ngIf="!(isSearching$ | async)" class="feed-wrapper">
+		<div *ngIf="!(isSearching$ | async) && !shareNewsStatus.getSharedNewsStatus()" class="feed-wrapper">
 			<div *ngIf="(areResultsAvailable$ | async)" class="wrapper feed-results">
 				<div *ngFor="let item of (apiResponseResults$ | async); let i = index ">
 					<feed-card [feedItem]="item" [feedIndex]="i"></feed-card>
@@ -57,6 +57,9 @@
 				<feed-not-found [query]="(query$ | async)"></feed-not-found>
 			</div>
 		</div>
+		<div *ngIf="shareNewsStatus.getSharedNewsStatus()" class="feed-wrapper">
+			<feed-news></feed-news>
+		</div>
 </div>
 
 <!-- Peek the footer when Results are not found -->

src/app/feed/feed.component.spec.ts

@@ -27,7 +27,6 @@ import { ApiResponseResult } from '../models/api-response';
 import { SpeechService } from '../services/speech.service';
 import { SpeechComponent } from '../speech/speech.component';
 
-
 @Component({
 	selector: 'feed-header',
 	template: ''
@@ -130,6 +129,12 @@ class FeedLightboxStubComponent {
 	@Output() private hideLightBox: EventEmitter<any>;
 }
 
+@Component({
+	selector: 'feed-news',
+	template: ''
+})
+class FeedNewsComponent { }
+
 describe('Component: Feed', () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -159,9 +164,12 @@ describe('Component: Feed', () => {
 				UserInfoBoxStubComponent,
 				FeedUserCardStubComponent,
 				FeedLightboxStubComponent,
-				SpeechComponent
+				SpeechComponent,
+				FeedNewsComponent
 			],
-			providers: [ SpeechService ]
+			providers: [
+				SpeechService
+			]
 		});
 	});
 

src/app/feed/feed.component.ts

@@ -32,6 +32,7 @@ import {
 import { SuggestMetadata, SuggestResults, SuggestResponse } from '../models/api-suggest';
 import { Query, parseStringToQuery } from '../models/query';
 import { UserApiResponse } from '../models/api-user-response';
+import { ShareNewsStatusService } from '../services/share-news-status.service';
 
 @Component({
 	selector: 'app-feed',
@@ -69,6 +70,7 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
 		private store: Store<fromRoot.State>,
 		private elementRef: ElementRef,
 		private titleService: Title,
+		private shareNewsStatus: ShareNewsStatusService,
 		@Inject(DOCUMENT) private document: Document
 	) {
 		this.getTopHashtags();

src/app/feed/feed.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SpeechService } from '../services/speech.service';
+import { ShareNewsStatusService } from '../services/share-news-status.service';
 
 import {
 	MatAutocompleteModule,
@@ -30,6 +31,7 @@ import { FeedLightboxComponent } from './feed-lightbox/feed-lightbox.component';
 import { FeedUserCardComponent } from './feed-user-card/feed-user-card.component';
 import { InViewportDirective } from '../shared/in-viewport.directive';
 import { FeedAdvancedSearchComponent } from './feed-advanced-search/feed-advanced-search.component';
+import { FeedNewsComponent } from './feed-news/feed-news.component';
 
 
 @NgModule({
@@ -103,10 +105,12 @@ import { FeedAdvancedSearchComponent } from './feed-advanced-search/feed-advance
 		UserInfoBoxComponent,
 		FeedLightboxComponent,
 		FeedUserCardComponent,
-		FeedAdvancedSearchComponent
+		FeedAdvancedSearchComponent,
+		FeedNewsComponent
 	],
 	providers: [
-		SpeechService
+		SpeechService,
+		ShareNewsStatusService
 	]
 })
 export class FeedModule { }

src/app/services/share-news-status.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ShareNewsStatusService } from './share-news-status.service';
+
+describe('ShareNewsStatusService', () => {
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+		providers: [ShareNewsStatusService]
+		});
+	});
+
+	it('should be created', inject([ShareNewsStatusService], (service: ShareNewsStatusService) => {
+		expect(service).toBeTruthy();
+	}));
+});

src/app/services/share-news-status.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ShareNewsStatusService {
+
+	public sharedNewsStatus = false;
+
+	constructor() { }
+
+	changeStatus(currentStatus: boolean) {
+		this.sharedNewsStatus = currentStatus;
+	}
+
+	getSharedNewsStatus() {
+		return this.sharedNewsStatus;
+	}
+}