linkuptv

package-lock.json

@@ -3705,12 +3705,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3725,17 +3727,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3852,7 +3857,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3864,6 +3870,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3878,6 +3885,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3885,12 +3893,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3909,6 +3919,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3989,7 +4000,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4001,6 +4013,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4122,6 +4135,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

package.json

@@ -3,7 +3,7 @@
   "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",

proxy.conf.json

@@ -0,0 +1,6 @@
+{
+	"/api/*": {
+		"target": "http://192.168.1.216:8080",
+		"pathRewrite": {"^/api" : ""}
+	}
+}

src/app/post.service.spec.ts

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

src/app/post.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+@Injectable({
+	providedIn: 'root'
+})
+
+export class PostService {
+
+	constructor( private http: HttpClient ) {}
+
+	getAllPosts() {
+		return this.http.get('/api/post/all').toPromise();
+	}
+
+	postPost(messageBody, githubId = 'j-n000') {
+		this.http.post(`/api/post/${githubId}/new-post`, { body: messageBody }).toPromise();
+	}
+}

src/app/timeline/post/post.component.css

@@ -3,5 +3,5 @@
 }
 
 .card {
-	max-width: 900px;
+	width: 500px;
 }

src/app/timeline/post/post.component.html

@@ -9,17 +9,16 @@
 			<div class="media-content">
 				<div class="content">
 					<p>
-						<strong>Barbara Middleton</strong>
+						<strong>{{ post.sender }}</strong>
 						<br>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
+						{{ post.body }}
 						<br>
-						<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
+						<small>{{ post.timestamp }}</small>
 					</p>
 				</div>
-
-				<div class="comment">
-					<app-comment></app-comment>
-				</div>
+				<!-- <div class="comment"> -->
+				<!-- 	<app-comment></app-comment> -->
+				<!-- </div> -->
 			</div>
 		</article>
 	</div>

src/app/timeline/post/post.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-post',
   templateUrl: './post.component.html',
   styleUrls: ['./post.component.css']
 })
+
 export class PostComponent implements OnInit {
+	@Input()post: any;
 
   constructor() { }
 

src/app/timeline/status/status.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import { PostService } from '../../post.service';
 
 @Component({
 	selector: 'app-status',
@@ -10,16 +11,15 @@ export class StatusComponent implements OnInit {
 	sender = 'Origin'; // pull web3.address
 	body: string;
 
-	constructor(private http: HttpClient) { }
+	constructor(
+		private http: HttpClient,
+		private postService: PostService
+	) { }
 
 	ngOnInit() {
 	}
 
-	submit() {
-		const headers = new HttpHeaders()
-			.set('Content-Type', 'application/json');
-
-		this.http.post(
-			`http://192.168.3.202:6969/post?sender=${this.sender}&body=${this.body}`, {headers}).subscribe(console.log);
+	async submit() {
+		const response = await this.postService.postPost(this.body);
 	}
 }

src/app/timeline/timeline.component.css

@@ -1,6 +1,7 @@
 .hero.is-fullheight .hero-body.no-vcenter {
 	align-items: flex-start;
 }
+
 .container.timeline {
 	display: flex;
 	flex-direction: column;

src/app/timeline/timeline.component.html

@@ -3,12 +3,7 @@
 		<div class="container">
 			<app-status></app-status>
 			<div class="container timeline">
-			<app-post></app-post>
-			<app-post></app-post>
-			<app-post></app-post>
-			<app-post></app-post>
-			<app-post></app-post>
-			<app-post></app-post>
+				<app-post *ngFor="let post of posts" [post]="post"></app-post>
 			</div>
 		</div>
 	</div>

src/app/timeline/timeline.component.ts

@@ -1,15 +1,24 @@
 import { Component, OnInit } from '@angular/core';
+import { PostService } from '../post.service';
 
 @Component({
-  selector: 'app-timeline',
-  templateUrl: './timeline.component.html',
-  styleUrls: ['./timeline.component.css']
+	selector: 'app-timeline',
+	templateUrl: './timeline.component.html',
+	styleUrls: ['./timeline.component.css']
 })
 export class TimelineComponent implements OnInit {
+	posts: any;
 
-  constructor() { }
+	constructor( private postService: PostService ) { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+		this.getAllPostsFromService();
+	}
+
+	async getAllPostsFromService() {
+		const posts = await this.postService.getAllPosts();
+		this.posts = posts;
+		console.log(posts);
+	}
 
 }