Merge pull request #28 from marcode24/dev

✨ Update models and components with additional properties for feeds a…

Author: marcode24

src/app/core/components/sidebar/sidebar.component.css

@@ -8,6 +8,7 @@ nav {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  max-width: 260px;
 }
 
 nav .logo-details {
@@ -138,7 +139,7 @@ nav li i {
 }
 
 nav .profile {
-  width: 100%;
+  width: -webkit-fill-available;
   padding: 0.2rem;
   display: flex;
   flex-grow: 1;
@@ -274,6 +275,7 @@ nav .profile {
 
 @media (max-width: 768px) {
   nav {
+    max-width: 100%;
     width: 100vw !important;
     height: auto;
     bottom: 0;

src/app/core/models/feed.model.ts

@@ -13,5 +13,6 @@ export class Feed {
     public likes: number,
     public inUser?: boolean,
     public liked?: boolean,
+    public readingTime?: number,
   ) {}
 }

src/app/core/models/website.model.ts

@@ -7,5 +7,6 @@ export class Website {
     public linkFeed: string,
     public _id: string,
     public inUser?: boolean,
+    public feedCount?: number,
   ) {}
 }

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

@@ -20,8 +20,9 @@ export class WebsiteService {
   constructor(private http: HttpClient,
     private authService: AuthService) { }
 
-  getWebsites(all = false, skip = 0, limit = 5): Observable<Website[]> {
-    const url = `${base_url}/website?all=${all}&limit=${limit}&skip=${skip}`;
+  getWebsites({count = false, all = false, skip = 0, limit = 5}): Observable<Website[]> {
+    const url =
+      `${base_url}/website?all=${all}&limit=${limit}&skip=${skip}&count=${count}`;
     return this.http.get<IResponseWebsite>(url).pipe(map(resp => {
       const { websites } = resp;
       const userActive = this.authService.getUserActive();

src/app/features/features.component.css

@@ -2,7 +2,7 @@
   max-width: 1280px;
   margin: 0 auto;
   display: grid;
-  grid-template-columns: minmax(80px, 20%) 1fr;
+  grid-template-columns: minmax(80px, 260px) 1fr;
 }
 
 .wrapper .container {

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

@@ -9,26 +9,32 @@
   flex-direction: column;
 }
 
-.card.card-websites .card-title {
+.card-title,
+.card.card-websites .item {
+  padding: 0.6rem 1rem;
+}
+
+.card-title {
   font-size: 20px;
   font-weight: bold;
-  padding: 0.6rem 0.8rem;
 }
 
 .card.card-websites .item {
   display: flex;
-  padding: 0.5rem 0.8rem;
   gap: 10px;
   transition: 0.4s;
-  min-height: 65px;
+  min-height: 60px;
   align-items: center;
+  justify-content: space-between;
 }
 
 .card.card-websites a.item {
   text-decoration: none;
-  font-size: 14px;
+  font-size: 18px;
   font-weight: 500;
   color: var(--secondary-color);
+  border-top: var(--border);
+  justify-content: center;
 }
 
 .card.card-websites .item:last-child {
@@ -38,23 +44,32 @@
 .card.card-websites .item:hover,
 .card.card-websites .more:hover {
   background-color: var(--bg-hover);
-  cursor: pointer;
 }
 
-.card.card-websites .item .website-name {
+.website-name {
   flex-grow: 1;
   font-size: 16px;
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 120px;
+}
+
+.total-feeds {
+  font-size: 14px;
+  color: var(--font-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
 }
 
 .card.card-websites .item figure {
-  width: 3.5rem;
-  height: 3.5rem;
-  min-width: 3.5rem;
-  min-height: 3.5rem;
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
   border-radius: 50%;
 }
 
@@ -64,3 +79,9 @@
   height: 100%;
   border-radius: inherit;
 }
+
+.name-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

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

@@ -4,7 +4,10 @@
     <figure *ngIf="website.image && website.image.length > 0">
       <img [src]="website.image" alt="website-image" onerror="this.src='/assets/images/not-found-image.jpg'">
     </figure>
-    <span class="website-name">{{website.name}}</span>
+    <div class="name-wrapper">
+      <span class="website-name">{{website.name}}</span>
+      <span class="total-feeds">{{website.feedCount}} {{ (website.feedCount && website.feedCount > 1) ? 'feeds' : 'feed' }}</span>
+    </div>
     <button [class.btn-following]="website.inUser" (click)="subscribeWebsite(website._id)"
       class="btn btn-primary btn-subscribe">{{ (website.inUser) ?
       'Following' : 'Subscribe' }}</button>

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

@@ -29,8 +29,7 @@ export class WebsitesCardComponent implements OnInit {
     }
     this.userService.modifyPreferences(id, 'subscription').subscribe(() => {
       this.websites.map(website => {
-        if( website._id === id)
-          website.inUser = !website.inUser;
+        if( website._id === id) website.inUser = !website.inUser;
       });
     });
   }

src/app/features/home/home.component.css

@@ -1,53 +0,0 @@
-.home-section {
-  display: grid;
-  grid-template-columns: 1fr minmax(300px, 20%);
-}
-
-.home-section .websites {
-  width: 300px;
-  opacity: 1;
-}
-
-.skeletons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.news-container {
-  margin: 1rem;
-}
-
-.top-search {
-  display: flex;
-  align-items: center;
-  width: inherit;
-  min-height: 70px;
-}
-
-.top-search app-search-input {
-  width: 100%;
-}
-
-.websites-wrapper {
-  position: sticky;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-@media (max-width: 1200px) {
-  .home-section .recently .news {
-    grid-template-columns: repeat(1, 100%);
-  }
-}
-
-@media (max-width: 768px) {
-  .home-section {
-    grid-template-columns: 100%;
-  }
-  .home-section .websites {
-    opacity: 0;
-  }
-}

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

@@ -63,7 +63,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.isLoading = true;
     forkJoin({
       feeds: this.getFeeds(),
-      websites: this.websiteService.getWebsites(),
+      websites: this.websiteService.getWebsites({ count: true })
     }).subscribe({
       next: ({ feeds, websites }) => {
         this.feeds = feeds;

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

@@ -1,25 +0,0 @@
-.home-section {
-  display: grid;
-  grid-template-columns: auto 300px;
-  gap: 0.5rem;
-}
-
-.home-section .websites {
-  width: 300px;
-  opacity: 1;
-}
-
-@media (max-width: 1200px) {
-  .home-section .recently .news {
-    grid-template-columns: repeat(1, 100%);
-  }
-}
-
-@media (max-width: 768px) {
-  .home-section {
-    grid-template-columns: 100%;
-  }
-  .home-section .websites {
-    opacity: 0;
-  }
-}

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" [class.loading]="isLoading" *ngIf="getSkip >= 10" (click)="reloadData()">
+      <a class="refresh" [class.loading]="isLoading" *ngIf="getSkip >= 10 || feeds.length < 1" (click)="reloadData()">
         <i class="bx bx-refresh"></i>
       </a>
     </div>
@@ -12,11 +12,19 @@
         <app-card-new></app-card-new>
         <app-card-new></app-card-new>
       </div>
-      <app-news-container *ngIf="!isLoading" [feeds]="feeds" (moreItems)="onScroll()"></app-news-container>
+      <app-no-feeds *ngIf="!isLoading && feeds.length < 1" [messageIndex]="0"></app-no-feeds>
+      <app-news-container *ngIf="!isLoading && feeds.length > 0" [feeds]="feeds"
+        (moreItems)="onScroll()">
+      </app-news-container>
     </div>
   </section>
   <section class="websites">
-    <app-card-websites-a *ngIf="isLoading"></app-card-websites-a>
-    <app-websites-card *ngIf="!isLoading" [websites]="websites"></app-websites-card>
+    <div class="websites-wrapper">
+      <div class="top-search">
+        <app-search-input (search)="search($event)"></app-search-input>
+      </div>
+      <app-card-websites-a *ngIf="isLoading"></app-card-websites-a>
+      <app-websites-card *ngIf="!isLoading" [websites]="websites"></app-websites-card>
+    </div>
   </section>
-</div>
+</div>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { Observable, Subject, debounceTime, forkJoin, map } from 'rxjs';
 
@@ -25,7 +26,8 @@ export class ExploreComponent implements OnInit {
 
   constructor(
     private websiteService: WebsiteService,
-    private feedService: FeedService
+    private feedService: FeedService,
+    private router: Router
   ) {
     this.loadingNews.pipe(debounceTime(2000)).subscribe(() => this.getDataInitial());
   }
@@ -41,7 +43,7 @@ export class ExploreComponent implements OnInit {
     this.isLoading = true;
     forkJoin({
       feeds: this.getFeeds(),
-      websites: this.websiteService.getWebsites(),
+      websites: this.websiteService.getWebsites({}),
     }).subscribe({
       next: ({ feeds, websites }) => {
         this.feeds = feeds;
@@ -72,4 +74,8 @@ export class ExploreComponent implements OnInit {
     return this.skip;
   }
 
+  search(value: string): void {
+    this.router.navigate(['/search'], { queryParams: { q: value } });
+  }
+
 }

src/app/features/website/pages/websites/websites.component.ts

@@ -44,7 +44,7 @@ export class WebsitesComponent implements OnInit, OnDestroy {
   }
 
   getWebsites(): void {
-    this.websiteService.getWebsites(true).subscribe({
+    this.websiteService.getWebsites({ all: true }).subscribe({
       next: (websites) => {
         this.websites = websites;
       },

src/app/shared/news-container/news-container.component.html

@@ -14,7 +14,7 @@
       <div class="details">
         <p class="date"> {{ feed.pubDate | date: 'dd-MM-yyyy' }} </p>
         <p class="bull">&bull;</p>
-        <p class="read"> {{ 10 }} min </p>
+        <p class="read"> {{ feed.readingTime! <= 0 ? 1 : feed.readingTime }} min read</p>
       </div>
       <div class="options">
         <div class="option default">

src/app/shared/search-input/search-input.component.css

@@ -16,11 +16,12 @@ input.icon {
 }
 
 input.icon ~ i {
-  top: 15px;
+  top: 12px;
   left: 20px;
   position: absolute;
   color: #71767b;
   transition: 0.2s;
+  font-size: 22px;
 }
 
 input.icon:focus ~ i {