Merge pull request #43 from hadesdday/vanhieu

#8 - implemented view read posts Hoàn thành chức năng xem danh sách bài viết đã xem
hadesdday · Aug 21, 2022 · aa72a42 · aa72a42
2 parents efec4fc + f7a72f4
commit aa72a42
Show file tree

Hide file tree

Showing 15 changed files with 337 additions and 66 deletions.
diff --git a/db.json b/db.json
@@ -125,5 +125,31 @@
       "id": 14
     }
   ],
-  "saved-post": []
+  "saved-post": [],
+  "read-posts": [
+    {
+      "email": "[email protected]",
+      "posts": [
+        {
+          "title": "\bÔ tô khách chao đảo lao xuống ruộng, hành khách la hét cầu cứu",
+          "link": "bai-viet/o-to-khach-chao-dao-lao-xuong-ruong-hanh-khach-la-het-cau-cuu-2051917.html"
+        },
+        {
+          "title": "Lời khai của người phụ nữ giả danh bác sĩ bắt cóc trẻ sơ sinh",
+          "link": "bai-viet/loi-khai-cua-nguoi-phu-nu-gia-danh-bac-si-bat-coc-tre-so-sinh-2051928.html"
+        }
+      ],
+      "id": 1
+    },
+    {
+      "email": "[email protected]",
+      "posts": [
+        {
+          "title": "title2",
+          "link": "demo link2"
+        }
+      ],
+      "id": 2
+    }
+  ]
 }
diff --git 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
@@ -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;
 }
diff --git 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
@@ -1,13 +1,13 @@
-import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
-import {DomSanitizer, SafeHtml, Title} from '@angular/platform-browser';
-import {ActivatedRoute} from '@angular/router';
-import {load} from 'cheerio';
-import {Article, ArticleResponse} from 'src/app/_model/post.model';
-import {PostService} from '../post.service';
-import {Comment} from 'src/app/_model/comment.model';
-import {ToastrService} from 'ngx-toastr';
-import {TokenStorageService} from "../../_service/token-storage.service";
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { DomSanitizer, SafeHtml, Title } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+import { load } from 'cheerio';
+import { Article, ArticleResponse, ReadPostResponse } from 'src/app/_model/post.model';
+import { PostService } from '../post.service';
+import { Comment } from 'src/app/_model/comment.model';
+import { ToastrService } from 'ngx-toastr';
+import { TokenStorageService } from "../../_service/token-storage.service";
 
 @Component({
   selector: 'app-post-details',
@@ -25,11 +25,14 @@ export class PostDetailsComponent implements OnInit {
   posts_list!: Article[];
   isLoading = true;
   post_title!: string;
-  isSignin!:boolean;
+  isSignin!: boolean;
+
+  temp!: any;
+
   constructor(private formBuilder: FormBuilder, private postService: PostService, private domSanitizer: DomSanitizer, private activatedRoute: ActivatedRoute, private titleService: Title, private toastService: ToastrService, private tokenStorage: TokenStorageService) {
     this.comments_list = [];
     this.posts_list = [];
-    this.isSignin=this.tokenStorage.isSignin()
+    this.isSignin = this.tokenStorage.isSignin()
   }
 
   ngOnInit(): void {
@@ -46,7 +49,7 @@ export class PostDetailsComponent implements OnInit {
     });
     var loggedUser = JSON.parse(localStorage.getItem('auth-user') || '{}');
     if (loggedUser) {
-      const {email, name} = loggedUser;
+      const { email, name } = loggedUser;
       this.postCommentForm.get("email")?.setValue(email);
       this.postCommentForm.get("fullname")?.setValue(name);
     }
@@ -79,16 +82,45 @@ export class PostDetailsComponent implements OnInit {
         $dom("head").append('<link rel="stylesheet" href="/assets/css/style.css">');
         this.post_details = this.sanitize($dom.html());
         this.get_post_list(this.title);
+
+        var loggedUser = JSON.parse(localStorage.getItem('auth-user') || '{}');
+        if (loggedUser) {
+          const { email } = loggedUser;
+          this.postService.get_read_news(email).subscribe((res: ReadPostResponse) => {
+            this.temp = res;
+            var read_post = this.temp[0];
+            var currentPost = {
+              "title": this.post_title,
+              "link": `bai-viet/${this.post_url}`
+            };
+            var existed = read_post.posts.find((x: any) => x?.link === currentPost.link);
+            if (existed === undefined) {
+              read_post.posts.push(currentPost);
+              this.save_read_post(read_post);
+            }
+          });
+        }
       });
 
       var dashed = this.post_url.split("-");
       var id = dashed[dashed.length - 1].replace(".html", "");
       this.post_id = Number(id);
       this.get_comment_by_post_id(this.post_id);
       this.postCommentForm.get("article_id")?.setValue(this.post_id);
+
     });
   }
 
