feat(skilavottord): pagination and infinite scroll

apps/skilavottord/web/screens/RecyclingFund/Overview/Overview.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from 'react'
+import React, { FC, useContext, useRef, useEffect } from 'react'
 import gql from 'graphql-tag'
 import { useQuery } from '@apollo/client'
 import NextLink from 'next/link'
@@ -9,6 +9,7 @@ import {
   Breadcrumbs,
   GridColumn,
   GridRow,
+  LoadingDots,
   Stack,
   Text,
 } from '@island.is/island-ui/core'
@@ -21,16 +22,23 @@ import { Query, Role } from '@island.is/skilavottord-web/graphql/schema'
 import { CarsTable, RecyclingCompanyImage } from './components'
 
 export const SkilavottordVehiclesQuery = gql`
-  query skilavottordVehiclesQuery {
-    skilavottordAllDeregisteredVehicles {
-      vehicleId
-      vehicleType
-      newregDate
-      createdAt
-      recyclingRequests {
-        id
-        nameOfRequestor
+  query skilavottordVehiclesQuery($after: String!) {
+    skilavottordAllDeregisteredVehicles(first: 20, after: $after) {
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+      count
+      items {
+        vehicleId
+        vehicleType
+        newregDate
         createdAt
+        recyclingRequests {
+          id
+          nameOfRequestor
+          createdAt
+        }
       }
     }
   }
@@ -41,9 +49,54 @@ const Overview: FC = () => {
   const {
     t: { recyclingFundOverview: t, recyclingFundSidenav: sidenavText, routes },
   } = useI18n()
+  const { data, loading, fetchMore } = useQuery<Query>(
+    SkilavottordVehiclesQuery,
+    {
+      notifyOnNetworkStatusChange: true,
+      variables: { after: '' },
+    },
+  )
+  const { pageInfo, items: vehicles } =
+    data?.skilavottordAllDeregisteredVehicles ?? {}
+
+  const triggerRef = useRef<HTMLDivElement>(null)
 
-  const { data } = useQuery<Query>(SkilavottordVehiclesQuery)
-  const vehicles = data?.skilavottordAllDeregisteredVehicles ?? []
+  useEffect(() => {
+    if (loading) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const { hasNextPage, endCursor } = pageInfo
+        if (entries[0].isIntersecting && hasNextPage) {
+          fetchMore({
+            variables: { after: endCursor },
+            updateQuery: (
+              { skilavottordAllDeregisteredVehicles },
+              { fetchMoreResult },
+            ) => {
+              const prevResults = skilavottordAllDeregisteredVehicles
+              const newResults =
+                fetchMoreResult?.skilavottordAllDeregisteredVehicles
+              return {
+                skilavottordAllDeregisteredVehicles: {
+                  ...newResults,
+                  items: [...prevResults?.items, ...newResults?.items],
+                },
+              }
+            },
+          })
+        }
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: 1.0,
+      },
+    )
+    triggerRef.current && observer.observe(triggerRef.current)
+    return () => {
+      observer.disconnect()
+    }
+  }, [loading])
 
   if (!user) {
     return null
@@ -122,11 +175,24 @@ const Overview: FC = () => {
         </Box>
         <Stack space={3}>
           <Text variant="h3">{t.subtitles.deregistered}</Text>
-          {vehicles.length > 0 ? (
-            <CarsTable titles={t.table} vehicles={vehicles} />
+          {vehicles?.length > 0 ? (
+            <>
+              <CarsTable titles={t.table} vehicles={vehicles} />
+
+              {loading && (
+                <Box display="flex" justifyContent="center" marginTop={4}>
+                  <LoadingDots />
+                </Box>
+              )}
+            </>
+          ) : loading ? (
+            <Box display="flex" justifyContent="center" marginTop={4}>
+              <LoadingDots />
+            </Box>
           ) : (
             <Text>{t.info}</Text>
           )}
+          <div ref={triggerRef} />
         </Stack>
       </Stack>
     </PartnerPageLayout>

apps/skilavottord/ws/src/app/modules/recyclingRequest/recyclingRequest.model.ts

@@ -108,17 +108,17 @@ export class RecyclingRequestModel extends Model<RecyclingRequestModel> {
   })
   nameOfRequestor: string
 
-  @Field()
+  @Field({ nullable: true })
   @CreatedAt
   @Column({
     field: 'created_at',
   })
-  createdAt: Date
+  createdAt?: Date
 
-  @Field()
+  @Field({ nullable: true })
   @UpdatedAt
   @Column({
     field: 'updated_at',
   })
-  updatedAt: Date
+  updatedAt?: Date
 }

apps/skilavottord/ws/src/app/modules/vehicle/vehicle.model.ts

@@ -48,11 +48,11 @@ export class VehicleModel extends Model<VehicleModel> {
   })
   vehicleColor: string
 
-  @Field()
+  @Field({ nullable: true })
   @Column({
     type: DataType.DATE,
   })
-  newregDate: Date
+  newregDate?: Date
 
   @Field()
   @Column({
@@ -61,16 +61,44 @@ export class VehicleModel extends Model<VehicleModel> {
   vinNumber: string
 
   @Field()
+  @Field({ nullable: true })
   @CreatedAt
   @Column
-  createdAt: Date
+  createdAt?: Date
 
-  @Field()
+  @Field({ nullable: true })
   @UpdatedAt
   @Column
-  updatedAt: Date
+  updatedAt?: Date
 
   @Field(() => [RecyclingRequestModel], { nullable: true })
   @HasMany(() => RecyclingRequestModel)
   recyclingRequests!: RecyclingRequestModel[]
 }
+
+@ObjectType()
+export class PageInfo {
+  @Field()
+  hasNextPage!: boolean
+
+  @Field()
+  hasPreviousPage!: boolean
+
+  @Field({ nullable: true })
+  startCursor!: string
+
+  @Field({ nullable: true })
+  endCursor!: string
+}
+
+@ObjectType()
+export class VehicleConnection {
+  @Field(() => PageInfo)
+  pageInfo!: PageInfo
+
+  @Field()
+  count!: number
+
+  @Field(() => [VehicleModel])
+  items: VehicleModel[]
+}

apps/skilavottord/ws/src/app/modules/vehicle/vehicle.resolver.ts

@@ -1,13 +1,13 @@
 import { Inject, NotFoundException, forwardRef } from '@nestjs/common'
-import { Query, Resolver, Mutation, Args } from '@nestjs/graphql'
+import { Query, Resolver, Mutation, Args, Int } from '@nestjs/graphql'
 import parse from 'date-fns/parse'
 
 import type { Logger } from '@island.is/logging'
 import { LOGGER_PROVIDER } from '@island.is/logging'
 
 import { Authorize, CurrentUser, User, Role } from '../auth'
 
-import { VehicleModel } from './vehicle.model'
+import { VehicleModel, VehicleConnection } from './vehicle.model'
 import { VehicleService } from './vehicle.service'
 import { SamgongustofaService } from '../samgongustofa'
 
@@ -23,23 +23,22 @@ export class VehicleResolver {
   ) {}
 
   @Authorize({ roles: [Role.developer, Role.recyclingCompany] })
-  @Query(() => [VehicleModel])
-  async skilavottordAllVehicles(): Promise<VehicleModel[]> {
-    const vehicles = await this.vehicleService.findAll()
-    this.logger.info(
-      'getAllVehicle response:' + JSON.stringify(vehicles, null, 2),
-    )
-    return vehicles
-  }
-
   @Authorize({ roles: [Role.developer, Role.recyclingFund] })
-  @Query(() => [VehicleModel])
-  async skilavottordAllDeregisteredVehicles(): Promise<VehicleModel[]> {
-    const deregisteredVehicles = await this.vehicleService.findAllDeregistered()
-    this.logger.info(
-      'getAllVehicle response:' + JSON.stringify(deregisteredVehicles, null, 2),
-    )
-    return deregisteredVehicles
+  @Query(() => VehicleConnection)
+  async skilavottordAllDeregisteredVehicles(
+    @Args('first', { type: () => Int }) first: number,
+    @Args('after') after: string,
+  ): Promise<VehicleConnection> {
+    const {
+      pageInfo,
+      totalCount,
+      data,
+    } = await this.vehicleService.findAllDeregistered(first, after)
+    return {
+      pageInfo,
+      count: totalCount,
+      items: data,
+    }
   }
 
   @Query(() => VehicleModel)

apps/skilavottord/ws/src/app/modules/vehicle/vehicle.service.ts

@@ -1,7 +1,9 @@
 import { Inject, Injectable } from '@nestjs/common'
+import { InjectModel } from '@nestjs/sequelize'
 
 import type { Logger } from '@island.is/logging'
 import { LOGGER_PROVIDER } from '@island.is/logging'
+import { paginate } from '@island.is/nest/pagination'
 
 import { RecyclingRequestModel } from '../recyclingRequest'
 import { RecyclingPartnerModel } from '../recyclingPartner'
@@ -12,44 +14,31 @@ export class VehicleService {
   constructor(
     @Inject(LOGGER_PROVIDER)
     private logger: Logger,
+    @InjectModel(VehicleModel)
+    private vehicleModel: VehicleModel,
   ) {}
 
-  async findAll(): Promise<VehicleModel[]> {
-    this.logger.info('Getting all vehicles...')
-    try {
-      return await VehicleModel.findAll({
-        include: [
-          {
-            model: RecyclingRequestModel,
+  async findAllDeregistered(first: number, after: string) {
+    return paginate<VehicleModel>({
+      Model: this.vehicleModel,
+      limit: first,
+      after,
+      primaryKeyField: 'vehicleId',
+      orderOption: [['updatedAt', 'DESC']],
+      include: [
+        {
+          model: RecyclingRequestModel,
+          where: {
+            requestType: 'deregistered',
           },
-        ],
-      })
-    } catch (error) {
-      this.logger.error('error finding all vehicles:' + error)
-    }
-  }
-
-  async findAllDeregistered(): Promise<VehicleModel[]> {
-    this.logger.info('finding all deregistered vehicles...')
-    try {
-      return await VehicleModel.findAll({
-        include: [
-          {
-            model: RecyclingRequestModel,
-            where: {
-              requestType: 'deregistered',
+          include: [
+            {
+              model: RecyclingPartnerModel,
             },
-            include: [
-              {
-                model: RecyclingPartnerModel,
-              },
-            ],
-          },
-        ],
-      })
-    } catch (error) {
-      this.logger.error('error finding all deregistered vehicles:' + error)
-    }
+          ],
+        },
+      ],
+    })
   }
 
   async findByVehicleId(vehicleId: string): Promise<VehicleModel> {

apps/skilavottord/ws/src/app/modules/vehicleOwner/vehicleOwner.resolver.ts

@@ -18,26 +18,6 @@ export class VehicleOwnerResolver {
     private logger: Logger,
   ) {}
 
-  @Query(() => [VehicleOwnerModel])
-  async skilavottordAllVehicleOwners(): Promise<VehicleOwnerModel[]> {
-    const res = await this.vehicleOwnerService.findAll()
-    this.logger.debug(
-      'getAllVehicleOwners responce:' + JSON.stringify(res, null, 2),
-    )
-    return res
-  }
-
-  @Query(() => VehicleOwnerModel)
-  async skilavottordVehiclesFromLocal(
-    @CurrentUser() user: User,
-  ): Promise<VehicleOwnerModel> {
-    const res = await this.vehicleOwnerService.findByNationalId(user.nationalId)
-    this.logger.warn(
-      'getVehicleOwnersByNationaId responce:' + JSON.stringify(res, null, 2),
-    )
-    return res
-  }
-
   @Authorize({
     roles: [Role.developer, Role.recyclingCompany, Role.recyclingFund],
   })