Task-8

mocks/data.json

@@ -0,0 +1,83 @@
+{
+  "courses": [
+    {
+      "id": "1",
+      "title": "Video about Denmark",
+      "createdAtDate": "1/1/2019",
+      "durationTime": 120,
+      "topRated": true,
+      "authors": [],
+      "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
+    },
+    {
+      "id": "2",
+      "title": "Video about Canada",
+      "createdAtDate": "5/20/2020",
+      "durationTime": 180,
+      "authors": [
+        "me",
+        "me"
+      ],
+      "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
+    },
+    {
+      "id": "3",
+      "title": "Video about Brazil",
+      "createdAtDate": "12/14/2021",
+      "durationTime": 180,
+      "topRated": false,
+      "authors": [
+        "me",
+        "me",
+        "id3"
+      ],
+      "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
+    },
+    {
+      "id": "4",
+      "title": "Video about Australia",
+      "createdAtDate": "10/20/2020",
+      "durationTime": 132,
+      "topRated": false,
+      "authors": [
+        "me",
+        "me",
+        "id4"
+      ],
+      "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
+    },
+    {
+      "id": "6",
+      "title": "Video about Sweden",
+      "createdAtDate": "1/1/2021",
+      "durationTime": 119,
+      "topRated": true,
+      "authors": [
+        "me",
+        "me",
+        "id6"
+      ],
+      "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
+    },
+    {
+      "title": "New fantastic course !",
+      "createdAtDate": "2020-05-22T21:00:00.000Z",
+      "durationTime": "123",
+      "description": "Asd asd description ",
+      "authors": [
+        "me"
+      ],
+      "id": "951abhdfm"
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "firstName": "Vasya",
+      "lastName": "Pupkin",
+      "login": "vasya",
+      "password": "12345",
+      "token": "randomtoken_1234556789$"
+    }
+  ]
+}

package.json

