feat: open auth when user not signed in

hikka-io · Aug 28, 2024 · 31bd239 · 31bd239
1 parent b9e8490
commit 31bd239
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 21 deletions.
diff --git 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
@@ -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
@@ -7,15 +7,19 @@ 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 {
     comment: API.Comment;
 }
 
 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
@@ -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
@@ -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
@@ -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" />
-Original file line number
+Diff line change
@@ Expand Up @@
         ]);
         if (!anime) {
+            console.log('Anime not found');
             return permanentRedirect('/');
         }
@@ Expand Down @@