feat: asset pagination

CheesecakeLabs · Dec 11, 2023 · fa38a73 · fa38a73
1 parent add606d
commit fa38a73
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 9 deletions.
diff --git a/frontend/src/app/core/pages/token-management/index.tsx b/frontend/src/app/core/pages/token-management/index.tsx
@@ -10,28 +10,49 @@ import { TokenManagementTemplate } from 'components/templates/token-management'
 
 export const TokenManagement: React.FC = () => {
   const [loading, setLoading] = useState(true)
-  const [assets, setAssets] = useState<Hooks.UseAssetsTypes.IAssetDto[]>()
-  const { getAssets } = useAssets()
+  const [pagedAssets, setPagedAssets] =
+    useState<Hooks.UseAssetsTypes.IPagedAssets>()
+  const { getPagedAssets } = useAssets()
   const { userPermissions, getUserPermissions } = useAuth()
+  const [page, setPage] = useState(1)
+
+  const LIMIT = 10
 
   useEffect(() => {
-    getAssets().then(assets => {
-      setAssets(assets)
+    getPagedAssets({
+      page: page,
+      limit: LIMIT,
+    }).then(pagedAssets => {
+      setPagedAssets(pagedAssets)
       setLoading(false)
     })
-  }, [getAssets])
+  }, [getPagedAssets, page])
 
   useEffect(() => {
     getUserPermissions()
   }, [getUserPermissions])
 
+  const changePage = (pageSelected: number): void => {
+    getPagedAssets({
+      page: pageSelected,
+      limit: LIMIT,
+    }).then(pagedAssets => {
+      setPagedAssets(pagedAssets)
+      setLoading(false)
+      setPage(pageSelected)
+    })
+  }
+
   return (
     <Flex>
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <TokenManagementTemplate
           loading={loading}
-          assets={assets}
+          assets={pagedAssets?.assets}
           userPermissions={userPermissions}
+          page={page}
+          totalPages={pagedAssets?.totalPages || 1}
+          changePage={changePage}
         />
       </Sidebar>
     </Flex>

diff --git a/frontend/src/components/templates/token-management/index.tsx b/frontend/src/components/templates/token-management/index.tsx
@@ -32,19 +32,27 @@ import {
   BackIcon,
   BlockIcon,
   JoinIcon,
+  NavLeftIcon,
+  NavRightIcon,
 } from 'components/icons'
 import { Empty } from 'components/molecules/empty'
 
 interface ITokenManagementTemplate {
   loading: boolean
   assets: Hooks.UseAssetsTypes.IAssetDto[] | undefined
   userPermissions: Hooks.UseAuthTypes.IUserPermission[] | undefined
+  page: number
+  totalPages: number
+  changePage(page: number): void
 }
 
 export const TokenManagementTemplate: React.FC<ITokenManagementTemplate> = ({
   loading,
   assets,
   userPermissions,
+  page,
+  totalPages,
+  changePage,
 }) => {
   const navigate = useNavigate()
   const [isLargerThanLg] = useMediaQuery('(min-width: 992px)')
@@ -153,6 +161,61 @@ export const TokenManagementTemplate: React.FC<ITokenManagementTemplate> = ({
         ) : (
           <Empty title="No forged assets" />
         )}
+        <Flex justifyContent="flex-end">
+          <Flex w="fit-content" alignItems="center">
+            <Button
+              variant={'menuButton'}
+              border="0"
+              w="min-content"
+              leftIcon={
+                <Flex w="1rem" justifyContent="center">
+                  <NavLeftIcon />
+                </Flex>
+              }
+              isDisabled={page === 1}
+              onClick={(): void => {
+                changePage(page - 1)
+              }}
+            >
+              Previous
+            </Button>
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+              pageNumber => (
+                <Container
+                  w="fit-content"
+                  h="fit-content"
+                  cursor="pointer"
+                  borderRadius="full"
+                  bg={page === pageNumber ? 'gray.200' : undefined}
+                  _dark={{
+                    bg: page === pageNumber ? 'black.700' : undefined,
+                  }}
+                  onClick={(): void => {
+                    changePage(pageNumber)
+                  }}
+                >
+                  <Text fontSize="sm">{pageNumber}</Text>
+                </Container>
+              )
+            )}
+            <Button
+              variant={'menuButton'}
+              border="0"
+              w="min-content"
+              rightIcon={
+                <Flex w="1rem" justifyContent="center">
+                  <NavRightIcon />
+                </Flex>
+              }
+              isDisabled={page === totalPages}
+              onClick={(): void => {
+                changePage(page + 1)
+              }}
+            >
+              Next
+            </Button>
+          </Flex>
+        </Flex>
       </Flex>
     </Flex>
   )

