Merge pull request #41 from hikka-io/feat/manga

Feat/manga

app/(pages)/(content)/anime/(anime-list)/layout.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+
+import Block from '@/components/ui/block';
+
+import NavBar from '@/features/anime/anime-list-navbar/anime-list-navbar.component';
+import Filters from '@/features/filters/anime-filters.component';
+
+interface Props {
+    children: ReactNode;
+}
+
+const AnimeListLayout: FC<Props> = async ({ children }) => {
+    return (
+        <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_25%] lg:items-start lg:justify-between lg:gap-16">
+            <Block>
+                <NavBar />
+                {children}
+            </Block>
+            <div className="sticky top-20 order-1 hidden w-full opacity-60 transition-opacity hover:opacity-100 lg:order-2 lg:block">
+                <Filters content_type="anime" sort_type="anime" />
+            </div>
+        </div>
+    );
+};
+
+export default AnimeListLayout;

app/(pages)/(content)/anime/(anime-list)/page.tsx

@@ -0,0 +1,68 @@
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import { redirect } from 'next/navigation';
+import { FC } from 'react';
+
+import AnimeList from '@/features/anime/anime-list/anime-list.component';
+
+import getQueryClient from '@/utils/get-query-client';
+
+interface Props {
+    searchParams: { [key: string]: string | string[] | undefined };
+}
+
+const AnimeListPage: FC<Props> = async ({ searchParams }) => {
+    const page = searchParams.page;
+
+    if (!page) {
+        return redirect(
+            `/anime?page=1&iPage=1&${new URLSearchParams(searchParams as Record<string, string>).toString()}`,
+        );
+    }
+
+    /* const query = searchParams.search as string;
+    const media_type = searchParams.types;
+    const status = searchParams.statuses;
+    const season = searchParams.seasons;
+    const rating = searchParams.ratings;
+    const years = searchParams.years;
+    const genres = searchParams.genres;
+    const studios = searchParams.studios;
+
+    const only_translated = searchParams.only_translated;
+
+    const sort = searchParams.sort || 'score';
+    const order = searchParams.order || 'desc';
+
+    const iPage = searchParams.iPage;
+
+    const dataKeys = {
+        query,
+        media_type: typeof media_type === 'string' ? [media_type] : media_type,
+        status: typeof status === 'string' ? [status] : status,
+        season: typeof season === 'string' ? [season] : season,
+        rating: typeof rating === 'string' ? [rating] : rating,
+        years: typeof years === 'string' ? [years] : years,
+        genres: typeof genres === 'string' ? [genres] : genres,
+        studios: typeof studios === 'string' ? [studios] : studios,
+        only_translated: Boolean(only_translated),
+        sort: sort ? [`${sort}:${order}`] : undefined,
+        page: Number(page),
+        iPage: Number(iPage),
+    };
+
+    
+
+    await prefetchAnimeCatalog(dataKeys); */
+
+    const queryClient = getQueryClient();
+
+    const dehydratedState = dehydrate(queryClient);
+
+    return (
+        <HydrationBoundary state={dehydratedState}>
+            <AnimeList />
+        </HydrationBoundary>
+    );
+};
+
+export default AnimeListPage;

app/(pages)/(content)/anime/[slug]/anime.schema.ts

@@ -22,7 +22,7 @@ const jsonSchema = ({ anime }: { anime: API.AnimeInfo }) => ({
                     '@id': 'https://hikka.io/anime/' + anime.slug,
                     url: 'https://hikka.io/anime/' + anime.slug,
                     name: anime.title_ua || anime.title_en || anime.title_ja,
-                    image: anime.poster,
+                    image: anime.image,
                 },
             },
         ],
