From 31bd239756383ba6f2fad5f3be232d427f7ba593 Mon Sep 17 00:00:00 2001
From: olexh <typicaladmsky@gmail.com>
Date: Wed, 28 Aug 2024 19:31:01 +0300
Subject: [PATCH] feat: open auth when user not signed in

---
 .../(pages)/(content)/anime/[slug]/layout.tsx |  1 +
 .../(pages)/(content)/anime/[slug]/page.tsx   | 33 +++++++++++--------
 src/components/comments/comment-vote.tsx      | 16 +++++++--
 src/components/comments/comment.tsx           | 16 +++++++--
 src/components/comments/global-comment.tsx    |  2 +-
 .../collection-info/collection-vote.tsx       | 16 +++++++--
 6 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/src/app/(pages)/(content)/anime/[slug]/layout.tsx b/src/app/(pages)/(content)/anime/[slug]/layout.tsx
index 538a2212..048e7f7c 100644
--- a/src/app/(pages)/(content)/anime/[slug]/layout.tsx
+++ b/src/app/(pages)/(content)/anime/[slug]/layout.tsx
@@ -45,6 +45,7 @@ const AnimeLayout: FC<Props> = async ({ params: { slug }, children }) => {
     ]);
 
     if (!anime) {
+        console.log('Anime not found');
         return permanentRedirect('/');
     }
 
diff --git a/src/app/(pages)/(content)/anime/[slug]/page.tsx b/src/app/(pages)/(content)/anime/[slug]/page.tsx
index e8c1a9ec..3b5dad56 100644
--- a/src/app/(pages)/(content)/anime/[slug]/page.tsx
+++ b/src/app/(pages)/(content)/anime/[slug]/page.tsx
@@ -10,9 +10,8 @@ import WatchStats from '@/features/anime/anime-view/watch-stats/watch-stats.comp
 import Followings from '@/features/followings/followings.component';
 import Franchise from '@/features/franchise/franchise.component';
 
-import getAnimeInfo, {
-    Response as AnimeResponse,
-} from '@/services/api/anime/getAnimeInfo';
+import { prefetchAnimeInfo } from '@/services/hooks/anime/use-anime-info';
+import getQueryClient from '@/utils/get-query-client';
 
 import jsonSchema from './anime.schema';
 
@@ -22,20 +21,26 @@ interface Props {
     };
 }
 
