Load Tweets, load more tweets finished

frontend/src/app/app.module.ts

@@ -31,6 +31,7 @@ import {MaterialFileInputModule} from 'ngx-material-file-input';
 import { DialogComponent } from './component/dialog/dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import {InterceptorService} from './services/interceptor.service';
+import {MatCardModule} from "@angular/material/card";
 
 @NgModule({
   declarations: [LandingComponent, LoginComponent, NavigationComponent,
@@ -54,7 +55,8 @@ import {InterceptorService} from './services/interceptor.service';
     MatSnackBarModule,
     MatCheckboxModule,
     MaterialFileInputModule,
-    MatDialogModule
+    MatDialogModule,
+    MatCardModule
   ],
   // enables injecting
   providers: [

frontend/src/app/component/tweets/tweets.component.html

@@ -5,24 +5,26 @@
     <br>
     <a routerLink="/einstellungen/editieren">RSS-Feed erstellen</a>
   </div>
-  <div class="text-center" *ngIf="feeds.length !== 0">
+  <div class="text-center" *ngIf="!(tweets.length > 0)">
     <span>Keine Tweets vorhanden</span>
     <br>
     <span>Schau später noch einmal vorbei!</span>
   </div>
   <div *ngIf="feeds.length !== 0">
   <div>
-    <div class="container" *ngFor="let tweet of tweets">
+    <div style="padding-bottom: 10px" class="container" *ngFor="let tweet of tweets">
+      <mat-card style="background-color: #f5f5f5">
       <div class="row">
         <div class="col-2 text-center padding-0 margin-auto">
           <img class="feed-icon" src="{{tweet.icon}}" alt="Feed-Icon">
         </div>
         <div class="col-10">
           <p class="overflow-break">{{tweet.text}}
-            <span class="white-space-no-wrap">{{tweet.date_time}}</span></p>
-          <a>{{tweet.url}}</a>
+            <span class="white-space-no-wrap"> - {{tweet.created_date}}</span><br>
+          <a href="{{tweet.url}}" style="cursor: pointer">{{tweet.url}}</a></p>
         </div>
       </div>
+      </mat-card>
     </div>
     </div>
     <div class="text-center">

frontend/src/app/component/tweets/tweets.component.ts

@@ -5,6 +5,7 @@ import {FeedService} from '../../services/feed.service';
 import {IFeed} from '../../interfaces/feed.interface';
 import {Observable} from 'rxjs';
 import {Tweet} from "../../interfaces/interface";
+import {SnackbarService} from "../../services/snackbar.service";
 
 
 @Component({
@@ -19,7 +20,8 @@ export class TweetsComponent implements OnInit {
 
   constructor(private http: HttpClient,
               private authService: AuthService,
-              private _feedService: FeedService) {
+              private _feedService: FeedService,
+              private _snackbarService: SnackbarService) {
     this._feedService.getFeeds().subscribe(
       (data: any) => {
         this.feeds = data;
@@ -33,29 +35,43 @@ export class TweetsComponent implements OnInit {
   ngOnInit(): void {
 
     this.fillTweets()
+    console.log(this.tweets)
 
   }
 
   loadMore() {
 
-    const headerDict = {
-      'Authorization': 'Bearer ' + this.authService.getToken(),
-    };
+    console.log(this.tweets);
+
+    this.http.get<Tweet[]>('http://127.0.0.1:8000/getMoreTweets/'+this.tweets[this.tweets.length-1].tweet_id+'/').subscribe(data => {
+        console.log(data)
+
+        if(data.length == 0){
+          this._snackbarService.show("Keine weiteren Tweets vorhanden","Schließen");
+        }
 
 
-    return this.http.get('http://localhost:8000/api/login',
-      {
-        headers: new HttpHeaders(headerDict),
-        observe: 'response',
-      })
-      .subscribe(data => {
-        console.log(data);
-        alert('Returned with code: ' + data['status']);
-      });
+        for(let tweet of data){
+          let position = tweet.text.search(": http");
+          tweet.text = tweet.text.substring(0,position);
+          this.tweets.push(tweet);
+        }
+      }
+    );
+
   }
 
-    fillTweets(){
+  fillTweets(){
 
+    this.http.get<Tweet[]>('http://127.0.0.1:8000/getSixTweets/').subscribe(data => {
+          console.log(data)
+          for(let tweet of data){
+            let position = tweet.text.search(": http");
+            tweet.text = tweet.text.substring(0,position);
+            this.tweets.push(tweet);
+          }
+      }
+    );
 
     }
 

frontend/src/app/interfaces/interface.ts

@@ -11,7 +11,8 @@ export interface Tweet {
 
   icon: any;
   text: string;
-  date_time: DateTimeFormat;
-  url: String;
+  url: string;
+  created_date: string;
+  tweet_id: number;
 
 }