feat: implement account deletion functionality and integrate into GeneralSettings

Author: medyo

src/features/auth/api/deleteAccount.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query'
+import { axios } from 'src/lib/axios'
+import { MutationConfig } from 'src/lib/react-query'
+
+type DeleteAccountDTO = {
+  userId: string
+}
+const deleteAccount = ({ userId }: DeleteAccountDTO): Promise<{ authLink: string }> => {
+  return axios.delete(`/engine/user/${userId}`, {})
+}
+
+type QueryFnType = typeof deleteAccount
+
+type UseGetArticlesOptions = {
+  config?: MutationConfig<QueryFnType>
+}
+
+export const useDeleteAccount = ({ config }: UseGetArticlesOptions = {}) => {
+  return useMutation({
+    ...config,
+    mutationFn: deleteAccount,
+  })
+}

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -4,7 +4,6 @@ import 'react-toggle/style.css'
 import { ChipsSet } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
-import { useAuth } from 'src/features/auth'
 import {
   identifyUserLinksInNewTab,
   identifyUserListingMode,
@@ -17,6 +16,7 @@ import {
 } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { Option } from 'src/types'
+import { DeleteAccount } from '../UserSettings/DeleteAccount'
 import { UserInfo } from '../UserSettings/UserInfo'
 import { DNDSettings } from './DNDSettings'
 import './generalSettings.css'
@@ -63,16 +63,14 @@ export const GeneralSettings = () => {
     }
   }
 
-  const { user } = useAuth()
-
   return (
     <SettingsContentLayout
       title="General Settings"
       description={
         'Customize your experience by selecting the number of cards you want to see, the search engine you want to use and more.'
       }>
       <div>
-        {user != null && <UserInfo user={user} />}
+        <UserInfo />
         <div className="settingRow">
           <p className="settingTitle">Max number of cards to display</p>
           <div className="settingContent">
@@ -137,6 +135,8 @@ export const GeneralSettings = () => {
 
         <DNDSettings />
 
+        <DeleteAccount />
+
         <Footer />
       </div>
     </SettingsContentLayout>

src/features/settings/components/UserSettings/DeleteAccount.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import toast from 'react-simple-toasts'
+import { Button, ConfirmModal } from 'src/components/Elements'
+import { useAuth } from 'src/features/auth'
+import { useDeleteAccount } from 'src/features/auth/api/deleteAccount'
+
+export const DeleteAccount = () => {
+  const deleteAccountMutation = useDeleteAccount()
+  const { user, logout } = useAuth()
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  if (!user) {
+    return null
+  }
+
+  const onDeleteAccount = () => {
+    deleteAccountMutation
+      .mutateAsync({
+        userId: user.id,
+      })
+      .then(() => {
+        logout()
+        toast('Account deleted successfully', { theme: 'successToast' })
+      })
+      .catch(() => {
+        toast('Failed to delete account', { theme: 'defaultToast' })
+      })
+  }
+
+  return (
+    <div className="settingRow">
+      <p className="settingTitle">
+        Delete account?
+        <br />
+        <span className="settingHint">
+          This action is irreversible and will delete all your data. Proceed with caution.
+        </span>
+      </p>
+      <div className="settingContent">
+        <ConfirmModal
+          showModal={confirmDelete}
+          title="Confirm delete account"
+          description="Are you sure you want to delete your account? This action is irreversible and will delete all your data including your streaks and settings."
+          onClose={() => setConfirmDelete(false)}
+          onConfirm={onDeleteAccount}
+        />
+
+        <Button
+          size="small"
+          onClick={() => setConfirmDelete(true)}
+          isLoading={deleteAccountMutation.isLoading}>
+          Delete account
+        </Button>
+      </div>
+    </div>
+  )
+}

src/features/settings/components/UserSettings/UserInfo.tsx

@@ -4,18 +4,19 @@ import { FcGoogle } from 'react-icons/fc'
 import { IoCheckmarkOutline } from 'react-icons/io5'
 import { ReactComponent as StreakIcon } from 'src/assets/icons/fire_icon.svg'
 import { Button, ConfirmModal } from 'src/components/Elements'
-import { useAuth, User } from 'src/features/auth'
+import { useAuth } from 'src/features/auth'
 import { pluralize } from 'src/utils/String'
 
-interface UserInfoProps {
-  user: User
-}
-
-export const UserInfo = ({ user }: UserInfoProps) => {
+export const UserInfo = () => {
+  const { user } = useAuth()
   const { logout, providerId } = useAuth()
   const providerName = providerId?.split('.')[0] || 'Unknown'
   const [showLogout, setShowLogout] = useState(false)
 
+  if (!user) {
+    return null
+  }
+
   return (
     <div className="userContent">
       <ConfirmModal