Adding toastr and documentation.

Author: vdamov

angular-fundamentals/Project Defense/Quinder/README.md

@@ -1,27 +1,30 @@
 # Quinder
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.6.
+**Quinder** is a dating application designed for people who are looking for a partner. In **Quinder** you can choose people you like by swiping and if they like you too, you can start a chat.
 
-## Development server
+Project URL - [http://quinder-8e428.firebaseapp.com/](http://quinder-8e428.firebaseapp.com/)
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+**Guest** privileges
 
-## Code scaffolding
+- Can view the home page.
+- Can Login/Register.
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+**User** privileges
 
-## Build
+- Can swipe for a match.
+- Can chat with a matched partner.
+- Can delete their own messages in the chat.
+- Can view their own profile.
+- Can edit their own profile.
+- Can use the side navigation.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+**Admin** privileges
 
-## Running unit tests
+- Can swipe for a match.
+- Can chat with a matched partner.
+- Can delete their own messages in the chat.
+- Has access to the Admin Panel.
+- Can view all profiles.
+- Can edit all profiles.
+- Can use the side navigation.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular-fundamentals/Project Defense/Quinder/angular.json

@@ -23,7 +23,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": [],
             "es5BrowserSupport": true
@@ -133,4 +134,4 @@
     }
   },
   "defaultProject": "Quinder"
-}
+}

angular-fundamentals/Project Defense/Quinder/package-lock.json

@@ -24,6 +24,7 @@
     "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
+    "ngx-toastr": "^10.0.2",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"

angular-fundamentals/Project Defense/Quinder/package.json

@@ -4,9 +4,11 @@
                          class="example-sidenav-container">
     <mat-sidenav #sidenav [fixedInViewport]="mobileQuery.matches" [mode]="mobileQuery.matches ? 'over' : 'side'"
                  fixedTopGap="70" position="end">
+
       <app-sidenav (sidenavToggle)="sidenav.toggle()" *ngIf="authService.isAuthenticated()"></app-sidenav>
     </mat-sidenav>
     <mat-sidenav-content>
+
       <router-outlet></router-outlet>
     </mat-sidenav-content>
   </mat-sidenav-container>

angular-fundamentals/Project Defense/Quinder/src/app/app.component.html

@@ -10,10 +10,13 @@ import {AuthService} from './core/services/auth.service';
 export class AppComponent implements OnDestroy {
   title = 'Quinder';
   mobileQuery: MediaQueryList;
-
   private mobileQueryListener: () => void;
 
-  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, private authService: AuthService) {
+  constructor(
+    changeDetectorRef: ChangeDetectorRef,
+    media: MediaMatcher,
+    public authService: AuthService) {
+
     this.mobileQuery = media.matchMedia('(max-width: 600px)');
     this.mobileQueryListener = () => changeDetectorRef.detectChanges();
     this.mobileQuery.addListener(this.mobileQueryListener);

angular-fundamentals/Project Defense/Quinder/src/app/app.component.ts

@@ -13,6 +13,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {MaterialModule} from './material.module';
+import {ToastrModule} from 'ngx-toastr';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,9 @@ import {MaterialModule} from './material.module';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    ToastrModule.forRoot({
+      positionClass: 'toast-bottom-right',
+    }),
     HttpClientModule,
     ReactiveFormsModule,
     FlexLayoutModule,

angular-fundamentals/Project Defense/Quinder/src/app/app.module.ts

@@ -1,20 +1,24 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {AuthService} from '../../../core/services/auth.service';
 import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+import {ToastrService} from 'ngx-toastr';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
   loginForm: FormGroup;
+  private subscription: Subscription = new Subscription();
 
   constructor(
     private fb: FormBuilder,
     private authService: AuthService,
-    private router: Router
+    private router: Router,
+    private toastr: ToastrService
   ) {
   }
 
@@ -26,10 +30,14 @@ export class LoginComponent implements OnInit {
   }
 
   login() {
-    this.authService.login(this.loginForm.value).subscribe((user) => {
-      console.log(user);
+    this.subscription.add(this.authService.login(this.loginForm.value).subscribe((user) => {
+      this.toastr.success(`Welcome back, ${user.username}!`, 'Logged In');
       this.router.navigate(['match']);
-    });
+    }));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
   }
 
 }

angular-fundamentals/Project Defense/Quinder/src/app/components/authentication/login/login.component.ts

@@ -1,19 +1,21 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {Observable} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {AuthService} from '../../../core/services/auth.service';
 import {Router} from '@angular/router';
+import {ToastrService} from 'ngx-toastr';
 
 
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.css']
 })
