import usePutAvatar from "@/query/usePutAvatar"; import { useTaehuiStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useMemo, useState } from "react"; import { PencilFill } from "react-bootstrap-icons"; import Button from "react-bootstrap/Button"; import FormControl from "react-bootstrap/FormControl"; import InputGroup from "react-bootstrap/InputGroup"; import InputGroupText from "react-bootstrap/InputGroupText"; import Stack from "react-bootstrap/Stack"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; export default observer(() => { const { taehuiAvatarID, taehuiAvatarName, taehuiFax, taehuiAvatarIntro } = useTaehuiStore(); const t = useTranslations(); const [avatarCipher, setAvatarCipher] = useState(""); const [avatarCipherModified, setAvatarCipherModified] = useState(""); const [avatarName, setAvatarName] = useState(taehuiAvatarName); const [fax, setFax] = useState(taehuiFax); const [avatarIntro, setAvatarIntro] = useState(taehuiAvatarIntro); const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]); const { mutateAsync: putAvatar } = usePutAvatar(); return ( <Stack gap={2}> <InputGroup> <InputGroupText>{t("avatarID")}</InputGroupText> <FormControl type="text" value={taehuiAvatarID} readOnly /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarCipher")}</InputGroupText> <FormControl type="password" placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarCipherModified")}</InputGroupText> <FormControl type="password" placeholder={t("avatarCipherModified")} value={avatarCipherModified} onChange={({ target: { value } }) => { setAvatarCipherModified(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarName")}</InputGroupText> <FormControl type="text" maxLength={16} isValid={avatarName.length > 0} isInvalid={avatarName.length === 0} placeholder={t("avatarName")} value={avatarName} onChange={({ target: { value } }) => { setAvatarName(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("fax")}</InputGroupText> <FormControl type="email" isValid={fax.length > 0 && isValidFax} isInvalid={fax.length > 0 && !isValidFax} placeholder={t("fax")} value={fax} onChange={({ target: { value } }) => { setFax(value); }} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarIntro")}</InputGroupText> <FormControl as={ReactTextareaAutosize} placeholder={t("avatarIntro")} value={avatarIntro} onChange={({ target: { value } }) => { setAvatarIntro(value); }} /> </InputGroup> <Button variant="warning" onClick={async () => { if (avatarCipher && avatarName && (!fax || isValidFax)) { await putAvatar({ avatarCipher, avatarCipherModified, avatarName, fax, avatarIntro, }); } else { toast.error(t("failedValidation")); } }} > <PencilFill /> </Button> </Stack> ); });