🐛 debounce time save feeds added

Author: marcode24

src/app/core/services/feed.service.ts

@@ -40,25 +40,32 @@ export class FeedService {
     `${base_url}/feed?skip=${skip}&limit=${limit}` :
     `${base_url}/feed/byUser/subscription?skip=${skip}&limit=${limit}`;
     const headers = !isAuthenticated ? {} : this.headers;
-    return this.http.get<IResponseFeed>(url, headers).pipe(map(resp => this.mapInUserResource(resp.feeds)));
+    return this.http.get<IResponseFeed>(url, headers)
+      .pipe(map(resp => this.mapInUserResource(resp.feeds) as Feed[]));
 
   }
 
   getFeed(id: string): Observable<Feed> {
     const url = `${base_url}/feed/${id}`;
-    return this.http.get<IResponseFeed>(url).pipe(map((resp) => resp.feed));
+    return this.http.get<IResponseFeed>(url)
+      .pipe(map((resp) => this.mapInUserResource(resp.feed) as Feed));
   }
 
   getSavedFeeds(skip = 0, limit = 10): Observable<Feed[]> {
     const url = `${base_url}/feed/byUser/saved?skip=${skip}&limit=${limit}`;
-    return this.http.get<IResponseFeed>(url, this.headers).pipe(map((resp) => this.mapInUserResource(resp.feeds)));
+    return this.http.get<IResponseFeed>(url, this.headers)
+      .pipe(map((resp) => this.mapInUserResource(resp.feeds) as Feed[]));
   }
 
-  private mapInUserResource(feeds: Feed[]): Feed[] {
+  private mapInUserResource(feeds: Feed[] | Feed): Feed[] | Feed {
     const userActive = this.authService.getUserActive;
     if(userActive) {
       const { savedFeeds } = userActive;
-      feeds.map(feed => feed.inUser = savedFeeds?.includes(feed._id));
+      if(Array.isArray(feeds)) {
+        feeds.map(feed => feed.inUser = savedFeeds?.includes(feed._id));
+      } else {
+        feeds.inUser = savedFeeds?.includes(feeds._id);
+      }
     }
     return feeds;
   }

src/app/features/feed/pages/feed/feed.component.css

@@ -54,9 +54,11 @@
   color: var(--font-color-secondary);
 }
 
