socialnetworknews-web

commit 56427a7f91bf15336e1d2e7066191a66e08ff6e7
parent 440c2b2cf1a9e6f655992a63237d08bfef35e588
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon, 19 Feb 2018 14:43:59 +0100

Use "GET /papers" api endpoint

Diffstat:
M
src/app/api.service.ts
 | 
33
+++++++++++++++++++++++++++++----
M
src/app/papers-list/papers-list.component.html
 | 
8
++++----
M
src/app/papers-list/papers-list.component.ts
 | 
28
+++++++++++++++++++++++++---
M
src/app/tweet-list/tweet-list.component.ts
 | 
20
++------------------

4 files changed, 60 insertions(+), 29 deletions(-)
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
@@ -1,9 +1,10 @@
 import {Inject, Injectable} from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {DOCUMENT} from '@angular/common';
+import {Observable} from 'rxjs/Observable';
 
 export interface Tweet {
-  tweets?: (TweetsEntity)[] | null;
+  tweets?: (TweetsEntity)[];
 }
 export interface TweetsEntity {
   username: string;
@@ -11,23 +12,47 @@ export interface TweetsEntity {
   display_name: string;
   userprofile_link: string;
   text: string;
-  image_urls?: (string)[] | null;
+  image_urls?: (string)[];
   created_at: string;
   favorites: string;
   retweets: string;
   retweet: boolean;
 }
 
+export interface Papers {
+  papers?: (Paper)[] | null;
+}
+
+export interface Paper {
+  name?: string;
+  uuid?: string;
+  description?: string;
+  paper_image?: string;
+  author?: Author;
+}
+
+export interface Author {
+  uuid?: string;
+  username?: string;
+  profile_image_url?: string;
+  twitter_profile?: string;
+  google_profile?: string;
+  github_profile?: string;
+}
 
 @Injectable()
 export class ApiService {
   private url;
   constructor(@Inject(DOCUMENT) private document, private http: HttpClient) {
-    this.url = document.location.protocol + '//' + document.location.hostname + ':8000';
+    this.url = document.location.protocol + '//' + document.location.hostname + '/api';
   }
 
   // Uses http.get() to load data from a single API endpoint
-  getYesterday(uuid: string) {
+  getYesterday(uuid: string): Observable<Tweet> {
     return this.http.get<Tweet>(`${this.url}/paper/${uuid}/yesterday`);
   }
+
+  getPapers(): Observable<Papers> {
+    return this.http.get<Papers>(`${this.url}/papers`);
+  }
 }
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -1,8 +1,8 @@
 <div class="card-deck row" *ngFor="let rows of data">
   <div class="card mx-auto" *ngFor="let item of rows" style="max-width: 22rem">
     <!--Card image-->
-    <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.logoURL">
-      <img [src]="item.logoURL" class="img-fluid" style="z-index: 0">
+    <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.paper_image">
+      <img [src]="item.paper_image" class="img-fluid" style="z-index: 0">
       <a>
         <div class="mask"></div>
       </a>
@@ -10,9 +10,9 @@
     <!--Card content-->
     <div class="card-body">
       <!--Title when Text exists-->
-      <h4 class="card-title text-left" *ngIf="(item.description && item.logoURL) || (item.description && !item.logoURL)"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
+      <h4 class="card-title text-left" *ngIf="(item.description && item.paper_image) || (item.description && !item.paper_image)"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
       <!--Title when no Text exists-->
-      <h4 class="card-title align-middle" *ngIf="!item.description || !item.logoURL"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
+      <h4 class="card-title align-middle" *ngIf="!item.description || !item.paper_image"><a routerLink="/paper/{{item.uuid}}">{{item.title}}</a></h4>
       <!--Text-->
       <p class="card-text text-justify" *ngIf="item.description">{{item.description}}</p>
     </div>
diff --git a/src/app/papers-list/papers-list.component.ts b/src/app/papers-list/papers-list.component.ts
@@ -1,11 +1,33 @@
-import {Component, Input} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ApiService, Paper} from '../api.service';
 
 @Component({
   selector: 'app-papers-list',
   templateUrl: './papers-list.component.html',
   styleUrls: ['./papers-list.component.scss']
 })
-export class PapersListComponent {
-  @Input() data;
+export class PapersListComponent implements OnInit {
+  data: (Paper)[][];
+
+  constructor(private apiService: ApiService) {}
+
+  ngOnInit() { this.getPapers(); }
+
+  getPapers() {
+    this.apiService.getPapers()
+      .subscribe(
+        data => { this.data = this.chunk(data.papers, 3); },
+        err => console.error('API ERR: ', err),
+        () => console.log('done loading Yesterday')
+      );
+  }
+
+  private chunk(arr: (Paper)[], size: number): (Paper)[][] {
+    const newArr = [];
+    for (let i = 0; i < arr.length; i += size) {
+      newArr.push(arr.slice(i, i + size));
+    }
+    return newArr;
+  }
 
 }
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -1,21 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {ApiService} from '../api.service';
-
-export interface Tweet {
-  tweets?: (TweetsEntity)[] | null;
-}
-export interface TweetsEntity {
-  username: string;
-  user_id: string;
-  display_name: string;
-  userprofile_link: string;
-  text: string;
-  image_urls?: (string)[] | null;
-  created_at: string;
-  favorites: string;
-  retweets: string;
-  retweet: boolean;
-}
+import {ApiService, TweetsEntity} from '../api.service';
 
 
 @Component({
@@ -34,7 +18,7 @@ export class TweetListComponent implements OnInit {
   getYesterday() {
     this.apiService.getYesterday(this.uuid)
       .subscribe(
-        data => { this.data = this.chunk(data['tweets'], 3); },
+        data => { this.data = this.chunk(data.tweets, 3); },
         err => console.error('API ERR: ', err),
         () => console.log('done loading Yesterday')
       );