feat: add collections comments

TODO.md

@@ -17,7 +17,6 @@
 ### Коллекции
 
 - [ ] Добавление \ Удаление аниме в\из коллекции
-- [ ] Просмотр комментариев и комментирование
 
 ### Страница аниме тайтла
 

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 justify-start gap-2">
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col items-end justify-between sm:items-center sm:flex-row">
-          <p>создана: {unixToDate(props.creationDate, "full")}</p>
+          <div className="flex flex-col gap-1">
-          <p>обновлена: {unixToDate(props.updateDate, "full")}</p>
+            <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>
   );

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(
+      let url;
-        `${ENDPOINTS.release.info}/comment/add/${props.release_id}?token=${props.token}`,
+
-        {
+      if (props.type == "collection") {
-          method: "POST",
+        url = `${ENDPOINTS.collection.base}/comment/add/${props.release_id}?token=${props.token}`;
-          body: JSON.stringify(data),
+      } 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);

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/${
+      let url;
-        parentCommentId || props.comment.id
+      if (props.type == "collection") {
-      }/0?sort=2`;
+        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}
         />
       )}
     </>

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(
+      let url;
-        `${ENDPOINTS.release.info}/comment/edit/${props.parentComment.id}?token=${props.token}`,
+      if (props.type == "collection") {
-        {
+        url = `${ENDPOINTS.collection.base}/comment/edit/${props.parentComment.id}?token=${props.token}`;
-          method: "POST",
+      } else {
-          body: JSON.stringify(data),
+        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);

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">

app/components/ReleaseInfo/ReleaseInfo.UserList.tsx

@@ -100,7 +100,7 @@ export const ReleaseInfoUserList = (props: {
             </Button>
           </>
         ) : (
-          <p>Войдите что-бы добавить список, избранное или коллекцию</p>
+          <p>Войдите что-бы добавить в список, избранное или коллекцию</p>
         )}
       </div>
     </Card>

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() {
+  function useFetchCollectionInfo(type: "info" | "comments") {
-    let url: string = `${ENDPOINTS.collection.base}/${props.id}`;
+    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-2 w-full max-w-full lg:max-w-[48%]">
-                <div className="flex flex-col gap-4 w-full max-w-full lg:max-w-[48%]">
+                {collectionComments && !collectionCommentsIsLoading && (
-                  <InfoLists
+                  <CommentsMain
-                    completed={collectionInfo.completed_count}
+                    release_id={props.id}
-                    planned={collectionInfo.plan_count}
+                    token={userStore.token}
-                    abandoned={collectionInfo.dropped_count}
+                    comments={collectionComments.content.slice(0, 2)}
-                    delayed={collectionInfo.hold_on_count}
+                    type="collection"
-                    watching={collectionInfo.watching_count}
-                    total={data[0].total_count}
                   />
-                  <CollectionInfoControls
+                )}
-                    isFavorite={collectionInfo.collection.is_favorite}
+                {userStore.token && !isLoading && (
-                    id={collectionInfo.collection.id}
+                  <>
-                    authorId={collectionInfo.collection.creator.id}
+                    <InfoLists
-                    isPrivate={collectionInfo.collection.is_private}
+                      completed={collectionInfo.completed_count}
-                  />
+                      planned={collectionInfo.plan_count}
-                </div>
+                      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">