From f588f3dbd4a05a0341dd029d8c8998854cd2090d Mon Sep 17 00:00:00 2001 From: Hieu Nguyen Date: Sun, 21 Aug 2022 18:21:33 +0700 Subject: [PATCH] #8 - basically implement view read news --- db.json | 17 ++++++ src/app/_api/apiURL.ts | 1 + src/app/_model/post.model.ts | 13 ++++- src/app/auth/auth-routing.module.ts | 21 ++++--- .../post-details/post-details.component.ts | 13 +++++ src/app/post/post-routing.module.ts | 5 +- src/app/post/post.module.ts | 3 +- src/app/post/post.service.ts | 13 ++++- .../post/read-posts/read-posts.component.html | 32 +++++++++++ .../post/read-posts/read-posts.component.scss | 55 +++++++++++++++++++ .../read-posts/read-posts.component.spec.ts | 25 +++++++++ .../post/read-posts/read-posts.component.ts | 53 ++++++++++++++++++ 12 files changed, 234 insertions(+), 17 deletions(-) create mode 100644 src/app/post/read-posts/read-posts.component.html create mode 100644 src/app/post/read-posts/read-posts.component.scss create mode 100644 src/app/post/read-posts/read-posts.component.spec.ts create mode 100644 src/app/post/read-posts/read-posts.component.ts diff --git a/db.json b/db.json index 88cd406..e6d8d1f 100644 --- a/db.json +++ b/db.json @@ -123,5 +123,22 @@ "content": "Rất xinh đẹp tuyệt vời ạ 🥰", "id": 14 } + ], + "read-posts": [ + { + "email": "lele9h0st@gmail.com", + "posts":[ + {"title":"title1","link":"demo link"}, + {"title":"title2","link":"demo link1"} + ], + "id":1 + }, + { + "email": "222@gmail.com", + "posts":[ + {"title":"title2","link":"demo link2"} + ], + "id":2 + } ] } \ No newline at end of file diff --git a/src/app/_api/apiURL.ts b/src/app/_api/apiURL.ts index 9b1b4f1..44856fb 100644 --- a/src/app/_api/apiURL.ts +++ b/src/app/_api/apiURL.ts @@ -25,6 +25,7 @@ export const API_AUTH = { export const API_URL = { COMMENT: "http://localhost:3000/comments", + READ_POST: "http://localhost:3000/read-posts", GET_LIST: "https://api-news-vietnamnet.herokuapp.com/api/get/", SEARCH: "https://api-news-vietnamnet.herokuapp.com/api/search/", ARTICLE_DETAILS: "https://api-news-vietnamnet.herokuapp.com/article/", diff --git a/src/app/_model/post.model.ts b/src/app/_model/post.model.ts index 71b72be..0587698 100644 --- a/src/app/_model/post.model.ts +++ b/src/app/_model/post.model.ts @@ -3,7 +3,7 @@ export interface Article { description: string; guid: string; link: string; - media:string; + media: string; pubDate: string; title: string; } @@ -14,4 +14,15 @@ export interface ArticleResponse { lastBuildDate: string; link: string; title: string; +} + +export interface ReadPost { + title: string; + link: string; +} + +export interface ReadPostResponse { + email: string; + posts: ReadPost[]; + id: number; } \ No newline at end of file diff --git a/src/app/auth/auth-routing.module.ts b/src/app/auth/auth-routing.module.ts index 4a2fd2a..c295c97 100644 --- a/src/app/auth/auth-routing.module.ts +++ b/src/app/auth/auth-routing.module.ts @@ -1,14 +1,13 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; -import {RegisterFormComponent} from './register/register-form/register-form.component'; -import {ChangePassComponent} from './signin/change-pass/change-pass.component'; -import {RecoverPassFormComponent} from './signin/recover-pass-form/recover-pass-form.component'; -import {SigninFormComponent} from './signin/signin-form/signin-form.component'; -import {AuthGuard} from "../_guard/auth.guard"; -import {LoginGuard} from "../_guard/login.guard"; -import {ConfirmAccountComponent} from "./register/confirm-account/confirm-account.component"; -import {NonActivatedAccountComponent} from "./register/non-activated-account/non-activated-account.component"; -import {HomeComponent} from "../pages/home/home.component"; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from "../pages/home/home.component"; +import { LoginGuard } from "../_guard/login.guard"; +import { ConfirmAccountComponent } from "./register/confirm-account/confirm-account.component"; +import { NonActivatedAccountComponent } from "./register/non-activated-account/non-activated-account.component"; +import { RegisterFormComponent } from './register/register-form/register-form.component'; +import { ChangePassComponent } from './signin/change-pass/change-pass.component'; +import { RecoverPassFormComponent } from './signin/recover-pass-form/recover-pass-form.component'; +import { SigninFormComponent } from './signin/signin-form/signin-form.component'; const routes: Routes = [ {path: 'register', component: RegisterFormComponent, canActivate: [LoginGuard]}, diff --git a/src/app/post/post-details/post-details.component.ts b/src/app/post/post-details/post-details.component.ts index 329306e..85a8b3a 100644 --- a/src/app/post/post-details/post-details.component.ts +++ b/src/app/post/post-details/post-details.component.ts @@ -23,6 +23,7 @@ export class PostDetailsComponent implements OnInit { title!: string; posts_list!: Article[]; isLoading = true; + post_title!: string; constructor(private formBuilder: FormBuilder, private postService: PostService, private domSanitizer: DomSanitizer, private activatedRoute: ActivatedRoute, private titleService: Title, private toastService: ToastrService) { this.comments_list = []; @@ -82,9 +83,21 @@ export class PostDetailsComponent implements OnInit { this.post_id = Number(id); this.get_comment_by_post_id(this.post_id); this.postCommentForm.get("article_id")?.setValue(this.post_id); + this.save_read_post(); }); } + save_read_post() { + var loggedUser = JSON.parse(localStorage.getItem('auth-user') || '{}'); + if (loggedUser) { + const { email } = loggedUser; + + this.postService.get_read_news(email).subscribe(res => { + console.log(res); + }); + } + } + get_comment_by_post_id(id: number) { this.postService.get_comments_by_post_id(id).subscribe(res => { this.comments_list = res; diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts index 4570dec..b441a68 100644 --- a/src/app/post/post-routing.module.ts +++ b/src/app/post/post-routing.module.ts @@ -1,16 +1,17 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { MdbLazyLoadingModule } from 'mdb-angular-ui-kit/lazy-loading'; -import { NotfoundComponent } from '../pages/notfound/notfound.component'; import { PostDetailsComponent } from './post-details/post-details.component'; import { PostListComponent } from './post-list/post-list.component'; +import { ReadPostsComponent } from './read-posts/read-posts.component'; import { SearchResultComponent } from './search-result/search-result.component'; const routes: Routes = [ { path: 'search/:keyword/:tag', component: SearchResultComponent }, { path: 'chu-de/:title', component: PostListComponent }, { path: 'bai-viet/:url', component: PostDetailsComponent }, - { path: '**', component: NotfoundComponent } + { path: 'read-posts', component: ReadPostsComponent }, + // { path: '**', component: NotfoundComponent } ]; @NgModule({ diff --git a/src/app/post/post.module.ts b/src/app/post/post.module.ts index b6ecedd..55f1a69 100644 --- a/src/app/post/post.module.ts +++ b/src/app/post/post.module.ts @@ -12,8 +12,9 @@ import { PostService } from './post.service'; import { SearchResultComponent } from './search-result/search-result.component'; import { PostCommentComponent } from './post-comment/post-comment.component'; import { NewestPostComponent } from './post-list/newest-post/newest-post.component'; +import { ReadPostsComponent } from './read-posts/read-posts.component'; @NgModule({ - declarations: [SearchResultComponent, PostListComponent, AdvertisementComponent, PostDetailsComponent, PostCommentComponent, NewestPostComponent], + declarations: [SearchResultComponent, PostListComponent, AdvertisementComponent, PostDetailsComponent, PostCommentComponent, NewestPostComponent, ReadPostsComponent], imports: [ CommonModule, PostRoutingModule, diff --git a/src/app/post/post.service.ts b/src/app/post/post.service.ts index 75806a1..d7f6cb2 100644 --- a/src/app/post/post.service.ts +++ b/src/app/post/post.service.ts @@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { catchError } from 'rxjs'; import { API_URL } from '../_api/apiURL'; -import { ArticleResponse } from '../_model/post.model'; +import { ArticleResponse, ReadPostResponse } from '../_model/post.model'; import { Comment } from '../_model/comment.model'; import { CommonService } from '../_service/common.service'; @@ -39,5 +39,14 @@ export class PostService { return this.http.get(`${API_URL.ARTICLE_DETAILS}${url}`, { headers, responseType: 'text' }) .pipe(catchError(err => this.commonService.handleError(err, "Lỗi khi lấy dữ liệu bài viết"))); } - + + get_read_news(email: string) { + return this.http.get(`${API_URL.READ_POST}?email=${email}`) + .pipe(catchError(err => this.commonService.handleError(err, "Lỗi khi lấy danh sách bài viết đã đọc"))); + } + + save_read_post(post: ReadPostResponse) { + return this.http.put(`${API_URL.READ_POST}/${post.id}`, post) + .pipe(catchError(err => this.commonService.handleError(err, "Lỗi khi lấy danh sách bài viết đã đọc"))); + } } diff --git a/src/app/post/read-posts/read-posts.component.html b/src/app/post/read-posts/read-posts.component.html new file mode 100644 index 0000000..c3446fc --- /dev/null +++ b/src/app/post/read-posts/read-posts.component.html @@ -0,0 +1,32 @@ + +
+
+
+ + +
+
{{currentUser.name}}
+
+ + + + +
+
+
+
+

