a bit of refactoring

Author: cornflourblue

package.json

@@ -37,4 +37,4 @@
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.7.0"
  }
-}
+}

src/app/_components/alert.component.html

@@ -1 +1 @@
-<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div>
+<div *ngIf="message" [ngClass]="message.cssClass">{{message.text}}</div>

src/app/_components/alert.component.ts

@@ -3,21 +3,27 @@ import { Subscription } from 'rxjs';
 
 import { AlertService } from '@/_services';
 
-@Component({
- selector: 'alert',
- templateUrl: 'alert.component.html'
-})
-
+@Component({ selector: 'alert', templateUrl: 'alert.component.html' })
 export class AlertComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  message: any;
 
  constructor(private alertService: AlertService) { }
 
  ngOnInit() {
- this.subscription = this.alertService.getMessage().subscribe(message => { 
- this.message = message; 
- });
+ this.subscription = this.alertService.getAlert()
+ .subscribe(message => {
+ switch (message && message.type) {
+ case 'success':
+ message.cssClass = 'alert alert-success';
+ break;
+ case 'error':
+ message.cssClass = 'alert alert-danger';
+ break;
+ }
+
+ this.message = message;
+ });
  }
 
  ngOnDestroy() {

src/app/_guards/index.ts

@@ -20,14 +20,12 @@ export class FakeBackendInterceptor implements HttpInterceptor {
 
  function handleRoute() {
  switch (true) {
- case url.endsWith('/users/register') && method === 'POST':
- return register();
  case url.endsWith('/users/authenticate') && method === 'POST':
  return authenticate();
+ case url.endsWith('/users/register') && method === 'POST':
+ return register();
  case url.endsWith('/users') && method === 'GET':
  return getUsers();
- case url.match(/\/users\/\d+$/) && method === 'GET':
- return getUserById();
  case url.match(/\/users\/\d+$/) && method === 'DELETE':
  return deleteUser();
  default:
@@ -38,6 +36,19 @@ export class FakeBackendInterceptor implements HttpInterceptor {
 
  // route functions
 
+ function authenticate() {
+ const { username, password } = body;
+ const user = users.find(x => x.username === username && x.password === password);
+ if (!user) return error('Username or password is incorrect');
+ return ok({
+ id: user.id,
+ username: user.username,
+ firstName: user.firstName,
+ lastName: user.lastName,
+ token: 'fake-jwt-token'
+ })
+ }
+
  function register() {
  const user = body
 
@@ -52,31 +63,11 @@ export class FakeBackendInterceptor implements HttpInterceptor {
  return ok();
  }
 
- function authenticate() {
- const { username, password } = body;
- const user = users.find(x => x.username === username && x.password === password);
- if (!user) return error('Username or password is incorrect');
- return ok({
- id: user.id,
- username: user.username,
- firstName: user.firstName,
- lastName: user.lastName,
- token: 'fake-jwt-token'
- })
- }
-
  function getUsers() {
  if (!isLoggedIn()) return unauthorized();
  return ok(users);
  }
 
- function getUserById() {
- if (!isLoggedIn()) return unauthorized();
-
- const user = users.find(x => x.id == idFromUrl());
- return ok(user);
- }
-
  function deleteUser() {
  if (!isLoggedIn()) return unauthorized();
 
@@ -91,14 +82,14 @@ export class FakeBackendInterceptor implements HttpInterceptor {
  return of(new HttpResponse({ status: 200, body }))
  }
 
- function unauthorized() {
- return throwError({ status: 401, error: { message: 'Unauthorised' } });
- }
-
  function error(message) {
  return throwError({ error: { message } });
  }
 
+ function unauthorized() {
+ return throwError({ status: 401, error: { message: 'Unauthorised' } });
+ }
+
  function isLoggedIn() {
  return headers.get('Authorization') === 'Bearer fake-jwt-token';
  }
@@ -115,4 +106,4 @@ export const fakeBackendProvider = {
  provide: HTTP_INTERCEPTORS,
  useClass: FakeBackendInterceptor,
  multi: true
-};
+};

src/app/_guards/auth.guard.ts renamed to src/app/_helpers/auth.guard.ts

@@ -1,3 +1,4 @@
-export * from './error.interceptor';
+export * from './auth.guard';
+export * from './error.interceptor';
 export * from './jwt.interceptor';
 export * from './fake-backend';

src/app/_helpers/fake-backend.ts

@@ -5,34 +5,39 @@ import { Observable, Subject } from 'rxjs';
 @Injectable({ providedIn: 'root' })
 export class AlertService {
  private subject = new Subject<any>();
- private keepAfterNavigationChange = false;
+ private keepAfterRouteChange = false;
 
  constructor(private router: Router) {
- // clear alert message on route change
- router.events.subscribe(event => {
+ // clear alert messages on route change unless 'keepAfterRouteChange' flag is true
+ this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
- if (this.keepAfterNavigationChange) {
- // only keep for a single location change
- this.keepAfterNavigationChange = false;
+ if (this.keepAfterRouteChange) {
+ // only keep for a single route change
+ this.keepAfterRouteChange = false;
  } else {
- // clear alert
- this.subject.next();
+ // clear alert message
+ this.clear();
  }
  }
  });
  }
 
- success(message: string, keepAfterNavigationChange = false) {
- this.keepAfterNavigationChange = keepAfterNavigationChange;
+ getAlert(): Observable<any> {
+ return this.subject.asObservable();
+ }
+
+ success(message: string, keepAfterRouteChange = false) {
+ this.keepAfterRouteChange = keepAfterRouteChange;
  this.subject.next({ type: 'success', text: message });
  }
 
- error(message: string, keepAfterNavigationChange = false) {
- this.keepAfterNavigationChange = keepAfterNavigationChange;
+ error(message: string, keepAfterRouteChange = false) {
+ this.keepAfterRouteChange = keepAfterRouteChange;
  this.subject.next({ type: 'error', text: message });
  }
 
- getMessage(): Observable<any> {
- return this.subject.asObservable();
+ clear() {
+ // clear by calling subject.next() without parameters
+ this.subject.next();
  }
 }

src/app/_helpers/index.ts

@@ -19,22 +19,18 @@ export class AuthenticationService {
  return this.currentUserSubject.value;
  }
 
- login(username: string, password: string) {
+ login(username, password) {
  return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
  .pipe(map(user => {
- // login successful if there's a jwt token in the response
- if (user && user.token) {
- // store user details and jwt token in local storage to keep user logged in between page refreshes
- localStorage.setItem('currentUser', JSON.stringify(user));
- this.currentUserSubject.next(user);
- }
-
+ // store user details and jwt token in local storage to keep user logged in between page refreshes
+ localStorage.setItem('currentUser', JSON.stringify(user));
+ this.currentUserSubject.next(user);
  return user;
  }));
  }
 
  logout() {
- // remove user from local storage to log user out
+ // remove user from local storage and set current user to null
  localStorage.removeItem('currentUser');
  this.currentUserSubject.next(null);
  }

src/app/_services/alert.service.ts

@@ -11,18 +11,10 @@ export class UserService {
  return this.http.get<User[]>(`${config.apiUrl}/users`);
  }
 
- getById(id: number) {
- return this.http.get(`${config.apiUrl}/users/${id}`);
- }
-
  register(user: User) {
  return this.http.post(`${config.apiUrl}/users/register`, user);
  }
 
- update(user: User) {
- return this.http.put(`${config.apiUrl}/users/${user.id}`, user);
- }
-
  delete(id: number) {
  return this.http.delete(`${config.apiUrl}/users/${id}`);
  }