refactor, fix fetch loop

webUI/react/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .eslintcache
+.vscode

webUI/react/src/App.tsx

@@ -1,97 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
-    BrowserRouter as Router,
-    Switch,
-    Route,
-    useParams,
+    BrowserRouter as Router, Route, Switch,
 } from 'react-router-dom';
-import Button from '@material-ui/core/Button';
 import NavBar from './components/NavBar';
-import ExtensionCard from './components/ExtensionCard';
-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(`http://127.0.0.1:4567/api/v1/source/${sourceId}/popular`)
-            .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;
-}
-
-function Extensions() {
-    let mapped;
-    const [extensions, setExtensions] = useState<IExtension[]>([]);
-
-    if (extensions.length === 0) {
-        mapped = <h3>wait</h3>;
-        fetch('http://127.0.0.1:4567/api/v1/extension/list')
-            .then((response) => response.json())
-            .then((data) => setExtensions(data));
-    } else {
-        mapped = extensions.map((it) => <ExtensionCard extension={it} />);
-    }
-
-    return <h2>{mapped}</h2>;
-}
-
-function Sources() {
-    let mapped;
-    const [sources, setSources] = useState<ISource[]>([]);
-
-    if (sources.length === 0) {
-        mapped = <h3>wait</h3>;
-        fetch('http://127.0.0.1:4567/api/v1/source/list')
-            .then((response) => response.json())
-            .then((data) => setSources(data));
-    } else {
-        mapped = sources.map((it) => <SourceCard source={it} />);
-    }
-
-    return <h2>{mapped}</h2>;
-}
-
-function Home() {
-    return (
-        <Button variant="contained" color="primary">
-            Hello World
-        </Button>
-    );
-}
+import Home from './screens/Home';
+import Sources from './screens/Sources';
+import Extensions from './screens/Extensions';
+import MangaList from './screens/PopularManga';
 
 export default function App() {
     return (
         <Router>
-            {/* <TemporaryDrawer/> */}
             <NavBar />
 
             <Switch>
                 <Route path="/extensions">
                     <Extensions />
                 </Route>
-                {/* eslint-disable-next-line react/no-children-prop */}
                 <Route path="/sources/:sourceId/popular">
-                    <MangaPage />
+                    <MangaList popular />
+                </Route>
+                <Route path="/sources/:sourceId/latest">
+                    <MangaList popular={false} />
                 </Route>
                 <Route path="/sources">
                     <Sources />

webUI/react/src/components/SourceCard.tsx

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

webUI/react/src/screens/Extensions.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import ExtensionCard from '../components/ExtensionCard';
+
+export default function Extensions() {
+    let mapped;
+    const [extensions, setExtensions] = useState<IExtension[]>([]);
+
+    useEffect(() => {
+        fetch('http://127.0.0.1:4567/api/v1/extension/list')
+            .then((response) => response.json())
+            .then((data) => setExtensions(data));
+    }, []);
+
+    if (extensions.length === 0) {
+        mapped = <h3>wait</h3>;
+    } else {
+        mapped = extensions.map((it) => <ExtensionCard extension={it} />);
+    }
+
+    return <h2>{mapped}</h2>;
+}

webUI/react/src/screens/Home.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Home() {
+    return (
+        <h1>
+            Home
+        </h1>
+    );
+}

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

webUI/react/src/screens/Sources.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import SourceCard from '../components/SourceCard';
+
+export default function Sources() {
+    let mapped;
+    const [sources, setSources] = useState<ISource[]>([]);
+
+    useEffect(() => {
+        fetch('http://127.0.0.1:4567/api/v1/source/list')
+            .then((response) => response.json())
+            .then((data) => setSources(data));
+    }, []);
+
+    if (sources.length === 0) {
+        mapped = <h3>wait</h3>;
+    } else {
+        mapped = sources.map((it) => <SourceCard source={it} />);
+    }
+
+    return <h2>{mapped}</h2>;
+}