feat: sprint 3

Author: yarre-uk

src/app/(main)/chapter/edit/page.tsx

@@ -1,14 +1,123 @@
-import { useRouter } from 'next/router';
+'use client';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+
+import { FormValues } from './types';
+
+import { Input } from '@/shared/components/FormComponents';
+import { Button } from '@/shared/components/ui/button';
+import { useToast } from '@/shared/components/ui/use-toast';
+import useAxiosAuth from '@/shared/hooks/useAxiosAuth';
+import Chapter from '@/shared/models/chapter';
+
+const validationSchema: yup.ObjectSchema<FormValues> = yup.object({
+  title: yup
+    .string()
+    .required('No title provided.')
+    .min(10, 'Title too short.')
+    .max(124, 'Title too long.'),
+  chapterNumber: yup.number().required('No chapter number provided.'),
+  createdOn: yup.string().required('No release date provided.'),
+});
 
 function Page() {
+  const [chapter, setChapter] = useState<Chapter | null>(null);
+
   const router = useRouter();
-  const { mangaId, chapterId } = router.query;
+  const queryParams = useSearchParams();
+
+  const axiosAuth = useAxiosAuth();
+  const { toast } = useToast();
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const mangaId = queryParams.get('mangaId');
+  const chapterId = queryParams.get('chapterId');
+
+  const fetchChapter = async () => {
+    const res = await axiosAuth.get<Chapter>(`Chapters`, {
+      params: { chapterId },
+    });
+
+    setChapter(res.data);
+    setValue('title', res.data.title);
+    setValue('chapterNumber', res.data.chapterNumber);
+    setValue(
+      'createdOn',
+      new Date(res.data.createdOn).toISOString().slice(0, 10),
+    );
+  };
+
+  useEffect(() => {
+    fetchChapter();
+  }, []);
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await axiosAuth.post<unknown, unknown, unknown>('Chapters', {
+        ...chapter,
+        ...data,
+        chapterId,
+        mangaId,
+      });
+
+      toast({
+        title: 'Success',
+        description: `Chapter "${data.title}" was successfully created!`,
+      });
+
+      router.push(`/manga/${mangaId}`);
+    } catch (error) {
+      toast({
+        title: 'Error occurred!',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (!chapter) {
+    return <div>Loading...</div>;
+  }
 
   return (
-    <div>
-      <h1>Page</h1>
-      <p>Param1: {mangaId}</p>
-      <p>Param2: {chapterId}</p>
+    <div className="flex flex-col items-center gap-6 pt-10">
+      <p className="text-2xl">Edit chapter</p>
+      <form
+        className="flex w-[50%] flex-col gap-6 lg:w-[50rem]"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Input
+          label="title"
+          register={register}
+          error={errors?.title?.message}
+        />
+        <Input
+          label="chapterNumber"
+          type="number"
+          defaultValue={1}
+          min={0}
+          register={register}
+          error={errors?.chapterNumber?.message}
+        />
+        <Input
+          label="createdOn"
+          type="date"
+          register={register}
+          error={errors?.createdOn?.message}
+          // defaultValue={new Date().toISOString().slice(0, 10)}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
     </div>
   );
 }

src/app/(main)/chapter/edit/types.ts

@@ -0,0 +1,11 @@
+export type FormValues = {
+  title: string;
+  chapterNumber: number;
+  createdOn: string;
+};
+
+export type CreateChapterDto = {
+  title: string;
+  chapterNumber: number;
+  createdOn: Date;
+};

src/app/(main)/manga/[mangaId]/components/ChapterCard.tsx

@@ -8,6 +8,7 @@ import { ChapterDTO } from '../types';
 import { Button } from '@/shared/components/ui/button';
 import { Card } from '@/shared/components/ui/card';
 import { useToast } from '@/shared/components/ui/use-toast';
+import { ROUTE } from '@/shared/constants/routes';
 import useAxiosAuth from '@/shared/hooks/useAxiosAuth';
 
 type ChapterListProps = {
@@ -30,7 +31,11 @@ function ChapterCard({
 
   const { data: session } = useSession();
 
-  // const handleEdit = async () => {};
+  const handleEdit = async () => {
+    router.push(
+      `${ROUTE.EDIT_CHAPTER}?chapterId=${chapter.chapterId}&mangaId=${mangaId}`,
+    );
+  };
 
   const handleDelete = async () => {
     try {
@@ -89,7 +94,7 @@ function ChapterCard({
       <Card
         className="z-0 flex w-full flex-row items-center justify-between p-2 px-8"
         onClick={() => {
-          router.push(`/manga/${mangaId}/${chapter.chapterId}`);
+          router.push(`${ROUTE.MANGA}/${mangaId}/${chapter.chapterId}`);
         }}
       >
         <p>
@@ -110,15 +115,7 @@ function ChapterCard({
           >
             <LucideUpload size={20} />
           </Button>
-          <Button
-            variant="outline"
-            onClick={(e) => {
-              e.stopPropagation();
-              e.nativeEvent.stopImmediatePropagation();
-              e.preventDefault();
-              fileInputRef?.current.click();
-            }}
-          >
+          <Button variant="outline" onClick={handleEdit}>
             <Edit size={20} />
           </Button>
           <Button variant="destructive" onClick={handleDelete}>

src/app/(main)/manga/[mangaId]/edit/[chapterId]/page.tsx

@@ -23,7 +23,7 @@ function MangaCard({ data }: MangaCardProps) {
 
   function getGenreName(value: GenreType): string | undefined {
     for (const prop in Genre) {
-      if (Genre[prop as keyof typeof Genre] === value) {
+      if (Genre[prop as keyof typeof Genre] == value) {
         return prop;
       }
     }
@@ -39,17 +39,9 @@ function MangaCard({ data }: MangaCardProps) {
       className="flex h-[200px] w-[400px] justify-between px-4"
     >
       <div className="flex flex-col gap-4 pt-4">
-        <CardTitle>{truncateTitle(data.title, 20)}</CardTitle>
+        <CardTitle>{truncateTitle(data.title, 15)}</CardTitle>
         <CardDescription className="text-primary">
-          {getGenreName(data.genre)}
-        </CardDescription>
-        <CardDescription className="text-primary">
-          Genre:{' '}
-          {capitalizedWords(
-            getGenreName(
-              parseInt(data.genre as unknown as string) as GenreType,
-            ),
-          )}
+          Genre: {capitalizedWords(getGenreName(data.genre))}
         </CardDescription>
         <CardDescription>Rating: {data.rating} / 5</CardDescription>
       </div>

src/app/(main)/manga/[mangaId]/edit/[chapterId]/types.ts

@@ -57,8 +57,6 @@ function MangaPage() {
   }, []);
 
   const onSubmit: SubmitHandler<SearchParams> = async (data) => {
-    // setManga(null);
-
     const manga = await fetchManga(data.title, data.genre, data.rating, page);
 
     setManga(manga);

src/app/(main)/manga/components/MangaCard.tsx

@@ -8,6 +8,7 @@ import { Role } from '@/shared/types/auth';
 import { axiosAuth } from '@/shared/utils/axios';
 
 export const authOptions: AuthOptions = {
+  secret: process.env.NEXTAUTH_SECRET,
   session: { strategy: 'jwt' },
   pages: {
     signIn: '/sign-in',

src/app/(main)/manga/page.tsx

@@ -29,11 +29,5 @@ export default withAuth(
 );
 
 export const config = {
-  matcher: [
-    '/profile',
-    '/admin',
-    '/admin/set-admin',
-    '/manga/add-manga',
-    '/manga/edit-manga',
-  ],
+  matcher: ['/profile', '/admin'],
 };