Skip to content

Commit 33e0e54

Browse files
committed
refactor: remove no longer used stake pools browsing pagination
1 parent 30d54ce commit 33e0e54

File tree

2 files changed

+44
-68
lines changed

2 files changed

+44
-68
lines changed

packages/staking/src/features/BrowsePools/BrowsePools.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Box } from '@input-output-hk/lace-ui-toolkit';
22
import { Search } from '@lace/common';
33
import { USE_MULTI_DELEGATION_STAKING_GRID_VIEW } from 'featureFlags';
4+
import { useEffect } from 'react';
45
import { useTranslation } from 'react-i18next';
56
import { useDelegationPortfolioStore } from '../store';
67
import * as styles from './BrowsePools.css';
@@ -15,7 +16,7 @@ import { BrowsePoolsView } from './types';
1516
const LACE_APP_ID = 'lace-app';
1617

1718
export const BrowsePools = () => {
18-
const { totalPoolsCount, status, searchQuery, setSearchQuery, setSort, sort, pools, paginatePools } =
19+
const { totalPoolsCount, status, searchQuery, setSearchQuery, setSort, sort, pools, paginatePools, performQuery } =
1920
useQueryStakePools();
2021
const { poolsView, switchPoolsView } = useBrowsePoolsView();
2122

@@ -26,6 +27,10 @@ export const BrowsePools = () => {
2627

2728
const fetching = status === 'fetching';
2829

30+
useEffect(() => {
31+
performQuery();
32+
}, [performQuery]);
33+
2934
return (
3035
<>
3136
<Box className={styles.browsePools} testId="stake-pool-table">
Lines changed: 38 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
/* eslint-disable no-console */
21
import { PostHogAction } from '@lace/common';
3-
import { StateStatus, useOutsideHandles } from 'features/outside-handles-provider';
2+
import { useOutsideHandles } from 'features/outside-handles-provider';
43
import { StakePoolDetails, mapStakePoolToDisplayData, useDelegationPortfolioStore } from 'features/store';
5-
import debounce from 'lodash/debounce';
6-
import isEqual from 'lodash/isEqual';
7-
import { useCallback, useMemo, useRef } from 'react';
4+
import { useCallback, useMemo, useState } from 'react';
85
import { ListRange } from 'react-virtuoso';
9-
import { SEARCH_DEBOUNCE_IN_MS } from '../constants';
106
import { StakePoolSortOptions } from '../types';
117

128
type QueryStatus = 'idle' | 'fetching' | 'paginating';
139

1410
type UseQueryStakePoolsResult = {
1511
status: QueryStatus;
1612
paginatePools: (range: ListRange) => Promise<void>;
13+
performQuery: () => void;
1714
pools: (StakePoolDetails | undefined)[];
1815
searchQuery: string;
1916
setSearchQuery: (searchString: string) => void;
@@ -23,57 +20,25 @@ type UseQueryStakePoolsResult = {
2320
};
2421

2522
export const useQueryStakePools = () => {
26-
const portfolioMutators = useDelegationPortfolioStore((s) => s.mutators);
23+
const portfolioStore = useDelegationPortfolioStore();
24+
const { portfolioMutators, searchQuery, sort } = useMemo(() => {
25+
const { mutators, searchQuery: searchQueryStore, sortField, sortOrder } = portfolioStore;
26+
27+
return {
28+
portfolioMutators: mutators,
29+
searchQuery: searchQueryStore || '',
30+
sort: sortField && sortOrder && { field: sortField, order: sortOrder },
31+
};
32+
}, [portfolioStore]);
33+
2734
const {
28-
walletStoreStakePoolSearchResults: { pageResults, totalResultCount: totalPoolsCount },
29-
walletStoreStakePoolSearchResultsStatus,
30-
walletStoreFetchStakePools: fetchStakePools,
3135
analytics,
36+
walletStoreBlockchainProvider: { stakePoolProvider },
3237
} = useOutsideHandles();
3338

34-
const { searchQuery, sortField, sortOrder } = useDelegationPortfolioStore((store) => ({
35-
searchQuery: store.searchQuery || '',
36-
sortField: store.sortField,
37-
sortOrder: store.sortOrder,
38-
}));
39-
40-
const previousRequest = useRef<{ searchQuery: string; sortField?: string; sortOrder?: string } | null>(null);
41-
const status = useMemo(() => {
42-
const nextRequest = { searchQuery, sortField, sortOrder };
43-
const requestChanged = !isEqual(previousRequest.current, nextRequest);
44-
const statusIdle =
45-
walletStoreStakePoolSearchResultsStatus === StateStatus.LOADED ||
46-
walletStoreStakePoolSearchResultsStatus === StateStatus.IDLE;
47-
48-
return statusIdle ? 'idle' : requestChanged ? 'fetching' : 'paginating';
49-
}, [searchQuery, sortField, sortOrder, walletStoreStakePoolSearchResultsStatus]);
50-
51-
const debouncedSearch = useMemo(
52-
() =>
53-
debounce(async (params: Parameters<typeof fetchStakePools>[0]) => {
54-
await fetchStakePools(params);
55-
previousRequest.current = {
56-
searchQuery: params.searchString,
57-
sortField: params.sort?.field,
58-
sortOrder: params.sort?.order,
59-
};
60-
}, SEARCH_DEBOUNCE_IN_MS),
61-
[fetchStakePools]
62-
);
63-
64-
const paginatePools = useCallback(
65-
async ({ startIndex, endIndex }: { startIndex: number; endIndex: number }) => {
66-
if (startIndex === endIndex) return;
67-
68-
debouncedSearch({
69-
limit: endIndex,
70-
searchString: searchQuery ?? '',
71-
skip: startIndex,
72-
...(sortField && sortOrder && { sort: { field: sortField, order: sortOrder } }),
73-
});
74-
},
75-
[debouncedSearch, searchQuery, sortField, sortOrder]
76-
);
39+
const [pools, setPools] = useState<StakePoolDetails[]>(Array.from({ length: 100 }));
40+
const [status, setStatus] = useState<'fetching' | 'idle'>('fetching');
41+
const [totalPoolsCount, setTotalPoolsCount] = useState<number>(0);
7742

7843
const setSearchQuery = useCallback(
7944
(searchString: string) => {
@@ -89,11 +54,6 @@ export const useQueryStakePools = () => {
8954
[analytics, portfolioMutators, searchQuery]
9055
);
9156

92-
const pools = useMemo(
93-
() => pageResults.map((pool) => (pool ? mapStakePoolToDisplayData({ stakePool: pool }) : undefined)),
94-
[pageResults]
95-
);
96-
9757
const setSort = useCallback(
9858
(data: StakePoolSortOptions) =>
9959
portfolioMutators.executeCommand({
@@ -103,23 +63,34 @@ export const useQueryStakePools = () => {
10363
[portfolioMutators]
10464
);
10565

66+
const performQuery = useCallback(() => {
67+
setStatus('fetching');
68+
stakePoolProvider
69+
.queryStakePools({
70+
filters: { pledgeMet: true, text: searchQuery },
71+
pagination: { limit: 100_000_000, startAt: 0 },
72+
sort,
73+
})
74+
.then(({ pageResults, totalResultCount }) => {
75+
setPools(pageResults.map((pool) => mapStakePoolToDisplayData({ stakePool: pool })));
76+
setTotalPoolsCount(totalResultCount);
77+
setStatus('idle');
78+
})
79+
.catch((error) => console.error(error));
80+
}, [searchQuery, sort, stakePoolProvider]);
81+
10682
return useMemo<UseQueryStakePoolsResult>(
10783
() => ({
108-
paginatePools,
84+
paginatePools: () => Promise.resolve(),
85+
performQuery,
10986
pools,
11087
searchQuery,
11188
setSearchQuery,
11289
setSort,
113-
...(sortField &&
114-
sortOrder && {
115-
sort: {
116-
field: sortField,
117-
order: sortOrder,
118-
},
119-
}),
90+
sort,
12091
status,
12192
totalPoolsCount,
12293
}),
123-
[paginatePools, pools, searchQuery, setSearchQuery, setSort, sortField, sortOrder, status, totalPoolsCount]
94+
[pools, searchQuery, setSearchQuery, sort, setSort, status, totalPoolsCount, performQuery]
12495
);
12596
};

0 commit comments

Comments
 (0)