From c5112e05bedada2de259aff5cb549dc95403bec6 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Fri, 9 Aug 2024 14:55:42 +0500
Subject: [PATCH] feat: add spoiler/low rating warning for comment

---
 TODO.md                                      |  1 -
 app/components/Comments/Comments.Comment.tsx | 43 +++++++++++++++++---
 app/components/Comments/Comments.Main.tsx    |  8 ++++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/TODO.md b/TODO.md
index ed487de..2b2d645 100644
--- a/TODO.md
+++ b/TODO.md
@@ -33,7 +33,6 @@
 - [ ] Просмотр комментариев и комментирование
   - [ ] Отправление комментариев
   - [ ] Отправление ответов
-  - [ ] Метка комментариев как спойлер
 
 - [ ] Видео тайтла [трейлеры, опенинги] (?)
 
diff --git a/app/components/Comments/Comments.Comment.tsx b/app/components/Comments/Comments.Comment.tsx
index 8b5428b..3261566 100644
--- a/app/components/Comments/Comments.Comment.tsx
+++ b/app/components/Comments/Comments.Comment.tsx
@@ -13,6 +13,10 @@ export const CommentsComment = (props: {
     reply_count: number;
     likes_count: number;
     vote: number;
+    isSpoiler: boolean;
+    isEdited: boolean;
+    isDeleted: boolean;
+    can_like: boolean;
   };
   isSubComment?: boolean;
   token: string | null;
@@ -20,6 +24,9 @@ export const CommentsComment = (props: {
   const [replies, setReplies] = useState([]);
   const [likes, setLikes] = useState(props.comment.likes_count);
   const [vote, setVote] = useState(props.comment.vote);
+  const [isHidden, setIsHidden] = useState(
+    props.comment.isSpoiler || props.comment.likes_count < -5
+  );
 
   useEffect(() => {
     async function _fetchReplies() {
@@ -99,10 +106,33 @@ export const CommentsComment = (props: {
           </p>
         </div>
       </footer>
-      <p className="text-gray-500 whitespace-pre-wrap dark:text-gray-400">
-        {props.comment.message}
-      </p>
-      <div className="flex items-center justify-between mt-4 space-x-4">
+      <div className="relative flex items-center py-2">
+        <p className="text-gray-500 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
           type="button"
           className="flex items-center text-sm font-medium text-gray-500 hover:underline dark:text-gray-400"
@@ -182,8 +212,11 @@ export const CommentsComment = (props: {
               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,
+              can_like: comment.can_like,
             }}
-            isSubComment={true}
             token={props.token}
           />
         ))}
diff --git a/app/components/Comments/Comments.Main.tsx b/app/components/Comments/Comments.Main.tsx
index 0147a41..4080ad5 100644
--- a/app/components/Comments/Comments.Main.tsx
+++ b/app/components/Comments/Comments.Main.tsx
@@ -61,6 +61,10 @@ export const CommentsMain = (props: {
                   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,
+                  can_like: comment.can_like,
                 }}
                 token={props.token}
               />
@@ -181,6 +185,10 @@ const CommentsAllModal = (props: {
                 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,
+                can_like: comment.can_like,
               }}
               token={props.token}
             />