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 AvatarDrawing from "@/components/AvatarDrawing"; 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 { PencilFill } from "react-bootstrap-icons"; import Button from "react-bootstrap/Button"; import Col from "react-bootstrap/Col"; import FormControl from "react-bootstrap/FormControl"; import InputGroup from "react-bootstrap/InputGroup"; import Row from "react-bootstrap/Row"; import Stack from "react-bootstrap/Stack"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; export default observer(() => { const t = useTranslations(); const { taehuiAvatarID, taehuiAvatarName, taehuiLevel } = useTaehuiStore(); const [input, setInput] = useState(""); const { essayID } = useParams<{ essayID: string }>(); const { data: comment } = useGetComment(essayID); const { mutateAsync: postComment } = usePostComment(); const commentItems = useMemo(() => { const commentItems: ReactNode[] = []; const setCommentItems = (level: number) => ({ commentID, avatarID, avatarName, date, text, comments, }: GetCommentAPI[number]) => { commentItems.push( <CommentItem commentID={commentID} avatarID={avatarID} avatarName={avatarName} date={date} text={text} level={level} />, ); comments.forEach(setCommentItems(level + 1)); }; comment.forEach((comment) => { setCommentItems(0)(comment); }); return commentItems; }, [comment]); return ( <Stack gap={2}> <h4>{t("commentCount", { commentCount: commentItems.length })}</h4> <hr /> {commentItems} {taehuiLevel >= 1 && ( <Row> <Col xs="auto"> <AvatarDrawing avatarID={taehuiAvatarID} /> </Col> <Col> {taehuiAvatarName} <InputGroup> <FormControl as={ReactTextareaAutosize} placeholder={t("text")} value={input} onChange={({ target: { value } }) => { setInput(value); }} /> <Button variant="success" onClick={async () => { if (input) { await postComment({ essayID, targetCommentID: -1, text: input, }); setInput(""); } else { toast.error(t("failedValidation")); } }} > <PencilFill /> </Button> </InputGroup> </Col> </Row> )} </Stack> ); });