Update about the showing the user images

.gitignore

@@ -37,3 +37,5 @@
 /Back/skydiveLogs-api.Domain/bin/Release/net5.0/skydiveLogs-api.Domain.pdb
 /Back/skydiveLogs-api/Data/JumpsDb-log.db
 /Back/skydiveLogs-api/Data/JumpsDb.db
+Back/skydiveLogs-api/Data/JumpsDb.db
+Back/skydiveLogs-api/Data/JumpsDb-log.db

Back/skydiveLogs-api.Infrastructure/UserImageRepository.cs

@@ -26,7 +26,7 @@ namespace skydiveLogs_api.Infrastructure
         {
             return _col.Include(x => x.User)
                        .Query()
-                       .Where(j => j.User == user)
+                       .Where(j => j.User.Id == user.Id)
                        .ToList();
         }
 

Back/skydiveLogs-api/Properties/PublishProfiles/FolderProfile.pubxml.user

@@ -7,6 +7,6 @@ by editing this MSBuild file. In order to learn more about this please visit htt
   <PropertyGroup>
     <TimeStampOfAssociatedLegacyPublishXmlFile />
     <_PublishTargetUrl>C:\Projects\SkydiveLogs\Back\dist</_PublishTargetUrl>
-    <History>True|2021-03-18T15:30:10.7797171Z;True|2021-03-18T14:10:46.8227017+01:00;True|2021-03-15T15:33:07.2658649+01:00;</History>
+    <History>True|2021-03-25T15:58:36.4354616Z;True|2021-03-18T16:30:10.7797171+01:00;True|2021-03-18T14:10:46.8227017+01:00;True|2021-03-15T15:33:07.2658649+01:00;</History>
   </PropertyGroup>
 </Project>

Front/skydivelogs-app/src/app/create-user/create-user.component.ts

@@ -70,17 +70,16 @@ export class CreateUserComponent implements OnInit {
     createUser.lastName = this.formCtrls.lastname.value;
     createUser.email = this.formCtrls.email.value;
 
-    this.authenticationService
+    this.authenticationService.create(createUser)
-      .create(createUser)
+                              .pipe(first())
-      .pipe(first())
+                              .subscribe(
-      .subscribe(
+                                data => {
-        data => {
+                                  this.router.navigate([this.returnUrl]);
-          this.router.navigate([this.returnUrl]);
+                                },
-        },
+                                error => {
-        error => {
+                                  this.error = error;
-          this.error = error;
+                                  this.invalidForm = false;
-          this.invalidForm = false;
+                                }
-        }
+                              );
-      );
   }
 }

Front/skydivelogs-app/src/app/default/default.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { AuthenticationService } from "../../services/authentication.service";
 import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
@@ -7,9 +8,11 @@ import { ServiceComm } from "../../services/service-comm.service";
   styleUrls: ["./default.component.css"]
 })
 export class DefaultComponent implements OnInit {
-  constructor(private serviceComm: ServiceComm) {}
+  constructor(private serviceComm: ServiceComm,
+              private authenticationService: AuthenticationService) {}
 
   ngOnInit() {
     this.serviceComm.UpdatedComponentTitle("Home");
+    this.authenticationService.alwaysLogin();
   }
 }

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html

@@ -22,13 +22,13 @@
 <div *ngIf="resultsLength > 0">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="comment">
-      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Comments</th>
-      <td mat-cell *matCellDef="let element">{{element.comment}}</td>
+      <td mat-cell *matCellDef="let element" style="text-align: left;"><span style="white-space:nowrap;">{{element.comment}}</span></td>
     </ng-container>
 
     <ng-container matColumnDef="data">
