105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import Modal from "components/containers/modal/Modal";
|
|
import InputField from "components/controls/InputField";
|
|
import { useUserStore } from "../data/userSlice";
|
|
|
|
import classNames from "classnames";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Formik } from "formik";
|
|
|
|
import * as Yup from "yup";
|
|
import { useUserViewModel } from "user/controller/userViewModel";
|
|
import { User } from "user/domain/userEntity";
|
|
|
|
type Props = {
|
|
isShown: boolean;
|
|
onClose: VoidFunction;
|
|
};
|
|
|
|
type FormValues = Pick<User, "username" | "firstname" | "lastname">;
|
|
|
|
type FormValuesValidation = {
|
|
[Prop in keyof FormValues]: any;
|
|
};
|
|
|
|
export default function PersonalInfomrationEditor({
|
|
isShown,
|
|
onClose: extOnClose,
|
|
}: Props) {
|
|
const { t } = useTranslation();
|
|
const store = useUserStore();
|
|
const { user, updatePersonalInfo } = useUserViewModel(store);
|
|
|
|
const onClose = React.useCallback(() => {
|
|
extOnClose();
|
|
}, [extOnClose]);
|
|
|
|
return (
|
|
<Modal isOpen={isShown} onClose={onClose} className="max-w-lg">
|
|
<Modal.Header>{t("account.info")}</Modal.Header>
|
|
<Formik
|
|
initialValues={{
|
|
username: user?.username || "",
|
|
firstname: user?.firstname || "",
|
|
lastname: user?.lastname || "",
|
|
}}
|
|
validationSchema={Yup.object().shape<FormValuesValidation>({
|
|
username: Yup.string()
|
|
.min(2, "min 2 characters")
|
|
.max(50, "50 characters max")
|
|
.notRequired(),
|
|
firstname: Yup.string()
|
|
.min(2, "min 2 characters")
|
|
.max(50, "50 characters max")
|
|
.required("required field"),
|
|
lastname: Yup.string()
|
|
.min(2, "min 2 characters")
|
|
.max(50, "50 characters max")
|
|
.required("required field"),
|
|
})}
|
|
onSubmit={(values, actions) => {
|
|
updatePersonalInfo(values)?.then(() => {
|
|
onClose();
|
|
});
|
|
}}
|
|
>
|
|
{(formik) => (
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<InputField
|
|
name="username"
|
|
placeholder="Nickname"
|
|
value={formik.values.username}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
autoComplete="off"
|
|
error={formik.errors.username}
|
|
touched={formik.touched.username}
|
|
/>
|
|
<InputField
|
|
name="firstname"
|
|
placeholder="Firstname"
|
|
value={formik.values.firstname}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.errors.firstname}
|
|
touched={formik.touched.firstname}
|
|
/>
|
|
<InputField
|
|
name="lastname"
|
|
placeholder="Lastname"
|
|
value={formik.values.lastname}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.errors.lastname}
|
|
touched={formik.touched.lastname}
|
|
/>
|
|
<Modal.Footer className="flex justify-between">
|
|
|
|
</Modal.Footer>
|
|
</form>
|
|
)}
|
|
</Formik>
|
|
</Modal>
|
|
);
|
|
}
|