-.content .details .bookmark {
+.content .details .save {
   font-size: 24px;
   color: var(--primary-color);
+  z-index: 10;
+  cursor: pointer;
 }
 
 .content .details-website {

src/app/features/feed/pages/feed/feed.component.html

@@ -5,9 +5,10 @@
       <span class="title-new">{{feed.title}}</span>
       <div class="details">
         <span class="detail">{{feed.writer}} &bull; {{feed.pubDate | date: 'dd/MM/yyyy, h:mm a' }}</span>
-        <div class="bookmark">
-          <i class="bx bx-bookmark"></i>
-        </div>
+        <a class="save" (click)="saveFeed(feed._id)">
+          <i class="bx bx-bookmark-plus" [class.bxs-bookmark-minus]="feed.inUser" #iconi
+            (mouseover)="changeStyle(iconi, true)" (mouseout)="changeStyle(iconi, false)"></i>
+        </a>
       </div>
       <div class="feed" [innerHTML]="feed.content | html">
       </div>

src/app/features/feed/pages/feed/feed.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-
-import { FeedService } from '@services/feed.service';
+import { debounceTime, forkJoin, Subject } from 'rxjs';
 
 import { Feed } from '@models/feed.model';
-import { forkJoin } from 'rxjs';
+
+import { AuthService } from '@services/auth.service';
+import { FeedService } from '@services/feed.service';
+import { UserService } from '@services/user.service';
 // use encapsulation to styles works correctly from css files
 @Component({
   selector: 'app-feed',
@@ -17,11 +19,20 @@ export class FeedComponent implements OnInit {
   public recentsFeed: Feed[];
   public isLoading: boolean = true;
 
+  private saveFeedSub: Subject<string> = new Subject();
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private feedService: FeedService,
+    private authService: AuthService,
+    private userService: UserService,
     private router: Router
-  ) { }
+  ) {
+    this.saveFeedSub.pipe(
+      debounceTime(250))
+      .subscribe((idFeed) => this.updatePreferences(idFeed)
+    );
+  }
 
   ngOnInit(): void {
     this.activatedRoute.params.subscribe(({ feedID }) => this.loadData(feedID));
@@ -45,4 +56,22 @@ export class FeedComponent implements OnInit {
     this.router.navigate([`/feed/${id}`]);
   }
 
+  saveFeed(id: string) {
+    if(!this.authService.isAuthenticated) {
+      return this.authService.showModalAuth();
+    }
+    this.saveFeedSub.next(id);
+  }
+
+  updatePreferences(idFeed: string): void {
+    this.userService.modifyPreferences(idFeed, 'saved').subscribe(() => {
+      this.feed.inUser = !this.feed.inUser;
+    })
+  }
+
+  changeStyle(element: any, change: boolean): void {
+    if(change) element.classList.add('bxs-bookmark');
+    else element.classList.remove('bxs-bookmark')
+  }
+
 }

src/app/features/home/components/websites-card/websites-card.component.css

@@ -25,7 +25,7 @@
   align-items: center;
 }
 
-.card.card-websites .item > a {
+.card.card-websites a.item {
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;

src/app/features/home/components/websites-card/websites-card.component.html

@@ -9,7 +9,5 @@
       class="btn btn-primary btn-subscribe">{{ (website.inUser) ?
       'Following' : 'Subscribe' }}</button>
   </div>
-  <div class="item">
-    <a routerLink="/websites">Show more...</a>
-  </div>
+  <a class="item" routerLink="/websites">Show more...</a>
 </div>

src/app/features/home/home.component.html

@@ -2,7 +2,7 @@
   <section class="recently">
     <div class="title-wrapper">
       <span class="title-section">Latest news</span>
-      <a class="refresh" *ngIf="!isLoading" (click)="reloadData()">
+      <a class="refresh" [class.loading]="isLoading" *ngIf="getSkip >= 10" (click)="reloadData()">
         <i class="bx bx-refresh"></i>
       </a>
     </div>

src/app/features/home/home.component.ts

@@ -46,9 +46,6 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   resetDataInitial() {
     this.isAuthenticated = true;
-    // fixed it - using service or emitter
-    document.body.scrollTop = 0; // this is for Safari
-    document.documentElement.scrollTop = 0; // for another one
     this.skip = 0;
     this.getDataInitial();
   }
@@ -59,6 +56,9 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   getDataInitial() {
+    document.body.scrollTop = 0; // this is for Safari
+    document.documentElement.scrollTop = 0; // for another one
+    this.skip = 0;
     this.isLoading = true;
     forkJoin({
       feeds: this.getFeeds(),
@@ -86,7 +86,8 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.getFeeds().subscribe(feeds => this.feeds = [...this.feeds, ...feeds]);
   }
 
-
-
+  get getSkip(): number {
+    return this.skip;
+  }
 
 }

src/app/features/home/pages/explore/explore.component.html

@@ -2,7 +2,7 @@
   <section class="recently">
     <div class="title-wrapper">
       <span class="title-section">Explore news</span>
-      <a class="refresh" *ngIf="!isLoading" (click)="reloadData()">
+      <a class="refresh" [class.loading]="isLoading" *ngIf="getSkip >= 10" (click)="reloadData()">
         <i class="bx bx-refresh"></i>
       </a>
     </div>

src/app/features/home/pages/explore/explore.component.ts

@@ -34,6 +34,9 @@ export class ExploreComponent implements OnInit {
   }
 
   getDataInitial() {
+    document.body.scrollTop = 0; // this is for Safari
+    document.documentElement.scrollTop = 0; // for another one
+    this.skip = 0;
     this.isLoading = true;
     forkJoin({
       feeds: this.getFeeds(),
@@ -63,4 +66,8 @@ export class ExploreComponent implements OnInit {
     this.getFeeds().subscribe(feeds => this.feeds = [...this.feeds, ...feeds]);
   }
 
+  get getSkip(): number {
+    return this.skip;
+  }
+
 }