Filter out unsubscribed subscriptions

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -65,7 +65,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
 
   useEffect(() => {
     if (!subscriptionsLoading) {
-      setSubscriptions(networkSubscriptions)
+      setSubscriptions(networkSubscriptions.filter((s) => s.status == 'ACTIVE'))
     }
   }, [setSubscriptions, networkLabels, subscriptionsLoading])
 

packages/web/pages/settings/feeds/index.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { FloppyDisk, Pencil, XCircle } from 'phosphor-react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { FormInput } from '../../../components/elements/FormElements'
 import { HStack, SpanBox } from '../../../components/elements/LayoutPrimitives'
 import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
@@ -33,6 +33,15 @@ export default function Rss(): JSX.Element {
   const [onPauseId, setOnPauseId] = useState('')
   const [onEditStatus, setOnEditStatus] = useState<SubscriptionStatus>()
 
+  const sortedSubscriptions = useMemo(() => {
+    if (!subscriptions) {
+      return []
+    }
+    return subscriptions
+      .filter((s) => s.status == 'ACTIVE')
+      .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+  }, [subscriptions])
+
   async function updateSubscription(): Promise<void> {
     const result = await updateSubscriptionMutation({
       id: onEditId,
@@ -107,10 +116,10 @@ export default function Rss(): JSX.Element {
         },
       }}
     >
-      {subscriptions.length === 0 ? (
+      {sortedSubscriptions.length === 0 ? (
         <EmptySettingsRow text={isValidating ? '-' : 'No feeds subscribed'} />
       ) : (
-        subscriptions.map((subscription, i) => {
+        sortedSubscriptions.map((subscription, i) => {
           return (
             <SettingsTableRow
               key={subscription.id}
@@ -179,7 +188,7 @@ export default function Rss(): JSX.Element {
                   </HStack>
                 )
               }
-              isLast={i === subscriptions.length - 1}
+              isLast={i === sortedSubscriptions.length - 1}
               onDelete={() => {
                 console.log('onDelete triggered: ', subscription.id)
                 setOnDeleteId(subscription.id)

packages/web/pages/settings/subscriptions.tsx

@@ -38,7 +38,9 @@ export default function SubscriptionsPage(): JSX.Element {
     if (!subscriptions) {
       return []
     }
-    return subscriptions.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+    return subscriptions
+      .filter((s) => s.status == 'ACTIVE')
+      .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
   }, [subscriptions])
 
   return (