Skip to content

Commit

Permalink
fix: history intersection loader issue (#1598)
Browse files Browse the repository at this point in the history
Co-authored-by: Amir Ekbatanifard <[email protected]>
  • Loading branch information
Nick-1979 and AMIRKHANEF authored Oct 23, 2024
1 parent 9d22ab9 commit 8744720
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 21 deletions.
4 changes: 2 additions & 2 deletions packages/extension-polkagate/src/popup/history/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function TransactionHistory (): React.ReactElement {
setTabIndex ={setTabIndex}
tabIndex={tabIndex}
/>
<Grid container item sx={{ gap: '5px', height: '70%', maxHeight: window.innerHeight - 145, overflowY: 'auto', px: '15px' }}>
<Grid container id='scrollArea' item sx={{ gap: '5px', height: '70%', maxHeight: window.innerHeight - 145, overflowY: 'auto', px: '15px' }}>
{grouped && Object.keys(grouped).length > 0 &&
Object.entries(grouped)?.map((group) => {
const [date, info] = group;
Expand All @@ -71,6 +71,7 @@ export default function TransactionHistory (): React.ReactElement {
{(grouped === undefined || (transfersTx.isFetching && tabHistory?.length === 0)) &&
<Progress pt='150px' size={50} title={t('Loading history')} type='grid' />
}
<div id='observerObj' style={{ height: '1px' }} />
{grouped &&
<Grid container justifyContent='center'>
{
Expand All @@ -85,7 +86,6 @@ export default function TransactionHistory (): React.ReactElement {
)
}
</Grid>}
<div id='observerObj' />
</Grid>
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
setTabIndex ={setTabIndex}
tabIndex={tabIndex}
/>
<Grid container item sx={{ gap: '5px', height: '70%', maxHeight: 650 - 145, overflowY: 'auto' }}>
<Grid container id='scrollArea' item sx={{ gap: '5px', height: '70%', maxHeight: 650 - 145, overflowY: 'auto' }}>
{grouped && Object.keys(grouped).length > 0 &&
Object.entries(grouped)?.map((group) => {
const [date, info] = group;
Expand Down Expand Up @@ -93,7 +93,7 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
)
}
</Grid>}
<div id='observerObj' />
<div id='observerObj' style={{ height: '1px' }} />
</Grid>
</>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -180,30 +180,48 @@ export default function useTransactionHistory (address: string | undefined, tabI
return;
}

const observerCallback = async (): Promise<void> => {
const observerCallback = (entries: IntersectionObserverEntry[]): void => {
const [entry] = entries;

if (!entry.isIntersecting) {
return; // If the observer object is not in view, do nothing
}

if (receivingTransfers.current?.isFetching) {
return;
return; // If already fetching, do nothing
}

if (!receivingTransfers.current?.hasMore) {
return observerInstance?.current?.disconnect();
observerInstance.current?.disconnect();
console.log('No more data to load, disconnecting observer.');

return;
}

await getTransfers(receivingTransfers.current);
getTransfers(receivingTransfers.current) // Fetch more transfers if available
.catch((error) => {
console.error('Error fetching transfers:', error);
});
};

const options = {
root: document.getElementById('scrollArea'),
rootMargin: '0px',
threshold: 1.0
threshold: 1.0 // Trigger when 100% of the target (observerObj) is visible
};

// eslint-disable-next-line @typescript-eslint/no-misused-promises
observerInstance.current = new IntersectionObserver(observerCallback, options);

const target = document.getElementById('observerObj');

target && observerInstance.current.observe(target);
}, [chainName, formatted, getTransfers, tabHistory]);
if (target) {
observerInstance.current.observe(target); // Start observing the target
}

return () => {
observerInstance.current?.disconnect();
};
}, [chainName, formatted, getTransfers]);

return { grouped, tabHistory, transfersTx };
}
15 changes: 6 additions & 9 deletions packages/extension-polkagate/src/util/api/getTransfers.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable sort-keys */
import type { TransferRequest } from '../types';

import request from 'umi-request';

import { TransferRequest } from '../types';

const nullObject = {
code: 0,
message: 'Success',
generated_at: Date.now(),
data: {
count: 0,
transfers: null
}
},
generated_at: Date.now(),
message: 'Success'
} as unknown as TransferRequest;

export function getTxTransfers(chainName: string, address: string, pageNum: number, pageSize: number): Promise<TransferRequest> {
export function getTxTransfers (chainName: string, address: string, pageNum: number, pageSize: number): Promise<TransferRequest> {
if (!chainName) {
return Promise.resolve(nullObject);
}
Expand Down Expand Up @@ -46,6 +43,6 @@ export function getTxTransfers(chainName: string, address: string, pageNum: numb
});
}

function postReq(api: string, data: Record<string, unknown> = {}, option?: Record<string, unknown>): Promise<TransferRequest> {
function postReq (api: string, data: Record<string, unknown> = {}, option?: Record<string, unknown>): Promise<TransferRequest> {
return request.post(api, { data, ...option });
}

0 comments on commit 8744720

Please sign in to comment.