popular mangas UI

webUI/react/src/App.tsx

@@ -3,6 +3,7 @@ import {
     BrowserRouter as Router,
     Switch,
     Route,
+    useParams,
 } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 import NavBar from './components/NavBar';
@@ -11,14 +12,15 @@ import SourceCard from './components/SourceCard';
 import MangaCard from './components/MangaCard';
 
 function MangaPage() {
+    const { sourceId } = useParams<{sourceId: string}>();
     let mapped;
     const [mangas, setMangas] = useState<IManga[]>([]);
 
     useEffect(() => {
-        fetch('https://picsum.photos/v2/list')
+        fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/popular`)
             .then((response) => response.json())
-            .then((data: { author: string, download_url: string }[]) => setMangas(
-                data.map((it) => ({ name: it.author, imageUrl: it.download_url })),
+            .then((data: { title: string, thumbnail_url: string }[]) => setMangas(
+                data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnail_url })),
             ));
     });
 
@@ -84,12 +86,13 @@ export default function App() {
             <NavBar />
 
             <Switch>
-                <Route path="/mangapage">
-                    <MangaPage />
-                </Route>
                 <Route path="/extensions">
                     <Extensions />
                 </Route>
+                {/* eslint-disable-next-line react/no-children-prop */}
+                <Route path="/sources/:sourceId/popular">
+                    <MangaPage />
+                </Route>
                 <Route path="/sources">
                     <Sources />
                 </Route>

webUI/react/src/components/MangaCard.tsx

@@ -41,7 +41,7 @@ interface IProps {
 export default function MangaCard(props: IProps) {
     const {
         manga: {
-            name, imageUrl,
+            title, thumbnailUrl,
         },
     } = props;
     const classes = useStyles();
@@ -53,12 +53,12 @@ export default function MangaCard(props: IProps) {
                     <CardMedia
                         className={classes.image}
                         component="img"
-                        alt="Nagatoro"
-                        image={imageUrl}
-                        title="Nagatoro"
+                        alt={title}
+                        image={thumbnailUrl}
+                        title={title}
                     />
                     <div className={classes.gradient} />
-                    <Typography className={classes.title} variant="h5" component="h2">{name}</Typography>
+                    <Typography className={classes.title} variant="h5" component="h2">{title}</Typography>
                 </div>
             </CardActionArea>
         </Card>

webUI/react/src/components/SourceCard.tsx

@@ -39,7 +39,7 @@ interface IProps {
 export default function SourceCard(props: IProps) {
     const {
         source: {
-            name, lang, iconUrl, supportsLatest,
+            id, name, lang, iconUrl, supportsLatest,
         },
     } = props;
 
@@ -66,7 +66,7 @@ export default function SourceCard(props: IProps) {
                 </div>
                 <div style={{ display: 'flex' }}>
                     {supportsLatest && <Button variant="outlined">Latest</Button>}
-                    <Button variant="outlined" style={{ marginLeft: 20 }}>Browse</Button>
+                    <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `sources/${id}/popular`; }}>Browse</Button>
                 </div>
             </CardContent>
         </Card>

webUI/react/src/typings.d.ts

@@ -8,14 +8,15 @@ interface IExtension {
 }
 
 interface ISource {
-    id: number
+    id: string
     name: string
     lang: string
     iconUrl: string
     supportsLatest: boolean
+    history: any
 }
 
 interface IManga {
-    name: string
-    imageUrl: string
+    title: string
+    thumbnailUrl: string
 }