import React from 'react'; import Portal from '@/components/Common/Portal'; import * as yup from 'yup'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { useSelector } from 'react-redux'; import { useMutation } from '@apollo/react-hooks'; import { useHistory } from 'react-router-dom'; import PropTypes from 'prop-types'; import DeleteAccountModal from '@/components/Profile/DeleteAccountModal'; import deleteAccountQuery from '@/queries/user/deleteAccount'; export default function DeleteAccount({ closeModal, isOpen }) { const { data: { email }, } = useSelector((state) => state.user); const history = useHistory(); const AccountSettingSchema = yup.object().shape({ email: yup .string() .required('Email is required') .email('Email invalid') .matches(email), }); const { register, handleSubmit, errors, watch, formState } = useForm({ resolver: yupResolver(AccountSettingSchema), defaultValues: { email: '' }, mode: 'all', }); const watchEmail = watch('email'); const [deleteAccountMutation] = useMutation(deleteAccountQuery); async function onSubmit() { const { data } = await deleteAccountMutation(); if (data?.deleteAccount) { history.replace('/auth/signin'); } } return ( <Portal id="delete-account"> <DeleteAccountModal closeModal={closeModal} isOpen={isOpen} register={register} errors={errors} email={email} isValid={formState.isValid && watchEmail !== ''} onSubmit={handleSubmit(onSubmit)} /> </Portal> ); } DeleteAccount.propTypes = { closeModal: PropTypes.func, isOpen: PropTypes.bool, };