TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 01:42:29 +03:00
Code Issues Projects Releases Wiki Activity

Wired up 'show all' recommending you (#18440)

Browse Source 
fixes https://github.com/TryGhost/Product/issues/3975
This commit is contained in:
Simon Backx 2023-10-03 10:57:14 +02:00 committed by GitHub
parent 62eb8604fa
commit 8d1320a225
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/admin-x-settings/src/api/mentions.ts
View File

@ -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<MentionsResponseType>({
export const useBrowseMentions = createInfiniteQuery<MentionsResponseType>({
dataType,
path: '/mentions/'
path: '/mentions/',
returnData: (originalData) => {
const {pages} = originalData as InfiniteData<MentionsResponseType>;
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
};
}
});

33
apps/admin-x-settings/src/components/settings/site/Recommendations.tsx
View File

@ -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: <IncomingRecommendationList isLoading={areMentionsLoading || areSourcesLoading} mentions={mentions ?? []} pagination={mentionsPagination} stats={mentionsStats ?? []}/>
counter: mentionsMeta?.pagination?.total,
contents: <IncomingRecommendationList isLoading={areMentionsLoading || areSourcesLoading} mentions={mentions ?? []} showMore={showMoreMentions} stats={mentionsStats ?? []}/>
}
];

6
apps/admin-x-settings/src/components/settings/site/recommendations/IncomingRecommendationList.tsx
View File

@ -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 = (
<div className="flex items-center justify-end">
<Button color='green' label='Recommend back' size='sm' link onClick={() => {
updateRoute({route: `recommendations/add?url=${cleanedSource}`});
updateRoute({route: `recommendations/add?url=${cleanedSource}`});
}} />
</div>
);