-export class RegisterComponent implements OnInit {
+export class RegisterComponent implements OnInit, OnDestroy {
   registerForm: FormGroup;
   filteredOptions: Observable<string[]>;
+  private subscription: Subscription = new Subscription();
   private readonly imagePattern = /^(http:\/\/|https:\/\/).+$/;
   private cities: string[] = [
     'Sofia',
@@ -41,7 +43,8 @@ export class RegisterComponent implements OnInit {
   constructor(
     private fb: FormBuilder,
     private authService: AuthService,
-    private router: Router
+    private router: Router,
+    private toastr: ToastrService
   ) {
   }
 
@@ -66,9 +69,10 @@ export class RegisterComponent implements OnInit {
   }
 
   register() {
-    this.authService.signUp(this.registerForm.value).subscribe(() => {
+    this.subscription.add(this.authService.signUp(this.registerForm.value).subscribe(() => {
+      this.toastr.success(`You can login with your credentials.`, 'Successful registration');
       this.router.navigate(['/login']);
-    });
+    }));
   }
 
   private _filter(value: object): string[] {
@@ -78,4 +82,8 @@ export class RegisterComponent implements OnInit {
     return this.cities.filter(option => option.toLowerCase().includes(filterValue));
   }
 
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
 }

angular-fundamentals/Project Defense/Quinder/src/app/components/authentication/register/register.component.ts

@@ -1,47 +1,50 @@
-import {AfterViewChecked, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewChecked, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {FormBuilder, FormGroup} from '@angular/forms';
 import {MessageService} from '../../../core/services/message.service';
 import {IMessage} from '../../shared/interfaces/message.interface';
 import {IUser} from '../../shared/interfaces/user.interface';
 import {UserService} from '../../../core/services/user.service';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-conversation',
   templateUrl: './conversation.component.html',
   styleUrls: ['./conversation.component.css']
 })
-export class ConversationComponent implements OnInit, AfterViewChecked {
+export class ConversationComponent implements OnInit, AfterViewChecked, OnDestroy {
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
-  private messageForm: FormGroup;
-  private readonly matchId: string;
+  public messageForm: FormGroup;
+  public allMessages: IMessage[];
   private userId: string;
-  private allMessages: IMessage[];
+  private matchId: string;
   private user: IUser;
   private partner: IUser;
+  private subscription: Subscription = new Subscription();
 
   constructor(
     private route: ActivatedRoute,
     private fb: FormBuilder,
     private messageService: MessageService,
     private userService: UserService
   ) {
-    this.matchId = this.route.snapshot.paramMap.get('id');
     this.userId = localStorage.getItem('userId');
-
-    this.userService.getUserById(this.route.snapshot.paramMap.get('partnerId')).subscribe((partner) => this.partner = partner);
-    this.userService.getUserById(this.userId).subscribe((user) => this.user = user);
-
     this.messageForm = fb.group({
       content: [null]
     });
   }
 
   ngOnInit() {
-    this.getAllMessages();
-    this.messageService.refreshNeeded$.subscribe(() => {
+    this.route.params.subscribe((params) => {
+      this.matchId = params.id;
       this.getAllMessages();
     });
+    this.subscription.add(this.userService.getUserById(this.userId).subscribe((user) => this.user = user));
+    this.getAllMessages();
+    this.subscription.add(this.messageService.refreshNeeded$.subscribe(() => {
+      this.getAllMessages();
+    }));
+
   }
 
   ngAfterViewChecked() {
@@ -52,23 +55,29 @@ export class ConversationComponent implements OnInit, AfterViewChecked {
     try {
       this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
     } catch (err) {
+      console.log(err);
     }
   }
 
   getAllMessages() {
-    this.messageService.getAllMessages(this.matchId).subscribe((messages: IMessage[]) => {
+    this.subscription.add(this.userService.getUserById(this.route.snapshot.paramMap.get('partnerId')).subscribe((partner) => this.partner = partner));
+    this.subscription.add(this.messageService.getAllMessages(this.matchId).subscribe((messages: IMessage[]) => {
       this.allMessages = messages;
-    });
+    }));
   }
 
   addMessage() {
     const content = this.messageForm.get('content').value;
-    this.messageService.postMessage(this.matchId, this.userId, content).subscribe(() => {
+    this.subscription.add(this.messageService.postMessage(this.matchId, this.userId, content).subscribe(() => {
       this.messageForm.reset();
-    });
+    }));
   }
 
   deleteMessage(messageId: string) {
-    this.messageService.deleteMessage(messageId).subscribe();
+    this.subscription.add(this.messageService.deleteMessage(messageId).subscribe());
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
   }
 }