refactor code, fix bugs

.eslintrc.json

@@ -3,7 +3,8 @@
     "next",
     "next/core-web-vitals",
     "prettier",
-    "plugin:tailwindcss/recommended"
+    "plugin:tailwindcss/recommended",
+    "plugin:storybook/recommended"
   ],
   "settings": {
     "tailwindcss": {

.gitignore

@@ -164,4 +164,14 @@ fabric.properties
 
 # Azure Toolkit for IntelliJ plugin
 # https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij
-.idea/**/azureSettings.xml
+.idea/**/azureSettings.xml
+*storybook.log
+
+# yarn
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.storybook/main.ts

@@ -0,0 +1,33 @@
+import { dirname, join } from 'path';
+
+import type { StorybookConfig } from '@storybook/nextjs';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+    stories: [
+        '../stories/**/*.mdx',
+        '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    ],
+    addons: [
+        getAbsolutePath('@storybook/addon-onboarding'),
+        getAbsolutePath('@storybook/addon-links'),
+        getAbsolutePath('@storybook/addon-essentials'),
+        getAbsolutePath('@chromatic-com/storybook'),
+        getAbsolutePath('@storybook/addon-interactions'),
+    ],
+    framework: {
+        name: getAbsolutePath('@storybook/nextjs'),
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

app/(pages)/anime/(animeList)/components/navbar/_components/search.tsx → app/(pages)/(content)/anime/(animeList)/components/anime-list-navbar/_components/search.tsx

@@ -7,6 +7,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Input } from '@/components/ui/input';
 import createQueryString from '@/utils/createQueryString';
 
+
 const Search = () => {
     const router = useRouter();
     const pathname = usePathname();
@@ -18,7 +19,15 @@ const Search = () => {
         const query = createQueryString(
             'search',
             value,
-            new URLSearchParams(searchParams),
+            createQueryString(
+                'page',
+                '1',
+                createQueryString(
+                    'iPage',
+                    '1',
+                    new URLSearchParams(searchParams),
+                ),
+            ),
         );
         setSearch(value);
 

app/(pages)/anime/(animeList)/components/navbar/navbar.tsx → app/(pages)/(content)/anime/(animeList)/components/anime-list-navbar/anime-list-navbar.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/utils/utils';
 
 import Search from './_components/search';
 
-const Navbar = () => {
+const AnimeListNavbar = () => {
     return (
         <div
             className={cn(
@@ -22,4 +22,4 @@ const Navbar = () => {
     );
 };
 
-export default Navbar;
+export default AnimeListNavbar;

app/(pages)/(content)/anime/(animeList)/components/anime-list-navbar/index.ts

@@ -0,0 +1,3 @@
+import AnimeListNavbar from './anime-list-navbar';
+
+export default AnimeListNavbar;

app/(pages)/(content)/anime/(animeList)/components/anime-list/anime-list.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+
+import AnimeCard from '@/app/(pages)/(content)/components/anime-card';
+import FiltersNotFound from '@/components/filters/components/filters-not-found';
+import LoadMoreButton from '@/components/load-more-button';
+import Block from '@/components/ui/block';
+import Pagination from '@/components/ui/pagination';
+import Stack from '@/components/ui/stack';
+import useAnimeCatalog from '@/services/hooks/anime/useAnimeCatalog';
+import useAuth from '@/services/hooks/auth/useAuth';
+
+import { useNextPage, useUpdatePage } from './anime-list.hooks';
+import AnimeListSkeleton from './components/anime-list-skeleton';
+
+interface Props {
+    searchParams: Record<string, string>;
+}
+
+const AnimeList = ({ searchParams }: Props) => {
+    const { auth } = useAuth();
+
+    const page = searchParams.page;
+    const iPage = searchParams.iPage;
+
+    const dataKeys = {
+        page: Number(page),
+        iPage: Number(iPage),
+        auth,
+    };
+
+    const {
+        fetchNextPage,
+        isFetchingNextPage,
+        isLoading,
+        hasNextPage,
+        list,
+        pagination,
+    } = useAnimeCatalog(dataKeys);
+
+    const updatePage = useUpdatePage(dataKeys);
+    const nextPage = useNextPage({ fetchNextPage, pagination });
+
+    if (isLoading && !isFetchingNextPage) {
+        return <AnimeListSkeleton />;
+    }
+
+    if (list === undefined || list.length === 0) {
+        return <FiltersNotFound />;
+    }
+
+    return (
+        <Block>
+            <Stack extended={true} size={5} extendedSize={5}>
+                {list.map((anime: API.Anime) => {
+                    return <AnimeCard key={anime.slug} anime={anime} />;
+                })}
+            </Stack>
+            {hasNextPage && (
+                <LoadMoreButton
+                    isFetchingNextPage={isFetchingNextPage}
+                    fetchNextPage={nextPage}
+                />
+            )}
+            {list && pagination && pagination.pages > 1 && (
+                <div className="sticky bottom-2 z-10 flex items-center justify-center">
+                    <div className="w-fit rounded-lg border border-secondary/60 bg-background p-2 shadow">
+                        <Pagination
+                            page={Number(iPage)}
+                            pages={pagination.pages}
+                            setPage={updatePage}
+                        />
+                    </div>
+                </div>
+            )}
+        </Block>
+    );
+};
+
+export default AnimeList;

app/(pages)/anime/(animeList)/layout.tsx → app/(pages)/(content)/anime/(animeList)/layout.tsx

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 
-import NavBar from '@/app/(pages)/anime/(animeList)/components/navbar';
+import Filters from '@/components/filters/anime-filters';
+import Block from '@/components/ui/block';
+import Card from '@/components/ui/card';
 
-import Filters from '../../../../components/filters/anime-filters';
+import NavBar from './components/anime-list-navbar';
 
 interface Props {
     children: ReactNode;
@@ -12,13 +14,13 @@ const AnimeListLayout = async ({ children }: Props) => {
     return (
         <div>
             <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_25%] lg:items-start lg:justify-between lg:gap-16">
-                <div className="flex flex-col gap-8">
+                <Block>
                     <NavBar />
                     {children}
-                </div>
-                <div className="sticky top-20 order-1 hidden w-full rounded-md border border-secondary/60 bg-secondary/30 opacity-60 transition-opacity hover:opacity-100 lg:order-2 lg:block">
+                </Block>
+                <Card className="sticky top-20 order-1 hidden w-full p-0 opacity-60 transition-opacity hover:opacity-100 lg:order-2 lg:block">
                     <Filters type="anime" className="px-4" />
-                </div>
+                </Card>
             </div>
         </div>
     );

app/(pages)/anime/[slug]/(animeDetails)/characters/page.tsx → app/(pages)/(content)/anime/[slug]/(animeDetails)/characters/page.tsx

@@ -1,8 +1,9 @@
 import { Metadata, ResolvingMetadata } from 'next';
 
-import Characters from '@/app/(pages)/anime/[slug]/components/characters';
 import _generateMetadata from '@/utils/generateMetadata';
 
+import Characters from '../../components/characters/characters';
+
 export async function generateMetadata(
     { params }: { params: { slug: string } },
     parent: ResolvingMetadata,

app/(pages)/anime/[slug]/(animeDetails)/comments/page.tsx → app/(pages)/(content)/anime/[slug]/(animeDetails)/comments/page.tsx

@@ -1,8 +1,12 @@
 import { Metadata, ResolvingMetadata } from 'next';
 
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+
 import Comments from '@/components/comments/comments';
+import getComments from '@/services/api/comments/getComments';
 import { getCookie } from '@/utils/actions';
 import _generateMetadata from '@/utils/generateMetadata';
+import getQueryClient from '@/utils/getQueryClient';
 
 export async function generateMetadata(
     { params }: { params: { slug: string } },
@@ -22,9 +26,26 @@ interface Props {
 }
 
 const AnimeCommentsPage = async ({ params: { slug } }: Props) => {
+    const queryClient = getQueryClient();
     const auth = await getCookie('auth');
 
-    return <Comments auth={auth} slug={slug} content_type="anime" />;
+    await queryClient.prefetchInfiniteQuery({
+        initialPageParam: 1,
+        queryKey: ['comments', slug, 'anime', { auth }],
+        queryFn: ({ pageParam }) =>
+            getComments({
+                slug,
+                content_type: 'anime',
+                page: pageParam,
+                auth,
+            }),
+    });
+
+    return (
+        <HydrationBoundary state={dehydrate(queryClient)}>
+            <Comments auth={auth} slug={slug} content_type="anime" />
+        </HydrationBoundary>
+    );
 };
 
 export default AnimeCommentsPage;

app/(pages)/anime/[slug]/(animeDetails)/franchise/page.tsx → app/(pages)/(content)/anime/[slug]/(animeDetails)/franchise/page.tsx

@@ -1,8 +1,9 @@
 import { Metadata, ResolvingMetadata } from 'next';
 
-import Franchise from '@/app/(pages)/anime/[slug]/components/franchise';
 import _generateMetadata from '@/utils/generateMetadata';
 
+import Franchise from '../../components/franchise';
+
 export async function generateMetadata(
     { params }: { params: { slug: string } },
     parent: ResolvingMetadata,

app/(pages)/anime/[slug]/(animeDetails)/links/page.tsx → app/(pages)/(content)/anime/[slug]/(animeDetails)/links/page.tsx

@@ -1,8 +1,9 @@
 import { Metadata, ResolvingMetadata } from 'next';
 
-import Links from '@/app/(pages)/anime/[slug]/components/links';
 import _generateMetadata from '@/utils/generateMetadata';
 
+import Links from '../../components/links';
+
 export async function generateMetadata(
     { params }: { params: { slug: string } },
     parent: ResolvingMetadata,

app/(pages)/anime/[slug]/(animeDetails)/media/page.tsx → app/(pages)/(content)/anime/[slug]/(animeDetails)/media/page.tsx

@@ -1,8 +1,9 @@
 import { Metadata, ResolvingMetadata } from 'next';
 
-import Media from '@/app/(pages)/anime/[slug]/components/media';
 import _generateMetadata from '@/utils/generateMetadata';
 
+import Media from '../../components/media/media';
+
 export async function generateMetadata(
     { params }: { params: { slug: string } },
     parent: ResolvingMetadata,

app/(pages)/anime/[slug]/(animeDetails)/staff/page.tsx → app/(pages)/(content)/anime/[slug]/(animeDetails)/staff/page.tsx

@@ -1,8 +1,9 @@
 import { Metadata, ResolvingMetadata } from 'next';
 
-import Staff from '@/app/(pages)/anime/[slug]/components/staff';
 import _generateMetadata from '@/utils/generateMetadata';
 
+import Staff from '../../components/staff';
+
 export async function generateMetadata(
     { params }: { params: { slug: string } },
     parent: ResolvingMetadata,

app/(pages)/anime/[slug]/components/actions/actions.tsx → app/(pages)/(content)/anime/[slug]/components/actions/actions.tsx

@@ -1,7 +1,8 @@
-import WatchStats from '@/app/(pages)/anime/[slug]/components/actions/components/watch-stats';
 import WatchListButton from '@/components/watchlist-button';
 import { getCookie } from '@/utils/actions';
 
+import WatchStats from './components/watch-stats';
+
 interface Props {
     anime?: API.AnimeInfo;
 }

app/(pages)/(content)/anime/[slug]/components/characters/characters.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+
+import { useParams } from 'next/navigation';
+
+import LoadMoreButton from '@/components/load-more-button';
+import useCharacters from '@/services/hooks/anime/useCharacters';
+
+import MainCharacters from './components/main-characters';
+import OtherCharacters from './components/other-characters';
+
+interface Props {
+    extended?: boolean;
+}
+
+const Characters = ({ extended }: Props) => {
+    const params = useParams();
+    const { fetchNextPage, hasNextPage, isFetchingNextPage, ref } =
+        useCharacters({ slug: String(params.slug) });
+
+    return (
+        <div className="flex flex-col gap-12">
+            <MainCharacters extended={extended} />
+            {extended && <OtherCharacters extended={extended} />}
+            {extended && hasNextPage && (
+                <LoadMoreButton
+                    isFetchingNextPage={isFetchingNextPage}
+                    fetchNextPage={fetchNextPage}
+                    ref={ref}
+                />
+            )}
+        </div>
+    );
+};
+
+export default Characters;