#8 - basically implement view read news

db.json

@@ -123,5 +123,22 @@
       "content": "Rất xinh đẹp tuyệt vời ạ 🥰",
       "id": 14
     }
+  ],
+  "read-posts": [
+    {
+      "email": "[email protected]",
+      "posts":[
+        {"title":"title1","link":"demo link"},
+        {"title":"title2","link":"demo link1"}
+      ],
+      "id":1
+    },
+    {
+      "email": "[email protected]",
+      "posts":[
+        {"title":"title2","link":"demo link2"}
+      ],
+      "id":2
+    }
   ]
 }

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/",

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;
 }

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]},

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;

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({

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,

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<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")));
+  }
 }

src/app/post/read-posts/read-posts.component.html

@@ -0,0 +1,32 @@
+<app-navbar></app-navbar>
+<div class="container mt-5">
+    <div class="left-panel ">
+        <div class="img-group">
+            <img src="https://mdbootstrap.com/img/new/standard/city/047.webp" class="profile-img " alt="" />
+            <i class="fas fa-camera fa-lg"><a href=""></a></i>
+        </div>
+        <div><strong>{{currentUser.name}}</strong></div>
+        <div class="link-group">
+            <div><a href="/change-password">Thay đổi mật khẩu</a></div>
+            <div><a href="/read-posts">Tin đã lưu</a></div>
+            <div><a href="#">Tin đã đọc</a></div>
+            <div><a (click)="openPopconfirm($event)" class="red">Xóa tài khoản</a></div>
+        </div>
+    </div>
+    <div class="right-panel w-50 ">
+        <div class="row border-bottom">
+            <h1 class="title">Tin đã đọc</h1>
+        </div>
+        <div *ngIf="isExisted">
+            <div class="row mt-2" *ngFor="let item of read_news">
+                <div class="col-md-11">
+                    <a href="{{item.link}}" class="news-title">{{item.title}}</a>
+                </div>
+                <div class="col-md-1">
+                    <i class="fas fa-trash text-danger delete__action"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<app-footer></app-footer>

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;
+}

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<ReadPostsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ReadPostsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReadPostsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<PopupConfirmComponent> | null = null;
+  read_news!: Array<any>;
+  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<any>("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'])
+      })
+    })
+  }
+}