add chapter list

webUI/react/src/components/ChapterCard.tsx

@@ -31,12 +31,13 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-export default function ChapterCard() {
-    const name = 'Chapter 1';
-    const relaseDate = '16/01/21';
-    // const downloaded = false;
-    // const downloadedText = downloaded ? 'open' : 'download';
+interface IProps{
+    chapter: IChapter
+}
+
+export default function ChapterCard(props: IProps) {
     const classes = useStyles();
+    const { chapter } = props;
 
     return (
         <>
@@ -46,10 +47,14 @@ export default function ChapterCard() {
                         <div style={{ display: 'flex' }}>
                             <div style={{ display: 'flex', flexDirection: 'column' }}>
                                 <Typography variant="h5" component="h2">
-                                    {name}
+                                    {chapter.name}
+                                    {chapter.chapter_number > 0 && ` : ${chapter.chapter_number}`}
                                 </Typography>
                                 <Typography variant="caption" display="block" gutterBottom>
-                                    {relaseDate}
+                                    {chapter.scanlator}
+                                    {chapter.scanlator && ' '}
+                                    {chapter.date_upload
+                                    && new Date(chapter.date_upload).toISOString().slice(0, 10)}
                                 </Typography>
                             </div>
                         </div>

webUI/react/src/components/MangaDetails.tsx

@@ -1,18 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 interface IProps{
-    id: string
+    manga: IManga | undefined
 }
 
 export default function MangaDetails(props: IProps) {
-    const { id } = props;
-    const [manga, setManga] = useState<IManga>();
-
-    useEffect(() => {
-        fetch(`http://127.0.0.1:4567/api/v1/manga/${id}/`)
-            .then((response) => response.json())
-            .then((data) => setManga(data));
-    }, []);
+    const { manga } = props;
 
     return (
         <>

webUI/react/src/screens/Manga.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import ChapterCard from '../components/ChapterCard';
 import MangaDetails from '../components/MangaDetails';
@@ -6,12 +6,31 @@ import MangaDetails from '../components/MangaDetails';
 export default function Manga() {
     const { id } = useParams<{id: string}>();
 
+    const [manga, setManga] = useState<IManga>();
+    const [chapters, setChapters] = useState<IChapter[]>([]);
+
+    useEffect(() => {
+        fetch(`http://127.0.0.1:4567/api/v1/manga/${id}/`)
+            .then((response) => response.json())
+            .then((data) => setManga(data));
+    }, []);
+
+    useEffect(() => {
+        fetch(`http://127.0.0.1:4567/api/v1/chapters/${id}/`)
+            .then((response) => response.json())
+            .then((data) => setChapters(data));
+    }, []);
+
+    const chapterCards = chapters.map((chapter) => (
+        <ol style={{ listStyle: 'none', padding: 0 }}>
+            <ChapterCard chapter={chapter} />
+        </ol>
+    ));
+
     return (
         <>
-            <MangaDetails id={id} />
-            <ol style={{ listStyle: 'none', padding: 0 }}>
-                <ChapterCard />
-            </ol>
+            <MangaDetails manga={manga} />
+            {chapterCards}
         </>
     );
 }

webUI/react/src/typings.d.ts

@@ -21,3 +21,11 @@ interface IManga {
     title: string
     thumbnailUrl: string
 }
+
+interface IChapter {
+    url: string
+    name: string
+    date_upload: string
+    chapter_number: number
+    scanlator: String
+}