From 72f7ba42355472aa292aa8ea9a5ef52abd776d30 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 28 Aug 2023 15:10:39 +0800
Subject: [PATCH] Handle feed subscriptions on the subscriptions page

---
 .../queries/useGetSubscriptionsQuery.tsx      |  5 ++-
 packages/web/pages/settings/subscriptions.tsx | 41 +++++++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
index 48fcef432..f5cc5051a 100644
--- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
@@ -12,6 +12,7 @@ export enum SubscriptionType {
 export type Subscription = {
   id: string
   name: string
+  type: SubscriptionType
   newsletterEmail?: string
 
   url?: string
@@ -38,16 +39,16 @@ type SubscriptionsData = {
 }
 
 export function useGetSubscriptionsQuery(
-  subscriptionType = SubscriptionType.NEWSLETTER,
   sortBy = 'UPDATED_TIME'
 ): SubscriptionsQueryResponse {
   const query = gql`
     query GetSubscriptions {
-      subscriptions(sort: { by: ${sortBy} }, type: ${subscriptionType}) {
+      subscriptions(sort: { by: ${sortBy} }) {
         ... on SubscriptionsSuccess {
           subscriptions {
             id
             name
+            type
             newsletterEmail
             url
             description
diff --git a/packages/web/pages/settings/subscriptions.tsx b/packages/web/pages/settings/subscriptions.tsx
index 7a7826053..5e328266a 100644
--- a/packages/web/pages/settings/subscriptions.tsx
+++ b/packages/web/pages/settings/subscriptions.tsx
@@ -1,7 +1,11 @@
 import { useMemo, useState } from 'react'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
-import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery'
+import {
+  Subscription,
+  SubscriptionType,
+  useGetSubscriptionsQuery,
+} from '../../lib/networking/queries/useGetSubscriptionsQuery'
 import { unsubscribeMutation } from '../../lib/networking/mutations/unsubscribeMutation'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import {
@@ -15,14 +19,13 @@ import { formattedShortDate } from '../../lib/dateFormatting'
 
 export default function SubscriptionsPage(): JSX.Element {
   const { subscriptions, revalidate, isValidating } = useGetSubscriptionsQuery()
-  const [confirmUnsubscribeName, setConfirmUnsubscribeName] = useState<
-    string | null
-  >(null)
+  const [confirmUnsubscribeSubscription, setConfirmUnsubscribeSubscription] =
+    useState<Subscription | null>(null)
 
   applyStoredTheme(false)
 
-  async function onUnsubscribe(name: string): Promise<void> {
-    const result = await unsubscribeMutation(name)
+  async function onUnsubscribe(subscription: Subscription): Promise<void> {
+    const result = await unsubscribeMutation(subscription.name, subscription.id)
     if (result) {
       showSuccessToast('Unsubscribed', { position: 'bottom-right' })
     } else {
@@ -52,7 +55,7 @@ export default function SubscriptionsPage(): JSX.Element {
                 key={subscription.id}
                 title={subscription.name}
                 isLast={i === sortedSubscriptions.length - 1}
-                onDelete={() => setConfirmUnsubscribeName(subscription.name)}
+                onDelete={() => setConfirmUnsubscribeSubscription(subscription)}
                 deleteTitle="Unsubscribe"
                 sublineElement={
                   <StyledText
@@ -67,11 +70,13 @@ export default function SubscriptionsPage(): JSX.Element {
                     {`Last received ${formattedShortDate(
                       subscription.updatedAt
                     )} at `}
-                    <Link
-                      href={`/settings/emails?address=${subscription.newsletterEmail}`}
-                    >
-                      {subscription.newsletterEmail}
-                    </Link>
+                    {subscription.newsletterEmail && (
+                      <Link
+                        href={`/settings/emails?address=${subscription.newsletterEmail}`}
+                      >
+                        {subscription.newsletterEmail}
+                      </Link>
+                    )}
                   </StyledText>
                 }
               />
@@ -83,16 +88,18 @@ export default function SubscriptionsPage(): JSX.Element {
           />
         )}
 
-        {confirmUnsubscribeName ? (
+        {confirmUnsubscribeSubscription ? (
           <ConfirmationModal
             message={
-              'Are you sure? You will stop receiving newsletters from this subscription.'
+              confirmUnsubscribeSubscription.type == SubscriptionType.NEWSLETTER
+                ? 'Are you sure? You will stop receiving newsletters from this subscription.'
+                : 'Are you sure? You will stop receiving updates from this feed.'
             }
             onAccept={async () => {
-              await onUnsubscribe(confirmUnsubscribeName)
-              setConfirmUnsubscribeName(null)
+              await onUnsubscribe(confirmUnsubscribeSubscription)
+              setConfirmUnsubscribeSubscription(null)
             }}
-            onOpenChange={() => setConfirmUnsubscribeName(null)}
+            onOpenChange={() => setConfirmUnsubscribeSubscription(null)}
           />
         ) : null}
       </>