Tin đã đọc

+
+
+
+
+ {{item.title}} +
+
+ +
+
+
+
+
+ \ No newline at end of file diff --git a/src/app/post/read-posts/read-posts.component.scss b/src/app/post/read-posts/read-posts.component.scss new file mode 100644 index 0000000..cad8214 --- /dev/null +++ b/src/app/post/read-posts/read-posts.component.scss @@ -0,0 +1,55 @@ +.container { + display: flex; + justify-content: center; + + .left-panel { + display: flex; + width: 20%; + justify-content: flex-start; + flex-direction: column; + align-items: center; + + .img-group { + display: flex; + align-items: baseline; + .fa-camera { + position: relative; + right: 30px; + } + .profile-img { + width: 150px; + height: 150px; + border-radius: 50%; + margin-bottom: 20px; + } + } + + .link-group { + margin-top: 80px; + + .red { + color: red; + } + } + } + + .right-panel { + border: 1px solid black; + padding: 30px 20px 60px; + .title { + color: #467fd7; + } + } +} +.news-title { + color: black; + text-decoration: none; + font-weight: bold; + &:hover { + text-decoration: underline; + color: black; + } +} +.delete__action { + cursor: pointer; +} diff --git a/src/app/post/read-posts/read-posts.component.spec.ts b/src/app/post/read-posts/read-posts.component.spec.ts new file mode 100644 index 0000000..b2fc3ec --- /dev/null +++ b/src/app/post/read-posts/read-posts.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReadPostsComponent } from './read-posts.component'; + +describe('ReadPostsComponent', () => { + let component: ReadPostsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ReadPostsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ReadPostsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/post/read-posts/read-posts.component.ts b/src/app/post/read-posts/read-posts.component.ts new file mode 100644 index 0000000..f0d83dd --- /dev/null +++ b/src/app/post/read-posts/read-posts.component.ts @@ -0,0 +1,53 @@ +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { MdbPopconfirmRef, MdbPopconfirmService } from "mdb-angular-ui-kit/popconfirm"; +import { PopupConfirmComponent } from 'src/app/profile/popup-confirm/popup-confirm.component'; +import { TokenStorageService } from 'src/app/_service/token-storage.service'; +import { PostService } from '../post.service'; + +@Component({ + selector: 'app-read-posts', + templateUrl: './read-posts.component.html', + styleUrls: ['./read-posts.component.scss'] +}) + + +export class ReadPostsComponent implements OnInit { + currentUser: any; + popconfirmRef: MdbPopconfirmRef | null = null; + read_news!: Array; + data: any; + isExisted = false; + + constructor(private postService: PostService, private router: Router, private tokenStorage: TokenStorageService, private http: HttpClient, private popconfirmService: MdbPopconfirmService) { } + + ngOnInit(): void { + this.currentUser = this.tokenStorage.getUser(); + this.get_data(); + } + + get_data() { + this.postService.get_read_news(this.currentUser.email).subscribe(res => { + this.data = res; + this.read_news = this.data[0]?.posts + this.isExisted = this.read_news.length > 0; + }); + } + + openPopconfirm(event: Event) { + const target = event.target as HTMLElement; + + this.popconfirmRef = this.popconfirmService.open(PopupConfirmComponent, target) + this.popconfirmRef.onConfirm.subscribe(() => { + this.http.delete("http://localhost:3000/user/" + + this.tokenStorage.getUser()['id'] + ).subscribe(() => { + alert("http://localhost:3000/user/" + + this.tokenStorage.getUser()['id']) + this.tokenStorage.signOut(); + this.router.navigate(['home']) + }) + }) + } +}