infinite scroll

b4mad · Nov 10, 2024 · 23a7bde · 23a7bde
1 parent 737711a
commit 23a7bde
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/src/services/PaddockService.ts b/src/services/PaddockService.ts
@@ -198,6 +198,10 @@ export class PaddockService {
                     condition: { driverId: $driverId, carId: $carId, trackId: $trackId }
                 ) {
                     totalCount
+                    pageInfo {
+                        hasNextPage
+                        endCursor
+                    }
                     edges {
                         node {
                             id
@@ -239,9 +243,18 @@ export class PaddockService {
             }
         `, { first, after, driverId: filters?.driverId, carId: filters?.carId, trackId: filters?.trackId });
 
-        const { edges, totalCount } = data.allTelemetrySessions;
-        const hasNextPage = edges.length === first;
-        const sessions = edges.map((edge: any): PaddockSession => {
+        if (!data.allTelemetrySessions) {
+            return {
+                items: [],
+                totalCount: 0,
+                hasNextPage: false,
+                endCursor: undefined
+            };
+        }
+
+        const { edges = [], totalCount = 0, pageInfo = {} } = data.allTelemetrySessions;
+        const { hasNextPage, endCursor } = pageInfo;
+        const sessions = edges?.map((edge: any): PaddockSession => {
             const node = edge.node;
             return {
                 id: node.id,
@@ -277,15 +290,15 @@ export class PaddockService {
                 }))
             };
         });
-        logger.paddock('Fetched %d sessions', sessions.length);
-        logger.paddock('Total session count: %d', totalCount);
-        logger.paddock('Has next page: %s', hasNextPage);
-        logger.paddock('End cursor: %s', hasNextPage ? edges[edges.length - 1]?.cursor : undefined);
+        // logger.paddock('Fetched %d sessions', sessions.length);
+        // logger.paddock('Total session count: %d', totalCount);
+        // logger.paddock('Has next page: %s', hasNextPage);
+        // logger.paddock('End cursor: %s', hasNextPage ? endCursor : undefined);
         return {
             items: sessions,
             totalCount,
             hasNextPage,
-            endCursor: hasNextPage ? edges[edges.length - 1]?.cursor : undefined
+            endCursor: hasNextPage ? endCursor : undefined
         };
     }
 

diff --git a/src/views/SessionsView.tsx b/src/views/SessionsView.tsx
@@ -13,7 +13,7 @@ export function SessionsView() {
   const [sessions, setSessions] = useState<PaddockSession[]>([]);
   const [hasNextPage, setHasNextPage] = useState(false);
   const [endCursor, setEndCursor] = useState<string>();
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [_isLoadingMore, setIsLoadingMore] = useState(false);
   const [cars, setCars] = useState<PaddockCar[]>([])
   const [drivers, setDrivers] = useState<PaddockDriver[]>([])
   const [tracks, setTracks] = useState<PaddockTrack[]>([])
@@ -147,7 +147,7 @@ export function SessionsView() {
               (!selectedTrack || session.track.id === selectedTrack)
             )
             .map(session => (
-              <SessionListItem key={session.sessionId} session={session} />
+              <SessionListItem key={session.id} session={session} />
             ))}
         </Stack>
       </InfiniteScroll>