diff --git a/package-lock.json b/package-lock.json index 3257b476..7e95b176 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "dependencies": { "@babel/preset-env": "^7.24.5", - "@deriv-com/api-hooks": "^0.1.18", + "@deriv-com/api-hooks": "^0.1.19", "@deriv-com/ui": "latest", "@deriv-com/utils": "latest", "@deriv/deriv-api": "^1.0.15", @@ -2603,9 +2603,9 @@ } }, "node_modules/@deriv-com/api-hooks": { - "version": "0.1.18", - "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.18.tgz", - "integrity": "sha512-7g8V8c9CNjqOCy3bbvv/CpioR03hLhCxEJaFZ+f4IUXNYy28E5aHuiCSUive/Q+eLcJiG6K2VYYxaIjt6UY4qA==", + "version": "0.1.19", + "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.19.tgz", + "integrity": "sha512-7xIGWpsMmJ0fP7mbCOxo32ZLdWT0FM9Txw5OS3XbkxW67zZuK8khRo5MiVCunlDMGIkO3nG/EBeqJGi/TzK5Mw==", "dependencies": { "@deriv-com/utils": "^0.0.11", "@deriv/api-types": "^1.0.177", @@ -22570,9 +22570,9 @@ } }, "@deriv-com/api-hooks": { - "version": "0.1.18", - "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.18.tgz", - "integrity": "sha512-7g8V8c9CNjqOCy3bbvv/CpioR03hLhCxEJaFZ+f4IUXNYy28E5aHuiCSUive/Q+eLcJiG6K2VYYxaIjt6UY4qA==", + "version": "0.1.19", + "resolved": "https://registry.npmjs.org/@deriv-com/api-hooks/-/api-hooks-0.1.19.tgz", + "integrity": "sha512-7xIGWpsMmJ0fP7mbCOxo32ZLdWT0FM9Txw5OS3XbkxW67zZuK8khRo5MiVCunlDMGIkO3nG/EBeqJGi/TzK5Mw==", "requires": { "@deriv-com/utils": "^0.0.11", "@deriv/api-types": "^1.0.177", diff --git a/package.json b/package.json index c0733bf0..b4fa7a14 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "dependencies": { "@babel/preset-env": "^7.24.5", - "@deriv-com/api-hooks": "^0.1.18", + "@deriv-com/api-hooks": "^0.1.19", "@deriv-com/ui": "latest", "@deriv-com/utils": "latest", "@deriv/deriv-api": "^1.0.15", diff --git a/src/components/Modals/NicknameModal/NicknameModal.tsx b/src/components/Modals/NicknameModal/NicknameModal.tsx index 4302917f..a535a828 100644 --- a/src/components/Modals/NicknameModal/NicknameModal.tsx +++ b/src/components/Modals/NicknameModal/NicknameModal.tsx @@ -45,6 +45,7 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) => } else if (isError) { debouncedReset(); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isError, isSuccess, setHasCreatedAdvertiser]); return ( diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index a03efbc9..b41bd126 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -21,7 +21,6 @@ const Table = ({ columns = [], data, emptyDataMessage, - isFetching, loadMoreFunction, renderHeader = () =>
, rowRender, @@ -47,7 +46,6 @@ const Table = ({ }, [headerRef?.current]); const { fetchMoreOnBottomReached } = useFetchMore({ - isFetching, loadMore: loadMoreFunction, ref: tableContainerRef, }); diff --git a/src/hooks/api/advert/p2p-advert/useAdvertList.ts b/src/hooks/api/advert/p2p-advert/useAdvertList.ts index 3bdc2195..cf6947b4 100644 --- a/src/hooks/api/advert/p2p-advert/useAdvertList.ts +++ b/src/hooks/api/advert/p2p-advert/useAdvertList.ts @@ -8,6 +8,7 @@ type TPayload = NonNullable[0]>['payload']; const useAdvertList = (payload?: TPayload) => { const { data, loadMoreAdverts, ...rest } = useP2PAdvertList({ payload: { ...payload, limit: payload?.limit, offset: payload?.offset }, + queryKey: ['p2p_advert_list', payload], }); // Add additional information to the 'p2p_advert_list' data diff --git a/src/hooks/custom-hooks/useFetchMore.ts b/src/hooks/custom-hooks/useFetchMore.ts index 9ab72260..0af4e26a 100644 --- a/src/hooks/custom-hooks/useFetchMore.ts +++ b/src/hooks/custom-hooks/useFetchMore.ts @@ -1,31 +1,42 @@ import { RefObject, useCallback, useEffect } from 'react'; type TProps = { - isFetching: boolean; loadMore: () => void; ref: RefObject; }; /** A custom hook to load more items in the table on scroll to bottom of the table */ -const useFetchMore = ({ isFetching, loadMore, ref }: TProps) => { +const useFetchMore = ({ loadMore, ref }: TProps) => { //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table const fetchMoreOnBottomReached = useCallback( (containerRefElement?: HTMLDivElement | null) => { if (containerRefElement) { const { clientHeight, scrollHeight, scrollTop } = containerRefElement; //once the user has scrolled within 200px of the bottom of the table, fetch more data if we can - if (scrollHeight - scrollTop - clientHeight < 200 && !isFetching) { + const isBottom = scrollHeight - scrollTop <= clientHeight + 200; + + if (isBottom) { loadMore(); } } }, - [loadMore, isFetching] + [loadMore] ); - //a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data useEffect(() => { - fetchMoreOnBottomReached(ref.current); - }, [fetchMoreOnBottomReached]); + const currentRef = ref.current; + const handleScroll = () => fetchMoreOnBottomReached(currentRef); + + if (currentRef) { + currentRef.addEventListener('scroll', handleScroll); + } + + return () => { + if (currentRef) { + currentRef.removeEventListener('scroll', handleScroll); + } + }; + }, [fetchMoreOnBottomReached, ref]); return { fetchMoreOnBottomReached, diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx index 8d4d532d..cb5adc61 100644 --- a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx +++ b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx @@ -32,7 +32,7 @@ const BuySellTableRenderer = ({ return ; } - if (!data && !searchValue) { + if ((!data && !searchValue) || (data.length === 0 && !searchValue)) { return (