feat: remove current account

src/app/services/auth.ts

@@ -175,6 +175,12 @@ export const authApi = createApi({
           console.log("api initialized error");
         }
       }
+    }),
+    deleteCurrentAccount: builder.query<void, void>({
+      query: () => ({
+        url: `/user/delete`,
+        method: "DELETE"
+      })
     })
   })
 });
@@ -193,5 +199,6 @@ export const {
   useLazyLogoutQuery,
   useCheckMagicTokenValidMutation,
   useUpdatePasswordMutation,
-  useRegisterMutation
+  useRegisterMutation,
+  useLazyDeleteCurrentAccountQuery
 } = authApi;

src/common/hook/useStreaming/index.ts

@@ -185,7 +185,7 @@ export default function useStreaming() {
                   break;
                 case "delete_user":
                   dispatch(resetAuthData());
-                  toast("sorry, your account has been deleted");
+                  toast("Your account has been deleted");
                   break;
                 default:
                   break;

src/routes/setting/MyAccount.tsx

@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
 import { useUpdateAvatarMutation } from "../../app/services/user";
 import AvatarUploader from "../../common/component/AvatarUploader";
 import ProfileBasicEditModal from "./ProfileBasicEditModal";
+import RemoveAccountConfirmModal from "./RemoveAccountConfirmModal";
 import UpdatePasswordModal from "./UpdatePasswordModal";
 import { useAppSelector } from "../../app/store";
 
@@ -114,7 +115,9 @@ type EditFields = "name" | "email";
 export default function MyAccount() {
   const [passwordModal, setPasswordModal] = useState(false);
   const [editModal, setEditModal] = useState<EditFields | null>(null);
+  const [removeConfirmVisible, setRemoveConfirmVisible] = useState(false);
   const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
+
   const loginUser = useAppSelector((store) => {
     return store.users.byId[store.authData.user?.uid || 0];
   });
@@ -137,6 +140,9 @@ export default function MyAccount() {
   const togglePasswordModal = () => {
     setPasswordModal((prev) => !prev);
   };
+  const toggleRemoveAccountModalVisible = () => {
+    setRemoveConfirmVisible((prev) => !prev);
+  };
 
   if (!loginUser) return null;
   const { uid, avatar, name, email } = loginUser;
@@ -185,7 +191,9 @@ export default function MyAccount() {
             <div className="desc">
               Disabling your account means you can recover it at any time after taking this action.
             </div>
-            <button className="btn">Delete Account</button>
+            <button className="btn" onClick={toggleRemoveAccountModalVisible}>
+              Delete Account
+            </button>
           </div>
         )}
       </StyledWrapper>
@@ -198,6 +206,9 @@ export default function MyAccount() {
         />
       )}
       {passwordModal && <UpdatePasswordModal closeModal={togglePasswordModal} />}
+      {removeConfirmVisible && (
+        <RemoveAccountConfirmModal closeModal={toggleRemoveAccountModalVisible} />
+      )}
     </>
   );
 }

src/routes/setting/RemoveAccountConfirmModal.tsx

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import toast from "react-hot-toast";
+import Modal from "../../common/component/Modal";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+import { useLazyDeleteCurrentAccountQuery } from "../../app/services/auth";
+
+interface Props {
+  closeModal: () => void;
+}
+
+const RemoveConfirmModal: FC<Props> = ({ closeModal }) => {
+  const [removeCurrentAccount, { isLoading }] = useLazyDeleteCurrentAccountQuery();
+  const handleRemove = async () => {
+    try {
+      await removeCurrentAccount();
+      // toast.success("Remove Account Successfully!");
+    } catch (error) {
+      toast.error("Remove Account Failed!");
+    }
+  };
+  return (
+    <Modal id="modal-modal">
+      <StyledModal
+        title="Remove Account"
+        description="Are you sure remove this account?"
+        buttons={
+          <>
+            <Button onClick={closeModal}>Cancel</Button>
+            <Button disabled={isLoading} onClick={handleRemove} className="danger">
+              Remove
+            </Button>
+          </>
+        }
+      ></StyledModal>
+    </Modal>
+  );
+};
+
+export default RemoveConfirmModal;