From 4cd3caa5301520bc8de6799dca7740be9084f3f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tormod=20Nyg=C3=A5rd?= <tormodny@stud.ntnu.no>
Date: Thu, 11 Feb 2021 11:02:16 +0100
Subject: [PATCH] Issue: Basic RestAPI i frontend (#3)
---
client/package.json | 2 +-
client/proxy.conf.json | 6 +++
client/src/app/app-routing.module.ts | 2 +-
client/src/app/app.module.ts | 4 +-
client/src/app/models/deserializable.model.ts | 2 +-
client/src/app/models/post.model.ts | 37 +++++++++++---
client/src/app/models/serializable.model.ts | 2 +-
.../posts/post-form/post-form.component.html | 2 +-
.../post-form/post-form.component.spec.ts | 6 ++-
.../posts/post-form/post-form.component.ts | 14 +++--
client/src/app/posts/post.service.spec.ts | 19 +++++++
client/src/app/posts/post.service.ts | 51 +++++++++++++++++++
12 files changed, 129 insertions(+), 18 deletions(-)
create mode 100644 client/proxy.conf.json
create mode 100644 client/src/app/posts/post.service.spec.ts
create mode 100644 client/src/app/posts/post.service.ts
diff --git a/client/package.json b/client/package.json
index 2e00ec6..edef3c6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
- "start": "ng serve",
+ "start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
diff --git a/client/proxy.conf.json b/client/proxy.conf.json
new file mode 100644
index 0000000..073c1d7
--- /dev/null
+++ b/client/proxy.conf.json
@@ -0,0 +1,6 @@
+{
+ "/api": {
+ "target": "http://localhost:3000",
+ "secure": false
+ }
+ }
\ No newline at end of file
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 9dda020..15fb2c5 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
import { PostFormComponent } from './posts/post-form/post-form.component';
const routes: Routes = [
- { path: 'postForm', component: PostFormComponent }
+ { path: 'annonse/ny', component: PostFormComponent }
];
@NgModule({
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 008d62f..fc70334 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -12,7 +13,8 @@ import { PostModule } from './posts/post.module';
imports: [
BrowserModule,
AppRoutingModule,
- PostModule
+ PostModule,
+ HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/client/src/app/models/deserializable.model.ts b/client/src/app/models/deserializable.model.ts
index 28a3f4b..8c8e258 100644
--- a/client/src/app/models/deserializable.model.ts
+++ b/client/src/app/models/deserializable.model.ts
@@ -1,3 +1,3 @@
export interface Deserializable {
- deserialize(input: string): this;
+ deserialize(input: Object): this;
}
\ No newline at end of file
diff --git a/client/src/app/models/post.model.ts b/client/src/app/models/post.model.ts
index c712beb..fc31ccd 100644
--- a/client/src/app/models/post.model.ts
+++ b/client/src/app/models/post.model.ts
@@ -2,41 +2,56 @@ import { Deserializable } from "./deserializable.model";
import { Serializable } from "./serializable.model";
export class Post implements Deserializable, Serializable {
+ private id: number;
private title: string;
private description: string;
private timestamp: Date;
private user: string;
+ private imageUrl: string;
constructor(input: any = null) {
if (input) {
+ this.id = input.id;
this.title = input.title;
this.description = input.description;
this.timestamp = new Date(input.timestamp);
this.user = input.user;
+ this.imageUrl = input.imageUrl;
} else {
+ this.id = 0;
this.title = "";
this.description = "";
this.timestamp = new Date();
this.user = "";
+ this.imageUrl = "";
}
}
- deserialize(input: string): this {
- const obj = JSON.parse(input);
- Object.assign(this, obj);
+ deserialize(input: Object): this {
+ Object.assign(this, input);
this.timestamp = new Date(this.timestamp);
return this;
}
- serialize(): string {
- return JSON.stringify({
+ serialize(): Object {
+ return {
+ id: this.id,
title: this.title,
description: this.description,
timestamp: this.timestamp.valueOf(),
- user: this.user
- });
+ user: this.user,
+ imageUrl: this.imageUrl
+ };
+ }
+
+ get getId () {
+ return this.id;
+ }
+
+ set setId (id: number) {
+ this.id = id;
}
get getTitle () {
@@ -70,4 +85,12 @@ export class Post implements Deserializable, Serializable {
set setUser (user: string) {
this.user = user;
}
+
+ get getImageUrl () {
+ return this.imageUrl;
+ }
+
+ set setImageUrl (imageUrl: string) {
+ this.imageUrl = imageUrl;
+ }
}
\ No newline at end of file
diff --git a/client/src/app/models/serializable.model.ts b/client/src/app/models/serializable.model.ts
index 6de9e54..c985231 100644
--- a/client/src/app/models/serializable.model.ts
+++ b/client/src/app/models/serializable.model.ts
@@ -1,3 +1,3 @@
export interface Serializable {
- serialize(): string;
+ serialize(): Object;
}
\ No newline at end of file
diff --git a/client/src/app/posts/post-form/post-form.component.html b/client/src/app/posts/post-form/post-form.component.html
index ea9250c..7ed27b3 100644
--- a/client/src/app/posts/post-form/post-form.component.html
+++ b/client/src/app/posts/post-form/post-form.component.html
@@ -1,4 +1,4 @@
<p>Post form!</p>
<p>Title: {{deserializedPost.getTitle}}</p>
-<p>Description: {{deserializedPost.getDescription}}</p>
+<p>Description: {{deserializedPost.getDescription}}</p>
\ No newline at end of file
diff --git a/client/src/app/posts/post-form/post-form.component.spec.ts b/client/src/app/posts/post-form/post-form.component.spec.ts
index edf6f54..ed44eee 100644
--- a/client/src/app/posts/post-form/post-form.component.spec.ts
+++ b/client/src/app/posts/post-form/post-form.component.spec.ts
@@ -1,3 +1,4 @@
+import { HttpClientModule } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PostFormComponent } from './post-form.component';
@@ -8,7 +9,8 @@ describe('PostFormComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ PostFormComponent ]
+ declarations: [ PostFormComponent ],
+ imports: [ HttpClientModule ]
})
.compileComponents();
});
@@ -27,7 +29,7 @@ describe('PostFormComponent', () => {
expect(component.serializedPost == "").toBeFalse();
try{
- const obj = JSON.parse(component.serializedPost);
+ JSON.stringify(component.serializedPost);
}catch{
fail("Could not serialize");
}
diff --git a/client/src/app/posts/post-form/post-form.component.ts b/client/src/app/posts/post-form/post-form.component.ts
index 7f49d91..3b85617 100644
--- a/client/src/app/posts/post-form/post-form.component.ts
+++ b/client/src/app/posts/post-form/post-form.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Post } from 'src/app/models/post.model';
+import { PostService } from '../post.service';
@Component({
selector: 'app-post-form',
@@ -8,20 +9,27 @@ import { Post } from 'src/app/models/post.model';
})
export class PostFormComponent implements OnInit {
- serializedPost: string = "";
+ serializedPost: Object = {};
deserializedPost: Post = new Post();
- constructor() { }
+ constructor(private postService: PostService) { }
ngOnInit(): void {
let post = new Post({
+ id: 0,
title: "TestAnnonse",
description: "Beskrivelse",
timestamp: 1612952332000,
- user: "Admin"
+ user: "Admin",
+ imageUrl: "url"
});
this.serializedPost = post.serialize();
this.deserializedPost.deserialize(post.serialize());
+
+ this.postService.getPost("0").then((gettedPost: Post) => {
+ console.log(gettedPost);
+ }
+ );
}
}
diff --git a/client/src/app/posts/post.service.spec.ts b/client/src/app/posts/post.service.spec.ts
new file mode 100644
index 0000000..ead1865
--- /dev/null
+++ b/client/src/app/posts/post.service.spec.ts
@@ -0,0 +1,19 @@
+import { HttpClientModule } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+
+import { PostService } from './post.service';
+
+describe('PostService', () => {
+ let service: PostService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [ HttpClientModule ]
+ });
+ service = TestBed.inject(PostService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/client/src/app/posts/post.service.ts b/client/src/app/posts/post.service.ts
new file mode 100644
index 0000000..2980389
--- /dev/null
+++ b/client/src/app/posts/post.service.ts
@@ -0,0 +1,51 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Post } from '../models/post.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class PostService {
+
+ postUrl = "api/post/";
+
+ constructor(private http: HttpClient) { }
+
+ getPost(id: string): Promise<Post>{
+ return new Promise<Post>(
+ (resolve, reject) => {
+ this.get_post(id).subscribe((data: any) => {
+ try{
+ const post = new Post();
+ post.deserialize(data);
+ resolve(post);
+ } catch (err: any) {
+ reject(err);
+ }
+ });
+ }
+ );
+ }
+
+ get_post(id: string) {
+ return this.http.get(this.postUrl + id);
+ }
+
+ addPost(post: Post): Promise<boolean>{
+ return new Promise<boolean>(
+ (resolve, reject) => {
+ this.add_post(post).subscribe((data: any) => {
+ try{
+ resolve(data.status);
+ } catch (err: any) {
+ reject(err);
+ }
+ });
+ }
+ );
+ }
+
+ add_post(post: Post) {
+ return this.http.post(this.postUrl, post.serialize());
+ }
+}
--
GitLab