Merge pull request #351 from omnivore-app/fix/email-toast-messages

Improve toast error/success messages for email operations

packages/web/lib/networking/mutations/createNewsletterEmailMutation.ts

@@ -1,5 +1,15 @@
 import { gql } from 'graphql-request'
 import { gqlFetcher } from '../networkHelpers'
+import { NewsletterEmail } from '../queries/useGetNewsletterEmailsQuery'
+
+type CreateNewsletterEmailResult = {
+  createNewsletterEmail: CreateNewsletterEmail
+  errorCodes?: unknown[]
+}
+
+type CreateNewsletterEmail = {
+  newsletterEmail: NewsletterEmail
+}
 
 export async function createNewsletterEmailMutation(): Promise<string | undefined> {
   const mutation = gql`
@@ -19,9 +29,9 @@ export async function createNewsletterEmailMutation(): Promise<string | undefine
   `
 
   try {
-    const data = await gqlFetcher(mutation)
+    const data = await gqlFetcher(mutation) as CreateNewsletterEmailResult
     console.log('created email', data)
-    return 'data'
+    return data.errorCodes ? undefined : data.createNewsletterEmail.newsletterEmail.id
   } catch (error) {
     console.log('createNewsletterEmailMutation error', error)
     return undefined

packages/web/lib/networking/mutations/deleteNewsletterEmailMutation.ts

@@ -1,5 +1,15 @@
 import { gql } from 'graphql-request'
 import { gqlFetcher } from '../networkHelpers'
+import { NewsletterEmail } from '../queries/useGetNewsletterEmailsQuery'
+
+type DeleteNewsletterEmailResult = {
+  deleteNewsletterEmail: CreateNewsletterEmail
+  errorCodes?: unknown[]
+}
+
+type CreateNewsletterEmail = {
+  newsletterEmail: NewsletterEmail
+}
 
 export async function deleteNewsletterEmailMutation(
   newsletterEmailId: string
@@ -21,9 +31,8 @@ export async function deleteNewsletterEmailMutation(
   `
 
   try {
-    const data = await gqlFetcher(mutation, { newsletterEmailId })
-    console.log('delete email', data)
-    return 'data'
+    const data = await gqlFetcher(mutation, { newsletterEmailId }) as DeleteNewsletterEmailResult
+    return data.errorCodes ? undefined : data.deleteNewsletterEmail.newsletterEmail.id
   } catch (error) {
     console.log('deleteNewsletterEmailMutation error', error)
     return undefined

packages/web/pages/settings/emails.tsx

@@ -22,7 +22,7 @@ import { toast, Toaster } from 'react-hot-toast'
 import { useCallback } from 'react'
 import { StyledText } from '../../components/elements/StyledText'
 import { applyStoredTheme } from '../../lib/themeUpdater'
-import { showSuccessToast } from '../../lib/toastHelpers'
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import Link from 'next/link'
 
 enum TextType {
@@ -185,12 +185,21 @@ export default function EmailsPage(): JSX.Element {
   applyStoredTheme(false)
 
   async function createEmail(): Promise<void> {
+    const email = await createNewsletterEmailMutation()
+    if (!email) {
+      showErrorToast('Error Creating Email')
+      return
+    }
     showSuccessToast('Email Created')
-    await createNewsletterEmailMutation()
     revalidate()
   }
+
   async function deleteEmail(id: string): Promise<void> {
-    await deleteNewsletterEmailMutation(id)
+    const result = await deleteNewsletterEmailMutation(id)
+    if (!result) {
+      showErrorToast('Error Deleting Email')
+      return
+    }
     revalidate()
     showSuccessToast('Email Deleted')
   }