-      <th mat-header-cell *matHeaderCellDef>Image</th>
+      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th>
-      <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
+      <td mat-cell *matCellDef="let element" style="text-align: center;"><img src="{{element.data}}" alt="toto" style="width:50%;"></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -42,13 +42,14 @@ export class ListOfImagesComponent implements OnInit {
   }
 
   private getListOfImages() {
-    this.serviceApi.getListOfImages().subscribe((data) => {
+    this.serviceApi.getListOfImages()
-      setTimeout(() => {
+                   .subscribe((data) => {
-        this.dataSourceTable = new MatTableDataSource<ImageResp>(data);
+                      setTimeout(() => {
-        this.dataSourceTable.paginator = this.paginator;
+                        this.dataSourceTable = new MatTableDataSource<ImageResp>(data);
-        this.resultsLength = data.length;
+                        this.dataSourceTable.paginator = this.paginator;
-      }, 500);
+                        this.resultsLength = data.length;
-    });
+                      }, 500);
+                    });
   }
 
   public onFileChanged(fileInput: any) {

Front/skydivelogs-app/src/interceptor/caching.interceptor.ts

@@ -19,21 +19,17 @@ export class CachingInterceptor implements HttpInterceptor {
 
   intercept(req: HttpRequest<any>, next: HttpHandler) {
     const cachedResponse = this.cache.get(req);
-    return cachedResponse
+    return cachedResponse ? Observable.of(cachedResponse) : this.sendRequest(req, next);
-      ? Observable.of(cachedResponse)
-      : this.sendRequest(req, next);
   }
 
-  sendRequest(
+  sendRequest(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    req: HttpRequest<any>,
+    return next.handle(req)
-    next: HttpHandler
+               .pipe(
-  ): Observable<HttpEvent<any>> {
+                  tap(event => {
-    return next.handle(req).pipe(
+                    if (event instanceof HttpResponse) {
-      tap(event => {
+                      this.cache.put(req, event);
-        if (event instanceof HttpResponse) {
+                    }
-          this.cache.put(req, event);
+                  })
-        }
-      })
     );
   }
 }

Front/skydivelogs-app/src/interceptor/error.interceptor.ts

@@ -5,20 +5,25 @@ import { catchError } from 'rxjs/operators';
 
 import { AuthenticationService } from '../services/authentication.service';
 
+
 @Injectable()
 export class ErrorInterceptor implements HttpInterceptor {
+
   constructor(private authenticationService: AuthenticationService) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    return next.handle(request).pipe(catchError(err => {
+    return next.handle(request)
-      if (err.status === 401) {
+               .pipe(
-        // auto logout if 401 response returned from api
+                 catchError(err => {
-        this.authenticationService.logout();
+                    if (err.status === 401) {
-        location.reload(true);
+                      // auto logout if 401 response returned from api
-      }
+                      this.authenticationService.logout();
+                      location.reload();
+                    }
 
-      const error = err.error.message || err.statusText;
+                    const error = err.error.message || err.statusText;
-      return throwError(error);
+                    return throwError(error);
-    }));
+                 })
+    );
   }
 }

Front/skydivelogs-app/src/interceptor/jwt-auth.interceptor.ts

@@ -1,25 +1,19 @@
 import { Injectable } from "@angular/core";
-import {
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from "@angular/common/http";
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptor
-} from "@angular/common/http";
 import { Observable } from "rxjs";
 
 import { AuthenticationService } from "../services/authentication.service";
 
+
 @Injectable()
 export class JwtAuthInterceptor implements HttpInterceptor {
   
   constructor(private authenticationService: AuthenticationService) {}
 
-  intercept(
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    request: HttpRequest<any>,
-    next: HttpHandler
-  ): Observable<HttpEvent<any>> {
     // add authorization header with basic auth credentials if available
     const currentUser = this.authenticationService.currentUserValue;
+    
     if (currentUser && currentUser.token) {
       request = request.clone({
         setHeaders: {

Front/skydivelogs-app/src/services/authentication.service.ts

@@ -20,8 +20,6 @@ export class AuthenticationService extends BaseService {
       JSON.parse(localStorage.getItem("currentUser"))
     );
     this.currentUser = this.currentUserSubject.asObservable();
-
-    this.alwaysLogin();
   }
 
   public get currentUserValue(): User {
@@ -71,13 +69,13 @@ export class AuthenticationService extends BaseService {
     }
   }
 
-  private alwaysLogin() {
+  public alwaysLogin() {
-    return this.http.get(`${this.apiUrl}/User/AlwaysLogin`, {
+    this.http.get(`${this.apiUrl}/User/AlwaysLogin`, 
-      headers: this.headers
+                  { headers: this.headers })
-    }).subscribe();
+             .subscribe(data => { console.log(data); });
   }
 
-  logout() {
+  public logout() {
     localStorage.removeItem("currentUser");
     this.currentUserSubject.next(null);
   }

Front/skydivelogs-app/src/services/image.service.ts

@@ -25,10 +25,11 @@ export class ImageService extends BaseService {
       data: dataImg,
     };
 
-    this.http
+    this.http.post(`${this.apiUrl}/Image`, 
-      .post(`${this.apiUrl}/Image`, bodyNewImage, {
+                   bodyNewImage, 
-        headers: this.headers,
+                   { headers: this.headers })
-      })
+              .subscribe(
-      .subscribe((data) => console.log(data));
+                error => { console.error(error); }
+              );
   }
 }