From 2e6d5a5815865b79d544ec05c9d0d93c91ee848e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=AA=20C=C3=B4ng=20L=C3=BD?=
 <58856636+lecongly@users.noreply.github.com>
Date: Thu, 24 Nov 2022 16:37:13 +0700
Subject: [PATCH] feat(client): delete accout

---
 client/components/user/Security.tsx | 32 +++++++++++++++++++++++++++--
 client/services/userApi.ts          | 17 +++++++++++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/client/components/user/Security.tsx b/client/components/user/Security.tsx
index 1592a50..e296dba 100644
--- a/client/components/user/Security.tsx
+++ b/client/components/user/Security.tsx
@@ -1,6 +1,30 @@
 import React from 'react'
+import {useDeleteUserMutation} from '../../services/userApi'
+import {useAppDispatch, useAppSelector} from '../../store/hooks'
+import {logout, setUser} from '../../features/authSlice'
+import {toast} from 'react-toastify'
+import {useRouter} from 'next/router'
 
 const Security = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const {user, token} = useAppSelector((state) => state.persistedReducer.auth)
+
+    const [deleteUser, {isLoading: isDeleting}] = useDeleteUserMutation()
+
+    const handleDeleteMyAccount = () => {
+        deleteUser(user?._id as string).unwrap()
+            .then((result) => {
+                console.log(result)
+                toast.success(result.message || 'Delete success')
+                dispatch(logout())
+                router.push('/')
+            })
+            .catch((error) => {
+                console.log(error)
+                toast.error(error.data.message || 'Delete fail. Something went wrong')
+            })
+    }
     return (
         <div>
             <div>
@@ -74,8 +98,12 @@ const Security = () => {
                                     We&apos;ll use it to fix problems and improve our services.</span>
                                 <input type="text" className=" mb-2.5"/>
                             </div>
-                            <button className="float-right w-max text-white bg-lightPrimary px-2.5 py-2 rounded-md">
-                                Delete account
+                            <button
+                                className="float-right w-max text-white bg-lightPrimary px-2.5 py-2 rounded-md"
+                                onClick={handleDeleteMyAccount}
+                                disabled={isDeleting}
+                            >
+                                {isDeleting ? 'Deleting...' : 'Delete account'}
                             </button>
                         </nav>
                     </details>
diff --git a/client/services/userApi.ts b/client/services/userApi.ts
index dfd4649..cb95769 100644
--- a/client/services/userApi.ts
+++ b/client/services/userApi.ts
@@ -32,6 +32,14 @@ export const userApi = createApi({
                 }
             }
         }),
+        deleteUser: builder.mutation({
+            query (id) {
+                return {
+                    url: `/users/${id}`,
+                    method: 'DELETE'
+                }
+            }
+        }),
         addWishList: builder.mutation({
             query: (body: {
                 id: string;
@@ -39,7 +47,6 @@ export const userApi = createApi({
                 return {url: '/users/wishlist', method: 'post', body}
             }
         }),
-
         deleteWishList: builder.mutation({
             query: (body: {
                 id: string;
@@ -50,4 +57,10 @@ export const userApi = createApi({
     })
 })
 
-export const {useGetUserQuery, useUpdateUserMutation, useAddWishListMutation, useDeleteWishListMutation} = userApi
+export const {
+    useGetUserQuery,
+    useUpdateUserMutation,
+    useDeleteUserMutation,
+    useAddWishListMutation,
+    useDeleteWishListMutation
+} = userApi