fixing all logs showing when user is unauthenticated (#127)

* fixing flights skip take order by

* fixing flights skip take order by

* fixing flights skip take order by

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "2.0.2",
+  "version": "2.1.3",
   "description": "",
   "author": "",
   "private": true,

api/src/interfaces/customJwtPayload.interface.ts

@@ -1,5 +0,0 @@
-import { JwtPayload } from "jwt-decode";
-
-export interface CustomJwtPayload extends JwtPayload {
-  permissions: string[];
-}

api/src/log/log.controller.spec.ts

@@ -14,6 +14,7 @@ describe('LogController', () => {
     delete: jest.fn(),
     find: jest.fn(),
     findLogsWithCount: jest.fn(),
+    findLogsWithTracks: jest.fn(),
     update: jest.fn()
   }
 
@@ -38,18 +39,41 @@ describe('LogController', () => {
   })
 
   it('find => should find a log by id', async () => {
-    const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const log = {
-
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: []
     } as LogEntity
 
     jest.spyOn(mockLogService, 'find').mockReturnValue(log);
 
-    const result = await controller.find(id);
+    const result = await controller.find(log.id);
 
     expect(result).toEqual(log);
     expect(mockLogService.find).toHaveBeenCalled();
-    expect(mockLogService.find).toHaveBeenCalledWith(id);
+    expect(mockLogService.find).toHaveBeenCalledWith(log.id);
   })
 
   it('find => should fail to find a log by id', async () => {
@@ -69,18 +93,60 @@ describe('LogController', () => {
     }
   })
 
-  it('findLogsWithCount => should find all logs', async () => {
-    const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
+  it('findLogsWithCount => should find logs with count', async () => {
     const log = {
-
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: [
+        {
+          "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+          "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+          "order": 1
+        },
+        {
+          "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+          "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+          "order": 2
+        }
+      ]
     } as LogEntity;
     const logs = [log]
+    const count = 1
+    const morePages = false
 
-    jest.spyOn(mockLogService, 'findLogsWithCount').mockReturnValue(logs);
+    jest.spyOn(mockLogService, 'findLogsWithCount').mockReturnValue({
+      entities: logs, 
+      total: count, 
+      hasNextPage: morePages
+    });
 
-    const result = await controller.findLogsWithCount();
+    const {entities, total, hasNextPage} = await controller.findLogsWithCount();
 
-    expect(result).toEqual(logs);
+    expect(entities).toEqual(logs);
+    expect(total).toEqual(count);
+    expect(hasNextPage).toEqual(morePages)
     expect(mockLogService.findLogsWithCount).toHaveBeenCalled();
   })
 
@@ -98,13 +164,130 @@ describe('LogController', () => {
     }
   })
 
+  it('findLogsWithTracks => should find logs with tracks', async () => {
+    const log = {
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: [
+        {
+            "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+            "order": 1
+        },
+        {
+            "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+            "order": 2
+        }
+      ]
+    } as LogEntity;
+    const logs = [log]
+    const count = 1
+    const morePages = false
+
+    jest.spyOn(mockLogService, 'findLogsWithTracks').mockReturnValue({
+      entities: logs, 
+      total: count, 
+      hasNextPage: morePages
+  });
+
+    const {entities, total, hasNextPage} = await controller.findLogsWithTracks();
+
+    expect(entities).toEqual(logs);
+    expect(total).toEqual(count);
+    expect(hasNextPage).toEqual(morePages)
+    expect(mockLogService.findLogsWithTracks).toHaveBeenCalled();
+  })
+
+  it('findLogsWithCount => should fail to find logs with tracks', async () => {
+    jest.spyOn(mockLogService, 'findLogsWithTracks').mockRejectedValue(new Error('Logs not found'))
+
+    try {
+      await controller.findLogsWithTracks();
+
+      fail('findLogsWithTracks did not throw error');
+    } catch (error) {
+      expect(error).toBeInstanceOf(Error);
+      expect(mockLogService.findLogsWithTracks).toHaveBeenCalled();
+      expect(mockLogService.findLogsWithTracks).rejects.toThrow('Logs not found')
+    }
+  })
+
   it('create => should create a new log', async () => {
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto;
 
     const log = {
-
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: []
     } as LogEntity;
 
     jest.spyOn(mockLogService, 'create').mockReturnValue(log);
@@ -116,9 +299,31 @@ describe('LogController', () => {
     expect(result).toEqual(log);
   })
 
-  it('create => should failt to create a new log', async () => {
+  it('create => should fail to create a new log', async () => {
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto;
 
     jest.spyOn(mockLogService, 'create').mockRejectedValue(new Error('Log failed to create'))
@@ -138,7 +343,29 @@ describe('LogController', () => {
   it('update => should update an existing log', async () => {
     const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto
 
     jest.spyOn(mockLogService, 'update').mockReturnValue(logDto);
@@ -153,7 +380,29 @@ describe('LogController', () => {
   it('update => should fail to update an exising log', async () => {
     const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto;
 
     jest.spyOn(mockLogService, 'update').mockRejectedValue(new Error('Log failed to update'))

api/src/log/log.controller.ts

@@ -20,6 +20,7 @@ import { LogInterceptor } from './log.interceptor';
 import { FileService } from '../file/file.service';
 import { DeleteResult, InsertResult, UpdateResult } from 'typeorm';
 import { Reflector } from '@nestjs/core';
+import { Logs } from './logs.interface';
 
 const reflector = new Reflector();
 
@@ -31,6 +32,29 @@ export class LogController {
     private readonly logService: LogService
   ) {}
 
+  @Get()
+  @Public()
+  async findLogsWithCount(@Query('skip') skip?, @Query('take') take?: number,): Promise<Logs> {
+    try {
+      return await this.logService.findLogsWithCount(skip, take)
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode)
+    }
+  }
+
+  @Get('flights')
+  @Public()
+  async findLogsWithTracks(@Query('skip') skip?, @Query('take') take?: number,): Promise<Logs> {
+    try {
+      return await this.logService.findLogsWithTracks(skip, take)
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode);
+    }
+  }
 
   @Get(':id')
   @Public()
@@ -46,19 +70,6 @@ export class LogController {
     }
   }
   
-  @Get()
-  @Public()
-  async findLogsWithCount(@Query('skip') skip?, @Query('take') take?: number,): Promise<{ entities: LogEntity[], total: number, hasNextPage: boolean }> {
-    try {
-      return await this.logService.findLogsWithCount(skip, take)
-    } catch (error) {
-      const customError = error as CustomError;
-
-      throw new HttpException(customError.message, customError.statusCode)
-    }
-  }
-
-  
   @Post()
   @UseGuards(AuthGuard)
   async create(@Body() logDto: LogDto) {

api/src/log/log.interceptor.ts

@@ -15,23 +15,21 @@ export class LogInterceptor implements NestInterceptor {
     ]);
 
     return handler.handle().pipe(
-      map((data: { entities: LogEntity[], total: number, hasNextPage: boolean }) => {
+      map((data: any) => {
         const req = context.switchToHttp().getRequest();
-        const limitData = (entities: LogEntity[]) => {
-          return entities.map((log: LogEntity) => {
-            return {
-              id: log.id,
-              pilot: {
-                name: log.pilot.name
-              },
-              date: log.date,
-              aircraftMakeModel: log.aircraftMakeModel,
-              routeFrom: log.routeFrom,
-              routeTo: log.routeTo,
-              durationOfFlight: log.durationOfFlight,
-              tracks: log.tracks,
-            };
-          });
+        const limitData = (log: LogEntity) => {
+          return {
+            id: log.id,
+            pilot: {
+              name: log.pilot.name
+            },
+            date: log.date,
+            aircraftMakeModel: log.aircraftMakeModel,
+            routeFrom: log.routeFrom,
+            routeTo: log.routeTo,
+            durationOfFlight: log.durationOfFlight,
+            tracks: log.tracks,
+          };
         }
 
         if (req.headers.authorization) {
@@ -41,25 +39,38 @@ export class LogInterceptor implements NestInterceptor {
           const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles'));
 
           if (jwtPayload[rolesKeyName].includes('Flying.Read')) {
-            const logs = limitData(data.entities);
+            if (data.entities) {
+              const logs = data.entities.map((entity) => limitData(data.entities));
+
+              return {
+                entities: logs,
+                total: data.total,
+                hasNextPage: data.hasNextPage
+              };
+            } else {
+              const log = limitData(data);
+
+              return log;
+            }
             
-            return {
-              entities: logs,
-              total: data.total,
-              hasNextPage: data.hasNextPage
-            };
           } else {
             return data;
           }
         } else if (!req.headers.authorization && isPublic) {
-          const publicData = limitData(data.entities)
-          const logs = publicData.slice(0, 5)
+          if (data.entities) {
+            const publicData = data.entities.map((entity) => limitData(entity))
+            const logs = publicData.slice(0, 5)
 
-          return {
-            entities: logs,
-            total: data.total,
-            hasNextPage: data.hasNextPage
-          };
+            return {
+              entities: logs,
+              total: data.total,
+              hasNextPage: false
+            };
+          } else {
+            const publicData = limitData(data);
+
+            return publicData
+          }
         }
       })
     );

api/src/log/log.service.spec.ts

@@ -15,7 +15,17 @@ describe('LogService', () => {
     deleteFolder: jest.fn()
   }
 
+  const mockQueryBuilder = {
+    createQueryBuilder: jest.fn().mockReturnThis(),
+    innerJoinAndSelect: jest.fn().mockReturnThis(),
+    orderBy: jest.fn().mockReturnThis(),
+    skip: jest.fn().mockReturnThis(),
+    take: jest.fn().mockReturnThis(),
+    getManyAndCount: jest.fn()
+  }
+
   const mockLogRepository = {
+    createQueryBuilder: jest.fn().mockReturnValue(mockQueryBuilder),
     delete: jest.fn(),
     findAndCount: jest.fn(),
     findOne: jest.fn(),
@@ -59,7 +69,7 @@ describe('LogService', () => {
     expect(service).toBeDefined();
   })
 
-  it('create => shoule create a log entry', async () => {
+  it('create => should create a log entry', async () => {
     const logDto = {
       pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
       date: new Date('2026-02-21'),
@@ -207,20 +217,84 @@ describe('LogService', () => {
       instrumentHolds: null,
       instrumentNavTrack: null,
       notes: 'This is a test',
-      tracks: []
+      tracks: [
+        {
+            "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+            "order": 1
+        },
+        {
+            "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+            "order": 2
+        }
+      ]
     } as LogEntity;
     const logs = [log];
     const count = 1
     const morePages = false
     
-    jest.spyOn(mockLogRepository, 'findAndCount').mockReturnValue([logs, count, morePages]);
+    jest.spyOn(mockQueryBuilder, 'getManyAndCount').mockReturnValue([logs, count, morePages]);
 
     const {entities, total, hasNextPage} = await service.findLogsWithCount();
 
     expect(entities).toEqual(logs);
     expect(count).toEqual(total);
     expect(hasNextPage).toEqual(morePages);
-    expect(mockLogRepository.findAndCount).toHaveBeenCalled();
+    expect(mockQueryBuilder.getManyAndCount).toHaveBeenCalled();
+  })
+
+    it('findLogsWithTracks => should find log entries with tracks', async () => {
+    const log = {
+      id: 'd685f1ca-28e0-40b9-8713-74467db12965',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: [
+        {
+            "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+            "order": 1
+        },
+        {
+            "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+            "order": 2
+        }
+      ]
+    } as LogEntity;
+    const logs = [log];
+    const count = 1
+    const morePages = false
+    
+    jest.spyOn(mockQueryBuilder, 'getManyAndCount').mockResolvedValue([logs, count, morePages])
+
+    const {entities, total, hasNextPage} = await service.findLogsWithTracks();
+
+    expect(entities).toEqual(logs);
+    expect(count).toEqual(total);
+    expect(hasNextPage).toEqual(morePages);
+    expect(mockQueryBuilder.getManyAndCount).toHaveBeenCalled();
   })
 
   it('update => should update a log entry', async () => {

api/src/log/log.service.ts

@@ -7,6 +7,7 @@ import { PilotService } from '../pilot/pilot.service';
 import { PilotEntity } from '../pilot/pilot.entity';
 import { CustomError } from '../error/customError';
 import { FileService } from '../file/file.service';
+import { Logs } from './logs.interface';
 
 @Injectable()
 export class LogService {
@@ -17,20 +18,46 @@ export class LogService {
   ) {}
 
   async find(id: string): Promise<LogEntity> {
-    const logEntity: LogEntity = await this.logRepository.findOne({
+    return await this.logRepository.findOne({
       where: { id: id },
       relations: ['pilot', 'tracks']
     });
-
-    return logEntity;
   }
 
-  async findLogsWithCount(skip?: number, take?: number): Promise<{entities: LogEntity[], total: number, hasNextPage: boolean}> {
-    const [entities, total] = await this.logRepository.findAndCount({ 
-      take, 
-      skip,
-      relations: ['pilot', 'tracks']
-     })
+  async findLogsWithCount(skip?: number, take?: number): Promise<Logs> {
+    // const [entities, total] = await this.logRepository.findAndCount({ 
+    //   take, 
+    //   skip,
+    //   order: {
+    //     date: 'DESC'
+    //   },
+    //   relations: ['pilot', 'tracks']
+    // })
+
+    const [entities, total] = await this.logRepository
+      .createQueryBuilder('logs')
+      .innerJoinAndSelect('logs.pilot', 'pilot')
+      .orderBy('logs.date', 'DESC')
+      .skip(skip)
+      .take(take)
+      .getManyAndCount()
+
+    return {
+      entities,
+      total,
+      hasNextPage: skip + take < total
+    }
+  }
+
+  async findLogsWithTracks(skip?: number, take?: number): Promise<Logs> {
+    const [entities, total] = await this.logRepository
+      .createQueryBuilder('logs')
+      .innerJoinAndSelect('logs.tracks', 'track')
+      .innerJoinAndSelect('logs.pilot', 'pilot')
+      .orderBy('logs.date', 'DESC')
+      .skip(skip)
+      .take(take)
+      .getManyAndCount();
 
     return {
       entities,

api/src/log/logs.interface.ts

@@ -0,0 +1,7 @@
+import { LogEntity } from "src/log/log.entity";
+
+export interface Logs {
+  entities: LogEntity[],
+  total: number,
+  hasNextPage: boolean
+}

api/src/track/track.service.ts

@@ -7,6 +7,7 @@ import { LogService } from "../log/log.service";
 import { LogEntity } from "../log/log.entity";
 import { CustomError } from "../error/customError";
 import { FileService } from "../file/file.service";
+import { Logs } from "src/log/logs.interface";
 
 @Injectable()
 export class TrackService {

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

client/src/components/flights/Flights.tsx

@@ -5,39 +5,68 @@ import { LogbookEntry } from "../logbook/LogbookEntry.interface";
 import { initialState, reducer } from "./reducer";
 import { useOidc } from "../../auth/oidcConfig";
 import Alert from "../alert/Alert";
+import { AxiosError, AxiosResponse } from "axios";
+import httpClient from "../../httpClient/httpClient";
+import { useBreakpoints } from "../../hooks/useBreakpoints/UseBreakpoints";
+import { ScreenSize } from "../../enums/screenSize";
 
 const Flights = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { logs, logsLoading } = useLogs();
   const { isUserLoggedIn } = useOidc();
+  const { screenSize } = useBreakpoints();
+
+  const getFlights = async (pageIndex: number, pageSize: number) => {
+    try {
+      const response: AxiosResponse = await httpClient.get(`api/logs/flights`, {
+        params: {
+          skip: pageIndex,
+          take: pageSize
+        }
+      });
+      const flights: LogbookEntry[] = response.data.entities;
+      const hasMore: boolean = response.data.hasNextPage;
+      const total: number = response.data.total;
+
+      if (flights.length > 0) {
+        const newFlights: LogbookEntry[] = [...state.flights, ...flights]
+        const newPageIndex: number = state.pageIndex + flights.length;
+
+        dispatch({ type: 'SET_FLIGHTS', payload: { flights: newFlights, hasMoreFlights: hasMore, pageIndex: newPageIndex, totalFlights: total }})
+
+        if (!isUserLoggedIn && flights.length >= 5) {
+          dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'A limited number of flights displayed. Sign in to view all flights.'}})
+        } else {
+          dispatch({ type: 'SET_ALERT', payload: undefined })
+        }
+      } else {
+        dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No flights found' }})
+      }
+    } catch (error) {
+      const axiosError = error as AxiosError;
+
+      dispatch({
+        type: 'SET_ALERT',
+        payload: { severity: 'error', message: `Loading of flights failed with the following message: ${axiosError.message}`}
+      });
+    } finally {
+      dispatch({ type: 'SET_IS_LOADING', payload: false })
+    }
+  }
+
+  const loadMore = () => {
+    getFlights(state.pageIndex, state.pageSize)
+  }
 
   useEffect(() => {
-
-    const flights: LogbookEntry[] | undefined = logs?.filter((log: LogbookEntry) => {
-      if (log.tracks && log.tracks.length > 0) {
-        return log;
-      }
-    })
-
-    if (flights && flights.length > 0) {
-      dispatch({ type: 'SET_FLIGHTS', payload: flights})
-
-      if (!isUserLoggedIn && flights.length >= 5) {
-        dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'A limited number of flights displayed. Sign in to view all flights.'}})
-      } else {
-        dispatch({ type: 'SET_ALERT', payload: undefined })
-      }
-    } else {
-      dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No flights found' }})
-    }
-  }, [logs])
+    getFlights(state.pageIndex, state.pageSize);
+  }, [])
  
   return (
-    <div className='max-w-screen-lg mx-auto'>
+    <div className={`max-w-screen-lg mx-auto ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD? 'mr-4 ml-4' : ''}`}>
       <div className='prose mt-5 mb-5'>
         <h1>Flights</h1>
       </div>
-      {!logsLoading && state.alert && (
+      {!state.isLoading && state.alert && (
         <div>
           <Alert
             className='mb-5'
@@ -50,14 +79,21 @@ const Flights = () => {
           </Alert>
         </div>
       )}
-      {!logsLoading &&
+      {!state.isLoading &&
         <div>
-          <LogbookCard logs={state.flights} mode='flights' />
+          <div>
+            <LogbookCard logs={state.flights} mode='flights' />
+          </div>
+          {state.hasMoreFlights &&
+            <div className='flex items-center justify-center mb-5'>
+              <button className='btn btn-link' onClick={loadMore}>Load more</button>
+            </div>
+          }
         </div>
       }
-      {logsLoading && [...Array(5)].map((_element, index) => {
+      {state.isLoading && [...Array(5)].map((_element, index) => {
         return (
-          <div className='card bg-base-100 border border-base-300 p-2 mb-7'>
+          <div className='card bg-base-100 border border-base-300 p-2 mb-5'>
             <div className='card-body' key={index}>
               <div className='skeleton h-10 w-[150px]' />
               <div className='skeleton h-[350px]' />

client/src/components/flights/FlightsState.interface.ts

@@ -5,4 +5,8 @@ export interface FlightsState {
   alert: Alert | undefined;
   flights: LogbookEntry[];
   isLoading: boolean;
+  hasMoreFlights: boolean;
+  pageIndex: number;
+  pageSize: number
+  totalFlights: number;
 }

client/src/components/flights/reducer.tsx

@@ -5,13 +5,17 @@ import { FlightsState } from "./FlightsState.interface";
 
 type Action = 
   | { type: 'SET_ALERT'; payload: Alert | undefined }
-  | { type: 'SET_FLIGHTS'; payload: LogbookEntry[] }
+  | { type: 'SET_FLIGHTS'; payload: { flights: LogbookEntry[], hasMoreFlights: boolean, pageIndex: number, totalFlights: number } }
   | { type: 'SET_IS_LOADING'; payload: boolean }
 
 export const initialState: FlightsState = {
   alert: undefined,
   flights: [],
-  isLoading: true
+  isLoading: true,
+  hasMoreFlights: true,
+  pageIndex: 0,
+  pageSize: 5,
+  totalFlights: 0
 }
 
 export const reducer = (
@@ -28,7 +32,10 @@ export const reducer = (
     case 'SET_FLIGHTS': {
       return {
         ...state,
-        flights: action.payload
+        flights: action.payload.flights,
+        hasMoreFlights: action.payload.hasMoreFlights,
+        pageIndex: action.payload.pageIndex,
+        totalFlights: action.payload.totalFlights
       }
     }
     case 'SET_IS_LOADING': {

client/src/components/logbook/Logbook.tsx

@@ -17,6 +17,11 @@ import { CellContext, ColumnDef, flexRender, getCoreRowModel, HeaderContext, Pag
 import { useLogbookContext } from '../../hooks/logbookContext/UseLogbookContext';
 import LogbookDrawer from '../logbookDrawer/LogbookDrawer';
 import Alert from '../alert/Alert';
+import TrackMap from '../trackMap/TrackMap';
+
+interface ActionsProps {
+  id: string;
+}
 
 const Logbook: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -25,6 +30,22 @@ const Logbook: React.FC<unknown> = () => {
   const { isUserLoggedIn } = useOidc();
   const { userRole } = useUserRole();
   const { screenSize } = useBreakpoints();
+  const Actions = ({ id }: ActionsProps) => {
+    return (
+      <div className='dropdown dropdown-end'>
+        <div tabIndex={0} role='button' className='btn btn-ghost p-0'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
+        <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
+          }
+          <li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, id)}><FontAwesomeIcon icon={faEye} />View</a></li>
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onDeleteLog(id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
+          }
+        </ul>
+      </div>
+    )
+  }
   const columnTotal = (info: HeaderContext<LogbookEntry, unknown>): number => {
     const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
     let total: number = 0;
@@ -116,18 +137,7 @@ const Logbook: React.FC<unknown> = () => {
     },
     cell: (info: CellContext<LogbookEntry, unknown>) => {
       return (
-        <div className='dropdown dropdown-end'>
-          <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
-          <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
-            {isUserLoggedIn && userRole === UserRole.WRITE &&
-              <li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
-            }
-            <li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
-            {isUserLoggedIn && userRole === UserRole.WRITE &&
-              <li><a onClick={() => onDeleteLog(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
-            }
-          </ul>
-        </div>
+        <Actions id={info.row.original.id} />
       )
     }
   }
@@ -370,13 +380,13 @@ const Logbook: React.FC<unknown> = () => {
     setPageIndex
   } = table;
 
-  const getLogbookEntries = async (pageIndex?: number, pageSize?: number) => {
+  const getLogbookEntries = async (pageIndex: number, pageSize: number) => {
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
       const response: AxiosResponse = await httpClient.get(`api/logs`, {
         params: {
-          skip: pageIndex,
+          skip: pageIndex * pageSize,
           take: pageSize
         }
       });
@@ -489,12 +499,11 @@ const Logbook: React.FC<unknown> = () => {
   };
 
   const onRowsPerPageChanged = (event: any) => {
-    console.log(event.target.value)
     const newPaginationState: PaginationState = {
       pageIndex: 0,
       pageSize: event.target.value !== 'All' ? Number(event.target.value) : state.totalEntries
     };
-    console.log(newPaginationState)
+
     dispatch({ type: 'SET_PAGINATION', payload: newPaginationState })
   }
 
@@ -518,13 +527,17 @@ const Logbook: React.FC<unknown> = () => {
     dispatch({ type: 'SET_PAGES', payload: pages })
   }, [state.totalEntries, state.pagination?.pageSize])
 
+  useEffect(() => {
+    console.log(state.pagination)
+  }, [state.pagination])
+
   return (
     <>
-      <div className='mr-10 ml-10 grid grid-cols-12'>
-        <div className='prose max-w-none col-span-10 mt-5 mb-5'>
+      <div className={`${screenSize === ScreenSize.SM ? 'mr-4 ml-4' : 'mr-10 ml-10'} grid grid-cols-12`}>
+        <div className='prose max-w-none col-span-6 mt-5 mb-5'>
           <h1>Logbook</h1>
         </div>
-        <div className='col-span-2 justify-self-end self-center'>
+        <div className='col-span-6 justify-self-end self-center'>
           {userRole === UserRole.WRITE &&
             <button className='btn btn-primary'
               onClick={() => onOpenCloseDrawer(FormMode.ADD)}
@@ -547,7 +560,7 @@ const Logbook: React.FC<unknown> = () => {
             </Alert>
           </div>
         )}
-        {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && (
+        {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD && (
           <div className='col-span-12 pr-5 pb-5 pl-5 bg-base-100 border border-base-100 rounded-lg '>
             <div className='overflow-x-auto mb-5'>
               <div className='col-span-12 justify-self-end self-center mt-1 mr-1 mb-2'>
@@ -560,7 +573,7 @@ const Logbook: React.FC<unknown> = () => {
                   >
                     <option value={10}>10</option>
                     <option value={25}>25</option>
-                    <option value={3}>50</option>
+                    <option value={50}>50</option>
                     <option value={state.totalEntries}>All</option>
                   </select>
                 </label>
@@ -696,7 +709,47 @@ const Logbook: React.FC<unknown> = () => {
           </div>
         )}
         {state.entries.length > 0 && screenSize === ScreenSize.SM &&
-          <LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
+          <div className='col-span-12'>
+            <>
+              {table.getRowModel().rows.map((row) => {
+                const date = new Date(row.original.date.replace('Z', ''));
+                const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+
+                return (
+                  <div className='card bg-base-100 border border-base-300 mb-5'>
+                    <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-4' : ''}`} key={row.id}>
+                      <div className={`grid grid-cols-12 gap-3`}>
+                        <>
+                          <div className='col-span-8'>
+                            <h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
+                          </div>
+                          <div className='col-span-4 justify-self-end self-center'>
+                            <Actions id={row.original.id} />
+                          </div>
+                          {row.getVisibleCells().map((cell) => {
+                            return (
+                              <>
+                                {cell.column.columnDef.header !== 'Actions' && cell.column.columnDef.header !== 'Date' && cell.column.columnDef.header !== 'Pilot' &&
+                                  <>
+                                    <div className='col-span-8 font-bold'>
+                                      <span>{cell.getContext().column.columnDef.header?.toString()}</span>
+                                    </div>
+                                    <div className='col-span-4'>
+                                      <span>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
+                                    </div>
+                                  </>
+                                }
+                              </>
+                            )
+                          })}
+                        </>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </>
+          </div>
         }
         {state.isLoading && !state.alert && (
           <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>

client/src/components/logbookCard/LogbookCard.tsx

@@ -1,7 +1,12 @@
 import { LogbookCardProps } from "./LogbookCardProps.interface";
 import TrackMap from "../trackMap/TrackMap";
+import { useBreakpoints } from "../../hooks/useBreakpoints/UseBreakpoints";
+import { ScreenSize } from "../../enums/screenSize";
+import { useEffect } from "react";
 
 const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+  const { screenSize } = useBreakpoints();
+  
   return (
     <div>
       {logs.map((log) => {
@@ -9,8 +14,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
         const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
 
         return (
-          <div className='card bg-base-100 border border-base-300 p-2'>
-            <div className='card-body' key={log.id}>
+          <div className='card bg-base-100 border border-base-300 p-2 mb-5'>
+            <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-2' : ''}`} key={log.id}>
               <h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
               <div>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
@@ -24,10 +29,10 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                 }
               </div>
               <div className='collapse collapse-arrow bg-base-100 border-base-300 border'>
-                <input type='radio' name='details-accordion' />
+                <input type='checkbox' />
                 <div className='collapse-title font-semibold'>Details</div>
                 <div className='collapse-content'>
-                  <div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
+                  <div className={`grid grid-cols-12 gap-3 ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'mr-[5%] ml-[5%]' : 'mr-[30%] ml-[30%]'} mt-4 mb-4`}>
                     <div className='col-span-6 font-bold'>
                       <span>Aircraft Make and Model</span>
                     </div>

client/src/components/pilots/Pilots.tsx

@@ -17,11 +17,31 @@ import { Pilot } from './Pilot.interface';
 import Alert from '../alert/Alert';
 import { useOidc } from '../../auth/oidcConfig';
 
+interface ActionsProps {
+  id: string;
+}
+
 const Pilots: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { userRole } = useUserRole();
   const { screenSize } = useBreakpoints();
   const { isUserLoggedIn } = useOidc();
+  const Actions = ({ id }: ActionsProps) => {
+    return (
+      <div className='dropdown dropdown-end'>
+        <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
+        <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onOpenClosePilotForm(FormMode.EDIT, id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
+          }
+          <li><a onClick={() => onOpenClosePilotForm(FormMode.VIEW, id)}><FontAwesomeIcon icon={faEye} />View</a></li>
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onDeletePilot(id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
+          }
+        </ul>
+      </div>
+    )
+  }
 
   const getPilots = async () => {
     try {
@@ -134,18 +154,7 @@ const Pilots: React.FC<unknown> = () => {
       },
       cell: (info: CellContext<Pilot, unknown>) => {
         return (
-          <div className='dropdown dropdown-end'>
-            <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
-            <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
-              {isUserLoggedIn && userRole === UserRole.WRITE &&
-                <li><a onClick={() => onOpenClosePilotForm(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
-              }
-              <li><a onClick={() => onOpenClosePilotForm(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
-              {isUserLoggedIn && userRole === UserRole.WRITE &&
-                <li><a onClick={() => onDeletePilot(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
-              }
-            </ul>
-          </div>
+          <Actions id={info.row.original.id} />
         )
       }
     }
@@ -172,11 +181,11 @@ const Pilots: React.FC<unknown> = () => {
 
   return (
     <>
-    <div className='mr-10 ml-10 grid grid-cols-12'>
-      <div className='prose max-w-none col-span-10 mt-5 mb-5' >
+    <div className={`${screenSize === ScreenSize.SM ? 'mr-4 ml-4' : 'mr-10 ml-10'} grid grid-cols-12`}>
+      <div className='prose max-w-none col-span-6 mt-5 mb-5' >
         <h1>Pilots</h1>
       </div>
-      <div className='col-span-2 justify-self-end self-center'>
+      <div className='col-span-6 justify-self-end self-center'>
         {!state.isLoading && userRole === UserRole.WRITE &&
           <button
             className='btn btn-primary'
@@ -259,9 +268,40 @@ const Pilots: React.FC<unknown> = () => {
           </table>
         </div>
       }
-      {/* {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
-        <PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />
-      } */}
+      {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
+        <div className='col-span-12'>
+          <>
+            {table.getRowModel().rows.map((row) => {
+              return (
+                <div className='card bg-base-100 border border-base-300 mb-5'>
+                  <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-4' : ''}`} key={row.id}>
+                    <div className={`grid grid-cols-12 gap-3`}>
+                      <>
+                        {row.getVisibleCells().map((cell) => {
+                          return (
+                            <>
+                              {cell.column.columnDef.header !== 'Actions' &&
+                                <>
+                                  <div className='col-span-10 self-center'>
+                                    <span>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
+                                  </div>
+                                  <div className='col-span-2'>
+                                    <Actions id={row.original.id} />
+                                  </div>
+                                </>
+                              }
+                            </>
+                          )
+                        })}
+                      </>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </>
+        </div>
+      }
     </div>
       {state.isFormOpen && (
         <PilotForm

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@noahspan/flying",
-  "version": "2.0.0-alpha-3",
+  "version": "2.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@noahspan/flying",
-      "version": "2.0.0-alpha-3",
+      "version": "2.0.2",
       "workspaces": [
         "api",
         "client",
@@ -26,7 +26,7 @@
       }
     },
     "api": {
-      "version": "2.0.0-alpha-3",
+      "version": "2.0.2",
       "license": "UNLICENSED",
       "dependencies": {
         "@azure/storage-blob": "^12.27.0",
@@ -81,7 +81,7 @@
       }
     },
     "client": {
-      "version": "2.0.0-alpha-3",
+      "version": "2.0.2",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-solid-svg-icons": "^7.1.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "2.0.2",
+  "version": "2.1.3",
   "scripts": {
     "start": "node api/dist/main",
     "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",