+  save_read_post(post: ReadPostResponse) {
+    var loggedUser = JSON.parse(localStorage.getItem('auth-user') || '{}');
+    if (loggedUser) {
+      const { email } = loggedUser;
+      post.email = email;
+      this.postService.save_read_post(post).subscribe(res => {
+      });
+    }
+  }
+
   get_comment_by_post_id(id: number) {
     this.postService.get_comments_by_post_id(id).subscribe(res => {
       this.comments_list = res;
@@ -140,7 +172,7 @@ export class PostDetailsComponent implements OnInit {
       this.postCommentForm.reset();
       var loggedUser = JSON.parse(localStorage.getItem('auth-user') || '{}');
       if (loggedUser) {
-        const {email, name} = loggedUser;
+        const { email, name } = loggedUser;
         this.postCommentForm.get("email")?.setValue(email);
         this.postCommentForm.get("fullname")?.setValue(name);
       }
@@ -166,6 +198,6 @@ export class PostDetailsComponent implements OnInit {
 
   save_post() {
     let user = this.tokenStorage.getUser();
-    this.postService.save_post(user.id, this.post_id + "", this.post_title,this.post_url)
+    this.postService.save_post(user.id, this.post_id + "", this.post_title, this.post_url)
   }
 }
diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts
@@ -1,16 +1,15 @@
-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 {SearchResultComponent} from './search-result/search-result.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MdbLazyLoadingModule } from 'mdb-angular-ui-kit/lazy-loading';
+import { PostDetailsComponent } from './post-details/post-details.component';
+import { PostListComponent } from './post-list/post-list.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: '**', component: NotfoundComponent}
 
 ];
 

diff --git a/src/app/post/post.module.ts b/src/app/post/post.module.ts
@@ -3,18 +3,18 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MdbLazyLoadingModule } from 'code/mdb-angular-ui-kit/lazy-loading';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { SavedPostComponent } from '../profile/saved-post/saved-post.component';
 import { SharedModule } from '../shared/shared.module';
 import { AdvertisementComponent } from './advertisement/advertisement.component';
+import { PostCommentComponent } from './post-comment/post-comment.component';
 import { PostDetailsComponent } from './post-details/post-details.component';
+import { NewestPostComponent } from './post-list/newest-post/newest-post.component';
 import { PostListComponent } from './post-list/post-list.component';
 import { PostRoutingModule } from './post-routing.module';
 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 { SavedPostComponent } from '../profile/saved-post/saved-post.component';
 @NgModule({
-  declarations: [SearchResultComponent, PostListComponent,  AdvertisementComponent, PostDetailsComponent, PostCommentComponent, NewestPostComponent, SavedPostComponent],
+  declarations: [SearchResultComponent, PostListComponent, AdvertisementComponent, PostDetailsComponent, PostCommentComponent, NewestPostComponent, SavedPostComponent],
   imports: [
     CommonModule,
     PostRoutingModule,

diff --git a/src/app/post/post.service.ts b/src/app/post/post.service.ts
@@ -1,10 +1,10 @@
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {Injectable} from '@angular/core';
-import {catchError} from 'rxjs';
-import {API_AUTH, API_URL} from '../_api/apiURL';
-import {ArticleResponse} from '../_model/post.model';
-import {Comment} from '../_model/comment.model';
-import {CommonService} from '../_service/common.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError } from 'rxjs';
+import { API_AUTH, API_URL } from '../_api/apiURL';
+import { ArticleResponse, ReadPostResponse } from '../_model/post.model';
+import { Comment } from '../_model/comment.model';
+import { CommonService } from '../_service/common.service';
 
 @Injectable({
   providedIn: 'root'
@@ -21,7 +21,7 @@ export class PostService {
 
   search_article_by_keyword(keyword: string) {
     const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
-    return this.http.get(`${API_URL.SEARCH}${keyword}`, {headers, responseType: 'text'})
+    return this.http.get(`${API_URL.SEARCH}${keyword}`, { headers, responseType: 'text' })
       .pipe(catchError(err => this.commonService.handleError(err, "Lỗi khi tìm kiếm " + keyword)));
   }
 
@@ -37,10 +37,20 @@ export class PostService {
 
   get_news_details(url: string) {
     const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
-    return this.http.get(`${API_URL.ARTICLE_DETAILS}${url}`, {headers, responseType: 'text'})
+    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<ReadPostResponse>(`${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")));
+  }
+
   save_post(id_user: string, id_post: string, title: string, link: string) {
     this.http.get<any>(API_URL.ARTICLE_SAVED).subscribe(res => {
       const post = res.find((a: any) => {

diff --git a/src/app/profile/profile-routing.module.ts b/src/app/profile/profile-routing.module.ts
@@ -1,12 +1,14 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {ProfileComponent} from "./profile/profile.component";
-import {SavedPostComponent} from "./saved-post/saved-post.component";
-import {AuthGuard} from "../_guard/auth.guard";
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProfileComponent } from "./profile/profile.component";
+import { SavedPostComponent } from "./saved-post/saved-post.component";
+import { AuthGuard } from "../_guard/auth.guard";
+import { ReadPostsComponent } from './read-posts/read-posts.component';
 
 const routes: Routes = [
-  {path: 'profile', component: ProfileComponent},
-  {path: 'saved-post', component: SavedPostComponent, canActivate: [AuthGuard]}
+  { path: 'profile', component: ProfileComponent },
+  { path: 'saved-post', component: SavedPostComponent, canActivate: [AuthGuard] },
+  { path: 'read-posts', component: ReadPostsComponent, canActivate: [AuthGuard] }
 ];
 
 @NgModule({

diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts
@@ -3,22 +3,24 @@ import { CommonModule } from '@angular/common';
 
 import { ProfileRoutingModule } from './profile-routing.module';
 import { ProfileComponent } from './profile/profile.component';
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { SharedModule } from '../shared/shared.module';
 import { PopupConfirmComponent } from './popup-confirm/popup-confirm.component';
+import { ReadPostsComponent } from './read-posts/read-posts.component';
 
 
 @NgModule({
   declarations: [
     ProfileComponent,
-    PopupConfirmComponent
+    PopupConfirmComponent,
+    ReadPostsComponent
   ],
-    imports: [
-        CommonModule,
-        ProfileRoutingModule,
-        ReactiveFormsModule,
-      FormsModule,
-        SharedModule
-    ]
+  imports: [
+    CommonModule,
+    ProfileRoutingModule,
+    ReactiveFormsModule,
+    FormsModule,
+    SharedModule
+  ]
 })
 export class ProfileModule { }
diff --git a/src/app/profile/profile/profile.component.html b/src/app/profile/profile/profile.component.html
@@ -9,7 +9,7 @@
     <div class="link-group">
       <div><a href="/change-password">Thay đổi mật khẩu</a></div>
       <div><a href="/saved-post">Tin đã lưu</a></div>
-      <div><a href="#">Tin đã đọc</a></div>
+      <div><a href="/read-posts">Tin đã đọc</a></div>
       <div><a (click)="openPopconfirm($event)" class="red">Xóa tài khoản</a></div>
     </div>
   </div>