integrate ngx-toastr & add confirmation messages

package.json

@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.2.0",
+    "@angular/animations": "^10.2.1",
     "@angular/common": "~10.2.0",
     "@angular/compiler": "~10.2.0",
     "@angular/core": "~10.2.0",
@@ -23,6 +23,7 @@
     "bulma": "^0.9.1",
     "firebase": "^8.0.0",
     "ngx-timeago": "^2.0.0",
+    "ngx-toastr": "^13.1.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/_components/note-card/note-card.component.html

@@ -1,4 +1,4 @@
-<span class="createdAt">{{note.createdAt | timeago}}</span>
+<span class="createdAt">{{ note.createdAt | timeago:live }}</span>
 
 <div #card class="note-card">
   <div class="content">
@@ -15,3 +15,4 @@ <h1 class="title" (click)="goToNote('update', note)">{{ note.title }}</h1>
     <i class="fas fa-times"></i>
   </div>
 </div>
+

src/app/_components/note-card/note-card.component.scss

@@ -93,4 +93,6 @@
 
 .createdAt {
   color: #555555;
+  font-size: 12px;
+  text-decoration: underline;
 }

src/app/_components/note-card/note-card.component.ts

@@ -16,7 +16,7 @@ export class NoteCardComponent implements OnInit, AfterViewInit {
   @ViewChild('bodyText') bodyText: ElementRef<HTMLElement>;
   @ViewChild('truncator') truncator: ElementRef<HTMLElement>;
 
-  currentDate = new Date();
+  live = false;
   constructor(
     private router: Router,
     private renderer: Renderer2,

src/app/_pages/note-details/note-details.component.html

@@ -1,6 +1,3 @@
-{{ action }}
-{{ note.id }}
-
 <div class="form-container">
   <form [formGroup]="noteForm" (ngSubmit)="onSubmit()">
     <div class="field">

src/app/_pages/notes-list/notes-list.component.html

@@ -1,5 +1,5 @@
 <div class="main-container">
-  <div class="search-bar">
+  <div *ngIf="notes.length > 0" class="search-bar">
     <div class="control has-icons-left has-icons-right">
       <input
         class="input is-small"
@@ -26,10 +26,16 @@
       (clickDelete)="deleteNote($event)"></app-note-card>
   </div>
 
+  <div *ngIf="notes.length === 0 && !loading" class="no-notes">
+    <img src="assets/images/notes.svg" alt="notes">
+    <p>No note found. <a routerLink="/note">Try to add first one.</a></p>
+  </div>
+
   <button [routerLink]="['/note']" class="button floating-add-button is-primary">
     <span class="icon">
       <i class="fas fa-plus"></i>
     </span>
     <span>Add</span>
   </button>
 </div>
+

src/app/_pages/notes-list/notes-list.component.scss

@@ -19,9 +19,17 @@
 
     font-weight: bold;
   }
+
+  .no-notes {
+    text-align: center;
+
+    img {
+      width: 200px;
+    }
+  }
 }
 
 .notes-list {
-  margin-top: 35px;
+  margin-top: 20px;
 }
 

src/app/_pages/notes-list/notes-list.component.ts

@@ -2,34 +2,55 @@ import { Component, OnInit } from '@angular/core';
 import { NotesService } from '../../_shared/services/notes.service';
 import { Note } from '../../_shared/models/note.model';
 import {Router} from '@angular/router';
+import {ToastrService} from 'ngx-toastr';
 
 @Component({
   selector: 'app-notes-list',
   templateUrl: './notes-list.component.html',
   styleUrls: ['./notes-list.component.scss']
 })
 export class NotesListComponent implements OnInit {
+  loading = false;
   inputSelected = false;
   notes: Note[] = [];
 
   constructor(
     private router: Router,
+    private toast: ToastrService,
     private notesService: NotesService,
   ) { }
 
   ngOnInit(): void {
-    console.log(new Date());
+    this.loading = true;
     if (window.history.state.action !== undefined && window.history.state.result !== undefined) {
       console.log(window.history.state.action, window.history.state.result);
+      switch (window.history.state.result) {
+        case 'success':
+          if (window.history.state.action === 'add') { // add new note
+            this.onSuccess('Note added successfully!', 'Add Note');
+          } else { // update note
+            this.onSuccess('Note updated successfully!', 'Update Note');
+          }
+          break;
+        case 'error':
+          this.onError();
+          break;
+        default:
+          // do nothing
+          break;
+      }
     }
 
     this.notesService.getNotes().subscribe(data => {
+      this.loading = false;
       this.notes = data.map(e => {
         return {
           id: e.payload.doc.id,
           ...e.payload.doc.data()
         } as Note;
       });
+    }, err => {
+      this.onError();
     });
   }
 
@@ -42,7 +63,23 @@ export class NotesListComponent implements OnInit {
   }
 
   deleteNote(noteId: any): void {
-    this.notesService.deleteNote(noteId);
+    if (confirm('Are you sure ?')) {
+      this.notesService.deleteNote(noteId)
+        .then(r => {
+          this.onSuccess('Note deleted successfully!', 'Delete Note');
+        })
+        .catch(err => {
+          this.onError();
+        });
+    }
+  }
+
+  onSuccess(message: string, title: string): void {
+    this.toast.success(message, title);
+  }
+
+  onError(): void {
+    this.toast.error('Sorry, try later!', 'Error');
   }
 }
 

src/app/_shared/services/notes.service.ts

@@ -13,7 +13,7 @@ export class NotesService {
   ) { }
 
   getNotes(): any {
-    return this.firestore.collection(this.notesCollectionName).snapshotChanges();
+    return this.firestore.collection(this.notesCollectionName, ref => ref.orderBy('createdAt', 'desc')).snapshotChanges();
   }
 
   addNote(note: Note): Promise<any> {
@@ -24,9 +24,7 @@ export class NotesService {
     return this.firestore.doc(this.notesCollectionName + '/' + note.id).update(note);
   }
 
-  deleteNote(id: string): any {
-    this.firestore.doc(this.notesCollectionName + '/' + id).delete().then(r => {
-    console.log('note deleted successfully!');
-    });
+  deleteNote(id: string): Promise<any> {
+    return this.firestore.doc(this.notesCollectionName + '/' + id).delete();
   }
 }

src/app/app.module.ts

@@ -16,6 +16,9 @@ import { AngularFireDatabaseModule } from '@angular/fire/database';
 import { environment } from '../environments/environment';
 
 import { TimeagoModule } from 'ngx-timeago';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+
 
 @NgModule({
   declarations: [
@@ -32,7 +35,9 @@ import { TimeagoModule } from 'ngx-timeago';
     ReactiveFormsModule,
     AngularFireModule.initializeApp(environment.firebaseConfig),
     AngularFireDatabaseModule,
-    TimeagoModule.forRoot()
+    TimeagoModule.forRoot(),
+    BrowserAnimationsModule,
+    ToastrModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.scss

@@ -2,3 +2,16 @@
 
 @import './customizedStyle.scss';
 @import '../node_modules/bulma/bulma.sass';
+@import '~ngx-toastr/toastr';
+
+#toast-container>.toast-success {
+  background-color: $light-blue !important;
+}
+
+#toast-container>.toast-error {
+  background-color: #e74c3c !important;
+}
+
+#toast-container>.toast-warning {
+  background-color: $yellow !important;
+}