ISSUE-114: Fixed linting errors and did some small refactoring (mathisGarberg#116)

Author: mathisGarberg

package.json

@@ -20,8 +20,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged && npm run lint",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+      "pre-commit": "npm run lint"
     }
   },
   "commitlint": {

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

@@ -6,7 +6,7 @@ describe('AuthService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: AuthService = TestBed.get(AuthService);
+    const service: AuthService = TestBed.inject(AuthService);
     expect(service).toBeTruthy();
   });
 });

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

@@ -22,11 +22,12 @@ export class AuthService {
   token: string;
 
   login(loginContext: LoginContextInterface): Observable<User> {
-    if (
+    const isDefaultUser =
       loginContext.username === defaultUser.username &&
-      loginContext.password === defaultUser.password
-    ) {
-        return of(defaultUser);
+      loginContext.password === defaultUser.password;
+
+    if (isDefaultUser) {
+      return of(defaultUser);
     }
 
     return throwError('Invalid username or password');
@@ -35,8 +36,4 @@ export class AuthService {
   logout(): Observable<boolean> {
     return of(false);
   }
-
-  getToken() {
-    return this.getToken;
-  }
 }

src/app/core/service/theme.service.spec.ts

@@ -6,7 +6,7 @@ describe('ThemeService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: ThemeService = TestBed.get(ThemeService);
+    const service: ThemeService = TestBed.inject(ThemeService);
     expect(service).toBeTruthy();
   });
 });

src/app/data/schema/project.ts

@@ -1,6 +1,7 @@
-export class Project {
+export interface Project {
   id: number;
   link: string;
   title: string;
   thumbnail: string;
+  description: string;
 }

src/app/data/service/json/data.json

@@ -3,32 +3,32 @@
     {
       "id": 1,
       "thumbnail": "https://images.unsplash.com/photo-1520769669658-f07657f5a307?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
-      "title": "Online e-merchant management system - attaching integration with the iOS"
+      "title": "Visit Norway",
+      "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
     },
     {
       "id": 2,
       "thumbnail": "https://images.unsplash.com/photo-1521109762031-b71a005c25b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
-      "title": "Notes on pipeline upgrade"
+      "title": "Visit Norway",
+      "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
     },
     {
       "id": 3,
       "thumbnail": "https://images.unsplash.com/photo-1531504060587-e6811129c0f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
-      "title": "Assessment report for merchant account"
+      "title": "Visit Norway",
+      "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
     },
     {
-      "id": 1,
+      "id": 4,
       "thumbnail": "https://images.unsplash.com/photo-1475066392170-59d55d96fe51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80",
-      "title": "Online e-merchant management system - attaching integration with the iOS"
+      "title": "Visit Norway",
+      "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
     },
     {
-      "id": 2,
+      "id": 5,
       "thumbnail": "https://images.unsplash.com/photo-1518124880777-cf8c82231ffb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1404&q=80",
-      "title": "Notes on pipeline upgrade"
-    },
-    {
-      "id": 3,
-      "thumbnail": "https://images.unsplash.com/photo-1531504060587-e6811129c0f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
-      "title": "Assessment report for merchant account"
+      "title": "Visit Norway",
+      "description": "Kongeriket Norge er et nordisk, europeisk land og en selvstendig stat vest på Den skandinaviske halvøy. Geografisk sett er landet langt og smalt. På den langstrakte kysten mot Nord-Atlanteren befinner Norges vidkjente fjorder seg. Kongeriket Norge omfatter, i tillegg til fastlandet, Jan Mayen og Svalbard"
     }
   ]
 }

src/app/data/service/project.service.ts

@@ -8,15 +8,13 @@ import { JsonApiService } from './json-api.service';
   providedIn: 'root'
 })
 export class ProjectService {
-  constructor (
-    private jsonApiService: JsonApiService
-  ) {}
+  constructor(private jsonApiService: JsonApiService) {}
 
   getAll(): Observable<Array<Project>> {
     return this.jsonApiService.get('/projects');
   }
 
   getSingle(id: number): Observable<Project> {
-    return this.jsonApiService.get('/projects/' + id);
+    return this.jsonApiService.get(`/projects/${id}`);
   }
 }

src/app/modules/about/about.module.ts

@@ -7,10 +7,6 @@ import { AboutComponent } from './page/about/about.component';
 
 @NgModule({
   declarations: [AboutComponent],
-  imports: [
-    AboutRoutingModule,
-
-    SharedModule
-  ]
+  imports: [AboutRoutingModule, SharedModule]
 })
-export class AboutModule { }
+export class AboutModule {}

src/app/modules/auth/auth.module.ts

@@ -1,20 +1,13 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LoginComponent } from './page/login/login.component';
 import { RegisterComponent } from './page/register/register.component';
