feat(client): delete accout

htoann · Nov 24, 2022 · 2e6d5a5 · 2e6d5a5
1 parent 4b6d21b
commit 2e6d5a5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git 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
@@ -32,14 +32,21 @@ export const userApi = createApi({
                 }
             }
         }),
+        deleteUser: builder.mutation({
+            query (id) {
+                return {
+                    url: `/users/${id}`,
+                    method: 'DELETE'
+                }
+            }
+        }),
         addWishList: builder.mutation({
             query: (body: {
                 id: string;
             }) => {
                 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