From 1b1a7830363d7c2cf4e33b9f94b2648fe142754c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 25 Jul 2022 12:38:59 -0700
Subject: [PATCH] Add web page to delete accounts

---
 .../mutations/deleteAccountMutation.ts        | 40 ++++++++++
 .../web/pages/settings/delete-my-account.tsx  | 76 +++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 packages/web/lib/networking/mutations/deleteAccountMutation.ts
 create mode 100644 packages/web/pages/settings/delete-my-account.tsx

diff --git a/packages/web/lib/networking/mutations/deleteAccountMutation.ts b/packages/web/lib/networking/mutations/deleteAccountMutation.ts
new file mode 100644
index 000000000..15c6a6f6e
--- /dev/null
+++ b/packages/web/lib/networking/mutations/deleteAccountMutation.ts
@@ -0,0 +1,40 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+type DeleteAccountData = {
+  userID?: string
+}
+
+type DeleteAccountResponse = {
+  errorCodes?: string[]
+  deleteAccount?: DeleteAccountData
+}
+
+export async function deleteAccountMutation(
+  userId: string
+): Promise<string | undefined> {
+  const mutation = gql`
+    mutation DeleteAccount($userId: ID!) {
+      deleteAccount(userID: $userId) {
+        ... on DeleteAccountSuccess {
+          userID
+        }
+        ... on DeleteAccountError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  console.log('deleteAccountMutation', mutation)
+
+  try {
+    const response = await gqlFetcher(mutation, { userId })
+    console.log('response', response)
+    const data = response as DeleteAccountResponse | undefined
+    return data?.deleteAccount?.userID
+  } catch (error) {
+    console.error(error)
+    return undefined
+  }
+}
diff --git a/packages/web/pages/settings/delete-my-account.tsx b/packages/web/pages/settings/delete-my-account.tsx
new file mode 100644
index 000000000..a0e0c80c0
--- /dev/null
+++ b/packages/web/pages/settings/delete-my-account.tsx
@@ -0,0 +1,76 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Toaster } from 'react-hot-toast'
+
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
+import { applyStoredTheme } from '../../lib/themeUpdater'
+
+import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+
+import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
+import { Button } from '../../components/elements/Button'
+import { HStack } from '../../components/elements/LayoutPrimitives'
+import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
+import { Loader } from '../../components/templates/SavingRequest'
+import { deleteAccountMutation } from '../../lib/networking/mutations/deleteAccountMutation'
+
+export default function DeleteMyAccount(): JSX.Element {
+  const router = useRouter()
+  const viewer = useGetViewerQuery()
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  applyStoredTheme(false)
+
+  async function deleteAccount(): Promise<void> {
+    const viewerId = viewer.viewerData?.me?.id
+    if (!viewerId) {
+      showErrorToast("Error deleting user, no user id found.")
+      return
+    }
+
+    const result = await deleteAccountMutation(viewerId)
+    if (result) {
+      showSuccessToast('Account deleted',)
+      setTimeout(() => {
+        window.location.href = '/login'
+      }, 2000)
+    } else {
+      showErrorToast('Failed to delete')
+    }
+
+    setShowConfirm(false)
+  }
+
+  if (!viewer || !router) {
+    return <Loader />
+  }
+
+  return (
+    <PrimaryLayout pageTestId={'api-keys'}>
+      <Toaster
+        containerStyle={{
+          top: '5rem',
+        }}
+      />
+
+      {showConfirm ? (
+        <ConfirmationModal
+          message={'Are you sure you want to delete your account? This can not be reversed and all your data (saved articles, highlights, and notes) will be deleted.'}
+          onAccept={deleteAccount}
+          onOpenChange={() => setShowConfirm(false)}
+        />
+      ) : null}
+
+      <HStack css={{ padding: '24px', width: '100%', height: '100%'}}>
+        {viewer && router ? (
+          <Button
+            style="ctaDarkYellow"
+            onClick={() => setShowConfirm(true)}
+          >
+            Delete my Account
+          </Button>
+        ) : <Loader />}
+      </HStack>
+    </PrimaryLayout>
+  )
+}