feat: add collections comments

2025-04-05 07:44:38 +00:00 · 2024-08-18 18:36:22 +05:00 · 2024-08-18 18:36:22 +05:00 · 33d34938c6
commit 33d34938c6
parent 501d3a1705
8 changed files with 143 additions and 73 deletions
--- a/TODO.md
+++ b/TODO.md
@ -17,7 +17,6 @@
 ### Коллекции

 - [ ] Добавление \ Удаление аниме в\из коллекции
- [ ] Просмотр комментариев и комментирование

 ### Страница аниме тайтла

--- a/app/components/CollectionInfo/CollectionInfo.Basics.tsx
+++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx
@ -15,32 +15,34 @@ export const CollectionInfoBasics = (props: {
 }) => {
  return (
    <Card className="flex-1 w-full">
-      <div className="flex flex-col items-end justify-between sm:items-center sm:flex-row">
-        <div className="flex flex-col gap-1">
-          <p>создана: {unixToDate(props.creationDate, "full")}</p>
-          <p>обновлена: {unixToDate(props.updateDate, "full")}</p>
+      <div className="flex flex-col justify-start gap-2">
+        <div className="flex flex-col items-end justify-between sm:items-center sm:flex-row">
+          <div className="flex flex-col gap-1">
+            <p>создана: {unixToDate(props.creationDate, "full")}</p>
+            <p>обновлена: {unixToDate(props.updateDate, "full")}</p>
+          </div>
+          <Link href={`/profile/${props.authorId}`}>
+            <Avatar
+              img={props.authorAvatar}
+              rounded={true}
+              bordered={true}
+              size="md"
+              className="flex-row-reverse gap-2"
+            >
+              <div className="font-medium dark:text-white">
+                <div className="text-lg">{props.authorLogin}</div>
+                <div className="text-right text-gray-500">Автор</div>
+              </div>
+            </Avatar>
+          </Link>
+        </div>
+        <div className="min-w-full aspect-video">
+          <img src={props.image} className="w-full rounded-lg" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <p className="text-xl font-bold">{props.title}</p>
+          <p className="whitespace-pre-wrap">{props.description}</p>
        </div>
-        <Link href={`/profile/${props.authorId}`}>
-          <Avatar
-            img={props.authorAvatar}
-            rounded={true}
-            bordered={true}
-            size="md"
-            className="flex-row-reverse gap-2"
-          >
-            <div className="font-medium dark:text-white">
-              <div className="text-lg">{props.authorLogin}</div>
-              <div className="text-right text-gray-500">Автор</div>
-            </div>
-          </Avatar>
-        </Link>
-      </div>
-      <div className="min-w-full aspect-video">
-        <img src={props.image} className="w-full rounded-lg" />
-      </div>
-      <div className="flex flex-col gap-1">
-        <p className="text-xl font-bold">{props.title}</p>
-        <p className="whitespace-pre-wrap">{props.description}</p>
      </div>
    </Card>
  );
--- a/app/components/Comments/Comments.Add.tsx
+++ b/app/components/Comments/Comments.Add.tsx
@ -13,6 +13,7 @@ export const CommentsAddModal = (props: {
  token: string;
  setShouldRender?: any;
  setCommentSend?: any;
+  type?: "release" | "collection";
 }) => {
  const [message, setMessage] = useState(
    props.isReply ? `${props.parentProfile.login}, ` : ""
@ -31,13 +32,18 @@ export const CommentsAddModal = (props: {
    };

    async function _send() {
-      const res = await fetch(
-        `${ENDPOINTS.release.info}/comment/add/${props.release_id}?token=${props.token}`,
-        {
-          method: "POST",
-          body: JSON.stringify(data),
-        }
-      );
+      let url;
+
+      if (props.type == "collection") {
+        url = `${ENDPOINTS.collection.base}/comment/add/${props.release_id}?token=${props.token}`;
+      } else {
+        url = `${ENDPOINTS.release.info}/comment/add/${props.release_id}?token=${props.token}`;
+      }
+
+      const res = await fetch(url, {
+        method: "POST",
+        body: JSON.stringify(data),
+      });

      if (props.isReply && props.setShouldRender && props.setCommentSend) {
        props.setShouldRender(true);
--- a/app/components/Comments/Comments.Comment.tsx
+++ b/app/components/Comments/Comments.Comment.tsx
@ -27,6 +27,7 @@ export const CommentsComment = (props: {
  parentComment?: any;
  setShouldRender?: (shouldRender: boolean) => void;
  setCommentSend?: (commentSend: boolean) => void;
+  type?: "release" | "collection";
 }) => {
  const [replies, setReplies] = useState([]);
  const [likes, setLikes] = useState(props.comment.likes_count);
@ -49,7 +50,12 @@ export const CommentsComment = (props: {

  async function _deleteComment() {
    if (props.token) {
-      let url = `${ENDPOINTS.release.info}/comment/delete/${props.comment.id}?token=${props.token}`;
+      let url;
+      if (props.type == "collection") {
+        url = `${ENDPOINTS.collection.base}/comment/delete/${props.comment.id}?token=${props.token}`;
+      } else {
+        url = `${ENDPOINTS.release.info}/comment/delete/${props.comment.id}?token=${props.token}`;
+      }
      await fetch(url);

      if (props.setShouldRender && props.setCommentSend) {
@ -62,9 +68,17 @@ export const CommentsComment = (props: {
  useEffect(() => {
    async function _fetchReplies() {
      setReplies([]);
-      let url = `${ENDPOINTS.release.info}/comment/replies/${
-        parentCommentId || props.comment.id
-      }/0?sort=2`;
+      let url;
+      if (props.type == "collection") {
+        url = `${ENDPOINTS.collection.base}/comment/replies/${
+          parentCommentId || props.comment.id
+        }/0?sort=2`;
+      } else {
+        url = `${ENDPOINTS.release.info}/comment/replies/${
+          parentCommentId || props.comment.id
+        }/0?sort=2`;
+      }
+
      if (props.token) {
        url += `&token=${props.token}`;
      }
@ -88,7 +102,13 @@ export const CommentsComment = (props: {

  async function _sendVote(action: number) {
    if (props.token) {
-      let url = `${ENDPOINTS.release.info}/comment/vote/${props.comment.id}/${action}?token=${props.token}`;
+      let url;
+
+      if (props.type == "collection") {
+        url = `${ENDPOINTS.collection.base}/comment/vote/${props.comment.id}/${action}?token=${props.token}`;
+      } else {
+        url = `${ENDPOINTS.release.info}/comment/vote/${props.comment.id}/${action}?token=${props.token}`;
+      }
      fetch(url);
    }
  }
@ -126,7 +146,7 @@ export const CommentsComment = (props: {
    <>
      <article
        className={`${
-          !props.isSubComment ? "p-6" : "pt-4"
+          !props.isSubComment || props.type == "collection" ? "p-6" : "pt-4"
        } text-sm bg-gray-100 rounded-lg sm:text-base dark:bg-gray-900`}
      >
        <footer className="flex items-center justify-between mb-2">
@ -162,7 +182,9 @@ export const CommentsComment = (props: {
              <Dropdown.Item onClick={() => setIsEditCommentsOpen(true)}>
                Редактировать
              </Dropdown.Item>
-              <Dropdown.Item onClick={() => _deleteComment()}>Удалить</Dropdown.Item>
+              <Dropdown.Item onClick={() => _deleteComment()}>
+                Удалить
+              </Dropdown.Item>
            </Dropdown>
          )}
        </footer>
@ -300,6 +322,7 @@ export const CommentsComment = (props: {
        parentProfile={props.profile}
        setShouldRender={props.setShouldRender || setShouldRender}
        setCommentSend={props.setCommentSend || setCommentSend}
+        type={props.type}
      />
      {props.token && (
        <CommentsEditModal
@ -309,6 +332,7 @@ export const CommentsComment = (props: {
          parentComment={props.comment}
          setShouldRender={props.setShouldRender || setShouldRender}
          setCommentSend={props.setCommentSend || setCommentSend}
+          type={props.type}
        />
      )}
    </>
--- a/app/components/Comments/Comments.Edit.tsx
+++ b/app/components/Comments/Comments.Edit.tsx
@ -9,6 +9,7 @@ export const CommentsEditModal = (props: {
  token: string;
  setShouldRender?: any;
  setCommentSend?: any;
+  type?: "release" | "collection";
 }) => {
  const [message, setMessage] = useState(props.parentComment.message);
  const [isSpoiler, setIsSpoiler] = useState(props.parentComment.isSpoiler);
@ -23,13 +24,16 @@ export const CommentsEditModal = (props: {
    };

    async function _send() {
-      const res = await fetch(
-        `${ENDPOINTS.release.info}/comment/edit/${props.parentComment.id}?token=${props.token}`,
-        {
-          method: "POST",
-          body: JSON.stringify(data),
-        }
-      );
+      let url;
+      if (props.type == "collection") {
+        url = `${ENDPOINTS.collection.base}/comment/edit/${props.parentComment.id}?token=${props.token}`;
+      } else {
+        url = `${ENDPOINTS.release.info}/comment/edit/${props.parentComment.id}?token=${props.token}`;
+      }
+      const res = await fetch(url, {
+        method: "POST",
+        body: JSON.stringify(data),
+      });

      if (props.setShouldRender && props.setCommentSend) {
        props.setShouldRender(true);
--- a/app/components/Comments/Comments.Main.tsx
+++ b/app/components/Comments/Comments.Main.tsx
@ -9,9 +9,11 @@ export const CommentsMain = (props: {
  release_id: number;
  token: string | null;
  comments: any;
+  type?: "release" | "collection";
 }) => {
  const [isAllCommentsOpen, setIsAllCommentsOpen] = useState(false);
  const [isAddCommentsOpen, setIsAddCommentsOpen] = useState(false);
+  const type = props.type || "release";

  return (
    <>
@ -55,6 +57,8 @@ export const CommentsMain = (props: {
                  isDeleted: comment.is_deleted,
                }}
                token={props.token}
+                isSubComment={type != "release"}
+                type={type}
              />
            ))}
          </div>
@ -65,13 +69,15 @@ export const CommentsMain = (props: {
        setIsOpen={setIsAllCommentsOpen}
        release_id={props.release_id}
        token={props.token}
+        type={props.type}
      />
      <CommentsAddModal
        isOpen={isAddCommentsOpen}
        setIsOpen={setIsAddCommentsOpen}
        release_id={props.release_id}
        token={props.token}
-        />
+        type={props.type}
+      />
    </>
  );
 };
@ -95,6 +101,7 @@ const CommentsAllModal = (props: {
  setIsOpen: any;
  release_id: number;
  token: string | null;
+  type?: "release" | "collection";
 }) => {
  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
  const [currentRef, setCurrentRef] = useState<any>(null);
@ -102,9 +109,16 @@ const CommentsAllModal = (props: {
    setCurrentRef(ref);
  }, []);

+  const type = props.type || "release";
+
  const getKey = (pageIndex: number, previousPageData: any) => {
    if (previousPageData && !previousPageData.content.length) return null;
-    let url = `${ENDPOINTS.release.info}/comment/all/${props.release_id}/${pageIndex}?sort=1`;
+    let url;
+    if (type == "release") {
+      url = `${ENDPOINTS.release.info}/comment/all/${props.release_id}/${pageIndex}?sort=1`;
+    } else if (type == "collection") {
+      url = `${ENDPOINTS.collection.base}/comment/all/${props.release_id}/${pageIndex}?sort=1`;
+    }
    if (props.token) {
      url += `&token=${props.token}`;
    }
@ -184,7 +198,8 @@ const CommentsAllModal = (props: {
                isDeleted: comment.is_deleted,
              }}
              token={props.token}
-              />
+              type={type}
+            />
          ))
        ) : (
          <p className="text-sm font-bold text-gray-600 dark:text-gray-300">
--- a/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
@ -100,7 +100,7 @@ export const ReleaseInfoUserList = (props: {
            </Button>
          </>
        ) : (
-          <p>Войдите что-бы добавить список, избранное или коллекцию</p>
+          <p>Войдите что-бы добавить в список, избранное или коллекцию</p>
        )}
      </div>
    </Card>
--- a/app/pages/ViewCollection.tsx
+++ b/app/pages/ViewCollection.tsx
@ -12,6 +12,7 @@ import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
 import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics";
 import { InfoLists } from "#/components/InfoLists/InfoLists";
 import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls";
+import { CommentsMain } from "#/components/Comments/Comments.Main";

 const fetcher = async (url: string) => {
  const res = await fetch(url);
@ -32,11 +33,17 @@ export const ViewCollectionPage = (props: { id: number }) => {
  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
  const router = useRouter();

-  function useFetchCollectionInfo() {
-    let url: string = `${ENDPOINTS.collection.base}/${props.id}`;
+  function useFetchCollectionInfo(type: "info" | "comments") {
+    let url: string;
+
+    if (type == "info") {
+      url = `${ENDPOINTS.collection.base}/${props.id}`;
+    } else if (type == "comments") {
+      url = `${ENDPOINTS.collection.base}/comment/all/${props.id}/0?sort=3`;
+    }

    if (userStore.token) {
-      url += `?token=${userStore.token}`;
+      url += `${type != "info" ? "&" : "?"}token=${userStore.token}`;
    }

    const { data, isLoading } = useSWR(url, fetcher);
@ -51,7 +58,10 @@ export const ViewCollectionPage = (props: { id: number }) => {
    return url;
  };

-  const [collectionInfo, collectionInfoIsLoading] = useFetchCollectionInfo();
+  const [collectionInfo, collectionInfoIsLoading] =
+    useFetchCollectionInfo("info");
+  const [collectionComments, collectionCommentsIsLoading] =
+    useFetchCollectionInfo("comments");

  const { data, error, isLoading, size, setSize } = useSWRInfinite(
    getKey,
@ -87,7 +97,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
      ) : (
        collectionInfo && (
          <>
-            <div className="flex flex-col flex-wrap gap-4 px-2 pb-2 sm:flex-row">
+            <div className="flex flex-col flex-wrap gap-2 px-2 pb-2 sm:flex-row">
              <CollectionInfoBasics
                image={collectionInfo.collection.image}
                title={collectionInfo.collection.title}
@ -98,24 +108,34 @@ export const ViewCollectionPage = (props: { id: number }) => {
                creationDate={collectionInfo.collection.creation_date}
                updateDate={collectionInfo.collection.last_update_date}
              />
-              {userStore.token && !isLoading && (
-                <div className="flex flex-col gap-4 w-full max-w-full lg:max-w-[48%]">
-                  <InfoLists
-                    completed={collectionInfo.completed_count}
-                    planned={collectionInfo.plan_count}
-                    abandoned={collectionInfo.dropped_count}
-                    delayed={collectionInfo.hold_on_count}
-                    watching={collectionInfo.watching_count}
-                    total={data[0].total_count}
+              <div className="flex flex-col gap-2 w-full max-w-full lg:max-w-[48%]">
+                {collectionComments && !collectionCommentsIsLoading && (
+                  <CommentsMain
+                    release_id={props.id}
+                    token={userStore.token}
+                    comments={collectionComments.content.slice(0, 2)}
+                    type="collection"
                  />
-                  <CollectionInfoControls
-                    isFavorite={collectionInfo.collection.is_favorite}
-                    id={collectionInfo.collection.id}
-                    authorId={collectionInfo.collection.creator.id}
-                    isPrivate={collectionInfo.collection.is_private}
-                  />
-                </div>
-              )}
+                )}
+                {userStore.token && !isLoading && (
+                  <>
+                    <InfoLists
+                      completed={collectionInfo.completed_count}
+                      planned={collectionInfo.plan_count}
+                      abandoned={collectionInfo.dropped_count}
+                      delayed={collectionInfo.hold_on_count}
+                      watching={collectionInfo.watching_count}
+                      total={data[0].total_count}
+                    />
+                    <CollectionInfoControls
+                      isFavorite={collectionInfo.collection.is_favorite}
+                      id={collectionInfo.collection.id}
+                      authorId={collectionInfo.collection.creator.id}
+                      isPrivate={collectionInfo.collection.is_private}
+                    />
+                  </>
+                )}
+              </div>
            </div>
            {isLoading || !content || !isLoadingEnd ? (
              <div className="flex items-center justify-center w-full h-screen">