Merge pull request #5 from iptch/feature/20-init-user

#20 init user after login

src/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MsalBroadcastService } from '@azure/msal-angular';
 import { InteractionStatus } from '@azure/msal-browser';
+import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, first, switchMap, takeUntil } from 'rxjs/operators';
 import { AuthService } from './services/auth.service';
-import { Store } from '@ngrx/store';
+import { UserService } from './services/user.service';
 import { loadProfile } from './state/profile/profile.actions';
 
 @Component({
@@ -21,6 +22,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private readonly store: Store,
     private readonly msalBroadcastService: MsalBroadcastService,
     private readonly authService: AuthService,
+    private readonly userService: UserService,
   ) {
     this.store.dispatch(loadProfile());
   }
@@ -32,10 +34,12 @@ export class AppComponent implements OnInit, OnDestroy {
         filter(
           (status: InteractionStatus) => status === InteractionStatus.None,
         ),
+        first(),
+        switchMap(() => this.userService.initUser()),
+        first(),
         takeUntil(this.destroy$),
       )
       .subscribe(() => {
-        // TODO: Create user if not exists via BE call
         this.showApp();
       });
   }

src/app/components/cards/cards.component.html

@@ -50,9 +50,9 @@
         [length]="cardsCount$ | async"
         [pageIndex]="pageInfo.pageIndex"
         [pageSize]="pageInfo.pageSize"
-        [pageSizeOptions]="[5, 10, 20, 50]"
+        [pageSizeOptions]="[6, 12, 24, 48]"
         [showFirstLastButtons]="true"
-        class="p-1"
+        class="!bg-transparent"
         (page)="onPage($event)"
       >
       </mat-paginator>

src/app/services/user.service.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from './../../environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  private readonly usersEndpoint = `${environment.backendUri}/users`;
+
+  constructor(private readonly http: HttpClient) {}
+
+  initUser(): Observable<void> {
+    return this.http.post<void>(this.usersEndpoint + '/init/', {});
+  }
+}

src/app/state/card/card.state.ts

@@ -24,7 +24,7 @@ export const initialCardState: CardState = cardAdapter.getInitialState({
   loading: false,
   error: false,
   showAll: false,
-  pageSize: 20,
+  pageSize: 12,
   pageIndex: 0,
   sort: CardSort.Received,
   ascendingDirection: true,