Merge pull request #3 from she11sh0cked/master

MangaCard & Beginning of MangaPage

webUI/react/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     BrowserRouter as Router,
     Switch,
@@ -8,6 +8,34 @@ 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() {
+    let mapped;
+    const [mangas, setMangas] = useState<IManga[]>([]);
+
+    useEffect(() => {
+        fetch('https://picsum.photos/v2/list')
+            .then((response) => response.json())
+            .then((data: { author: string, download_url: string }[]) => setMangas(
+                data.map((it) => ({ name: it.author, imageUrl: it.download_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;
@@ -56,6 +84,9 @@ export default function App() {
             <NavBar />
 
             <Switch>
+                <Route path="/mangapage">
+                    <MangaPage />
+                </Route>
                 <Route path="/extensions">
                     <Extensions />
                 </Route>

webUI/react/src/components/MangaCard.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+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';
+
+const useStyles = makeStyles({
+    root: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+    },
+    wrapper: {
+        position: 'relative',
+        height: '100%',
+    },
+    gradient: {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        background: 'linear-gradient(to bottom, transparent, #000000)',
+        opacity: 0.5,
+    },
+    title: {
+        position: 'absolute',
+        bottom: 0,
+        padding: '0.5em',
+        color: 'white',
+    },
+    image: {
+        height: '100%',
+        width: '100%',
+    },
+});
+
+interface IProps {
+    manga: IManga
+}
+export default function MangaCard(props: IProps) {
+    const {
+        manga: {
+            name, imageUrl,
+        },
+    } = props;
+    const classes = useStyles();
+
+    return (
+        <Card className={classes.root}>
+            <CardActionArea>
+                <div className={classes.wrapper}>
+                    <CardMedia
+                        className={classes.image}
+                        component="img"
+                        alt="Nagatoro"
+                        image={imageUrl}
+                        title="Nagatoro"
+                    />
+                    <div className={classes.gradient} />
+                    <Typography className={classes.title} variant="h5" component="h2">{name}</Typography>
+                </div>
+            </CardActionArea>
+        </Card>
+    );
+}

webUI/react/src/typings.d.ts

@@ -14,3 +14,8 @@ interface ISource {
     iconUrl: string
     supportsLatest: boolean
 }
+
+interface IManga {
+    name: string
+    imageUrl: string
+}