From c1691aa2373f9b3be26b450aa8b681b54654770d Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 14:20:14 +0200 Subject: Made post component dynamic --- .../src/app/app-constants.module.ts | 2 ++ .../src/app/components/post/post.component.html | 6 ++-- .../src/app/components/post/post.component.ts | 18 +++++++++-- .../src/app/services/post.service.ts | 25 +++++++++++++++ src/DevHive.Angular/src/models/post.ts | 37 ++++++++++++++++++++++ 5 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 src/DevHive.Angular/src/app/services/post.service.ts create mode 100644 src/DevHive.Angular/src/models/post.ts diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts index 7552a5e..8a63651 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -8,5 +8,7 @@ export class AppConstants { public static API_LANGUAGE_URL = AppConstants.BASE_API_URL + '/Language'; public static API_TECHNOLOGY_URL = AppConstants.BASE_API_URL + '/Technology'; + public static API_POST_URL = AppConstants.BASE_API_URL + '/Post'; + public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; } diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html index 487b785..4dec754 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -1,4 +1,4 @@ -
+
@@ -12,10 +12,10 @@
- Your opinion on my idea? + {{ post.message }}
- 17:41 - 27 Dec 2020 + {{ post.timeCreated }}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts index 76a4873..ab894d1 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -1,7 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Guid } from 'guid-typescript'; import {AppConstants} from 'src/app/app-constants.module'; +import {FeedService} from 'src/app/services/feed.service'; +import {PostService} from 'src/app/services/post.service'; import { User } from 'src/models/identity/user'; +import {Post} from 'src/models/post'; @Component({ selector: 'app-post', @@ -10,11 +13,16 @@ import { User } from 'src/models/identity/user'; }) export class PostComponent implements OnInit { public user: User; + public post: Post; public votesNumber: number; + public loaded = false; + @Input() paramId: string; - constructor() {} + constructor(private _postService: PostService) + {} ngOnInit(): void { + this.post = this._postService.getDefaultPost(); // Fetch data in post service this.user = new User( Guid.create(), @@ -27,6 +35,12 @@ export class PostComponent implements OnInit { new Array() ); + this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe( + (result: object) => { + Object.assign(this.post, result); + this.loaded = true; + } + ); this.votesNumber = 23; } } diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts new file mode 100644 index 0000000..74105b3 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/post.service.ts @@ -0,0 +1,25 @@ +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Guid} from 'guid-typescript'; +import {Observable} from 'rxjs'; +import {Post} from 'src/models/post'; +import {AppConstants} from '../app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class PostService { + constructor(private http: HttpClient) { } + + getDefaultPost(): Post { + return new Post(Guid.createEmpty(), '', new Date()); + } + + getPostRequest(id: Guid): Observable { + const options = { + params: new HttpParams().set('Id', id.toString()) + }; + return this.http.get(AppConstants.API_POST_URL, options); + } +} + diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts new file mode 100644 index 0000000..aed1005 --- /dev/null +++ b/src/DevHive.Angular/src/models/post.ts @@ -0,0 +1,37 @@ +import {Guid} from 'guid-typescript'; + +export class Post { + private _postId: Guid; + // _creatorId + private _message: string; + private _timeCreated: Date; + // _comments + // _files + + constructor(postId: Guid, message: string, timeCreated: Date) { + this.postId = postId; + this.message = message; + this.timeCreated = timeCreated; + } + + public get postId(): Guid { + return this._postId; + } + public set postId(v: Guid) { + this._postId = v; + } + + public get message(): string { + return this._message; + } + public set message(v: string) { + this._message = v; + } + + public get timeCreated(): Date { + return this._timeCreated; + } + public set timeCreated(v: Date) { + this._timeCreated = v; + } +} -- cgit v1.2.3 From a9788aafbf3e7df1368d361363cd05f8faa8c6d6 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 30 Jan 2021 14:20:48 +0200 Subject: Made user page posts dynamic --- .../src/app/app-constants.module.ts | 1 + .../app/components/profile/profile.component.html | 8 +++++--- .../app/components/profile/profile.component.ts | 19 +++++++++++++++--- .../src/app/services/feed.service.ts | 23 ++++++++++++++++++++++ 4 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 src/DevHive.Angular/src/app/services/feed.service.ts diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts index 8a63651..28540c4 100644 --- a/src/DevHive.Angular/src/app/app-constants.module.ts +++ b/src/DevHive.Angular/src/app/app-constants.module.ts @@ -9,6 +9,7 @@ export class AppConstants { public static API_TECHNOLOGY_URL = AppConstants.BASE_API_URL + '/Technology'; public static API_POST_URL = AppConstants.BASE_API_URL + '/Post'; + public static API_FEED_URL = AppConstants.BASE_API_URL + '/Feed'; public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; } diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html index 43d580f..8ac91af 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -41,9 +41,11 @@  None -
-
- Posts go here +
+
+
+ +
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts index 69d7e72..1a3f0b8 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts @@ -7,6 +7,8 @@ import {HttpErrorResponse} from '@angular/common/http'; import {Location} from '@angular/common'; import {LanguageService} from 'src/app/services/language.service'; import {TechnologyService} from 'src/app/services/technology.service'; +import {Post} from 'src/models/post'; +import {FeedService} from 'src/app/services/feed.service'; @Component({ selector: 'app-profile', @@ -18,10 +20,11 @@ export class ProfileComponent implements OnInit { public loggedInUser = false; public dataArrived = false; public user: User; + public userPosts: Post[] = []; public showNoLangMsg = false; public showNoTechMsg = false; - constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _location: Location) + constructor(private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location) { } private setDefaultUser(): void { @@ -57,11 +60,11 @@ export class ProfileComponent implements OnInit { private loadTechnologies(): void { if (this.user.technologies.length > 0) { - // When user has technologies, get their names and finally finish loading + // When user has technologies, get their names and then load posts this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies) .then(value => { this.user.technologies = value; - this.finishUserLoading(); + this.loadPosts(); }); } else { @@ -70,6 +73,16 @@ export class ProfileComponent implements OnInit { } } + private loadPosts(): void { + this._feedService.getUserPostsRequest(this.user.userName, 1, '2021-01-29T21:35:30.977Z', 5).subscribe( + (result: object) => { + this.userPosts = Object.values(result)[0]; + console.log(this.userPosts); + this.finishUserLoading(); + } + ); + } + private finishUserLoading(): void { if (this.user.imageUrl === '') { this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON; diff --git a/src/DevHive.Angular/src/app/services/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts new file mode 100644 index 0000000..42757eb --- /dev/null +++ b/src/DevHive.Angular/src/app/services/feed.service.ts @@ -0,0 +1,23 @@ +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {AppConstants} from '../app-constants.module'; + +@Injectable({ + providedIn: 'root' +}) +export class FeedService { + constructor(private http: HttpClient) { } + + getUserPostsRequest(userName: string, pageNumber: number, firstTimeIssued: string, pageSize: number): Observable { + const body = { + pageNumber: pageNumber, + firstPageTimeIssued: firstTimeIssued, + pageSize: pageSize + }; + const options = { + params: new HttpParams().set('UserName', userName) + }; + return this.http.post(AppConstants.API_FEED_URL + '/GetUserPosts', body, options); + } +} -- cgit v1.2.3