refactor, fix fetch loop

webUI/react/src/screens/PopularManga.tsx

@@ -0,0 +1,37 @@
+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;
+    const [mangas, setMangas] = useState<IManga[]>([]);
+
+    useEffect(() => {
+        const sourceType = props.popular ? 'popular' : 'latest';
+        fetch(`http://127.0.0.1:4567/api/v1/source/${sourceId}/${sourceType}`)
+            .then((response) => response.json())
+            .then((data: { title: string, thumbnail_url: string }[]) => setMangas(
+                data.map((it) => ({ title: it.title, thumbnailUrl: it.thumbnail_url })),
+            ));
+    }, []);
+
+    if (mangas.length === 0) {
+        mapped = <h3>wait</h3>;
+    } else {
+        mapped = (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
+                {mangas.map((it) => (
+                    <MangaCard manga={it} />
+                ))}
+            </div>
+        );
+    }
+
+    return mapped;
+}