import { useState } from "react"; import { useTranslation } from "react-i18next"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; import { Button, Col, Collapse, Input, ListGroupItem, Row } from "reactstrap"; import { getDatetime } from "taehui-ts/date"; import { wwwAXIOS } from "src/Www"; import { CommentaryAPICommentary } from "src/wwwAPI"; const CommentaryItem = ({ commentary: { commentaryID, avatarName, text, date }, }: { commentary: CommentaryAPICommentary; }) => { const { t } = useTranslation(); const [isModifyOpened, setModifyOpened] = useState(false); const [avatarCipher, setAvatarCipher] = useState(""); const [inputText, setInputText] = useState(""); return ( <ListGroupItem> <Row className="g-0"> <Col className="m-1" xs="auto"> <span>{avatarName}</span> </Col> <Col className="m-1 route" onClick={() => { setModifyOpened(true); }} > {isModifyOpened ? ( <ReactTextareaAutosize className="form-control" defaultValue={text} placeholder={t("text")} onChange={({ target: { value } }) => { setInputText(value); }} /> ) : ( <span className="ln">{text}</span> )} </Col> <Col className="m-1" xs="auto"> <span>{getDatetime(date)}</span> </Col> </Row> <Collapse isOpen={isModifyOpened}> <Row className="g-0"> <Col className="m-1"> <Input valid={!!avatarCipher} invalid={!avatarCipher} type="password" placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </Col> <Col className="m-1" xs="auto"> <Button color="warning" onClick={async () => { if (avatarCipher && inputText) { const { status } = await wwwAXIOS.put(`/commentary`, { commentaryID, avatarCipher, text: inputText, }); switch (status) { case 204: window.location.reload(); break; case 403: toast.error(t("failedValidateCipher")); break; } } else { toast.error(t("failedValidation")); } }} > {t("doModifyCommentary")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={async () => { if (avatarCipher) { const { status } = await wwwAXIOS.delete(`/commentary`, { params: { commentaryID, avatarCipher, }, }); switch (status) { case 204: window.location.reload(); break; case 403: toast.error(t("failedValidateCipher")); break; } } else { toast.error(t("failedValidation")); } }} > {t("wipeCommentary")} </Button> </Col> </Row> </Collapse> </ListGroupItem> ); }; export default CommentaryItem;