diff --git a/frontend/src/app/core/pages/token-management/index.tsx b/frontend/src/app/core/pages/token-management/index.tsx index 4448d0c9..20cd102f 100644 --- 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() - const { getAssets } = useAssets() + const [pagedAssets, setPagedAssets] = + useState() + 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 ( diff --git a/frontend/src/components/templates/token-management/index.tsx b/frontend/src/components/templates/token-management/index.tsx index a477457d..da4b0d6b 100644 --- a/frontend/src/components/templates/token-management/index.tsx +++ b/frontend/src/components/templates/token-management/index.tsx @@ -32,6 +32,8 @@ import { BackIcon, BlockIcon, JoinIcon, + NavLeftIcon, + NavRightIcon, } from 'components/icons' import { Empty } from 'components/molecules/empty' @@ -39,12 +41,18 @@ 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 = ({ loading, assets, userPermissions, + page, + totalPages, + changePage, }) => { const navigate = useNavigate() const [isLargerThanLg] = useMediaQuery('(min-width: 992px)') @@ -153,6 +161,61 @@ export const TokenManagementTemplate: React.FC = ({ ) : ( )} + + + + {Array.from({ length: totalPages }, (_, i) => i + 1).map( + pageNumber => ( + { + changePage(pageNumber) + }} + > + {pageNumber} + + ) + )} + + + ) diff --git a/frontend/src/hooks/useAssets/context.tsx b/frontend/src/hooks/useAssets/context.tsx index 5775e511..b8d146e1 100644 --- a/frontend/src/hooks/useAssets/context.tsx +++ b/frontend/src/hooks/useAssets/context.tsx @@ -152,6 +152,7 @@ export const AssetsProvider: React.FC = ({ 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 = ({ children }) => { } }, [getAssetData]) + const getPagedAssets = useCallback( + async (args: { + page: number + limit: number + }): Promise => { + 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 => { setLoadingAsset(true) @@ -290,8 +327,9 @@ export const AssetsProvider: React.FC = ({ children }) => { contractId: string ): Promise => { 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 = ({ 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 index f04cc443..61f3895a 100644 --- 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 + getPagedAssets: (args: { + page: number + limit: number + }) => Promise } } }