feat: add comment and reply posting, for a release.

I'm sorry for this mess . . .

TODO.md

@@ -30,8 +30,8 @@
 ### Страница аниме тайтла
 
 - [ ] Просмотр комментариев и комментирование
-  - [ ] Отправление комментариев
+  - [ ] Удаление
-  - [ ] Отправление ответов
+  - [ ] Редактирование
 
 - [ ] Видео тайтла [трейлеры, опенинги] (?)
 

app/components/Comments/Comments.Add.tsx

@@ -0,0 +1,132 @@
+import { Button, Modal, ToggleSwitch, Label, Textarea } from "flowbite-react";
+import { CommentsComment } from "./Comments.Comment";
+import { useState } from "react";
+import { ENDPOINTS } from "#/api/config";
+
+export const CommentsAddModal = (props: {
+  isOpen: boolean;
+  setIsOpen: any;
+  release_id: number;
+  isReply?: boolean;
+  parentComment?: any;
+  parentProfile?: any;
+  token: string;
+  setShouldRender?: any;
+  setCommentSend?: any;
+}) => {
+  const [message, setMessage] = useState(
+    props.isReply ? `${props.parentProfile.login}, ` : ""
+  );
+  const [isSpoiler, setIsSpoiler] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+
+  function _sendComment(e) {
+    e.preventDefault();
+    const re = /\n/gi;
+    const data = {
+      message: message.replace(re, "\r\n").trim(),
+      parentCommentId: !props.parentComment ? null : props.parentComment.id,
+      replyToProfileId: !props.parentProfile ? null : props.parentProfile.id,
+      spoiler: isSpoiler,
+    };
+
+    async function _send() {
+      const res = await fetch(
+        `${ENDPOINTS.release.info}/comment/add/${props.release_id}?token=${props.token}`,
+        {
+          method: "POST",
+          body: JSON.stringify(data),
+        }
+      );
+
+      if (props.isReply && props.setShouldRender && props.setCommentSend) {
+        props.setShouldRender(true);
+        props.setCommentSend(true);
+      }
+
+      setMessage(props.isReply ? `${props.parentProfile.login}, ` : "");
+      setIsSpoiler(false);
+      props.setIsOpen(false);
+      setIsSending(false);
+    }
+
+    if (props.token && message.trim() != "") {
+      setIsSending(true);
+      _send();
+    }
+  }
+
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+    >
+      <Modal.Header>
+        <p className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
+          {props.isReply ? "Ответ на комментарий" : "Оставить комментарий"}
+        </p>
+      </Modal.Header>
+      <Modal.Body>
+        {props.isReply && (
+          <div className="mb-4">
+            <CommentsComment
+              release_id={props.release_id}
+              profile={props.parentProfile}
+              comment={{
+                id: props.parentComment.id,
+                timestamp: props.parentComment.timestamp,
+                message: props.parentComment.message,
+                reply_count: props.parentComment.reply_count,
+                likes_count: props.parentComment.likes_count,
+                vote: props.parentComment.vote,
+                isSpoiler: props.parentComment.isSpoiler,
+                isEdited: props.parentComment.isEdited,
+                isDeleted: props.parentComment.isDeleted,
+              }}
+              token={props.token}
+              isReplying={true}
+            />
+          </div>
+        )}
+        <form className="flex flex-col gap-4" onSubmit={(e) => _sendComment(e)}>
+          <div>
+            <div className="block mb-2 sr-only">
+              <Label htmlFor="comment" value="Ваш комментарий." />
+            </div>
+            <Textarea
+              id="comment"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Написать комментарий..."
+              required={true}
+              rows={4}
+            />
+          </div>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <ToggleSwitch
+                color="blue"
+                theme={{
+                  toggle: {
+                    checked: {
+                      color: {
+                        blue: "border-blue-700 bg-blue-700",
+                      },
+                    },
+                  },
+                }}
+                checked={isSpoiler}
+                onChange={() => setIsSpoiler(!isSpoiler)}
+                label="Спойлер"
+              />
+            </div>
+            <Button type="submit" color={"blue"} disabled={isSending}>
+              Отправить
+            </Button>
+          </div>
+        </form>
+      </Modal.Body>
+    </Modal>
+  );
+};

