Wired up deleting recommendations from admin x (#17873)

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

apps/admin-x-settings/src/api/recommendations.ts

@@ -1,4 +1,4 @@
-import {Meta, createQuery} from '../utils/apiRequests';
+import {Meta, createMutation, createQuery} from '../utils/apiRequests';
 
 export type Recommendation = {
     id: string
@@ -18,6 +18,8 @@ export interface RecommendationResponseType {
     recommendations: Recommendation[]
 }
 
+export interface RecommendationDeleteResponseType {}
+
 const dataType = 'RecommendationResponseType';
 
 export const useBrowseRecommendations = createQuery<RecommendationResponseType>({
@@ -25,3 +27,17 @@ export const useBrowseRecommendations = createQuery<RecommendationResponseType>(
     path: '/recommendations/',
     defaultSearchParams: {}
 });
+
+export const useDeleteRecommendation = createMutation<RecommendationDeleteResponseType, Recommendation>({
+    method: 'DELETE',
+    path: recommendation => `/recommendations/${recommendation.id}/`,
+    updateQueries: {
+        dataType,
+        update: (_: RecommendationDeleteResponseType, currentData, payload) => (currentData && {
+            ...(currentData as RecommendationResponseType),
+            recommendations: (currentData as RecommendationResponseType).recommendations.filter((r) => {
+                return r.id !== payload.id;
+            })
+        })
+    }
+});

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

@@ -7,22 +7,25 @@ import React from 'react';
 import Table from '../../../../admin-x-ds/global/Table';
 import TableCell from '../../../../admin-x-ds/global/TableCell';
 import TableRow from '../../../../admin-x-ds/global/TableRow';
-import {Recommendation} from '../../../../api/recommendations';
+import {Recommendation, useDeleteRecommendation} from '../../../../api/recommendations';
 
 interface RecommendationListProps {
     recommendations: Recommendation[]
 }
 
 const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recommendation}) => {
+    const {mutateAsync: deleteRecommendation} = useDeleteRecommendation();
+
     const action = (
         <Button color='red' label='Remove' link onClick={() => {
             NiceModal.show(ConfirmationModal, {
                 title: 'Remove recommendation',
                 prompt: <>
-                    <p>Your recommendation <strong>Lenny Nesletter</strong> will no longer be visible to your audience.</p>
+                    <p>Your recommendation <strong>{recommendation.title}</strong> will no longer be visible to your audience.</p>
                 </>,
                 okLabel: 'Remove',
                 onOk: async (modal) => {
+                    await deleteRecommendation(recommendation);
                     modal?.remove();
                 }
             });
@@ -35,7 +38,7 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
         <TableRow action={action} hideActions>
             <TableCell onClick={showDetails}>
                 <div className='group flex items-center gap-3 hover:cursor-pointer'>
-                    <Avatar image='https://substackcdn.com/image/fetch/w_96,h_96,c_fill,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff3f2b2ad-681f-45e1-9496-db80f45e853d_403x403.png' labelColor='white' />
+                    {recommendation.favicon && <Avatar image={recommendation.favicon} labelColor='white' />}
                     <div className={`flex grow flex-col`}>
                         <span className='mb-0.5 font-medium'>{recommendation.title}</span>
                         <span className='text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason'}</span>

ghost/recommendations/src/InMemoryRecommendationRepository.ts

@@ -4,13 +4,22 @@ import {RecommendationRepository} from "./RecommendationRepository";
 export class InMemoryRecommendationRepository implements RecommendationRepository {
     recommendations: Recommendation[] = [
         new Recommendation({
-            title: "The Pragmatic Programmer",
+            title: "Product Marketing Alliance",
             reason: "This is a great book for any developer, regardless of their experience level. It's a classic that's stood the test of time.",
             excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
             featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
-            favicon: "https://www.thepragmaticprogrammer.com/favicon.ico",
-            url: "https://www.thepragmaticprogrammer.com/",
-            oneClickSubscribe: false
+            favicon: "https://www.productmarketingalliance.com/favicon.ico",
+            url: "https://www.productmarketingalliance.com/",
+            oneClickSubscribe: true
+        }),
+        new Recommendation({
+            title: "The Lever",
+            reason: "This is a great book for any developer, regardless of their experience level. It's a classic that's stood the test of time.",
+            excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
+            featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
+            favicon: "https://www.levernews.com/content/images/size/w256h256/2022/03/LEVERFavicon-BorderWhite.png",
+            url: "https://www.levernews.com",
+            oneClickSubscribe: true
         })
     ];