add list subscriptions

packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx

@@ -0,0 +1,67 @@
+import { gql } from 'graphql-request'
+import useSWR from 'swr'
+import { publicGqlFetcher } from '../networkHelpers'
+import { Subscription } from '@omnivore/api/src/generated/graphql'
+
+type SubscriptionsQueryResponse = {
+  isValidating: boolean
+  subscriptions: Subscription[]
+  revalidate: () => void
+}
+
+type SubscriptionsResponseData = {
+  subscriptions: SubscriptionsData
+}
+
+type SubscriptionsData = {
+  subscriptions: unknown
+}
+
+export function useGetSubscriptionsQuery(): SubscriptionsQueryResponse {
+  const query = gql`
+    query GetSubscriptions {
+      subscriptions {
+        ... on SubscriptionsSuccess {
+          subscriptions {
+            id
+            name
+            url
+            description
+            status
+            unsubscribeMailTo
+            unsubscribeHttpUrl
+            createdAt
+            updatedAt
+          }
+        }
+        ... on SubscriptionsError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+
+  try {
+    if (data) {
+      const result = data as SubscriptionsResponseData
+      const subscriptions = result.subscriptions.subscriptions as Subscription[]
+      return {
+        isValidating,
+        subscriptions,
+        revalidate: () => {
+          mutate()
+        },
+      }
+    }
+  } catch (error) {
+    console.log('error', error)
+  }
+  return {
+    isValidating: false,
+    subscriptions: [],
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    revalidate: () => {},
+  }
+}

packages/web/pages/settings/subscriptions.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+import { styled } from '../../components/tokens/stitches.config'
+import { Box, VStack } from '../../components/elements/LayoutPrimitives'
+import { Toaster } from 'react-hot-toast'
+import { applyStoredTheme } from '../../lib/themeUpdater'
+import { StyledText } from '../../components/elements/StyledText'
+import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
+import { useGetSubscriptionsQuery } from '../../lib/networking/queries/useGetSubscriptionsQuery'
+
+const HeaderWrapper = styled(Box, {
+  width: '100%',
+})
+
+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> {
+    // TODO: unsubscribe from the server
+    // const result = await deleteLabelMutation(name)
+    // if (result) {
+    //   showSuccessToast('Unsubscribed', { position: 'bottom-right' })
+    // } else {
+    //   showErrorToast('Failed to unsubscribe', { position: 'bottom-right' })
+    // }
+    // revalidate()
+  }
+
+  return (
+    <PrimaryLayout pageTestId="settings-subscriptions-tag">
+      <Toaster
+        containerStyle={{
+          top: '5rem',
+        }}
+      />
+      <VStack
+        css={{
+          mx: '10px',
+          color: '$grayText',
+        }}
+      >
+        {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}
+        <HeaderWrapper>
+          <Box style={{ display: 'flex', alignItems: 'center' }}>
+            <Box>
+              <StyledText style="fixedHeadline">Subscriptions </StyledText>
+            </Box>
+          </Box>
+        </HeaderWrapper>
+        {subscriptions
+          ? subscriptions.map((subscription, i) => {
+              return
+            })
+          : null}
+      </VStack>
+      <Box css={{ height: '120px' }} />
+    </PrimaryLayout>
+  )
+}