Issue: Added list and thumbnails of posts (#4)

client/src/app/app-routing.module.ts

@@ -2,9 +2,11 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PostDetailsComponent } from './posts/post-details/post-details.component';
 import { PostFormComponent } from './posts/post-form/post-form.component';
+import { PostListComponent } from './posts/post-list/post-list.component';
 
 const routes: Routes = [
   { path: 'annonse/ny', component: PostFormComponent },
+  { path: 'annonse', component: PostListComponent },
   { path: 'annonse/:id', component: PostDetailsComponent }
 ];
 

client/src/app/posts/post-list/post-list.component.html

+<div>
+    <app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
+</div>

client/src/app/posts/post-list/post-list.component.spec.ts

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

client/src/app/posts/post-list/post-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Post } from 'src/app/models/post.model';
+import { PostService } from '../post.service';
+
+@Component({
+  selector: 'app-post-list',
+  templateUrl: './post-list.component.html',
+  styleUrls: ['./post-list.component.scss']
+})
+export class PostListComponent implements OnInit {
+
+  allPosts: Array<Post> = []
+
+  constructor(private postService: PostService) { }
+
+  ngOnInit(): void {
+    // Gets all posts from database, and displays them
+    this.postService.getAllPosts().then(posts => {
+      this.allPosts = posts;
+    }).catch(error => {
+      console.log(error);
+    });
+  }
+
+}

client/src/app/posts/post-thumbnail/post-thumbnail.component.html

+<p (click)="goToPost()">{{post.getTitle}}</p>

client/src/app/posts/post-thumbnail/post-thumbnail.component.spec.ts

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

client/src/app/posts/post-thumbnail/post-thumbnail.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Post } from 'src/app/models/post.model';
+
+@Component({
+  selector: 'app-post-thumbnail',
+  templateUrl: './post-thumbnail.component.html',
+  styleUrls: ['./post-thumbnail.component.scss']
+})
+export class PostThumbnailComponent implements OnInit {
+
+  @Input()
+  post: Post = new Post();
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  goToPost() {
+    this.router.navigateByUrl("annonse/" + this.post.getId);
+  }
+}

client/src/app/posts/post.module.ts

@@ -4,13 +4,17 @@ import { PostFormComponent } from './post-form/post-form.component';
 import { SharedModule } from '../shared/shared.module';
 import { FormsModule } from '@angular/forms';
 import { PostDetailsComponent } from './post-details/post-details.component';
+import { PostListComponent } from './post-list/post-list.component';
+import { PostThumbnailComponent } from './post-thumbnail/post-thumbnail.component';
 
 
 
 @NgModule({
   declarations: [
     PostFormComponent,
-    PostDetailsComponent
+    PostDetailsComponent,
+    PostListComponent,
+    PostThumbnailComponent
   ],
   imports: [
     CommonModule,

client/src/app/posts/post.service.ts

@@ -13,6 +13,41 @@ export class PostService {
 
   constructor(private http: HttpClient) { }
 
+  /**
+   * Get all posts from database.
+   */
+  getAllPosts(): Promise<Array<Post>> {
+    return new Promise<Array<Post>>(
+      (resolve, reject) => {
+        this.get_all_posts().subscribe((data: any) => {
+          try {
+            let outputPosts = [];
+            for (let post of data.data) {
+              outputPosts.push(new Post(post));
+
+              if (post.getId == 0) {
+                reject("Could not deserialize Post");
+                return;
+              }
+            }
+
+            resolve(outputPosts);
+          } catch (err: any) {
+            reject(err);
+          }
+        },
+        (err: any) => {
+          console.log(err.message);
+          reject(err);
+        });
+      }
+    );
+  }
+
+  private get_all_posts() {
+    return this.http.get(this.postUrl);
+  }
+
   /**
    * Get post from database by id.
    */