import { observer } from "mobx-react-lite"; import { useLayoutEffect, useMemo, useState } from "react"; import { Button, Col, Input, Row } from "reactstrap"; import { toast } from "react-toastify"; import ReactTextareaAutosize from "react-textarea-autosize"; import { getMillis } from "taehui-ts/date"; import { useTo } from "taehui-ts/fe-utility"; import { useTranslation } from "react-i18next"; import { useAvatarStore } from "src/Stores"; import { wwwAXIOS } from "src/Www"; import Swal from "sweetalert2"; const ModifyAvatarView = observer(() => { const { taehuiAvatarID, taehuiAvatarName, taehuiFax, taehuiAvatarIntro, totem, } = useAvatarStore(); const { t } = useTranslation(); const [avatarCipher, setAvatarCipher] = useState(""); const [avatarCipherModified, setAvatarCipherModified] = useState(""); const [avatarName, setAvatarName] = useState(taehuiAvatarName); const [fax, setFax] = useState(taehuiFax); const [avatarIntro, setAvatarIntro] = useState(taehuiAvatarIntro); const to = useTo(); const onQuit = () => { to("/"); }; const isValidFax = useMemo(() => /^.+@.+$/.test(fax), [fax]); useLayoutEffect(() => { if (!totem) { to("/avatar/w"); } }, [to, totem]); return ( <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <img alt="" src={`/www/avatar/drawing/${taehuiAvatarID}`} className="avatar route" onClick={() => { const inputElement = document.createElement("input"); inputElement.type = "file"; inputElement.accept = "image/png"; inputElement.addEventListener("change", async ({ target }) => { const file = (target as HTMLInputElement).files?.[0]; if (file) { const form = new FormData(); form.append("data", file); const { status } = await wwwAXIOS.post( "/avatar/drawing", form, { headers: { millis: getMillis(), totem }, }, ); if (status === 201) { window.location.reload(); } } }); inputElement.click(); }} /> </Col> <Col className="m-1" xs="auto"> <Row className="g-0"> <Col className="m-1" xs="auto"> <Input value={taehuiAvatarID} disabled /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <Input valid={!!avatarCipher} invalid={!avatarCipher} type="password" placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <Input type="password" placeholder={t("avatarCipherModified")} value={avatarCipherModified} onChange={({ target: { value } }) => { setAvatarCipherModified(value); }} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <Input valid={!!avatarName} invalid={!avatarName} placeholder={t("avatarName")} value={avatarName} onChange={({ target: { value } }) => { setAvatarName(value); }} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <Input valid={fax.length > 0 && isValidFax} invalid={fax.length > 0 && !isValidFax} type="email" placeholder={t("fax")} value={fax} onChange={({ target: { value } }) => { setFax(value); }} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <ReactTextareaAutosize className="form-control" placeholder={t("avatarIntro")} value={avatarIntro} onChange={({ target: { value } }) => { setAvatarIntro(value); }} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <Button color="success" onClick={async () => { if (avatarCipher && avatarName && (!fax || isValidFax)) { const { status, data } = await wwwAXIOS.put( "/avatar", { avatarCipher, avatarCipherModified, avatarName, fax, avatarIntro, }, { headers: { millis: getMillis(), totem, }, }, ); switch (status) { case 204: if (data) { await Swal.fire( t("doModifyAvatar"), t("doModifiedAvatar"), "success", ); window.location.href = "/"; } else { onQuit(); } break; case 403: toast.error(t("failedValidateCipher")); break; } } else { toast.error(t("failedValidation")); } }} > {t("doModifyAvatar")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={onQuit}> {t("quit")} </Button> </Col> </Row> </Col> </Row> ); }); export default ModifyAvatarView;