Merge pull request #10 from yarre-uk/main

From main to base

.env

@@ -1,2 +1,2 @@
 NEXTAUTH_SECRET=Pn9CJbdUk6C9J8+lY6SlmFHkw4NItMpoHJ6ylIwEqrk=
-NEXT_PUBLIC_API_URL=https://localhost:7142
+NEXT_PUBLIC_API_URL=https://mangahub.azurewebsites.net

src/app/(main)/admin/types/columns.tsx

@@ -19,18 +19,6 @@ export const columns: ColumnDef<User>[] = [
     accessorKey: 'login',
     header: 'Login',
   },
-  {
-    accessorKey: 'firstName',
-    header: 'First name',
-  },
-  {
-    accessorKey: 'lastName',
-    header: 'Last name',
-  },
-  {
-    accessorKey: 'phoneNumber',
-    header: 'Phone number',
-  },
   {
     accessorKey: 'showConfidentialInformation',
     header: 'Show Confidential Information',

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)/layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <Header className="pl-[70px]" />
           <Toaster />
           <Sidebar />
-          <div className="h-[calc(100vh-56px)] pl-[70px] pt-4">{children}</div>
+          <div className="h-[calc(100vh-56px)] pl-[70px]">{children}</div>
         </Providers>
       </body>
     </html>

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

@@ -1,40 +1,40 @@
-// 'use client';
-
-// import { useState } from 'react';
-// import { Document, Page, pdfjs } from 'react-pdf';
-
-// import bytesToFile from '@/shared/utils/bytesToImage';
-
-// import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-// import 'react-pdf/dist/esm/Page/TextLayer.css';
-
-// pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
-
-// type MangaPDFProps = {
-//   chapter: string;
-// };
-
-// function MangaPDF({ chapter }: MangaPDFProps) {
-//   const [numPages, setNumPages] = useState<number>();
-
-//   function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
-//     setNumPages(numPages);
-//   }
-
-//   return (
-//     <Document
-//       options={{
-//         standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,
-//       }}
-//       onLoadSuccess={onDocumentLoadSuccess}
-//       file={bytesToFile(chapter, 'application/pdf')}
-//       className="flex w-min flex-col gap-10"
-//     >
-//       {Array.from(new Array(numPages), (_, index) => (
-//         <Page key={`page_${index + 1}`} pageNumber={index + 1} />
-//       ))}
-//     </Document>
-//   );
-// }
-
-// export default MangaPDF;
+'use client';
+
+import { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+
+import bytesToFile from '@/shared/utils/bytesToFile';
+
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
+
+type MangaPDFProps = {
+  chapter: string;
+};
+
+function MangaPDF({ chapter }: MangaPDFProps) {
+  const [numPages, setNumPages] = useState<number>();
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
+    setNumPages(numPages);
+  }
+
+  return (
+    <Document
+      options={{
+        standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,
+      }}
+      onLoadSuccess={onDocumentLoadSuccess}
+      file={bytesToFile(chapter, 'application/pdf')}
+      className="flex w-min flex-col gap-10"
+    >
+      {Array.from(new Array(numPages), (_, index) => (
+        <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+      ))}
+    </Document>
+  );
+}
+
+export default MangaPDF;

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

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from 'react';
 
+import MangaPDF from './MangaPDF';
+
 import useAxiosAuth from '@/shared/hooks/useAxiosAuth';
 import Chapter from '@/shared/models/chapter';
 
@@ -40,7 +42,7 @@ function ChapterPage({ params: { chapterId } }: PageProps) {
       <p>Chapter info</p>
       <p>Chapter title {chapter?.title}</p>
       <p>Scans available {chapter?.scans ? 'yes' : 'no'}</p>
-      {/* {chapter?.scans && <MangaPDF chapter={chapter?.scans} />} */}
+      {chapter?.scans && <MangaPDF chapter={chapter?.scans} />}
     </div>
   );
 }