diff --git a/apps/enterprise-api/src/v1/daos/handler.ts b/apps/enterprise-api/src/v1/daos/handler.ts index aad12e55..0b4460f0 100644 --- a/apps/enterprise-api/src/v1/daos/handler.ts +++ b/apps/enterprise-api/src/v1/daos/handler.ts @@ -25,6 +25,7 @@ const search = (params: ReturnType): Promise): Promise; } export const parseQueryParameters = ( @@ -20,6 +22,7 @@ export const parseQueryParameters = ( query: StringParam, limit: withLimitParam(), direction: withDirectionParam(), + start_after: StringParam }; const validation = (params: QueryStringParameters): QueryStringParameters => { diff --git a/apps/enterprise/src/hooks/useApiEndpoint.ts b/apps/enterprise/src/hooks/useApiEndpoint.ts index d73dba56..f0c47565 100644 --- a/apps/enterprise/src/hooks/useApiEndpoint.ts +++ b/apps/enterprise/src/hooks/useApiEndpoint.ts @@ -36,7 +36,7 @@ type HealthCheckEndpoint = { type DaosEndpoint = { path: 'v1/daos'; - params: { query?: string; limit: number; direction?: Direction }; + params: { query?: string; limit: number; direction?: Direction, start_after?: string }; }; type DaoEndpoint = { diff --git a/apps/enterprise/src/pages/daos/Page.tsx b/apps/enterprise/src/pages/daos/Page.tsx index aa88941a..2a96be4a 100644 --- a/apps/enterprise/src/pages/daos/Page.tsx +++ b/apps/enterprise/src/pages/daos/Page.tsx @@ -16,14 +16,21 @@ import { daoTypes } from 'dao'; import { DaoFilter } from './DaoFilter'; import { IndexersAreRequired } from 'settings/components/IndexersAreRequired'; import { useDebounceSearch } from 'hooks/useDebounce'; +import { PrimaryButton } from 'lib/ui/buttons/rect/PrimaryButton'; -const MAX_PREVIEW_SIZE = 100; +const MAX_PREVIEW_SIZE = 30; export const Page = () => { const stickyRef = useRef(null); const [showDropdown, setShowDropdown] = useState(false); const dropdownRef = useRef(null); const [daoTypesToDisplay, setDaoTypesToDisplay] = useState(daoTypes); + const [searchText, setSearchText] = useState(''); + const debouncedSearchText = useDebounceSearch(searchText, 500); + const [daosQueryKey, setDaosQueryKey] = useState(QUERY_KEY.DAOS); + const [pageLastIndex, setPageLastIndex] = useState(null); + const [allItems, setAllItems] = useState([]); + const [loadMore, setLoadMore] = useState(true); useEffect(() => { if (showDropdown) { @@ -40,9 +47,7 @@ export const Page = () => { }, [showDropdown]); - const [searchText, setSearchText] = useState(''); - const debouncedSearchText = useDebounceSearch(searchText, 500); - const [daosQueryKey, setDaosQueryKey] = useState(QUERY_KEY.DAOS) + useEffect(() => { setDaosQueryKey(debouncedSearchText === '' ? QUERY_KEY.DAOS : `${QUERY_KEY.DAOS}-${debouncedSearchText}`); @@ -51,10 +56,35 @@ export const Page = () => { const { data, isLoading } = useDAOsQuery({ query: debouncedSearchText, limit: MAX_PREVIEW_SIZE, - queryKey: daosQueryKey + start_after: pageLastIndex || '', + queryKey: daosQueryKey, }); - const items = data?.filter(item => daoTypesToDisplay.includes(item.type)); + useEffect(() => { + if (data && data.length && loadMore) { + const items = data.filter(item => daoTypesToDisplay.includes(item.type)); + setPageLastIndex(data[data.length - 1].address); + setAllItems(prevItems => [...prevItems, ...items]); + } + + + if (!isLoading && loadMore) { + setLoadMore(false); + } + }, [data, daoTypesToDisplay, loadMore, isLoading]); + + const viewMoreButton = ( + { + const newQueryKey = `${daosQueryKey}-${pageLastIndex}`; + setDaosQueryKey(newQueryKey); + setLoadMore(true) + }} + > + View More + + ); const searchInput = ( { {searchInput} - {data && data?.length ? ( - + {allItems && allItems.length ? ( + <> + + {viewMoreButton} + ) : ( noResults )} @@ -115,7 +148,7 @@ export const Page = () => {
@@ -127,18 +160,21 @@ export const Page = () => {
} > - {data && data?.length ? ( - - ) : ( - noResults - )} + {allItems && allItems.length ? ( + <> + + {viewMoreButton} + + ) : ( + noResults + )} diff --git a/apps/enterprise/src/queries/useDAOsQuery.ts b/apps/enterprise/src/queries/useDAOsQuery.ts index 2abf5d5d..f9af45d5 100644 --- a/apps/enterprise/src/queries/useDAOsQuery.ts +++ b/apps/enterprise/src/queries/useDAOsQuery.ts @@ -10,6 +10,7 @@ interface DAOsQueryOptions { limit?: number; direction?: Direction; queryKey?: string; + start_after?: string; } export type DAOsQueryResponse = Array<{ @@ -49,9 +50,9 @@ export const fetchDAOsQuery = async (endpoint: string) => { }; export const useDAOsQuery = (options: DAOsQueryOptions = {}): UseQueryResult | undefined> => { - const { query, limit = 100, direction = query?.length === 0 ? 'desc' : 'asc', queryKey = QUERY_KEY.DAOS } = options; + const { query, limit = 100, direction = query?.length === 0 ? 'desc' : 'asc', queryKey = QUERY_KEY.DAOS, start_after } = options; - const [areIndexersEnabled] = useAreIndexersEnabled() + const [areIndexersEnabled] = useAreIndexersEnabled(); const endpoint = useApiEndpoint({ path: 'v1/daos', @@ -59,12 +60,13 @@ export const useDAOsQuery = (options: DAOsQueryOptions = {}): UseQueryResult { if (!areIndexersEnabled) { - throw new Error('DAOs query is disabled. Enable indexers to use this query.') + throw new Error('DAOs query is disabled. Enable indexers to use this query.'); } return fetchDAOsQuery(endpoint);