import CommentItem from "@/app/[language]/forum/components/CommentItem"; import useGetComment from "@/app/[language]/forum/query/useGetComment"; import usePostComment from "@/app/[language]/forum/query/usePostComment"; import AvatarTitle from "@/components/AvatarTitle"; import { useTaehuiStore } from "@/state/Stores"; import { GetCommentAPI } from "@/type/wwwAPI"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useParams } from "next/navigation"; import { ReactNode, useMemo, useState } from "react"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; import { Badge, Button, Col, Row } from "reactstrap"; export default observer(() => { const t = useTranslations(); const { taehuiAvatarID, taehuiAvatarName, taehuiLevel } = useTaehuiStore(); const [textInput, setTextInput] = useState(""); const { essayID } = useParams<{ essayID: string }>(); const { data: comment } = useGetComment(essayID); const { mutateAsync: postComment } = usePostComment(); const commentComponents = useMemo(() => { const commentComponents: ReactNode[] = []; const setCommentComponents = (level: number) => ({ commentID, avatarID, avatarName, date, text, comments, }: GetCommentAPI[number]) => { commentComponents.push( <CommentItem commentID={commentID} avatarID={avatarID} avatarName={avatarName} date={date} text={text} level={level} />, ); comments.forEach(setCommentComponents(level + 1)); }; comment.forEach((comment) => { setCommentComponents(0)(comment); }); return commentComponents; }, [comment]); return ( <> <Row className="g-0"> <Col className="m-1"> <Badge> {t("commentCount", { commentCount: commentComponents.length })} </Badge> </Col> </Row> {commentComponents} {taehuiLevel >= 1 && ( <Row className="g-0"> <AvatarTitle avatarID={taehuiAvatarID} avatarName={taehuiAvatarName}> <Row className="g-0"> <Col className="m-1"> <ReactTextareaAutosize className="form-control" placeholder={t("text")} value={textInput} onChange={({ target: { value } }) => { setTextInput(value); }} /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={async () => { if (textInput) { await postComment({ essayID, targetCommentID: -1, text: textInput, }); setTextInput(""); } else { toast.error(t("failedValidation")); } }} > {t("postComment")} </Button> </Col> </Row> </AvatarTitle> </Row> )} </> ); });