mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Added total count of recommendations on the tabs (#18303)
closes https://github.com/TryGhost/Product/issues/3941
This commit is contained in:
parent
23ec56bedf
commit
9c9f0ebadf
2 changed files with 37 additions and 40 deletions
|
@ -1,5 +1,5 @@
|
|||
import Button from '../../../admin-x-ds/global/Button';
|
||||
import IncomingRecommendations from './recommendations/IncomingRecommendations';
|
||||
import IncomingRecommendationList from './recommendations/IncomingRecommendationList';
|
||||
import React, {useState} from 'react';
|
||||
import RecommendationList from './recommendations/RecommendationList';
|
||||
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
|
||||
|
@ -7,7 +7,9 @@ import TabView from '../../../admin-x-ds/global/TabView';
|
|||
import useRouting from '../../../hooks/useRouting';
|
||||
import useSettingGroup from '../../../hooks/useSettingGroup';
|
||||
import {ShowMoreData} from '../../../admin-x-ds/global/Table';
|
||||
import {useBrowseMentions} from '../../../api/mentions';
|
||||
import {useBrowseRecommendations} from '../../../api/recommendations';
|
||||
import {useReferrerHistory} from '../../../api/referrers';
|
||||
import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
|
||||
|
||||
const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
|
||||
|
@ -16,7 +18,8 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
|
|||
handleSave
|
||||
} = useSettingGroup();
|
||||
|
||||
const {data: {recommendations} = {}, isLoading, hasNextPage, fetchNextPage} = useBrowseRecommendations({
|
||||
// Fetch "Your recommendations"
|
||||
const {data: {meta: recommendationsMeta, recommendations} = {}, isLoading: areRecommendationsLoading, hasNextPage, fetchNextPage} = useBrowseRecommendations({
|
||||
searchParams: {
|
||||
include: 'count.clicks,count.subscribers',
|
||||
limit: '5'
|
||||
|
@ -43,12 +46,43 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
|
|||
keepPreviousData: true
|
||||
});
|
||||
|
||||
const showMore: ShowMoreData = {
|
||||
const showMoreRecommendations: ShowMoreData = {
|
||||
hasMore: !!hasNextPage,
|
||||
loadMore: fetchNextPage
|
||||
};
|
||||
|
||||
// Fetch "Recommending you" (mentions & stats)
|
||||
const {data: {mentions} = {}, pagination: mentionsPagination, isLoading: areMentionsLoading} = useBrowseMentions({
|
||||
searchParams: {
|
||||
limit: '5',
|
||||
filter: `source:~$'/.well-known/recommendations.json'+verified:true`,
|
||||
order: 'created_at desc'
|
||||
}
|
||||
});
|
||||
|
||||
const {data: {stats: mentionsStats} = {}, isLoading: areSourcesLoading} = useReferrerHistory({});
|
||||
|
||||
// Select "Your recommendations" by default
|
||||
const [selectedTab, setSelectedTab] = useState('your-recommendations');
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'your-recommendations',
|
||||
title: `Your recommendations ${recommendationsMeta?.pagination?.total ? `(${recommendationsMeta.pagination.total})` : ''}`,
|
||||
contents: <RecommendationList isLoading={areRecommendationsLoading} recommendations={recommendations ?? []} showMore={showMoreRecommendations}/>
|
||||
},
|
||||
{
|
||||
id: 'recommending-you',
|
||||
title: `Recommending you ${mentionsPagination?.total ? `(${mentionsPagination.total})` : ''}`,
|
||||
contents: <IncomingRecommendationList isLoading={areMentionsLoading || areSourcesLoading} mentions={mentions ?? []} pagination={mentionsPagination} stats={mentionsStats ?? []}/>
|
||||
}
|
||||
];
|
||||
|
||||
const groupDescription = (
|
||||
<>Recommend any publication you think your audience will find valuable, and find out when others are recommending you.</>
|
||||
);
|
||||
|
||||
// Add a new recommendation
|
||||
const {updateRoute} = useRouting();
|
||||
const openAddNewRecommendationModal = () => {
|
||||
updateRoute('recommendations/add');
|
||||
|
@ -60,23 +94,6 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
|
|||
}} />
|
||||
);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: 'your-recommendations',
|
||||
title: 'Your recommendations',
|
||||
contents: (<RecommendationList isLoading={isLoading} recommendations={recommendations ?? []} showMore={showMore}/>)
|
||||
},
|
||||
{
|
||||
id: 'recommending-you',
|
||||
title: 'Recommending you',
|
||||
contents: (<IncomingRecommendations />)
|
||||
}
|
||||
];
|
||||
|
||||
const groupDescription = (
|
||||
<>Recommend any publication you think your audience will find valuable, and find out when others are recommending you.</>
|
||||
);
|
||||
|
||||
return (
|
||||
<SettingGroup
|
||||
customButtons={buttons}
|
||||
|
|
|
@ -1,20 +0,0 @@
|
|||
import IncomingRecommendationList from './IncomingRecommendationList';
|
||||
import {useBrowseMentions} from '../../../../api/mentions';
|
||||
import {useReferrerHistory} from '../../../../api/referrers';
|
||||
|
||||
const IncomingRecommendations: React.FC = () => {
|
||||
const {data: {mentions} = {}, pagination, isLoading} = useBrowseMentions({
|
||||
searchParams: {
|
||||
limit: '5',
|
||||
filter: `source:~$'/.well-known/recommendations.json'+verified:true`,
|
||||
order: 'created_at desc'
|
||||
}
|
||||
});
|
||||
|
||||
// Also fetch sources
|
||||
const {data: {stats} = {}, isLoading: areSourcesLoading} = useReferrerHistory({});
|
||||
|
||||
return (<IncomingRecommendationList isLoading={isLoading || areSourcesLoading} mentions={mentions ?? []} pagination={pagination} stats={stats ?? []}/>);
|
||||
};
|
||||
|
||||
export default IncomingRecommendations;
|
Loading…
Add table
Reference in a new issue