|
53 | 53 | import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection"; |
54 | 54 | import { CipherProviderTypes, CurrencyTypes } from "@requestnetwork/types"; |
55 | 55 | import { ethers } from "ethers"; |
| 56 | + import { queryClient } from "@requestnetwork/shared-utils/queryClient"; |
56 | 57 |
|
57 | 58 | interface CipherProvider extends CipherProviderTypes.ICipherProvider { |
58 | 59 | getSessionSignatures: ( |
|
111 | 112 | let sortOrder = "desc"; |
112 | 113 | let sortColumn = "timestamp"; |
113 | 114 |
|
| 115 | + const itemsPerPage = 10; |
| 116 | + let currentPage = 1; |
| 117 | + let hasMoreRequests = false; |
114 | 118 | let selectedNetworks: string[] = []; |
115 | 119 | let networkOptions: { value: string; checked: boolean }[] = []; |
116 | 120 |
|
|
190 | 194 | currencyManager = await initializeCurrencyManager(); |
191 | 195 | }); |
192 | 196 |
|
| 197 | + const getRequestsQueryKey = (address: string, currentPage: number) => ["requestsData", address, currentPage]; |
| 198 | +
|
| 199 | + const fetchRequests = async (address: string, page: number, pageSize: number) => { |
| 200 | + if (!address || !requestNetwork) return null; |
| 201 | + try { |
| 202 | + const requestsData = await requestNetwork.fromIdentity({ |
| 203 | + type: Types.Identity.TYPE.ETHEREUM_ADDRESS, |
| 204 | + value: address, |
| 205 | + }, undefined, { |
| 206 | + page: page, |
| 207 | + pageSize: pageSize, |
| 208 | + }); |
| 209 | + return requestsData; |
| 210 | + } catch (error) { |
| 211 | + console.error("Failed to fetch requests:", error); |
| 212 | + throw error; |
| 213 | + } |
| 214 | + }; |
| 215 | +
|
193 | 216 | const getRequests = async ( |
194 | 217 | account: GetAccountReturnType, |
195 | 218 | requestNetwork: RequestNetwork | undefined | null |
196 | 219 | ) => { |
197 | 220 | if (!account?.address || !requestNetwork) return; |
198 | 221 | loading = true; |
199 | 222 | try { |
200 | | - const requestsData = await requestNetwork?.fromIdentity({ |
201 | | - type: Types.Identity.TYPE.ETHEREUM_ADDRESS, |
202 | | - value: account?.address, |
| 223 | + const data = await queryClient.fetchQuery({ |
| 224 | + queryKey: getRequestsQueryKey(account.address, currentPage), |
| 225 | + queryFn: () => fetchRequests(account.address, currentPage, itemsPerPage) |
203 | 226 | }); |
204 | 227 |
|
205 | | - requests = requestsData |
206 | | - ?.map((request) => request.getData()) |
| 228 | + if (data) { |
| 229 | + requests = data.requests?.map((request) => request.getData()) |
207 | 230 | .sort((a, b) => b.timestamp - a.timestamp); |
| 231 | + hasMoreRequests = data?.meta?.pagination?.hasMore || false; |
| 232 | + } else { |
| 233 | + requests = []; |
| 234 | + hasMoreRequests = false; |
| 235 | + } |
| 236 | +
|
| 237 | + if (hasMoreRequests) { |
| 238 | + queryClient.prefetchQuery({ |
| 239 | + queryKey: getRequestsQueryKey(account.address, currentPage + 1), |
| 240 | + queryFn: () => fetchRequests(account.address, currentPage + 1, itemsPerPage) |
| 241 | + }); |
| 242 | + } |
208 | 243 |
|
209 | 244 | const uniqueNetworks = new Set<string>(); |
210 | 245 | requests?.forEach((request) => { |
|
243 | 278 | } |
244 | 279 | }; |
245 | 280 |
|
246 | | - const itemsPerPage = 10; |
247 | | - let currentPage = 1; |
248 | | - let totalPages = 1; |
249 | | -
|
250 | 281 | $: { |
251 | 282 | if (sortColumn && sortOrder) { |
252 | 283 | requests = [...(requests ?? [])].sort((a, b) => { |
|
317 | 348 | return false; |
318 | 349 | }); |
319 | 350 |
|
320 | | - $: totalPages = Math.ceil(filteredRequests?.length! / itemsPerPage); |
321 | | -
|
322 | | - $: paginatedRequests = (filteredRequests ?? []).slice( |
323 | | - (currentPage - 1) * itemsPerPage, |
324 | | - currentPage * itemsPerPage |
325 | | - ); |
326 | | -
|
327 | | - $: processedRequests = paginatedRequests?.map( |
| 351 | + $: processedRequests = filteredRequests?.map( |
328 | 352 | ( |
329 | 353 | request |
330 | 354 | ): Types.IRequestDataWithEvents & { |
|
403 | 427 | ); |
404 | 428 |
|
405 | 429 | const goToPage = (page: number) => { |
406 | | - if (page >= 1 && page <= totalPages) { |
| 430 | + if (page >= 1) { |
407 | 431 | currentPage = page; |
| 432 | + getRequests(account, requestNetwork); |
408 | 433 | } |
409 | 434 | }; |
410 | 435 |
|
|
501 | 526 | } finally { |
502 | 527 | loading = false; |
503 | 528 | } |
| 529 | + queryClient.invalidateQueries() |
| 530 | + await getRequests(currentAccount, currentRequestNetwork); |
| 531 | + loading = false; |
504 | 532 | }; |
505 | 533 |
|
506 | 534 | $: loadRequests(sliderValueForDecryption, account, requestNetwork); |
|
913 | 941 | {/if} |
914 | 942 | </Drawer> |
915 | 943 | </div> |
916 | | - {#if paginatedRequests.length > 0} |
| 944 | + {#if processedRequests.length > 0} |
917 | 945 | <div class="pagination"> |
918 | 946 | <button |
919 | 947 | class="chevron-button" |
|
925 | 953 | </i> |
926 | 954 | </button> |
927 | 955 |
|
928 | | - {#each Array(totalPages).fill(null) as _, i} |
929 | | - <button |
930 | | - class={`active-page page-${currentPage === i + 1 ? "on" : "off"}`} |
931 | | - class:active={currentPage === i + 1} |
932 | | - on:click={() => goToPage(i + 1)} |
933 | | - > |
934 | | - {i + 1} |
935 | | - </button> |
936 | | - {/each} |
937 | | - |
938 | 956 | <button |
939 | 957 | class="chevron-button" |
940 | | - disabled={currentPage === totalPages} |
| 958 | + disabled={!hasMoreRequests} |
941 | 959 | on:click={() => goToPage(currentPage + 1)} |
942 | 960 | > |
943 | 961 | <i> |
|
947 | 965 | </div> |
948 | 966 | {/if} |
949 | 967 | </div> |
950 | | - {#if !loading && paginatedRequests.length === 0} |
| 968 | + {#if !loading && processedRequests.length === 0} |
951 | 969 | <div class="no-requests"> |
952 | 970 | <p>No requests found</p> |
953 | 971 | <span>(Please connect a wallet or create a request)</span> |
|
0 commit comments