started component data sharing

client/package-lock.json

         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

client/package.json

   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json --port 8081",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
     "core-js": "^2.5.4",
+    "moment": "^2.22.2",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },

client/proxy.conf.json

+{
+	"/api/*": {
+		"target": "http://localhost:8080",
+		"pathRewrite": {"^/api" : ""}
+	}
+}

client/src/app/app.component.html

-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<router-outlet></router-outlet>

client/src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule, Routes } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { NewsComponent } from './news/news.component';
+import { ArticleComponent } from './news/article/article.component';
+import { HomeComponent } from './home/home.component';
+import { StocksComponent } from './stocks/stocks.component';
+import { SearchComponent } from './search/search.component';
+
+const appRoutes: Routes = [
+	{ path: 'home', component: HomeComponent }
+];
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	declarations: [
+		AppComponent,
+		NewsComponent,
+		HomeComponent,
+		StocksComponent,
+		ArticleComponent,
+		SearchComponent
+	],
+	imports: [
+		BrowserModule,
+		HttpClientModule,
+		FormsModule,
+		RouterModule.forRoot( appRoutes )
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
 export class AppModule { }

client/src/app/home/home.component.html

+<p>
+  home works!
+</p>
+
+<app-search></app-search>
+<app-news (searchEvent)="app-search.test()"></app-news>
+<app-stocks></app-stocks>

client/src/app/home/home.component.spec.ts

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

client/src/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

client/src/app/news.service.spec.ts

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

client/src/app/news.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+	providedIn: 'root'
+})
+
+export class NewsService {
+	constructor(
+		private http: HttpClient,
+	) { }
+
+	getNews(query: string) {
+		return this.http.get(`/api/news?query=${query}`);
+	}
+}

client/src/app/news/article/article.component.html

+<table class="table">
+	<thead>
+		<tr>
+			<th>Source Name</th>
+			<th>Title</th>
+			<th>Published</th>
+			<th>Img</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr *ngFor="let article of articles">
+			<td>{{ article.sourceName }}</td>
+			<td><a [href]="article.url">{{ article.title }}</a></td>
+			<td>{{ computeDate(article.publishedAt) }}</td>
+			<td>
+				<figure class="image is-128x128">
+					<img [src]="article.urlToImage" />
+				</figure>
+			</td>
+		</tr>
+	</tbody>
+</table>

client/src/app/news/article/article.component.spec.ts

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

client/src/app/news/article/article.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import * as moment from 'moment';
+
+@Component({
+	selector: 'app-article',
+	templateUrl: './article.component.html',
+	styleUrls: ['./article.component.css']
+})
+
+export class ArticleComponent implements OnInit {
+	@Input()articles;
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+	computeDate(publishedAt) {
+		return moment(publishedAt).format('DD MMMM YYYY');
+	}
+}

client/src/app/news/news.component.html

+<p>news works!</p>
+<app-article *ngIf="news" [articles]="news"></app-article>

client/src/app/news/news.component.spec.ts

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

client/src/app/news/news.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { NewsService } from '../news.service';
+
+@Component({
+	selector: 'app-news',
+	templateUrl: './news.component.html',
+	styleUrls: ['./news.component.css']
+})
+
+export class NewsComponent implements OnInit {
+	query: string;
+	news: any;
+
+	constructor(private newsService: NewsService) { }
+
+	ngOnInit() {
+	}
+
+	getNews() {
+		console.log(this.news);
+		this.newsService.getNews(this.query)
+			.subscribe(articles => {
+				this.news = articles;
+			});
+	}
+
+	displayNews() {
+
+	}
+
+}

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

+import { TestBed, inject } from '@angular/core/testing';
+
+import { SearchService } from './search.service';
+
+describe('SearchService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SearchService]
+    });
+  });
+
+  it('should be created', inject([SearchService], (service: SearchService) => {
+    expect(service).toBeTruthy();
+  }));
+});

client/src/app/search.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+	providedIn: 'root'
+})
+
+export class SearchService {
+	private query = new BehaviorSubject('');
+	currentQuery = this.query.asObservable();
+
+	constructor() { }
+
+	changeQuery(query: string) {
+		this.query.next(query);
+	}
+}

client/src/app/search/search.component.html

+<div class="columns">
+	<div class="column is-offset-4 is-4">
+		<div class="field">
+			<label>Ticker</label>
+			<div class="control">
+				<input [(ngModel)]="query" class="input" type="text" placeholder="Enter ticker" />
+			</div>
+			<button class="button" (click)="submit()">submit</button>
+		</div>
+	</div>
+</div>

client/src/app/search/search.component.spec.ts

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

client/src/app/search/search.component.ts

+import { Component, OnInit } from '@angular/core';
+
+import { SearchService } from '../search.service';
+
+@Component({
+	selector: 'app-search',
+	templateUrl: './search.component.html',
+	styleUrls: ['./search.component.css']
+})
+
+export class SearchComponent implements OnInit {
+	query: string;
+
+	constructor(
+		private searchService: SearchService,
+	) { }
+
+	ngOnInit() {
+	}
+
+	submit() {
+		this.searchService.setQuery(this.query);
+	}
+}

client/src/app/stocks.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { StocksService } from './stocks.service';
+
+describe('StocksService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [StocksService]
+    });
+  });
+
+  it('should be created', inject([StocksService], (service: StocksService) => {
+    expect(service).toBeTruthy();
+  }));
+});

client/src/app/stocks.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { SearchService } from './search.service';
+
+@Injectable({
+	providedIn: 'root'
+})
+
+export class StocksService {
+
+	constructor(
+		private http: HttpClient,
+		private searchService: SearchService
+	) { }
+
+	getStocks(ticker) {
+		return this.http.get(`/api/stocks?ticker=${ticker}`);
+	}
+
+	getSearch() {
+		console.log(this.searchService);
+	}
+}

client/src/app/stocks/stocks.component.html

+<p>
+  stocks works!
+</p>

client/src/app/stocks/stocks.component.spec.ts

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

client/src/app/stocks/stocks.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-stocks',
+  templateUrl: './stocks.component.html',
+  styleUrls: ['./stocks.component.css']
+})
+export class StocksComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

client/src/index.html

 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" />
 </head>
 <body>
   <app-root></app-root>

client/tslint.json

     "import-spacing": true,
     "indent": [
       true,
-      "spaces"
+      "tabs"
     ],
     "interface-over-type-literal": true,
     "label-position": true,

server/pom.xml

 			<scope>test</scope>
 		</dependency>
 
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-devtools</artifactId>
+			<version>2.0.3.RELEASE</version>
+		</dependency>
 	</dependencies>
 
 	<build>

server/src/main/java/com/stockr/server/WebConfig.java

+package com.stockr.server;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.EnableWebMvc;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+@EnableWebMvc
+public class WebConfig implements WebMvcConfigurer {
+
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**")
+                .allowedOrigins("http://localhost:8081");
+    }
+}