@@ -31,7 +31,7 @@ const jsonSchema = ({ anime }: { anime: API.AnimeInfo }) => ({
         '@type': 'TVSeries',
         name: anime.title_ua || anime.title_en || anime.title_ja,
         alternateName: anime.synonyms,
-        image: anime.poster,
+        image: anime.image,
         description: parseTextFromMarkDown(
             anime.synopsis_ua || anime.synopsis_en,
         ),

app/(pages)/(content)/anime/[slug]/layout.queries.ts

@@ -1,82 +1,27 @@
-import { QueryClient } from '@tanstack/query-core';
-
-import getAnimeCharacters from '@/services/api/anime/getAnimeCharacters';
-import getAnimeFranchise from '@/services/api/anime/getAnimeFranchise';
-import getAnimeStaff from '@/services/api/anime/getAnimeStaff';
-import getFavourite from '@/services/api/favourite/getFavourite';
-import getFollowingWatchList from '@/services/api/watch/getFollowingWatchList';
-import getWatch from '@/services/api/watch/getWatch';
+import { prefetchCharacters } from '@/services/hooks/anime/use-characters';
+import { prefetchFranchise } from '@/services/hooks/anime/use-franchise';
+import { prefetchStaff } from '@/services/hooks/anime/use-staff';
+import { prefetchFavorite } from '@/services/hooks/favorite/use-favorite';
+import { prefetchFollowingWatchList } from '@/services/hooks/watch/use-following-watch-list';
+import { prefetchWatch } from '@/services/hooks/watch/use-watch';
 import { getCookie } from '@/utils/cookies';
 
 interface Props {
-    queryClient: QueryClient;
     params: {
         slug: string;
     };
 }
 
-const prefetchQueries = async ({ queryClient, params: { slug } }: Props) => {
+const prefetchQueries = async ({ params: { slug } }: Props) => {
     const auth = await getCookie('auth');
 
     await Promise.all([
-        queryClient.prefetchInfiniteQuery({
-            queryKey: ['characters', slug],
-            queryFn: ({ pageParam = 1 }) =>
-                getAnimeCharacters({
-                    params: { slug },
-                    page: pageParam,
-                }),
-            initialPageParam: 1,
-        }),
-        queryClient.prefetchInfiniteQuery({
-            queryKey: ['franchise', slug],
-            queryFn: ({ pageParam = 1, meta }) =>
-                getAnimeFranchise({
-                    params: { slug },
-                    page: pageParam,
-                }),
-            initialPageParam: 1,
-        }),
-        queryClient.prefetchInfiniteQuery({
-            queryKey: ['staff', slug],
-            queryFn: ({ pageParam = 1, meta }) =>
-                getAnimeStaff({
-                    params: { slug },
-                    page: pageParam,
-                }),
-            initialPageParam: 1,
-        }),
-        auth
-            ? queryClient.prefetchQuery({
-                  queryKey: ['watch', slug],
-                  queryFn: ({ meta }) => getWatch({ params: { slug } }),
-              })
-            : undefined,
-        auth
-            ? queryClient.prefetchQuery({
-                  queryKey: ['favorite', slug, { content_type: 'anime' }],
-                  queryFn: ({ meta }) =>
-                      getFavourite({
-                          params: {
-                              slug: String(slug),
-                              content_type: 'anime',
-                          },
-                      }),
-              })
-            : undefined,
-        auth
-            ? queryClient.prefetchInfiniteQuery({
-                  initialPageParam: 1,
-                  queryKey: ['followingWatchList', slug],
-                  queryFn: ({ pageParam = 1, meta }) =>
-                      getFollowingWatchList({
-                          params: {
-                              slug: slug,
-                          },
-                          page: pageParam,
-                      }),
-              })
-            : undefined,
+        prefetchCharacters({ slug }),
+        prefetchFranchise({ slug }),
+        prefetchStaff({ slug }),
+        auth ? prefetchWatch({ slug }) : undefined,
+        auth ? prefetchFavorite({ slug, content_type: 'anime' }) : undefined,
+        auth ? prefetchFollowingWatchList({ slug }) : undefined,
     ]);
 };
 

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

@@ -14,7 +14,7 @@ import Actions from '@/features/anime/anime-view/actions/actions.component';
 import Cover from '@/features/anime/anime-view/cover.component';
 import Title from '@/features/anime/anime-view/title.component';
 
-import getAnimeInfo from '@/services/api/anime/getAnimeInfo';
+import { prefetchAnimeInfo } from '@/services/hooks/anime/use-anime-info';
 import { ANIME_NAV_ROUTES, RELEASE_STATUS } from '@/utils/constants';
 import getQueryClient from '@/utils/get-query-client';
 
@@ -36,10 +36,7 @@ export async function generateMetadata(
 const AnimeLayout: FC<Props> = async ({ params: { slug }, children }) => {
     const queryClient = await getQueryClient();
 
-    await queryClient.prefetchQuery({
-        queryKey: ['anime', slug],
-        queryFn: ({ meta }) => getAnimeInfo({ params: { slug } }),
-    });
+    await prefetchAnimeInfo({ slug });
 
     const anime: API.AnimeInfo | undefined = queryClient.getQueryData([
         'anime',
@@ -50,7 +47,7 @@ const AnimeLayout: FC<Props> = async ({ params: { slug }, children }) => {
         return redirect('/');
     }
 
-    await prefetchQueries({ queryClient, params: { slug } });
+    await prefetchQueries({ params: { slug } });
 
     const dehydratedState = dehydrate(queryClient);