manga details done

webUI/react/src/App.tsx

@@ -7,6 +7,7 @@ import Home from './screens/Home';
 import Sources from './screens/Sources';
 import Extensions from './screens/Extensions';
 import MangaList from './screens/MangaList';
+import Manga from './screens/Manga';
 
 export default function App() {
     return (
@@ -26,6 +27,9 @@ export default function App() {
                 <Route path="/sources">
                     <Sources />
                 </Route>
+                <Route path="/manga/:id">
+                    <Manga />
+                </Route>
                 <Route path="/">
                     <Home />
                 </Route>

webUI/react/src/components/ChapterCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginBottom: 12,
+    },
+    icon: {
+        width: theme.spacing(7),
+        height: theme.spacing(7),
+        flex: '0 0 auto',
+        marginRight: 16,
+    },
+}));
+
+export default function ChapterCard() {
+    const name = 'Chapter 1';
+    const relaseDate = '16/01/21';
+    // const downloaded = false;
+    // const downloadedText = downloaded ? 'open' : 'download';
+    const classes = useStyles();
+
+    return (
+        <>
+            <li>
+                <Card>
+                    <CardContent className={classes.root}>
+                        <div style={{ display: 'flex' }}>
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <Typography variant="h5" component="h2">
+                                    {name}
+                                </Typography>
+                                <Typography variant="caption" display="block" gutterBottom>
+                                    {relaseDate}
+                                </Typography>
+                            </div>
+                        </div>
+                        <div style={{ display: 'flex' }}>
+                            <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { /* window.location.href = 'sources/popular/'; */ }}>open</Button>
+                        </div>
+                    </CardContent>
+                </Card>
+            </li>
+        </>
+    );
+}

webUI/react/src/components/MangaCard.tsx

@@ -4,6 +4,7 @@ import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
+import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles({
     root: {
@@ -41,26 +42,28 @@ interface IProps {
 export default function MangaCard(props: IProps) {
     const {
         manga: {
-            title, thumbnailUrl,
+            id, title, thumbnailUrl,
         },
     } = props;
     const classes = useStyles();
 
     return (
-        <Card className={classes.root}>
-            <CardActionArea>
-                <div className={classes.wrapper}>
-                    <CardMedia
-                        className={classes.image}
-                        component="img"
-                        alt={title}
-                        image={thumbnailUrl}
-                        title={title}
-                    />
-                    <div className={classes.gradient} />
-                    <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
-                </div>
-            </CardActionArea>
-        </Card>
+        <Link to={`/manga/${id}/`}>
+            <Card className={classes.root}>
+                <CardActionArea>
+                    <div className={classes.wrapper}>
+                        <CardMedia
+                            className={classes.image}
+                            component="img"
+                            alt={title}
+                            image={thumbnailUrl}
+                            title={title}
+                        />
+                        <div className={classes.gradient} />
+                        <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
+                    </div>
+                </CardActionArea>
+            </Card>
+        </Link>
     );
 }

webUI/react/src/components/MangaDetails.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+
+interface IProps{
+    id: string
+}
+
+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));
+    }, []);
+
+    return (
+        <>
+            <h1>
+                {manga && manga.title}
+            </h1>
+        </>
+    );
+}

webUI/react/src/screens/Manga.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import ChapterCard from '../components/ChapterCard';
+import MangaDetails from '../components/MangaDetails';
+
+export default function Manga() {
+    const { id } = useParams<{id: string}>();
+
+    return (
+        <>
+            <MangaDetails id={id} />
+            <ol style={{ listStyle: 'none', padding: 0 }}>
+                <ChapterCard />
+            </ol>
+        </>
+    );
+}

webUI/react/src/screens/MangaList.tsx

@@ -2,11 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import MangaCard from '../components/MangaCard';
 
-interface IManga {
-    title: string
-    thumbnailUrl: string
-}
-
 export default function MangaList(props: { popular: boolean }) {
     const { sourceId } = useParams<{sourceId: string}>();
     let mapped;
@@ -17,8 +12,8 @@ export default function MangaList(props: { popular: boolean }) {
         const sourceType = props.popular ? 'popular' : 'latest';
         fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}/${lastPageNum}`)
             .then((response) => response.json())
-            .then((data: { title: string, thumbnail_url: string }[]) => setMangas(
-                data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnail_url })),
+            .then((data: { title: string, thumbnail_url: string, id:number }[]) => setMangas(
+                data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnail_url, id: it.id })),
             ));
     }, []);
 

webUI/react/src/typings.d.ts

@@ -17,6 +17,7 @@ interface ISource {
 }
 
 interface IManga {
+    id: number
     title: string
     thumbnailUrl: string
 }