-const AnimePage: FC<Props> = async ({ params }) => {
-    const anime: AnimeResponse = await getAnimeInfo({
-        params: {
-            slug: params.slug,
-        },
-    });
-    const jsonLd = jsonSchema({ anime });
+const AnimePage: FC<Props> = async ({ params: { slug } }) => {
+    const queryClient = getQueryClient();
+
+    await prefetchAnimeInfo({ slug });
+
+    const anime: API.AnimeInfo | undefined = queryClient.getQueryData([
+        'anime',
+        slug,
+    ]);
 
     return (
         <div className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_33%] lg:gap-16 xl:grid-cols-[1fr_30%]">
-            <script
-                type="application/ld+json"
-                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-            />
+            {anime && (
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{
+                        __html: JSON.stringify(jsonSchema({ anime })),
+                    }}
+                />
+            )}
             <div className="relative order-2 flex flex-col gap-12 lg:order-1">
                 <Description />
                 <Characters />
diff --git a/src/components/comments/comment-vote.tsx b/src/components/comments/comment-vote.tsx
index 9b4b4f26..72758585 100644
--- a/src/components/comments/comment-vote.tsx
+++ b/src/components/comments/comment-vote.tsx
@@ -7,8 +7,11 @@ import BxUpvote from '~icons/bx/upvote';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 
+import AuthModal from '@/features/modals/auth-modal/auth-modal';
+
 import useSession from '@/services/hooks/auth/use-session';
 import useVote from '@/services/hooks/vote/useVote';
+import { useModalContext } from '@/services/providers/modal-provider';
 import { cn } from '@/utils/utils';
 
 interface Props {
@@ -16,6 +19,7 @@ interface Props {
 }
 
 const CommentVote: FC<Props> = ({ comment }) => {
+    const { openModal } = useModalContext();
     const { user: loggedUser } = useSession();
 
     const mutation = useVote();
@@ -25,6 +29,16 @@ const CommentVote: FC<Props> = ({ comment }) => {
         : comment.my_score;
 
     const handleCommentVote = async (score: -1 | 1) => {
+        if (!loggedUser) {
+            openModal({
+                content: <AuthModal type="login" />,
+                className: 'max-w-3xl p-0',
+                forceModal: true,
+            });
+
+            return;
+        }
+
         const updated = currentScore === score ? 0 : score;
 
         mutation.mutate({
@@ -40,7 +54,6 @@ const CommentVote: FC<Props> = ({ comment }) => {
         <div className="group flex items-center gap-2">
             <Button
                 onClick={() => handleCommentVote(1)}
-                disabled={!loggedUser}
                 variant={'ghost'}
                 size="icon-xs"
                 className={cn(
@@ -67,7 +80,6 @@ const CommentVote: FC<Props> = ({ comment }) => {
             </Label>
             <Button
                 onClick={() => handleCommentVote(-1)}
-                disabled={!loggedUser}
                 variant={'ghost'}
                 size="icon-xs"
                 className={cn(
diff --git a/src/components/comments/comment.tsx b/src/components/comments/comment.tsx
index 269f8b13..8b071163 100644
--- a/src/components/comments/comment.tsx
+++ b/src/components/comments/comment.tsx
@@ -49,11 +49,23 @@ const Comment: FC<Props> = ({ comment, slug, content_type }) => {
         setIsInputVisible(true);
     };
 
+    const getRepliesCount = (comments: API.Comment[]) => {
+        let count = comments.length;
+
+        comments.forEach((comment) => {
+            count += getRepliesCount(comment.replies);
+        });
+
+        return count;
+    };
+
     const getDeclensedReplyCount = () => {
+        const repliesCount = getRepliesCount(comment.replies);
+
         return (
-            comment.replies.length +
+            repliesCount +
             ' ' +
-            getDeclensionWord(comment.replies.length, [
+            getDeclensionWord(repliesCount, [
                 'відповідь',
                 'відповіді',
                 'відповідей',
diff --git a/src/components/comments/global-comment.tsx b/src/components/comments/global-comment.tsx
index 97aa532e..67cfd616 100644
--- a/src/components/comments/global-comment.tsx
+++ b/src/components/comments/global-comment.tsx
@@ -61,7 +61,7 @@ const GlobalComment: FC<Props> = ({ comment, href }) => {
             </div>
 
             <Link href={href} className="flex-1 hover:underline">
-                <MDViewer className="line-clamp-2 text-sm">
+                <MDViewer className="line-clamp-2 text-sm" disableSpoiler>
                     {comment.text}
                 </MDViewer>
             </Link>
diff --git a/src/features/collections/collection-view/collection-info/collection-vote.tsx b/src/features/collections/collection-view/collection-info/collection-vote.tsx
index c09d0ad4..56fe8dd9 100644
--- a/src/features/collections/collection-view/collection-info/collection-vote.tsx
+++ b/src/features/collections/collection-view/collection-info/collection-vote.tsx
@@ -10,13 +10,17 @@ import { Button } from '@/components/ui/button';
 import Card from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 
+import AuthModal from '@/features/modals/auth-modal/auth-modal';
+
 import useSession from '@/services/hooks/auth/use-session';
 import useCollection from '@/services/hooks/collections/use-collection';
 import useVote from '@/services/hooks/vote/useVote';
+import { useModalContext } from '@/services/providers/modal-provider';
 
 const CollectionVote = () => {
     const { user: loggedUser } = useSession();
     const params = useParams();
+    const { openModal } = useModalContext();
 
     const { data: collection } = useCollection({
         reference: String(params.reference),
@@ -27,6 +31,16 @@ const CollectionVote = () => {
     const handleCollectionVote = async (score: -1 | 1) => {
         if (!collection) return;
 
+        if (!loggedUser) {
+            openModal({
+                content: <AuthModal type="login" />,
+                className: 'max-w-3xl p-0',
+                forceModal: true,
+            });
+
+            return;
+        }
+
         const updated = collection?.my_score === score ? 0 : score;
 
         mutation.mutate({
@@ -44,7 +58,6 @@ const CollectionVote = () => {
                 onClick={() => handleCollectionVote(1)}
                 size="icon-md"
                 variant="secondary"
-                disabled={!loggedUser}
             >
                 {collection?.my_score === 1 ? (
                     <BxBxsUpvote className="text-success" />
@@ -57,7 +70,6 @@ const CollectionVote = () => {
                 onClick={() => handleCollectionVote(-1)}
                 size="icon-md"
                 variant="secondary"
-                disabled={!loggedUser}
             >
                 {collection?.my_score === -1 ? (
                     <BxBxsDownvote className="text-destructive" />