Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Added "Remove" button to "Edit recommendation" modal

Browse source 
refs https://github.com/TryGhost/Product/issues/3899
This commit is contained in:
Djordje Vlaisavljevic 2023-09-18 14:38:50 +01:00
parent 6822c6db24
commit a66d811236
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,11 @@
import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
import Modal from '../../../../admin-x-ds/global/modal/Modal';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React from 'react';
import RecommendationReasonForm from './RecommendationReasonForm';
import useForm from '../../../../hooks/useForm';
import useRouting from '../../../../hooks/useRouting';
import {Recommendation, useBrowseRecommendations, useEditRecommendation} from '../../../../api/recommendations';
import {Recommendation, useBrowseRecommendations, useDeleteRecommendation, useEditRecommendation} from '../../../../api/recommendations';
import {RoutingModalProps} from '../../../providers/RoutingProvider';
import {showToast} from '../../../../admin-x-ds/global/Toast';
import {toast} from 'react-hot-toast';
@ -18,6 +19,7 @@ const EditRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({
const modal = useModal();
const {updateRoute} = useRouting();
const {mutateAsync: editRecommendation} = useEditRecommendation();
const {mutateAsync: deleteRecommendation} = useDeleteRecommendation();
const {formState, updateForm, handleSave, saveState, errors} = useForm({
initialState: {
@ -45,6 +47,38 @@ const EditRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({
okLabel = 'Saved';
}
let leftButtonProps = {
label: 'Remove recommendation',
link: true,
color: 'red' as const,
size: 'sm' as const,
onClick: () => {
modal.remove();
NiceModal.show(ConfirmationModal, {
title: 'Remove recommendation',
prompt: <>
<p>Your recommendation <strong>{recommendation.title}</strong> will no longer be visible to your audience.</p>
</>,
okLabel: 'Remove',
onOk: async (deleteModal) => {
try {
await deleteRecommendation(recommendation);
deleteModal?.remove();
showToast({
message: 'Successfully removed the recommendation',
type: 'success'
});
} catch (_) {
showToast({
message: 'Failed to remove the recommendation. Please try again later.',
type: 'error'
});
}
}
});
}
};
return <Modal
afterClose={() => {
// Closed without saving: reset route
@ -53,6 +87,7 @@ const EditRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({
animate={animate ?? true}
backDropClick={false}
cancelLabel={'Cancel'}
leftButtonProps={leftButtonProps}
okColor='black'
okLabel={okLabel}
size='sm'