-import { SharedModule } from '@shared/shared.module';
 
+import { SharedModule } from '@shared/shared.module';
 import { AuthRoutingModule } from './auth.routing';
 
 @NgModule({
-  declarations: [
-    LoginComponent,
-    RegisterComponent
-  ],
-  imports: [
-    CommonModule,
-    AuthRoutingModule,
-    SharedModule
-  ]
+  declarations: [LoginComponent, RegisterComponent],
+  imports: [AuthRoutingModule, SharedModule]
 })
-export class AuthModule { }
+export class AuthModule {}

src/app/modules/auth/page/login/login.component.html

@@ -11,13 +11,13 @@
   <form (ngSubmit)="login()" [formGroup]="loginForm">
       <div class="form-group">
         <label class="d-block">
-          <input type="text" class="form-control" [placeholder]="'Username'" formControlName="username">
+          <input type="text" class="form-control" placeholder="Username" formControlName="username">
           <app-control-messages [control]="f['username']"></app-control-messages>
         </label>
       </div>
       <div class="form-group">
         <label class="d-block">
-          <input type="password" class="form-control" [placeholder]="'Password'" formControlName="password">
+          <input type="password" name="password" autocomplete="on" class="form-control" placeholder="Password" formControlName="password">
           <app-control-messages [control]="f['password']"></app-control-messages>
         </label>
       </div>

src/app/modules/auth/page/login/login.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { tap, delay, finalize, catchError } from 'rxjs/operators';
-import { of } from 'rxjs';
+import { of, Subscription } from 'rxjs';
 
 import { AuthService } from '@core/service/auth.service';
 
@@ -11,11 +11,13 @@ import { AuthService } from '@core/service/auth.service';
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
   error: string;
   isLoading: boolean;
   loginForm: FormGroup;
 
+  private sub = new Subscription();
+
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -35,11 +37,11 @@ export class LoginComponent implements OnInit {
 
     const credentials = this.loginForm.value;
 
-    this.authService
+    this.sub = this.authService
       .login(credentials)
       .pipe(
         delay(1500),
-        tap(user => this.router.navigate(['/dashboard/home'])),
+        tap(() => this.router.navigate(['/dashboard/home'])),
         finalize(() => (this.isLoading = false)),
         catchError(error => of((this.error = error)))
       )
@@ -52,4 +54,8 @@ export class LoginComponent implements OnInit {
       password: ['', Validators.required]
     });
   }
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
 }

src/app/modules/home/page/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -11,21 +11,24 @@ import { MyModalComponent } from '../modal/my-modal.component';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent {
   projects$: Observable<Project[]> = this.projectService.getAll();
 
   constructor(
     private modalService: NgbModal,
     private projectService: ProjectService
   ) {}
 
-  ngOnInit(): void {}
-
   openMyModal() {
     const modalRef = this.modalService.open(MyModalComponent);
     modalRef.componentInstance.id = 1;
-    modalRef.result.then(result => {
-      console.log(result);
-    });
+    modalRef.result.then(
+      result => {
+        console.log(result);
+      },
+      error => {
+        console.log(error);
+      }
+    );
   }
 }

src/app/modules/home/project-resolver.service.ts

@@ -1,5 +1,10 @@
-import { Injectable, } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  Resolve,
+  Router,
+  RouterStateSnapshot
+} from '@angular/router';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -10,17 +15,14 @@ import { ProjectService } from '@data/service/project.service';
   providedIn: 'root'
 })
 export class ProjectResolver implements Resolve<Project> {
-  constructor(
-    private projectService: ProjectService,
-    private router: Router
-  ) { }
+  constructor(private projectService: ProjectService, private router: Router) {}
 
   resolve(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<any> {
-
-    return this.projectService.getSingle(route.params['id'])
-      .pipe(catchError((err) => this.router.navigateByUrl('/')));
+    return this.projectService
+      .getSingle(route.params['id'])
+      .pipe(catchError(() => this.router.navigateByUrl('/')));
   }
 }

src/app/shared/component/control-messages/control-messages.component.ts

@@ -8,18 +8,19 @@ import { ValidationService } from '../../service/validation.service';
   styleUrls: ['./control-messages.component.scss']
 })
 export class ControlMessagesComponent {
-  @Input()
-  public control: FormControl;
-  @Input()
-  public labelName?: string;
+  @Input() control: FormControl;
+  @Input() labelName?: string;
 
   get errorMessage(): boolean {
     for (const propertyName in this.control.errors) {
-      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
+      if (
+        this.control.errors.hasOwnProperty(propertyName) &&
+        this.control.touched
+      ) {
         return ValidationService.getValidationErrorMessage(
           propertyName,
           this.control.errors[propertyName],
-          this.labelName,
+          this.labelName
         );
       }
     }