From 7dae2ed8c495011ba60f382f37549556937f45d6 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Tue, 24 Dec 2024 09:43:58 +0200
Subject: [PATCH] fix: feed deletion (#4023)

---
 .../src/components/CustomFeedEmptyScreen.tsx  | 27 +++++++++-----
 .../components/buttons/DeleteCustomFeed.tsx   | 35 +++++++++++++++++++
 .../shared/src/components/layout/common.tsx   |  7 +++-
 3 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 packages/shared/src/components/buttons/DeleteCustomFeed.tsx

diff --git a/packages/shared/src/components/CustomFeedEmptyScreen.tsx b/packages/shared/src/components/CustomFeedEmptyScreen.tsx
index ffc85881f5..cfa63151ee 100644
--- a/packages/shared/src/components/CustomFeedEmptyScreen.tsx
+++ b/packages/shared/src/components/CustomFeedEmptyScreen.tsx
@@ -11,8 +11,11 @@ import { HashtagIcon } from './icons';
 import { PageContainer } from './utilities';
 import { ButtonSize } from './buttons/common';
 import { webappUrl } from '../lib/constants';
+import { usePlusSubscription } from '../hooks';
+import { DeleteCustomFeed } from './buttons/DeleteCustomFeed';
 
 export const CustomFeedEmptyScreen = (): ReactElement => {
+  const { isPlus } = usePlusSubscription();
   const router = useRouter();
 
   return (
@@ -27,14 +30,22 @@ export const CustomFeedEmptyScreen = (): ReactElement => {
           Start by configuring your feed settings to tailor content to your
           interests. Add tags, filters, and sources to make it truly yours.
         </EmptyScreenDescription>
-        <EmptyScreenButton
-          onClick={() => {
-            router.push(`${webappUrl}feeds/${router.query.slugOrId}/edit`);
-          }}
-          size={ButtonSize.Large}
-        >
-          Set up feed
-        </EmptyScreenButton>
+        <div className="flex flex-col items-center gap-4 tablet:flex-row">
+          <EmptyScreenButton
+            onClick={() => {
+              router.push(`${webappUrl}feeds/${router.query.slugOrId}/edit`);
+            }}
+            size={ButtonSize.Large}
+          >
+            Set up feed
+          </EmptyScreenButton>
+          {!isPlus ? (
+            <DeleteCustomFeed
+              className="mt-10"
+              feedId={router.query.slugOrId as string}
+            />
+          ) : null}
+        </div>
       </EmptyScreenContainer>
     </PageContainer>
   );
diff --git a/packages/shared/src/components/buttons/DeleteCustomFeed.tsx b/packages/shared/src/components/buttons/DeleteCustomFeed.tsx
new file mode 100644
index 0000000000..ec81dc5e6d
--- /dev/null
+++ b/packages/shared/src/components/buttons/DeleteCustomFeed.tsx
@@ -0,0 +1,35 @@
+import React, { type ReactElement } from 'react';
+import { ButtonSize, ButtonVariant, type ButtonProps, Button } from './Button';
+import { SimpleTooltip } from '../tooltips';
+import { useFeedSettingsEdit } from '../feeds/FeedSettings/useFeedSettingsEdit';
+import { TrashIcon } from '../icons';
+import { WithClassNameProps } from '../utilities';
+
+type DeleteCustomFeedProps = {
+  feedId: string;
+} & WithClassNameProps;
+export const DeleteCustomFeed = ({
+  feedId,
+  className,
+}: DeleteCustomFeedProps): ReactElement => {
+  const { onDelete } = useFeedSettingsEdit({ feedSlugOrId: feedId });
+
+  const commonIconProps: ButtonProps<'button'> = {
+    size: ButtonSize.Medium,
+    variant: ButtonVariant.Float,
+    iconSecondaryOnHover: true,
+    className,
+  };
+
+  return (
+    <SimpleTooltip
+      placement="bottom"
+      content="Delete custom feed"
+      container={{
+        className: 'max-w-64 text-center',
+      }}
+    >
+      <Button {...commonIconProps} icon={<TrashIcon />} onClick={onDelete} />
+    </SimpleTooltip>
+  );
+};
diff --git a/packages/shared/src/components/layout/common.tsx b/packages/shared/src/components/layout/common.tsx
index 51a20aab4a..ae51db0db7 100644
--- a/packages/shared/src/components/layout/common.tsx
+++ b/packages/shared/src/components/layout/common.tsx
@@ -34,6 +34,7 @@ import { useAuthContext } from '../../contexts/AuthContext';
 import useCustomDefaultFeed from '../../hooks/feed/useCustomDefaultFeed';
 import { useLazyModal } from '../../hooks/useLazyModal';
 import { LazyModal } from '../modals/common/types';
+import { DeleteCustomFeed } from '../buttons/DeleteCustomFeed';
 
 type State<T> = [T, Dispatch<SetStateAction<T>>];
 
@@ -76,7 +77,8 @@ export const SearchControlHeader = ({
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isMobile = useViewSize(ViewSize.MobileL);
   const { streak, isLoading, isStreaksEnabled } = useReadingStreak();
-  const { showPlusSubscription, isEnrolledNotPlus } = usePlusSubscription();
+  const { showPlusSubscription, isEnrolledNotPlus, isPlus } =
+    usePlusSubscription();
   const { user } = useAuthContext();
   const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const { openModal } = useLazyModal();
@@ -157,6 +159,9 @@ export const SearchControlHeader = ({
         key="toggle-clickbait-shield"
       />
     ) : null,
+    !isPlus && feedName === SharedFeedPage.Custom ? (
+      <DeleteCustomFeed feedId={router?.query?.slugOrId as string} />
+    ) : null,
   ];
   const actions = actionButtons.filter((button) => !!button);