💄 show messages when no feeds found

Author: marcode24

src/app/core/constants/messages.constant.ts

@@ -0,0 +1,14 @@
+import { IMessage } from "@interfaces/message.interface";
+
+const pathRelative: string = '/assets/svg';
+
+export const messages: IMessage[] = [
+  {
+    message: 'You want to see content here, you have to follow at least one website',
+    imagePath: `${pathRelative}/follow.svg`,
+  },
+  {
+   message: 'Here you can find your news saved',
+   imagePath: `${pathRelative}/saved.svg`,
+  },
+];

src/app/core/interfaces/message.interface.ts

@@ -0,0 +1,4 @@
+export interface IMessage {
+  message: string;
+  imagePath: string;
+}

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

@@ -8,6 +8,8 @@
       <app-card-new></app-card-new>
       <app-card-new></app-card-new>
     </div>
-    <app-news-container [feeds]="feeds" *ngIf="!isLoading" (moreItems)="onScroll()"></app-news-container>
+    <app-no-feeds *ngIf="!isLoading && feeds.length < 1" [messageIndex]="1"></app-no-feeds>
+    <app-news-container [feeds]="feeds" *ngIf="!isLoading && feeds.length > 0" (moreItems)="onScroll()">
+    </app-news-container>
   </div>
 </section>

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" [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,7 +12,9 @@
         <app-card-new></app-card-new>
         <app-card-new></app-card-new>
       </div>
-      <app-news-container [recentFeed]="recentFeed" *ngIf="!isLoading" [feeds]="feeds" (moreItems)="onScroll()">
+      <app-no-feeds *ngIf="!isLoading && feeds.length < 1" [messageIndex]="0"></app-no-feeds>
+      <app-news-container [recentFeed]="recentFeed" *ngIf="!isLoading && feeds.length > 0" [feeds]="feeds"
+        (moreItems)="onScroll()">
       </app-news-container>
     </div>
   </section>

src/app/shared/no-feeds/no-feeds.component.css

@@ -0,0 +1,42 @@
+.no-feeds-container {
+  width: 100%;
+  height: calc(100vh - 100px);
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.no-feeds-container img {
+  max-width: 30rem;
+  border-radius: 1rem;
+}
+
+.no-feeds-container .description {
+  padding: 0 1rem;
+  font-size: 32px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+@media (max-width: 768) {
+  .no-feeds-container img {
+    max-width: 25rem;
+  }
+  .no-feeds-container .description {
+    font-size: 28px;
+    padding: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .no-feeds-container img {
+    max-width: 17rem;
+  }
+  .no-feeds-container .description {
+    font-size: 24px;
+    padding: 0;
+  }
+}

src/app/shared/no-feeds/no-feeds.component.html

@@ -0,0 +1,4 @@
+<div class="no-feeds-container">
+  <img [src]="messageSelected.imagePath" alt="no-feeds">
+  <span class="description">{{messageSelected.message}}</span>
+</div>

src/app/shared/no-feeds/no-feeds.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { messages } from '@constants/messages.constant';
+import { IMessage } from '@interfaces/message.interface';
+
+@Component({
+  selector: 'app-no-feeds',
+  templateUrl: './no-feeds.component.html',
+  styleUrls: ['./no-feeds.component.css']
+})
+export class NoFeedsComponent implements OnInit {
+  @Input() messageIndex: number = 0;
+  public messageSelected: IMessage;
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.messageSelected = messages[+this.messageIndex];
+  }
+
+}

src/app/shared/shared.module.ts

@@ -7,13 +7,15 @@ import { NewsContainerComponent } from './news-container/news-container.componen
 import { ButtonTopComponent } from './button-top/button-top.component';
 import { ToggleThemeComponent } from './toggle-theme/toggle-theme.component';
 import { NewCardRecentComponent } from './new-card-recent/new-card-recent.component';
+import { NoFeedsComponent } from './no-feeds/no-feeds.component';
 
 @NgModule({
   declarations: [
     NewsContainerComponent,
     ButtonTopComponent,
     ToggleThemeComponent,
-    NewCardRecentComponent
+    NewCardRecentComponent,
+    NoFeedsComponent,
   ],
   imports: [
     CommonModule,
@@ -24,6 +26,7 @@ import { NewCardRecentComponent } from './new-card-recent/new-card-recent.compon
     NewsContainerComponent,
     ButtonTopComponent,
     ToggleThemeComponent,
+    NoFeedsComponent
   ]
 })
 export class SharedModule { }