183 lines
9.8 KiB
TypeScript
183 lines
9.8 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import { createComment, deleteComment, getReplies, getRootComments, updateComment } from "@/features/comments/api/comment-api";
|
|
import { CommentForm } from "@/features/comments/components/CommentForm";
|
|
import { CommentItem } from "@/features/comments/components/CommentItem";
|
|
import type { CommentPage, CommentRecord, CommentTarget } from "@/features/comments/model/types";
|
|
import { ApiError } from "@/shared/api/api-error";
|
|
import type { ApiClient } from "@/shared/api/client";
|
|
import { PageState } from "@/shared/ui/page-state";
|
|
import { ResourcePagination } from "@/shared/ui/resource-pagination";
|
|
|
|
type LoadState =
|
|
| { readonly status: "loading" }
|
|
| { readonly data: CommentPage; readonly status: "content" }
|
|
| { readonly message: string; readonly status: "error" };
|
|
|
|
type ReplyEntry = {
|
|
readonly page: number;
|
|
readonly state: LoadState;
|
|
};
|
|
|
|
type ReplyState = Record<number, ReplyEntry>;
|
|
|
|
const pageSize = 20;
|
|
|
|
function getErrorMessage(error: unknown): string {
|
|
return error instanceof ApiError ? error.message : "댓글을 처리하지 못했습니다.";
|
|
}
|
|
|
|
function canEdit(comment: CommentRecord, target: CommentTarget): boolean {
|
|
return comment.writerId === target.creatorId;
|
|
}
|
|
|
|
export function CommentThread({ apiClient, canMutate = true, target }: { readonly apiClient: ApiClient; readonly canMutate?: boolean; readonly target: CommentTarget }) {
|
|
const audioContentId = target.kind === "audio" ? target.contentId : "";
|
|
const communityPostId = target.kind === "community" ? target.postId : "";
|
|
const requestTarget = useMemo<CommentTarget>(() => target.kind === "audio"
|
|
? { kind: "audio", characterId: target.characterId, contentId: audioContentId, creatorId: target.creatorId }
|
|
: { kind: "community", characterId: target.characterId, postId: communityPostId, creatorId: target.creatorId }, [audioContentId, communityPostId, target.characterId, target.creatorId, target.kind]);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
const [expandedRootIds, setExpandedRootIds] = useState<readonly number[]>([]);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [rootPage, setRootPage] = useState(0);
|
|
const [rootReloadKey, setRootReloadKey] = useState(0);
|
|
const [roots, setRoots] = useState<LoadState>({ status: "loading" });
|
|
const [replies, setReplies] = useState<ReplyState>({});
|
|
const isSavingRef = useRef(false);
|
|
|
|
const loadReplies = useCallback(async function loadRepliesForPage(rootId: number, page = 0): Promise<void> {
|
|
setReplies((current) => ({ ...current, [rootId]: { page, state: { status: "loading" } } }));
|
|
try {
|
|
const data = await getReplies(apiClient, requestTarget, { commentId: rootId, page, size: pageSize });
|
|
if (page > 0 && data.items.length === 0 && data.totalCount <= page * pageSize) {
|
|
await loadRepliesForPage(rootId, page - 1);
|
|
return;
|
|
}
|
|
setReplies((current) => ({ ...current, [rootId]: { page, state: { data, status: "content" } } }));
|
|
} catch (error: unknown) {
|
|
setReplies((current) => ({ ...current, [rootId]: { page, state: { message: getErrorMessage(error), status: "error" } } }));
|
|
}
|
|
}, [apiClient, requestTarget]);
|
|
|
|
useEffect(() => {
|
|
let isCurrent = true;
|
|
setRoots((current) => current.status === "content" ? current : { status: "loading" });
|
|
void getRootComments(apiClient, requestTarget, { page: rootPage, size: pageSize })
|
|
.then((data) => {
|
|
if (isCurrent) {
|
|
setRoots({ data, status: "content" });
|
|
}
|
|
})
|
|
.catch((error: unknown) => {
|
|
if (isCurrent) {
|
|
setRoots({ message: getErrorMessage(error), status: "error" });
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
isCurrent = false;
|
|
};
|
|
}, [apiClient, requestTarget, rootPage, rootReloadKey]);
|
|
|
|
async function runMutation(work: () => Promise<null>, rootId?: number): Promise<boolean> {
|
|
if (isSavingRef.current) {
|
|
return false;
|
|
}
|
|
isSavingRef.current = true;
|
|
setIsSaving(true);
|
|
setErrorMessage(null);
|
|
try {
|
|
await work();
|
|
setRootReloadKey((key) => key + 1);
|
|
if (rootId !== undefined) {
|
|
await loadReplies(rootId, replies[rootId]?.page ?? 0);
|
|
}
|
|
return true;
|
|
} catch (error: unknown) {
|
|
setErrorMessage(getErrorMessage(error));
|
|
return false;
|
|
} finally {
|
|
isSavingRef.current = false;
|
|
setIsSaving(false);
|
|
}
|
|
}
|
|
|
|
async function createRoot(comment: string): Promise<boolean> {
|
|
if (requestTarget.kind === "audio") {
|
|
return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: null, isSecret: false, languageCode: null }));
|
|
}
|
|
return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: null, isSecret: false }));
|
|
}
|
|
|
|
async function createReply(rootId: number, comment: string): Promise<boolean> {
|
|
if (requestTarget.kind === "audio") {
|
|
return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: rootId, isSecret: false, languageCode: null }), rootId);
|
|
}
|
|
return runMutation(() => createComment(apiClient, requestTarget, { comment, parentId: rootId, isSecret: false }), rootId);
|
|
}
|
|
|
|
function toggleReplies(rootId: number) {
|
|
setExpandedRootIds((current) => current.includes(rootId) ? current.filter((id) => id !== rootId) : [...current, rootId]);
|
|
if (replies[rootId] === undefined) {
|
|
void loadReplies(rootId, 0);
|
|
}
|
|
}
|
|
|
|
function renderReplies(root: CommentRecord) {
|
|
if (!expandedRootIds.includes(root.id)) {
|
|
return null;
|
|
}
|
|
const entry = replies[root.id] ?? { page: 0, state: { status: "loading" } };
|
|
const state = entry.state;
|
|
if (state.status === "loading") {
|
|
return <PageState state="loading" title="답글을 불러오는 중" />;
|
|
}
|
|
if (state.status === "error") {
|
|
return <PageState description={state.message} onRetry={() => void loadReplies(root.id)} state="error" title="답글 조회 실패" />;
|
|
}
|
|
|
|
return (
|
|
<section aria-label={`${root.comment} 답글`} className="ml-0 flex flex-col gap-3 border-l border-border pl-3 sm:ml-4">
|
|
{canMutate ? <CommentForm errorId={`comment-reply-${root.id}-error`} isSaving={isSaving} label={`${root.comment}에 답글`} onSubmit={(comment) => createReply(root.id, comment)} submitLabel="답글 등록" /> : null}
|
|
{state.data.items.map((reply) => (
|
|
<CommentItem canDelete={canMutate} canEdit={canMutate && canEdit(reply, requestTarget)} comment={reply} isSaving={isSaving} key={reply.id} onDelete={() => void runMutation(() => deleteComment(apiClient, requestTarget, { commentId: reply.id }), root.id)} onEdit={(comment) => void runMutation(() => updateComment(apiClient, requestTarget, { commentId: reply.id, request: { comment } }), root.id)} />
|
|
))}
|
|
{state.data.totalCount > pageSize ? <ResourcePagination data={{ totalCount: state.data.totalCount, page: entry.page, size: pageSize, hasNext: (entry.page + 1) * pageSize < state.data.totalCount, items: state.data.items }} onPageChange={(page) => void loadReplies(root.id, page)} onSizeChange={() => void loadReplies(root.id, 0)} sizeOptions={[20]} /> : null}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="flex flex-col gap-4 rounded-lg border border-border bg-muted p-4" aria-labelledby="comment-thread-title">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-xs font-semibold text-info">COMMENTS</p>
|
|
<h2 className="text-xl font-semibold" id="comment-thread-title">댓글 관리</h2>
|
|
</div>
|
|
{canMutate ? <CommentForm errorId="comment-root-error" isSaving={isSaving} label="새 댓글" onSubmit={createRoot} submitLabel="댓글 등록" /> : null}
|
|
{errorMessage === null ? null : <p className="rounded-md border border-destructive bg-card p-3 text-sm font-semibold text-destructive" role="alert">{errorMessage}</p>}
|
|
{isSaving ? <p className="rounded-md border border-border bg-card p-3 text-sm font-semibold" role="status">댓글을 저장하는 중</p> : null}
|
|
{roots.status === "loading" ? <PageState state="loading" title="댓글을 불러오는 중" /> : null}
|
|
{roots.status === "error" ? <PageState description={roots.message} onRetry={() => setRootReloadKey((key) => key + 1)} state="error" title="댓글 조회 실패" /> : null}
|
|
{roots.status === "content" ? (
|
|
<>
|
|
<p className="text-sm font-semibold text-muted-foreground">총 {roots.data.totalCount.toLocaleString("ko-KR")}개</p>
|
|
{roots.data.totalCount === 0 ? <PageState description="새 댓글을 등록해 첫 대화를 시작할 수 있습니다." state="empty" title="댓글이 없습니다" /> : (
|
|
<>
|
|
<div className="flex flex-col gap-3">
|
|
{roots.data.items.map((comment) => (
|
|
<div className="flex flex-col gap-3" key={comment.id}>
|
|
<CommentItem canDelete={canMutate} canEdit={canMutate && canEdit(comment, requestTarget)} comment={comment} isSaving={isSaving} onDelete={() => void runMutation(() => deleteComment(apiClient, requestTarget, { commentId: comment.id }))} onEdit={(nextComment) => void runMutation(() => updateComment(apiClient, requestTarget, { commentId: comment.id, request: { comment: nextComment } }))} onShowReplies={() => toggleReplies(comment.id)} replyActionLabel={comment.replyCount > 0 || expandedRootIds.includes(comment.id) ? "답글 보기" : canMutate ? "답글 작성" : undefined} />
|
|
{renderReplies(comment)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ResourcePagination data={{ totalCount: roots.data.totalCount, page: rootPage, size: pageSize, hasNext: (rootPage + 1) * pageSize < roots.data.totalCount, items: roots.data.items }} onPageChange={setRootPage} onSizeChange={() => setRootPage(0)} sizeOptions={[20]} />
|
|
</>
|
|
)}
|
|
</>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|