diff --git a/apps/admin-x-settings/src/api/mentions.ts b/apps/admin-x-settings/src/api/mentions.ts index bb50d5cf7e..74f9c4e431 100644 --- a/apps/admin-x-settings/src/api/mentions.ts +++ b/apps/admin-x-settings/src/api/mentions.ts @@ -1,4 +1,5 @@ -import {Meta, createPaginatedQuery} from '../utils/api/hooks'; +import {InfiniteData} from '@tanstack/react-query'; +import {Meta, createInfiniteQuery} from '../utils/api/hooks'; export type Mention = { id: string; @@ -21,7 +22,21 @@ export interface MentionsResponseType { const dataType = 'MentionsResponseType'; -export const useBrowseMentions = createPaginatedQuery({ +export const useBrowseMentions = createInfiniteQuery({ dataType, - path: '/mentions/' + path: '/mentions/', + returnData: (originalData) => { + const {pages} = originalData as InfiniteData; + let mentions = pages.flatMap(page => page.mentions); + + // Remove duplicates + mentions = mentions.filter((mention, index) => { + return mentions.findIndex(({id}) => id === mention.id) === index; + }); + + return { + mentions, + meta: pages[pages.length - 1].meta + }; + } }); diff --git a/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx b/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx index 1756a08479..fb2cb7ea48 100644 --- a/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx +++ b/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx @@ -53,14 +53,39 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => { }; // Fetch "Recommending you" (mentions & stats) - const {data: {mentions} = {}, pagination: mentionsPagination, isLoading: areMentionsLoading} = useBrowseMentions({ + const {data: {mentions, meta: mentionsMeta} = {}, isLoading: areMentionsLoading, hasNextPage: hasMentionsNextPage, fetchNextPage: fetchMentionsNextPage} = useBrowseMentions({ searchParams: { limit: '5', filter: `source:~$'/.well-known/recommendations.json'+verified:true`, order: 'created_at desc' - } + }, + + // We first load 5, then load 100 at a time (= show all, but without using the dangerous 'all' limit) + getNextPageParams: (lastPage, otherParams) => { + if (!lastPage.meta) { + return; + } + const {limit, page, pages} = lastPage.meta.pagination; + if (page >= pages) { + return; + } + + const newPage = limit < 100 ? 1 : (page + 1); + + return { + ...otherParams, + page: newPage.toString(), + limit: '100' + }; + }, + keepPreviousData: true }); + const showMoreMentions: ShowMoreData = { + hasMore: !!hasMentionsNextPage, + loadMore: fetchMentionsNextPage + }; + const {data: {stats: mentionsStats} = {}, isLoading: areSourcesLoading} = useReferrerHistory({}); // Select "Your recommendations" by default @@ -76,8 +101,8 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => { { id: 'recommending-you', title: `Recommending you`, - counter: mentionsPagination?.total, - contents: + counter: mentionsMeta?.pagination?.total, + contents: } ]; diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/IncomingRecommendationList.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/IncomingRecommendationList.tsx index e7c6c8c760..31653defbd 100644 --- a/apps/admin-x-settings/src/components/settings/site/recommendations/IncomingRecommendationList.tsx +++ b/apps/admin-x-settings/src/components/settings/site/recommendations/IncomingRecommendationList.tsx @@ -13,7 +13,7 @@ import {ReferrerHistoryItem} from '../../../../api/referrers'; interface IncomingRecommendationListProps { mentions: Mention[], stats: ReferrerHistoryItem[], - pagination: PaginationData, + pagination?: PaginationData, showMore?: ShowMoreData, isLoading: boolean } @@ -46,11 +46,11 @@ const IncomingRecommendationItem: React.FC<{mention: Mention, stats: ReferrerHis const freeMembersLabel = (signups) === 1 ? 'free member' : 'free members'; const {updateRoute} = useRouting(); - + const action = (
);