fix(web): paginated data in petition view

apps/web/screens/PetitionView/PetitionSkeleton.tsx

@@ -4,7 +4,7 @@ const Skeleton = () => {
   return (
     <Stack space={3}>
       <SkeletonLoader height={70} width="100%" borderRadius="large" />
-      <SkeletonLoader height={350} borderRadius="large" />
+      <SkeletonLoader height={250} borderRadius="large" />
       <Box display="flex" justifyContent="spaceBetween">
         <SkeletonLoader height={70} width="30%" borderRadius="large" />
         <SkeletonLoader height={70} width="30%" borderRadius="large" />
@@ -13,7 +13,7 @@ const Skeleton = () => {
       <Box marginY={3}>
         <SkeletonLoader height={70} width="45%" borderRadius="large" />
       </Box>
-      <SkeletonLoader height={250} borderRadius="large" />
+      <SkeletonLoader height={350} borderRadius="large" />
     </Stack>
   )
 }

apps/web/screens/PetitionView/PetitionView.tsx

@@ -4,14 +4,13 @@ import {
   GridColumn,
   GridRow,
   Link,
+  SkeletonLoader,
   Stack,
   Text,
 } from '@island.is/island-ui/core'
 import { withMainLayout } from '@island.is/web/layouts/main'
 import { Box, Button, Table as T, Pagination } from '@island.is/island-ui/core'
-import { PAGE_SIZE, pages, paginate } from './pagination'
 import { Screen } from '../../types'
-import format from 'date-fns/format'
 import { useRouter } from 'next/router'
 import { useGetPetitionList, useGetPetitionListEndorsements } from './queries'
 import { LinkType, linkResolver, useNamespace } from '@island.is/web/hooks'
@@ -25,19 +24,12 @@ import {
 import { GET_NAMESPACE_QUERY } from '@island.is/web/screens/queries'
 import { useI18n } from '@island.is/web/i18n'
 import PetitionSkeleton from './PetitionSkeleton'
+import { formatDate, getBaseUrl, pageSize } from './utils'
 
 interface PetitionViewProps {
   namespace?: Record<string, string>
 }
 
-const formatDate = (date: string) => {
-  try {
-    return format(new Date(date), 'dd.MM.yyyy')
-  } catch {
-    return date
-  }
-}
-
 const PetitionView: Screen<PetitionViewProps> = ({ namespace }) => {
   const n = useNamespace(namespace)
   const router = useRouter()
@@ -47,33 +39,23 @@ const PetitionView: Screen<PetitionViewProps> = ({ namespace }) => {
     router.query.slug as string,
   )
 
-  const { listEndorsements, loadingEndorsements } =
-    useGetPetitionListEndorsements(router.query.slug as string)
-
-  const [page, setPage] = useState(1)
-  const [totalPages, setTotalPages] = useState(0)
-  const [pagePetitions, setPetitions] = useState(listEndorsements.data ?? [])
+  const [cursor, setCursor] = useState<string>('')
+  const [pageDirection, setPageDirection] = useState<'before' | 'after' | ''>(
+    '',
+  )
 
-  const getBaseUrl = () => {
-    const baseUrl =
-      window.location.origin === 'http://localhost:4200'
-        ? 'http://localhost:4242'
-        : window.location.origin
+  const { listEndorsements, loadingEndorsements, refetch } =
+    useGetPetitionListEndorsements(
+      router.query.slug as string,
+      cursor,
+      pageDirection,
+    )
 
-    return `${baseUrl}/umsoknir/undirskriftalisti`
-  }
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore make web strict
-  const handlePagination = (page, petitions) => {
-    setPage(page)
-    setTotalPages(pages(petitions?.length))
-    setPetitions(paginate(petitions, PAGE_SIZE, page))
-  }
+  const [page, setPage] = useState(1)
 
   useEffect(() => {
-    setPetitions(listEndorsements.data ?? [])
-    handlePagination(1, listEndorsements.data ?? [])
-  }, [listEndorsements.data])
+    refetch()
+  }, [cursor, pageDirection])
 
   return (
     <Box>
@@ -166,9 +148,9 @@ const PetitionView: Screen<PetitionViewProps> = ({ namespace }) => {
                   {n('listOpenFromTil', 'Gildistímabil lista:')}
                 </Text>
                 <Text variant="default">
-                  {formatDate(list.openedDate) +
+                  {formatDate(String(list.openedDate)) +
                     ' - ' +
-                    formatDate(list.closedDate)}
+                    formatDate(String(list.closedDate))}
                 </Text>
               </GridColumn>
               <GridColumn span={['12/12', '4/12']}>
@@ -181,11 +163,7 @@ const PetitionView: Screen<PetitionViewProps> = ({ namespace }) => {
                 <Text variant="h4" marginTop={[2, 0]}>
                   {n('signedPetitions', 'Fjöldi undirskrifta:')}
                 </Text>
-                <Text variant="default">
-                  {loadingEndorsements
-                    ? n('loadingEndorsements', 'Sæki gögn...')
-                    : listEndorsements.totalCount}
-                </Text>
+                <Text variant="default">{listEndorsements.totalCount}</Text>
               </GridColumn>
             </GridRow>
             <Box marginTop={6} marginBottom={8}>
@@ -208,39 +186,67 @@ const PetitionView: Screen<PetitionViewProps> = ({ namespace }) => {
                 </T.Row>
               </T.Head>
               <T.Body>
-                {
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore make web strict
-                  pagePetitions?.map((petition) => {
-                    return (
-                      <T.Row key={petition.id}>
-                        <T.Data text={{ variant: 'medium' }}>
-                          {formatDate(petition.created)}
-                        </T.Data>
-                        <T.Data text={{ variant: 'medium' }}>
-                          {petition.meta.fullName
-                            ? petition.meta.fullName
-                            : n('noName', 'Nafn ekki skráð')}
-                        </T.Data>
-                      </T.Row>
-                    )
-                  })
-                }
+                {loadingEndorsements &&
+                  Array(10).fill().map((_, i) => (
+                    <T.Row key={i}>
+                      <T.Data>
+                        <SkeletonLoader height={20} />
+                      </T.Data>
+                      <T.Data>
+                        <SkeletonLoader height={20} />
+                      </T.Data>
+                    </T.Row>
+                  ))}
+                {!loadingEndorsements &&
+                  listEndorsements.data
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore make web strict
+                    ?.map((petition) => {
+                      return (
+                        <T.Row key={petition.id}>
+                          <T.Data text={{ variant: 'medium' }}>
+                            {formatDate(petition.created)}
+                          </T.Data>
+                          <T.Data text={{ variant: 'medium' }}>
+                            {petition.meta.fullName
+                              ? petition.meta.fullName
+                              : n('noName', 'Nafn ekki skráð')}
+                          </T.Data>
+                        </T.Row>
+                      )
+                    })}
               </T.Body>
             </T.Table>
             {list.closedDate && new Date() <= new Date(list.closedDate) ? (
-              pagePetitions && pagePetitions.length ? (
+              listEndorsements.data && listEndorsements.data.length ? (
                 <Box marginY={3}>
                   <Pagination
                     page={page}
-                    totalPages={totalPages}
-                    renderLink={(page, className, children) => (
+                    totalItems={listEndorsements.totalCount}
+                    itemsPerPage={pageSize}
+                    renderLink={(p, className, children) => (
                       <Box
                         cursor="pointer"
                         className={className}
-                        onClick={() =>
-                          handlePagination(page, listEndorsements.data)
-                        }
+                        component="button"
+                        onClick={() => {
+                          setPage(p)
+                          if (
+                            p > page &&
+                            listEndorsements.pageInfo.hasNextPage
+                          ) {
+                            setPageDirection('after')
+                            setCursor(listEndorsements.pageInfo.endCursor ?? '')
+                          } else if (
+                            p < page &&
+                            listEndorsements.pageInfo.hasPreviousPage
+                          ) {
+                            setPageDirection('before')
+                            setCursor(
+                              listEndorsements.pageInfo.startCursor ?? '',
+                            )
+                          }
+                        }}
                       >
                         {children}
                       </Box>

apps/web/screens/PetitionView/queries.ts

@@ -1,13 +1,9 @@
 import gql from 'graphql-tag'
 import { useQuery } from '@apollo/client'
-
-interface PetitionListResponse {
-  endorsementSystemGetGeneralPetitionList: any
-}
-
-interface PetitionListEndorsementsResponse {
-  endorsementSystemGetGeneralPetitionEndorsements: any
-}
+import {
+  EndorsementList,
+  PaginatedEndorsementResponse,
+} from '@island.is/web/graphql/schema'
 
 const GetGeneralPetitionList = gql`
   query endorsementSystemGetGeneralPetitionList(
@@ -33,6 +29,12 @@ const GetGeneralPetitionListEndorsements = gql`
   ) {
     endorsementSystemGetGeneralPetitionEndorsements(input: $input) {
       totalCount
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        startCursor
+        endCursor
+      }
       data {
         id
         endorser
@@ -51,7 +53,7 @@ export const useGetPetitionList = (listId: string) => {
     data: endorsementListsResponse,
     loading,
     error,
-  } = useQuery<PetitionListResponse>(GetGeneralPetitionList, {
+  } = useQuery(GetGeneralPetitionList, {
     variables: {
       input: {
         listId: listId,
@@ -60,28 +62,36 @@ export const useGetPetitionList = (listId: string) => {
   })
 
   const list =
-    endorsementListsResponse?.endorsementSystemGetGeneralPetitionList ?? []
+    (endorsementListsResponse?.endorsementSystemGetGeneralPetitionList as EndorsementList) ??
+    []
   return { list, loading, error }
 }
 
-export const useGetPetitionListEndorsements = (listId: string) => {
-  const { data: endorsementListsResponse, loading: loadingEndorsements } =
-    useQuery<PetitionListEndorsementsResponse>(
-      GetGeneralPetitionListEndorsements,
-      {
-        variables: {
-          input: {
-            listId: listId,
-            limit: 1000,
-          },
-        },
+export const useGetPetitionListEndorsements = (
+  listId: string,
+  cursor?: string,
+  pageDirection?: 'before' | 'after' | '',
+) => {
+  const {
+    data: endorsementListsResponse,
+    loading: loadingEndorsements,
+    refetch,
+  } = useQuery(GetGeneralPetitionListEndorsements, {
+    variables: {
+      input: {
+        before: pageDirection === 'before' ? cursor : '',
+        after: pageDirection === 'after' ? cursor : '',
+        listId: listId,
+        limit: 10,
       },
-    )
+    },
+  })
 
   return {
     listEndorsements:
-      endorsementListsResponse?.endorsementSystemGetGeneralPetitionEndorsements ??
+      (endorsementListsResponse?.endorsementSystemGetGeneralPetitionEndorsements as PaginatedEndorsementResponse) ??
       [],
     loadingEndorsements,
+    refetch,
   }
 }

apps/web/screens/PetitionView/utils.ts

@@ -0,0 +1,20 @@
+import format from 'date-fns/format'
+
+export const formatDate = (date: string) => {
+  try {
+    return format(new Date(date), 'dd.MM.yyyy')
+  } catch {
+    return date
+  }
+}
+
+export const getBaseUrl = () => {
+  const baseUrl =
+    window.location.origin === 'http://localhost:4200'
+      ? 'http://localhost:4242'
+      : window.location.origin
+
+  return `${baseUrl}/umsoknir/undirskriftalisti`
+}
+
+export const pageSize = 10