add chapter list

server/src/main/kotlin/ir/armor/tachidesk/Main.kt

@@ -76,6 +76,11 @@ class Main {
                 ctx.json(getManga(mangaId))
             }
 
+            app.get("/api/v1/chapters/:mangaId/") { ctx ->
+                val mangaId = ctx.pathParam("mangaId").toInt()
+                ctx.json(getChapterList(mangaId))
+            }
+
 
         }
 

server/src/main/kotlin/ir/armor/tachidesk/database/dataclass/ChapterDataClass.kt

@@ -0,0 +1,9 @@
+package ir.armor.tachidesk.database.dataclass
+
+data class ChapterDataClass(
+        val url: String,
+        val name: String,
+        val date_upload: String,
+        val chapter_number: Float,
+        val scanlator: String?,
+)

server/src/main/kotlin/ir/armor/tachidesk/util/Manga.kt

@@ -1,10 +1,10 @@
 package ir.armor.tachidesk.util
 
 import eu.kanade.tachiyomi.source.model.SManga
+import ir.armor.tachidesk.database.dataclass.ChapterDataClass
 import ir.armor.tachidesk.database.dataclass.MangaDataClass
 import ir.armor.tachidesk.database.table.MangaStatus
 import ir.armor.tachidesk.database.table.MangaTable
-import org.jetbrains.exposed.sql.SqlExpressionBuilder.eq
 import org.jetbrains.exposed.sql.select
 import org.jetbrains.exposed.sql.transactions.transaction
 import org.jetbrains.exposed.sql.update
@@ -75,6 +75,26 @@ fun getManga(mangaId: Int): MangaDataClass {
             )
         }
     }
+}
 
+fun getChapterList(mangaId: Int): List<ChapterDataClass> {
+    val mangaDetails = getManga(mangaId)
+    val source = getHttpSource(mangaDetails.sourceId)
 
+    val chapterList = source.fetchChapterList(
+            SManga.create().apply {
+                title = mangaDetails.title
+                url = mangaDetails.url
+            }
+    ).toBlocking().first()
+
+    return chapterList.map {
+        ChapterDataClass(
+                it.url,
+                it.name,
+                it.date_upload.toString(),
+                it.chapter_number,
+                it.scanlator,
+        )
+    }
 }

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
+}