diff --git a/frontend/src/hooks/useAssets/context.tsx b/frontend/src/hooks/useAssets/context.tsx
@@ -152,6 +152,7 @@ export const AssetsProvider: React.FC<IProps> = ({ children }) => {
     try {
       const response = await http.get(`assets`)
       const data = response.data
+
       if (data) {
         await Promise.all(
           data.map(async (asset: Hooks.UseAssetsTypes.IAsset) => {
@@ -175,6 +176,42 @@ export const AssetsProvider: React.FC<IProps> = ({ children }) => {
     }
   }, [getAssetData])
 
+  const getPagedAssets = useCallback(
+    async (args: {
+      page: number
+      limit: number
+    }): Promise<Hooks.UseAssetsTypes.IPagedAssets | undefined> => {
+      setLoadingAssets(true)
+      try {
+        const response = await http.get(
+          `assets?page=${args.page}&limit=${args.limit}`
+        )
+        const data = response.data
+
+        if (data) {
+          await Promise.all(
+            data.assets.map(async (asset: Hooks.UseAssetsTypes.IAsset) => {
+              const assetData = await getAssetData(
+                asset.code,
+                asset.issuer.key.publicKey
+              )
+              asset.assetData = assetData
+            })
+          )
+          return data
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          throw new Error(error.message)
+        }
+        throw new Error(MessagesError.errorOccurred)
+      } finally {
+        setLoadingAssets(false)
+      }
+    },
+    [getAssetData]
+  )
+
   const getAssetById = useCallback(
     async (id: string): Promise<Hooks.UseAssetsTypes.IAssetDto | undefined> => {
       setLoadingAsset(true)
@@ -290,8 +327,9 @@ export const AssetsProvider: React.FC<IProps> = ({ children }) => {
     contractId: string
   ): Promise<boolean> => {
     try {
-      const response = await http.put(`assets/${assetId}/update-contract-id`,
-        { contract_id: contractId })
+      const response = await http.put(`assets/${assetId}/update-contract-id`, {
+        contract_id: contractId,
+      })
       return response.status === 200
     } catch (error) {
       if (axios.isAxiosError(error)) {
@@ -321,7 +359,8 @@ export const AssetsProvider: React.FC<IProps> = ({ children }) => {
         retrieveToml,
         getTomlData,
         updateImage,
-        updateContractId
+        updateContractId,
+        getPagedAssets
       }}
     >
       {children}

diff --git a/frontend/src/hooks/useAssets/use-assets-types.d.ts b/frontend/src/hooks/useAssets/use-assets-types.d.ts
@@ -27,6 +27,11 @@ declare namespace Hooks {
       contract_id?: string
     }
 
+    interface IPagedAssets {
+      assets: IAssetDto[]
+      totalPages: number
+    }
+
     interface IAssetRequest {
       amount?: number
       asset_type: number
@@ -145,6 +150,10 @@ declare namespace Hooks {
         assetId: number,
         contractId: string
       ) => Promise<boolean>
+      getPagedAssets: (args: {
+        page: number
+        limit: number
+      }) => Promise<IPagedAssets | undefined>
     }
   }
 }