diff --git a/packages/web/pages/settings/subscriptions.tsx b/packages/web/pages/settings/subscriptions.tsx index f01c2af56..9a0a5d8a9 100644 --- a/packages/web/pages/settings/subscriptions.tsx +++ b/packages/web/pages/settings/subscriptions.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useMemo, useState } from 'react' import { applyStoredTheme } from '../../lib/themeUpdater' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery' @@ -30,6 +30,10 @@ export default function SubscriptionsPage(): JSX.Element { revalidate() } + const sortedSubscriptions = useMemo(() => { + return subscriptions.sort((a, b) => a.updatedAt.localeCompare(b.updatedAt)) + }, [subscriptions]) + return ( <> - {subscriptions.length > 0 ? ( - subscriptions.map((subscription, i) => { + {sortedSubscriptions.length > 0 ? ( + sortedSubscriptions.map((subscription, i) => { return ( setConfirmUnsubscribeName(subscription.name)} deleteTitle="Unsubscribe" sublineElement={