omnivore/packages/web/pages/settings/subscriptions.tsx

import { useState } from 'react'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { Toaster } from 'react-hot-toast'
import { applyStoredTheme } from '../../lib/themeUpdater'
import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery'
import { unsubscribeMutation } from '../../lib/networking/mutations/unsubscribeMutation'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { Table } from '../../components/elements/Table'

export default function SubscriptionsPage(): JSX.Element {
  const { subscriptions, revalidate } = useGetSubscriptionsQuery()
  const [confirmUnsubscribeName, setConfirmUnsubscribeName] = useState<
    string | null
  >(null)

  applyStoredTheme(false)

  async function onUnsubscribe(name: string): Promise<void> {
    const result = await unsubscribeMutation(name)
    if (result) {
      showSuccessToast('Unsubscribed', { position: 'bottom-right' })
    } else {
      showErrorToast('Failed to unsubscribe', { position: 'bottom-right' })
    }
    revalidate()
  }

  const headers = ['Name', 'Email', 'Updated Time']
  const rows = new Map<string, string[]>()
  subscriptions.forEach((subscription) =>
    rows.set(subscription.name, [
      subscription.name,
      subscription.newsletterEmail,
      subscription.updatedAt.toString(),
    ])
  )

  return (
    <PrimaryLayout pageTestId="settings-subscriptions-tag">
      <Toaster
        containerStyle={{
          top: '5rem',
        }}
      />

      {confirmUnsubscribeName ? (
        <ConfirmationModal
          message={
            'Are you sure? You will stop receiving newsletters from this subscription.'
          }
          onAccept={async () => {
            await onUnsubscribe(confirmUnsubscribeName)
            setConfirmUnsubscribeName(null)
          }}
          onOpenChange={() => setConfirmUnsubscribeName(null)}
        />
      ) : null}
      <Table
        heading={'Subscriptions'}
        headers={headers}
        rows={rows}
        onDelete={setConfirmUnsubscribeName}
      />
    </PrimaryLayout>
  )
}