Tristan Yang
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { ChangeEvent, FC, useEffect, useRef, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { useUpdateInfoMutation } from "@/app/services/user";
|
|
import Modal from "@/components/Modal";
|
|
import Button from "@/components/styled/Button";
|
|
import Input from "@/components/styled/Input";
|
|
import StyledModal from "@/components/styled/Modal";
|
|
|
|
interface Props {
|
|
label?: string;
|
|
valueKey?: "name" | "email";
|
|
type?: string;
|
|
value?: string;
|
|
title?: string;
|
|
intro?: string;
|
|
closeModal: () => void;
|
|
}
|
|
|
|
const ProfileBasicEditModal: FC<Props> = ({
|
|
label = "Username",
|
|
valueKey = "name",
|
|
value = "",
|
|
type = "text",
|
|
title = "Change your username",
|
|
intro = "Enter a new username and your existing password.",
|
|
closeModal
|
|
}) => {
|
|
const formRef = useRef(null);
|
|
const { t } = useTranslation();
|
|
const [input, setInput] = useState(value);
|
|
const [update, { isLoading, isSuccess }] = useUpdateInfoMutation();
|
|
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
setInput(evt.target.value);
|
|
};
|
|
const handleUpdate = () => {
|
|
if (!formRef || !formRef.current) return;
|
|
const formEle = formRef.current as HTMLFormElement;
|
|
if (!formEle.checkValidity()) {
|
|
formEle.reportValidity();
|
|
return;
|
|
}
|
|
update({ [valueKey]: input });
|
|
};
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
// todo
|
|
toast.success(t("tip.update"));
|
|
closeModal();
|
|
}
|
|
}, [isSuccess]);
|
|
return (
|
|
<Modal id="modal-modal">
|
|
<StyledModal
|
|
title={title}
|
|
description={intro}
|
|
buttons={
|
|
<>
|
|
<Button className="cancel" onClick={closeModal}>
|
|
{t("action.cancel")}
|
|
</Button>
|
|
<Button onClick={handleUpdate}>{isLoading ? "Updating" : t("action.done")}</Button>
|
|
</>
|
|
}
|
|
>
|
|
<form ref={formRef} className="flex flex-col gap-2 w-full" action="/">
|
|
<label htmlFor={valueKey} className="text-sm text-left text-gray-500">
|
|
{label}
|
|
</label>
|
|
<Input name={valueKey} value={input} onChange={handleChange} type={type} required></Input>
|
|
</form>
|
|
</StyledModal>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ProfileBasicEditModal;
|