Handle feed subscriptions on the subscriptions page

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

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}
       </>