@@ -7,7 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "mock:server": "json-server --watch mocks/data.json"
   },
   "private": true,
   "dependencies": {
@@ -25,6 +26,7 @@
     "@fortawesome/angular-fontawesome": "^0.6.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "ngx-pagination": "^5.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/add-course-page/add-course-page.component.html

@@ -37,11 +37,13 @@
           </mat-form-field>
           <mat-form-field class="add-course-form-date">
             <mat-label>Date: </mat-label>
-            <input matInput [matDatepicker]="datapicker">
-            <mat-datepicker-toggle matSuffix [for]="datapicker">
-              <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
-            </mat-datepicker-toggle>
-            <mat-datepicker #datapicker></mat-datepicker>
+            <input 
+              matInput
+              [matDatepicker]="picker"
+              (dateInput)="addEvent($event)"
+            >
+            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
           </mat-form-field>
           <mat-form-field class="add-course-form-authors">
             <mat-label>Authors: </mat-label>

src/app/add-course-page/add-course-page.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { HomePageService } from '../core/services/home-page.service';
 import { CourseItemInfo } from '../core/models';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 
 const coursesURL: string = '/courses';
 @Component({
@@ -10,7 +11,6 @@ const coursesURL: string = '/courses';
   styleUrls: ['./add-course-page.component.less']
 })
 export class AddCoursePageComponent {
-
   public title: string;
   public description: string;
   public duration: number;
@@ -19,23 +19,31 @@ export class AddCoursePageComponent {
 
   constructor (
     private router: Router,
-    private homePageService: HomePageService
+    private homePageService: HomePageService,
   ) { }
 
   public cancelClick(): void {
     this.router.navigate([coursesURL]);
   }
 
   public addNewCourse(): void {
-    const sentDataCourse: CourseItemInfo[] = [{
+    const authorsArr: string[] = this.authors.split(', ');
+    const sentDataCourse: CourseItemInfo = {
       title: this.title,
       createdAtDate: this.datapicker,
       durationTime: this.duration,
       description: this.description,
-      authors: this.authors
-    }];
+      authors: authorsArr
+    };
 
-    this.homePageService.createCourse(sentDataCourse);
-    this.router.navigate([coursesURL]);
+    this.homePageService.createCourse(sentDataCourse).subscribe (
+      data => {
+        this.router.navigate([coursesURL]);
+      }
+    );
+  }
+
+  public addEvent(event: MatDatepickerInputEvent<Date>): void {
+    this.datapicker = event.value;
   }
 }

src/app/breadcrumb/breadcrumb.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BreadcrumbComponent } from './breadcrumb.component';
-import { CreateBreadcrumbStringPipe } from '../core/pipes/createBreadcrumbString.pipe';
+import { CreateBreadcrumbStringPipe } from '../core/pipes/create-breadcrumb-string.pipe';
 
 @NgModule({
   declarations: [

src/app/core/core.module.ts

@@ -1,11 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { AuthInterceptor } from './services/auth-interceptors.service';
 
 @NgModule({
   declarations: [],
   exports: [],
-  imports: [
-    CommonModule
-  ]
+  providers: [
+    [
+      {
+        provide: HTTP_INTERCEPTORS,
+        useClass: AuthInterceptor,
+        multi: true
+      }
+    ]
+  ],
+  imports: [ CommonModule ]
 })
 export class CoreModule { }

src/app/core/models/course-item.interface.ts

@@ -1,10 +1,10 @@
 
 export interface CourseItemInfo {
-    id?: number;
+    id?: string;
     title: string;
     createdAtDate: Date;
     durationTime: number;
     description: string;
     topRated?: boolean;
-    authors?: string;
+    authors?: string[];
 }

src/app/core/services/auth-interceptors.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpSentEvent } from '@angular/common/http';
+import { HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+import { CourseItemInfo, UserInfo } from '../models';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  constructor(private authService: AuthService) {
+  }
+
+  public intercept(
+    req: HttpRequest<CourseItemInfo | UserInfo>,
+    next: HttpHandler
+  ): Observable<HttpEvent<HttpSentEvent>> {
+    if (req.headers.get('SkipInterceptor')) {
+      return next.handle(req);
+    }
+
+    if (this.authService.isAuthentificated()) {
+      const clonedRequest: HttpRequest<CourseItemInfo | UserInfo> = req.clone({
+        headers: req.headers.set(
+          'X-CustomAuthHeader',
+          this.authService.getToken()
+        )
+      });
+      return next.handle(clonedRequest);
+    }
+  }
+}

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

@@ -1,35 +1,40 @@
 import { Injectable } from '@angular/core';
-import { fakeUserInfo } from '../mocks/mocked-user';
 import { UserInfo } from '../models';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
-  private userInfo: UserInfo;
+  private userUrl: string = 'http://localhost:3000/users';
 
-  constructor() {
-    this.userInfo = fakeUserInfo;
-  }
+  constructor(
+    private http: HttpClient,
+  ) { }
 
-  public getUserInfo(): UserInfo {
-    return this.userInfo;
+  public getUserInfo(): Observable<UserInfo> {
+    return this.http.get<UserInfo>(this.userUrl);
   }
 
-  public userLogin(sentLogin: string, sentPassword: string): boolean {
-    const {
-      login,
-      password,
-      firstName,
-      lastName,
-      token
-    } = this.userInfo;
-
-    if (sentLogin === login && sentPassword === password && token) {
-      localStorage.setItem('userData', JSON.stringify({ firstName, lastName, token }));
-    }
-    return this.isAuthentificated();
+  public userLogin(sentLogin: string, sentPassword: string): Observable<boolean> {
+    return this.http.get<UserInfo>(this.userUrl, { headers: { SkipInterceptor: 'true' }})
+      .pipe(
+        map(data => {
+          const {
+            login,
+            password,
+            firstName,
+            lastName,
+            token
+          } = data[0];
+          if ((sentLogin === login) && (sentPassword === password) && token) {
+            localStorage.setItem('userData', JSON.stringify({ firstName, lastName, token }));
+          }
+          return this.isAuthentificated();
+        })
+      );
   }
 
   public userLogout(): boolean {
@@ -41,4 +46,9 @@ export class AuthService {
     const userDataFromLS: UserInfo = JSON.parse(localStorage.getItem('userData'));
     return userDataFromLS && !!userDataFromLS.token;
   }
+
+  public getToken(): string {
+    const userDataFromLS: UserInfo = JSON.parse(localStorage.getItem('userData'));
+    return userDataFromLS.token;
+  }
 }