reader done

webUI/react/src/screens/Reader.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+const style = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    margin: '0 auto',
+    backgroundColor: '#343a40',
+} as React.CSSProperties;
+
+interface IPage {
+    index: number
+    imageUrl: string
+}
+
+export default function Reader() {
+    const [pages, setPages] = useState<IPage[]>([]);
+    const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
+
+    useEffect(() => {
+        fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/chapter/${chapterId}`)
+            .then((response) => response.json())
+            .then((data) => setPages(data));
+    }, []);
+
+    pages.sort((a, b) => (a.index - b.index));
+
+    let mapped;
+    if (pages.length === 0) {
+        mapped = <h3>wait</h3>;
+    } else {
+        mapped = pages.map(({ imageUrl }) => (
+            <div style={{ margin: '0 auto' }}>
+                <img src={imageUrl} alt="f" style={{ maxWidth: '100%' }} />
+            </div>
+        ));
+    }
+
+    return (
+        <div style={style}>
+            {mapped}
+        </div>
+    );
+}