docmost/apps/client/src/features/comment/components/comment-list-with-tabs.tsx

import React, { useState, useRef, useCallback, memo, useMemo } from "react";
import { useParams } from "react-router-dom";
import {
  ActionIcon,
  Center,
  Divider,
  Group,
  Paper,
  Stack,
  Tabs,
  Badge,
  Text,
  ScrollArea,
} from "@mantine/core";
import CommentListItem from "@/features/comment/components/comment-list-item";
import {
  useCommentsQuery,
  useCreateCommentMutation,
} from "@/features/comment/queries/comment-query";
import CommentEditor from "@/features/comment/components/comment-editor";
import CommentActions from "@/features/comment/components/comment-actions";
import { useFocusWithin } from "@mantine/hooks";
import { IComment } from "@/features/comment/types/comment.types.ts";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { IPagination } from "@/lib/types.ts";
import { extractPageSlugId } from "@/lib";
import { useTranslation } from "react-i18next";
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
import { IconArrowUp, IconMessageOff } from "@tabler/icons-react";

function CommentListWithTabs() {
  const { t } = useTranslation();
  const { pageSlug } = useParams();
  const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
  const {
    data: comments,
    isLoading: isCommentsLoading,
    isError,
  } = useCommentsQuery({ pageId: page?.id });
  const createCommentMutation = useCreateCommentMutation();
  const [isLoading, setIsLoading] = useState(false);
  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);

  const canComment = page?.permissions?.canEdit ?? false;

  // Separate active and resolved comments
  const { activeComments, resolvedComments } = useMemo(() => {
    if (!comments?.items) {
      return { activeComments: [], resolvedComments: [] };
    }

    const parentComments = comments.items.filter(
      (comment: IComment) => comment.parentCommentId === null,
    );

    const active = parentComments.filter(
      (comment: IComment) => !comment.resolvedAt,
    );
    const resolved = parentComments.filter(
      (comment: IComment) => comment.resolvedAt,
    );

    return { activeComments: active, resolvedComments: resolved };
  }, [comments]);

  const [isPageCommentLoading, setIsPageCommentLoading] = useState(false);

  const handleAddPageComment = useCallback(
    async (_commentId: string, content: string) => {
      try {
        setIsPageCommentLoading(true);
        const createdComment = await createCommentMutation.mutateAsync({
          pageId: page?.id,
          content: JSON.stringify(content),
        });

        setTimeout(() => {
          const selector = `div[data-comment-id="${createdComment.id}"]`;
          const commentElement = document.querySelector(selector);
          commentElement?.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }, 400);
      } catch (error) {
        console.error("Failed to post comment:", error);
      } finally {
        setIsPageCommentLoading(false);
      }
    },
    [createCommentMutation, page?.id],
  );

  const handleAddReply = useCallback(
    async (commentId: string, content: string) => {
      try {
        setIsLoading(true);
        const commentData = {
          pageId: page?.id,
          parentCommentId: commentId,
          content: JSON.stringify(content),
        };

        await createCommentMutation.mutateAsync(commentData);
      } catch (error) {
        console.error("Failed to post comment:", error);
      } finally {
        setIsLoading(false);
      }
    },
    [createCommentMutation, page?.id],
  );

  const renderComments = useCallback(
    (comment: IComment) => (
      <Paper
        shadow="sm"
        radius="md"
        p="sm"
        mb="sm"
        withBorder
        key={comment.id}
        data-comment-id={comment.id}
      >
        <div>
          <CommentListItem
            comment={comment}
            pageId={page?.id}
            canComment={canComment}
            userSpaceRole={space?.membership?.role}
          />
          <MemoizedChildComments
            comments={comments}
            parentId={comment.id}
            pageId={page?.id}
            canComment={canComment}
            userSpaceRole={space?.membership?.role}
          />
        </div>

        {!comment.resolvedAt && canComment && (
          <>
            <Divider my={4} />
            <CommentEditorWithActions
              commentId={comment.id}
              onSave={handleAddReply}
              isLoading={isLoading}
            />
          </>
        )}
      </Paper>
    ),
    [comments, handleAddReply, isLoading, space?.membership?.role],
  );

  if (isCommentsLoading) {
    return <></>;
  }

  if (isError) {
    return <div>{t("Error loading comments.")}</div>;
  }

  const totalComments = activeComments.length + resolvedComments.length;

  const pageCommentInput = canComment ? (
    <PageCommentInput
      onSave={handleAddPageComment}
      isLoading={isPageCommentLoading}
    />
  ) : null;

  return (
    <div
      style={{
        flex: 1,
        minHeight: 0,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Tabs
        defaultValue="open"
        variant="default"
        style={{
          flex: "1 1 auto",
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
        }}
      >
        <Tabs.List justify="center">
          <Tabs.Tab
            value="open"
            leftSection={
              <Badge size="sm" variant="light" color="blue">
                {activeComments.length}
              </Badge>
            }
          >
            {t("Open")}
          </Tabs.Tab>
          <Tabs.Tab
            value="resolved"
            leftSection={
              <Badge size="sm" variant="light" color="green">
                {resolvedComments.length}
              </Badge>
            }
          >
            {t("Resolved")}
          </Tabs.Tab>
        </Tabs.List>

        <ScrollArea
          style={{ flex: "1 1 auto" }}
          scrollbarSize={5}
          type="scroll"
        >
          <div style={{ paddingBottom: "8px" }}>
            <Tabs.Panel value="open" pt="xs">
              {activeComments.length === 0 ? (
                <Center py="xl">
                  <Stack align="center" gap="xs">
                    <IconMessageOff
                      size={32}
                      stroke={1.5}
                      color="var(--mantine-color-dimmed)"
                    />
                    <Text size="sm" c="dimmed">
                      {t("No open comments.")}
                    </Text>
                  </Stack>
                </Center>
              ) : (
                activeComments.map(renderComments)
              )}
            </Tabs.Panel>

            <Tabs.Panel value="resolved" pt="xs">
              {resolvedComments.length === 0 ? (
                <Center py="xl">
                  <Stack align="center" gap="xs">
                    <IconMessageOff
                      size={32}
                      stroke={1.5}
                      color="var(--mantine-color-dimmed)"
                    />
                    <Text size="sm" c="dimmed">
                      {t("No resolved comments.")}
                    </Text>
                  </Stack>
                </Center>
              ) : (
                resolvedComments.map(renderComments)
              )}
            </Tabs.Panel>
          </div>
        </ScrollArea>
      </Tabs>
      {pageCommentInput}
    </div>
  );
}

interface ChildCommentsProps {
  comments: IPagination<IComment>;
  parentId: string;
  pageId: string;
  canComment: boolean;
  userSpaceRole?: string;
}
const ChildComments = ({
  comments,
  parentId,
  pageId,
  canComment,
  userSpaceRole,
}: ChildCommentsProps) => {
  const getChildComments = useCallback(
    (parentId: string) =>
      comments.items.filter(
        (comment: IComment) => comment.parentCommentId === parentId,
      ),
    [comments.items],
  );

  return (
    <div>
      {getChildComments(parentId).map((childComment) => (
        <div key={childComment.id}>
          <CommentListItem
            comment={childComment}
            pageId={pageId}
            canComment={canComment}
            userSpaceRole={userSpaceRole}
          />
          <MemoizedChildComments
            comments={comments}
            parentId={childComment.id}
            pageId={pageId}
            canComment={canComment}
            userSpaceRole={userSpaceRole}
          />
        </div>
      ))}
    </div>
  );
};

const MemoizedChildComments = memo(ChildComments);

const CommentEditorWithActions = ({
  commentId,
  onSave,
  isLoading,
  placeholder = undefined,
}) => {
  const [content, setContent] = useState("");
  const { ref, focused } = useFocusWithin();
  const commentEditorRef = useRef(null);

  const handleSave = useCallback(() => {
    onSave(commentId, content);
    setContent("");
    commentEditorRef.current?.clearContent();
  }, [commentId, content, onSave]);

  return (
    <div ref={ref}>
      <CommentEditor
        ref={commentEditorRef}
        onUpdate={setContent}
        onSave={handleSave}
        editable={true}
        placeholder={placeholder}
      />
      {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
    </div>
  );
};

const PageCommentInput = ({ onSave, isLoading }) => {
  const { t } = useTranslation();
  const [content, setContent] = useState("");
  const { ref, focused } = useFocusWithin();
  const commentEditorRef = useRef(null);

  const handleSave = useCallback(() => {
    onSave(null, content);
    setContent("");
    commentEditorRef.current?.clearContent();
  }, [content, onSave]);

  return (
    <div
      ref={ref}
      style={{
        flex: "0 0 auto",
        borderTop: "1px solid var(--mantine-color-default-border)",
        paddingTop: "var(--mantine-spacing-sm)",
        paddingBottom: 25,
        position: "relative",
      }}
    >
      <CommentEditor
        ref={commentEditorRef}
        onUpdate={setContent}
        onSave={handleSave}
        editable={true}
        placeholder={t("Add a comment...")}
      />
      {focused && (
        <ActionIcon
          variant="filled"
          radius="xl"
          size="sm"
          onClick={handleSave}
          loading={isLoading}
          style={{ position: "absolute", right: 8, bottom: 30 }}
        >
          <IconArrowUp size={16} />
        </ActionIcon>
      )}
    </div>
  );
};

export default CommentListWithTabs;