77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Libraries */
|
|
/* -------------------------------------------------------------------------- */
|
|
import React, { useEffect } from "react";
|
|
import classNames from "classnames";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Hooks */
|
|
/* -------------------------------------------------------------------------- */
|
|
import { useUserStore } from "../data/userSlice";
|
|
import { useEmailDataViewModel } from "../controller/emailDataViewModel";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Components */
|
|
/* -------------------------------------------------------------------------- */
|
|
import Modal from "components/containers/modal/Modal";
|
|
import InputField from "components/controls/InputField";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Icons */
|
|
/* -------------------------------------------------------------------------- */
|
|
import { useTranslation } from "react-i18next";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component */
|
|
/* -------------------------------------------------------------------------- */
|
|
type Props = {
|
|
isShown: boolean;
|
|
onClose: VoidFunction;
|
|
};
|
|
|
|
export default function EmailEditor({ isShown, onClose: extOnClose }: Props) {
|
|
const { t } = useTranslation();
|
|
const store = useUserStore();
|
|
const {
|
|
status,
|
|
isValid,
|
|
isSubmiting,
|
|
email,
|
|
onEmailChange,
|
|
onSubmit,
|
|
onBlur,
|
|
reset,
|
|
} = useEmailDataViewModel(store);
|
|
|
|
const onClose = () => {
|
|
reset();
|
|
extOnClose();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (status?.fullfilled === true) {
|
|
extOnClose();
|
|
}
|
|
}, [status, extOnClose]);
|
|
|
|
const onSubmitHandler = (e: React.SyntheticEvent) => {
|
|
e.preventDefault();
|
|
onSubmit();
|
|
};
|
|
|
|
return (
|
|
<Modal isOpen={isShown} onClose={onClose} className="max-w-lg">
|
|
<form onSubmit={onSubmitHandler}>
|
|
<Modal.Header>{t("account.mail")}</Modal.Header>
|
|
<InputField
|
|
name="email"
|
|
placeholder="Email"
|
|
value={email}
|
|
onChange={onEmailChange}
|
|
onBlur={onBlur}
|
|
autoComplete="off"
|
|
/>
|
|
<Modal.Footer className="flex justify-between">
|
|
|
|
</Modal.Footer>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|