Added click/subscriber based sorting to recommendations list (#18427)

fixes https://github.com/TryGhost/Product/issues/3957

- This change also defaults to show the click count when there are 0
subscribers from a site (otherwise sorting looks weird).
This commit is contained in:
Simon Backx 2023-10-02 17:25:59 +02:00 committed by GitHub
parent 8ed0c19a1c
commit 2f09dd8880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions

View File

@ -22,6 +22,7 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {data: {meta: recommendationsMeta, recommendations} = {}, isLoading: areRecommendationsLoading, hasNextPage, fetchNextPage} = useBrowseRecommendations({
searchParams: {
include: 'count.clicks,count.subscribers',
order: 'count.subscribers desc, count.clicks desc, created_at desc',
limit: '5'
},

View File

@ -35,7 +35,8 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
};
const isGhostSite = recommendation.one_click_subscribe;
const count = (isGhostSite ? recommendation.count?.subscribers : recommendation.count?.clicks) || 0;
const showSubscribers = isGhostSite && !!recommendation.count?.subscribers;
const count = (showSubscribers ? recommendation.count?.subscribers : recommendation.count?.clicks) || 0;
const newMembers = count === 1 ? 'new member' : 'new members';
const clicks = count === 1 ? 'click' : 'clicks';
@ -54,7 +55,7 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
<TableCell className='hidden w-8 align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(count === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px flex grow items-end gap-1'>
<span>{count}</span>
<span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{isGhostSite ? newMembers : clicks}</span>
<span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{showSubscribers ? newMembers : clicks}</span>
</div>)}
</TableCell>
</TableRow>