Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Fixed edit a recommendation on page 2 or more (#18256)

Browse source 
closes https://github.com/TryGhost/Product/issues/3903

- we do not update the route when opening "Edit a recommendation"
anymore. By doing so, we can pass the recommendation object to the edit
page, without having to refetch it from the database
This commit is contained in:
Sag 2023-09-20 22:33:53 +02:00 • committed by GitHub
parent 8515bdf587
commit 163263a27f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
View file

@ -56,7 +56,7 @@ const modalPaths: {[key: string]: ModalName} = {
'integrations/add': 'AddIntegrationModal',
'integrations/show/:id': 'CustomIntegrationModal',
'recommendations/add': 'AddRecommendationModal',
'recommendations/:id': 'EditRecommendationModal',
'recommendations/edit': 'EditRecommendationModal',
'announcement-bar/edit': 'AnnouncementBarModal',
'embed-signup-form/show': 'EmbedSignupFormModal'
};

5
apps/admin-x-settings/src/components/providers/routing/modals.tsx
View file

@ -47,9 +47,10 @@ const modals = {
ZapierModal,
AnnouncementBarModal,
EmbedSignupFormModal
} satisfies {[key: string]: ModalComponent};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} satisfies {[key: string]: ModalComponent<any>};
export default modals;
export type ModalName = keyof typeof modals;
export type ModalComponent = React.FC<NiceModalHocProps & RoutingModalProps>
export type ModalComponent<Props = object> = React.FC<NiceModalHocProps & RoutingModalProps & Props>;

17
apps/admin-x-settings/src/components/settings/site/recommendations/EditRecommendationModal.tsx
View file

@ -5,17 +5,17 @@ import React from 'react';
import RecommendationReasonForm from './RecommendationReasonForm';
import useForm from '../../../../hooks/useForm';
import useRouting from '../../../../hooks/useRouting';
import {Recommendation, useBrowseRecommendations, useDeleteRecommendation, useEditRecommendation} from '../../../../api/recommendations';
import {Recommendation, useDeleteRecommendation, useEditRecommendation} from '../../../../api/recommendations';
import {RoutingModalProps} from '../../../providers/RoutingProvider';
import {showToast} from '../../../../admin-x-ds/global/Toast';
import {toast} from 'react-hot-toast';
interface AddRecommendationModalProps {
interface EditRecommendationModalProps {
recommendation: Recommendation,
animate?: boolean
}
const EditRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({recommendation, animate}) => {
const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationModalProps> = ({recommendation, animate}) => {
const modal = useModal();
const {updateRoute} = useRouting();
const {mutateAsync: editRecommendation} = useEditRecommendation();
@ -114,15 +114,4 @@ const EditRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({
</Modal>;
};
const EditRecommendationModal: React.FC<RoutingModalProps> = ({params}) => {
const {data: {recommendations} = {}} = useBrowseRecommendations();
const recommendation = recommendations?.find(({id}) => id === params?.id);
if (recommendation) {
return <EditRecommendationModalConfirm recommendation={recommendation} />;
} else {
return null;
}
};
export default NiceModal.create(EditRecommendationModal);

12
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
View file

@ -4,6 +4,8 @@ import RecommendationIcon from './RecommendationIcon';
import Table from '../../../../admin-x-ds/global/Table';
import TableCell from '../../../../admin-x-ds/global/TableCell';
// import TableHead from '../../../../admin-x-ds/global/TableHead';
import EditRecommendationModal from './EditRecommendationModal';
import NiceModal from '@ebay/nice-modal-react';
import TableRow from '../../../../admin-x-ds/global/TableRow';
import useRouting from '../../../../hooks/useRouting';
import {PaginationData} from '../../../../hooks/usePagination';
@ -16,10 +18,16 @@ interface RecommendationListProps {
}
const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recommendation}) => {
const {updateRoute} = useRouting();
const {route} = useRouting();
// Navigate to the edit page, without changing the route
// This helps to avoid fetching the recommendation
const showDetails = () => {
updateRoute({route: `recommendations/${recommendation.id}`});
NiceModal.show(EditRecommendationModal, {
pathName: route,
animate: false,
recommendation: recommendation
});
};
const showSubscribes = recommendation.one_click_subscribe && (recommendation.count?.subscribers || recommendation.count?.clicks === 0);