app/components/Comments/Comments.Comment.tsx

@@ -1,10 +1,12 @@
 import { unixToDate, sinceUnixDate } from "#/api/utils";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { ENDPOINTS } from "#/api/config";
 import { Button } from "flowbite-react";
 import Link from "next/link";
+import { CommentsAddModal } from "./Comments.Add";
 
 export const CommentsComment = (props: {
+  release_id: number;
   profile: { login: string; avatar: string; id: number };
   comment: {
     id: number;
@@ -19,17 +21,34 @@ export const CommentsComment = (props: {
   };
   isSubComment?: boolean;
   token: string | null;
+  isReplying?: boolean;
+  parentComment?: any;
+  setShouldRender?: (shouldRender: boolean) => void;
+  setCommentSend?: (commentSend: boolean) => void;
 }) => {
   const [replies, setReplies] = useState([]);
   const [likes, setLikes] = useState(props.comment.likes_count);
   const [vote, setVote] = useState(props.comment.vote);
+  const [isAddCommentsOpen, setIsAddCommentsOpen] = useState(false);
   const [isHidden, setIsHidden] = useState(
-    props.comment.isSpoiler || props.comment.likes_count < -5
+    !props.isReplying &&
+      (props.comment.isSpoiler || props.comment.likes_count < -5)
   );
 
+  const [shouldRender, setShouldRender] = useState(true);
+  const [commentSend, setCommentSend] = useState(false);
+
+  let parentCommentId: number | null = null;
+  if (props.parentComment) {
+    parentCommentId = props.parentComment.id;
+  }
+
   useEffect(() => {
     async function _fetchReplies() {
-      let url = `${ENDPOINTS.release.info}/comment/replies/${props.comment.id}/0?sort=2`;
+      setReplies([]);
+      let url = `${ENDPOINTS.release.info}/comment/replies/${
+        parentCommentId || props.comment.id
+      }/0?sort=2`;
       if (props.token) {
         url += `&token=${props.token}`;
       }
@@ -39,10 +58,17 @@ export const CommentsComment = (props: {
           setReplies(data.content);
         });
     }
-    if (!props.isSubComment && props.comment.reply_count > 0) {
+    if (
+      !props.isSubComment &&
+      !props.isReplying &&
+      shouldRender &&
+      (commentSend || props.comment.reply_count > 0)
+    ) {
       _fetchReplies();
+      setShouldRender(false);
+      setCommentSend(false);
     }
-  }, []);
+  }, [commentSend]);
 
   async function _sendVote(action: number) {
     if (props.token) {
@@ -81,144 +107,170 @@ export const CommentsComment = (props: {
   }
 
   return (
-    <article className={`${!props.isSubComment ? "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">
+      <article
-        <div className="flex flex-col items-start gap-1 sm:items-center sm:flex-row">
+        className={`${
-          <Link
+          !props.isSubComment ? "p-6" : "pt-4"
-            href={`/profile/${props.profile.id}`}
+        } text-sm bg-gray-100 rounded-lg sm:text-base dark:bg-gray-900`}
-            className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white hover:underline"
-          >
-            <img
-              className="w-6 h-6 mr-2 rounded-full"
-              src={props.profile.avatar}
-              alt=""
-            />
-            {props.profile.login}
-          </Link>
-          <p className="text-sm text-gray-600 dark:text-gray-400">
-            <time
-              dateTime={props.comment.timestamp.toString()}
-              title={unixToDate(props.comment.timestamp, "full")}
-            >
-              {sinceUnixDate(props.comment.timestamp)}
-            </time>
-          </p>
-        </div>
-      </footer>
-      <div className="relative flex items-center py-2">
-        <p className="text-gray-800 whitespace-pre-wrap dark:text-gray-400">
-          {!props.comment.isDeleted
-            ? props.comment.message
-            : "Комментарий был удалён."}
-        </p>
-        {isHidden && (
-          <button
-            className="absolute top-0 bottom-0 left-0 right-0"
-            onClick={() => setIsHidden(false)}
-          >
-            <div className="min-w-full min-h-full px-2 py-1.5 rounded-md bg-black text-white bg-opacity-50 backdrop-blur-[8px] flex flex-col justify-center items-center">
-              <p>
-                {props.comment.likes_count < -5
-                  ? "У комментария слишком низкий рейтинг."
-                  : "Данный комментарий может содержать спойлер."}
-              </p>
-              <p className="font-bold">Нажмите, чтобы прочитать</p>
-            </div>
-          </button>
-        )}
-      </div>
-      <div
-        className={`flex items-center justify-between space-x-4 ${
-          isHidden ? "mt-4" : ""
-        }`}
       >
-        <button
+        <footer className="flex items-center justify-between mb-2">
-          type="button"
+          <div className="flex flex-col items-start gap-1 sm:items-center sm:flex-row">
-          className="flex items-center text-sm font-medium text-gray-500 hover:underline dark:text-gray-400"
+            <Link
-        >
+              href={`/profile/${props.profile.id}`}
-          <svg
+              className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white hover:underline"
-            className="mr-1.5 w-3.5 h-3.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 20 18"
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M5 5h5M5 8h2m6-3h2m-5 3h6m2-7H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3v5l5-5h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z"
-            />
-          </svg>
-          Ответить
-        </button>
-        <div className="flex items-center">
-          {props.token && (
-            <Button
-              color="inline"
-              onClick={() => {
-                _updateVote("dislike");
-              }}
             >
-              <span
+              <img
-                className={`w-6 h-6 iconify mdi--dislike ${
+                className="w-6 h-6 mr-2 rounded-full"
-                  vote == 1
+                src={props.profile.avatar}
+                alt=""
+              />
+              {props.profile.login}
+            </Link>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              <time
+                dateTime={props.comment.timestamp.toString()}
+                title={unixToDate(props.comment.timestamp, "full")}
+              >
+                {sinceUnixDate(props.comment.timestamp)}
+              </time>
+            </p>
+          </div>
+        </footer>
+        <div className="relative flex items-center py-2">
+          <p className="text-gray-800 whitespace-pre-wrap dark:text-gray-400">
+            {!props.comment.isDeleted
+              ? props.comment.message
+              : "Комментарий был удалён."}
+          </p>
+          {isHidden && (
+            <button
+              className="absolute top-0 bottom-0 left-0 right-0"
+              onClick={() => setIsHidden(false)}
+            >
+              <div className="min-w-full min-h-full px-2 py-1.5 rounded-md bg-black text-white bg-opacity-50 backdrop-blur-[8px] flex flex-col justify-center items-center">
+                <p>
+                  {props.comment.likes_count < -5
+                    ? "У комментария слишком низкий рейтинг."
+                    : "Данный комментарий может содержать спойлер."}
+                </p>
+                <p className="font-bold">Нажмите, чтобы прочитать</p>
+              </div>
+            </button>
+          )}
+        </div>
+        {!props.isReplying && !props.comment.isDeleted && (
+          <div
+            className={`flex items-center justify-between space-x-4 ${
+              isHidden ? "mt-4" : ""
+            }`}
+          >
+            {props.token ? (
+              <button
+                type="button"
+                className="flex items-center text-sm font-medium text-gray-500 hover:underline dark:text-gray-400"
+                onClick={() => setIsAddCommentsOpen(true)}
+              >
+                <svg
+                  className="mr-1.5 w-3.5 h-3.5"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 20 18"
+                >
+                  <path
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M5 5h5M5 8h2m6-3h2m-5 3h6m2-7H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3v5l5-5h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z"
+                  />
+                </svg>
+                Ответить
+              </button>
+            ) : (
+              <span></span>
+            )}
+            <div className="flex items-center">
+              <Button
+                color="inline"
+                onClick={() => {
+                  _updateVote("dislike");
+                }}
+                disabled={!props.token}
+              >
+                <span
+                  className={`w-6 h-6 iconify mdi--dislike ${
+                    vote == 1
+                      ? "text-red-500 dark:text-red-400"
+                      : "text-gray-500 dark:text-gray-400"
+                  }`}
+                ></span>
+              </Button>
+              <p
+                className={`text-sm font-medium ${
+                  likes > 0
+                    ? "text-green-500 dark:text-green-400"
+                    : likes < 0
                     ? "text-red-500 dark:text-red-400"
                     : "text-gray-500 dark:text-gray-400"
                 }`}
-              ></span>
+              >
-            </Button>
+                {likes}
-          )}
+              </p>
-          <p
+              <Button
-            className={`text-sm font-medium ${
+                color="inline"
-              likes > 0
+                onClick={() => {
-                ? "text-green-500 dark:text-green-400"
+                  _updateVote("like");
-                : likes < 0
+                }}
-                ? "text-red-500 dark:text-red-400"
+                disabled={!props.token}
-                : "text-gray-500 dark:text-gray-400"
+              >
-            }`}
+                <span
-          >
+                  className={`w-6 h-6 iconify mdi--like ${
-            {likes}
+                    vote == 2
-          </p>
+                      ? "text-green-500 dark:text-green-400"
-          {props.token && (
+                      : "text-gray-500 dark:text-gray-400"
-            <Button
+                  }`}
-              color="inline"
+                ></span>
-              onClick={() => {
+              </Button>
-                _updateVote("like");
+            </div>
+          </div>
+        )}
+        {replies.length > 0 &&
+          replies.map((comment: any) => (
+            <CommentsComment
+              key={comment.id}
+              release_id={props.release_id}
+              profile={comment.profile}
+              comment={{
+                id: comment.id,
+                timestamp: comment.timestamp,
+                message: comment.message,
+                reply_count: comment.reply_count,
+                likes_count: comment.likes_count,
+                vote: comment.vote,
+                isSpoiler: comment.is_spoiler,
+                isEdited: comment.is_edited,
+                isDeleted: comment.is_deleted,
               }}
-            >
+              isSubComment={true}
-              <span
+              token={props.token}
-                className={`w-6 h-6 iconify mdi--like ${
+              parentComment={props.parentComment || props.comment}
-                  vote == 2
+              setShouldRender={props.setShouldRender || setShouldRender}
-                    ? "text-green-500 dark:text-green-400"
+              setCommentSend={props.setCommentSend || setCommentSend}
-                    : "text-gray-500 dark:text-gray-400"
+            />
-                }`}
+          ))}
-              ></span>
+      </article>
-            </Button>
+      <CommentsAddModal
-          )}
+        isOpen={isAddCommentsOpen}
-        </div>
+        setIsOpen={setIsAddCommentsOpen}
-      </div>
+        release_id={props.release_id}
-      {replies.length > 0 &&
+        token={props.token}
-        replies.map((comment: any) => (
+        isReply={true}
-          <CommentsComment
+        parentComment={props.comment}
-            key={comment.id}
+        parentProfile={props.profile}
-            profile={comment.profile}
+        setShouldRender={props.setShouldRender || setShouldRender}
-            comment={{
+        setCommentSend={props.setCommentSend || setCommentSend}
-              id: comment.id,
+      />
-              timestamp: comment.timestamp,
+    </>
-              message: comment.message,
-              reply_count: comment.reply_count,
-              likes_count: comment.likes_count,
-              vote: comment.vote,
-              isSpoiler: comment.is_spoiler,
-              isEdited: comment.is_edited,
-              isDeleted: comment.is_deleted,
-            }}
-            isSubComment={true}
-            token={props.token}
-          />
-        ))}
-    </article>
   );
 };

app/components/Comments/Comments.Main.tsx

@@ -3,6 +3,7 @@ import { CommentsComment } from "./Comments.Comment";
 import { useState, useEffect, useCallback } from "react";
 import { ENDPOINTS } from "#/api/config";
 import useSWRInfinite from "swr/infinite";
+import { CommentsAddModal } from "./Comments.Add";
 
 export const CommentsMain = (props: {
   release_id: number;
@@ -10,6 +11,8 @@ export const CommentsMain = (props: {
   comments: any;
 }) => {
   const [isAllCommentsOpen, setIsAllCommentsOpen] = useState(false);
+  const [isAddCommentsOpen, setIsAddCommentsOpen] = useState(false);
+
   return (
     <>
       <Card className="antialiased">
@@ -23,36 +26,22 @@ export const CommentsMain = (props: {
                 Популярные и актуальные
               </p>
             </div>
-            <Button
+            <div className="flex items-end gap-2">
-              onClick={() => setIsAllCommentsOpen(true)}
+              {props.token && (
-              color="light"
+                <Button onClick={() => setIsAddCommentsOpen(true)} color="blue">
-              pill={true}
+                  Оставить комментарий
-              size={"sm"}
+                </Button>
-            >
+              )}
-              Показать все
+              <Button onClick={() => setIsAllCommentsOpen(true)} color="light">
-            </Button>
+                Показать все
-          </div>
+              </Button>
-          <form className="mb-6">
-            <div className="px-4 py-2 mb-4 bg-white border border-gray-200 rounded-lg rounded-t-lg dark:bg-gray-800 dark:border-gray-700">
-              <label htmlFor="comment" className="sr-only">
-                Ваш комментарий
-              </label>
-              <textarea
-                id="comment"
-                rows={4}
-                className="w-full px-0 text-sm text-gray-900 border-0 focus:ring-0 focus:outline-none dark:text-white dark:placeholder-gray-400 dark:bg-gray-800"
-                placeholder="Написать комментарий..."
-                required
-              ></textarea>
             </div>
-            <Button type="submit" color="blue">
+          </div>
-              Оставить комментарий
-            </Button>
-          </form>
           <div className="flex flex-col gap-2">
             {props.comments.map((comment: any) => (
               <CommentsComment
                 key={comment.id}
+                release_id={props.release_id}
                 profile={comment.profile}
                 comment={{
                   id: comment.id,
@@ -77,6 +66,12 @@ export const CommentsMain = (props: {
         release_id={props.release_id}
         token={props.token}
       />
+      <CommentsAddModal
+        isOpen={isAddCommentsOpen}
+        setIsOpen={setIsAddCommentsOpen}
+        release_id={props.release_id}
+        token={props.token}
+        />
     </>
   );
 };
@@ -143,7 +138,6 @@ const CommentsAllModal = (props: {
   }
 
   useEffect(() => {
-    console.log(scrollPosition);
     if (scrollPosition >= 95 && scrollPosition <= 96) {
       setSize(size + 1);
     }
@@ -160,7 +154,7 @@ const CommentsAllModal = (props: {
           <h2 className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
             Все комментарии
           </h2>
-          <p className="text-sm font-bold text-gray-600 dark:text-gray-300">
+          <p className="text-sm font-light text-gray-600 dark:text-gray-300">
             всего: {!isLoadingEnd ? "загрузка..." : data[0].total_count}
           </p>
         </div>
@@ -175,6 +169,7 @@ const CommentsAllModal = (props: {
         ) : content ? (
           content.map((comment: any) => (
             <CommentsComment
+              release_id={props.release_id}
               key={comment.id}
               profile={comment.profile}
               comment={{
@@ -189,7 +184,7 @@ const CommentsAllModal = (props: {
                 isDeleted: comment.is_deleted,
               }}
               token={props.token}
-            />
+              />
           ))
         ) : (
           <p className="text-sm font-bold text-gray-600 dark:text-gray-300">
@@ -197,7 +192,6 @@ const CommentsAllModal = (props: {
           </p>
         )}
       </div>
-      {/* <Modal.Footer>TEXT</Modal.Footer> */}
     </Modal>
   );
 };