diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx index 48e60c19f..8e3e13c98 100644 --- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx +++ b/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]) diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx index e25f235f3..b96bbe70d 100644 --- a/packages/web/pages/settings/feeds/index.tsx +++ b/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() + 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 { const result = await updateSubscriptionMutation({ id: onEditId, @@ -107,10 +116,10 @@ export default function Rss(): JSX.Element { }, }} > - {subscriptions.length === 0 ? ( + {sortedSubscriptions.length === 0 ? ( ) : ( - subscriptions.map((subscription, i) => { + sortedSubscriptions.map((subscription, i) => { return ( ) } - isLast={i === subscriptions.length - 1} + isLast={i === sortedSubscriptions.length - 1} onDelete={() => { console.log('onDelete triggered: ', subscription.id) setOnDeleteId(subscription.id) diff --git a/packages/web/pages/settings/subscriptions.tsx b/packages/web/pages/settings/subscriptions.tsx index b6921e563..1b7b8646d 100644 --- a/packages/web/pages/settings/subscriptions.tsx +++ b/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 (