Add empty trash support to account page

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

@@ -0,0 +1,36 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+type EmptyTrashResult = {
+  success?: boolean
+  errorCodes?: string[]
+}
+
+type EmptyTrashApiResponse = {
+  emptyTrash: EmptyTrashResult
+}
+
+export async function emptyTrashMutation(): Promise<boolean> {
+  const mutation = gql`
+    mutation emptyTrash {
+      emptyTrash {
+        ... on EmptyTrashError {
+          errorCodes
+        }
+        ... on EmptyTrashSuccess {
+          success
+        }
+      }
+    }
+  `
+
+  try {
+    const data = (await gqlFetcher(mutation, {})) as EmptyTrashApiResponse
+    if ('success' in data.emptyTrash) {
+      return data.emptyTrash.success as boolean
+    }
+    return false
+  } catch {
+    return false
+  }
+}

packages/web/pages/settings/account.tsx

@@ -19,6 +19,7 @@ import { applyStoredTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 import { ProgressBar } from '../../components/elements/ProgressBar'
+import { emptyTrashMutation } from '../../lib/networking/mutations/emptyTrashMutation'
 
 const ACCOUNT_LIMIT = 50_000
 
@@ -198,6 +199,18 @@ export default function Account(): JSX.Element {
     })()
   }, [email])
 
+  const emptyTrash = useCallback(() => {
+    ;(async () => {
+      showSuccessToast('Emptying trash')
+      const result = await emptyTrashMutation()
+      if (result) {
+        showSuccessToast('Emptied trash')
+      } else {
+        showErrorToast('Error emptying trash')
+      }
+    })()
+  }, [])
+
   applyStoredTheme()
 
   return (
@@ -396,11 +409,20 @@ export default function Account(): JSX.Element {
                 <StyledText style="footnote" css={{ mt: '0px' }}>
                   {`${libraryCount} of ${ACCOUNT_LIMIT} library items used.`}
                 </StyledText>
-                <StyledText style="footnote" css={{ m: '0px' }}>
+                <StyledText style="footnote" css={{ m: '0px', mb: '10px' }}>
                   NOTE: this is a soft limit, if you are approaching or have
                   exceeded this limit please contact support to have your limit
                   raised.
                 </StyledText>
+                <Button
+                  style="ctaDarkYellow"
+                  onClick={(event) => {
+                    event.preventDefault()
+                    emptyTrash()
+                  }}
+                >
+                  Empty trash
+                </Button>
               </>
             )}
             {/* <Button style="ctaDarkYellow">Upgrade</Button> */}