78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
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 = subscriptions.map((subscription) => [
|
|
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}
|
|
/>
|
|
|
|
{/* TODO: Dynamically loaded from API response */}
|
|
<Table
|
|
heading={'Popular Newsletters'}
|
|
headers={['Substack', 'Axios', 'Bloomberg']}
|
|
rows={[
|
|
[
|
|
'https://substack.com/',
|
|
'https://www.axios.com/newsletters',
|
|
'https://www.bloomberg.com/account/newsletters',
|
|
],
|
|
]}
|
|
/>
|
|
</PrimaryLayout>
|
|
)
|
|
}
|