ionian/src/client/page/contentinfo.tsx

import React, { useState, useEffect } from 'react';
import { Redirect, Route, Switch, useHistory, useRouteMatch, match as MatchType, Link as RouterLink } from 'react-router-dom';
import ContentAccessor, { Content } from '../accessor/contents';
import { LoadingCircle } from '../component/loading';
import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
import { ThumbnailContainer } from '../presenter/presenter';
import { TagChip } from '../component/tagchip';
import { MangaReader } from '../presenter/manga';

export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
export const makeMangaReaderUrl = (id: number) => `/doc/${id}/reader`;

type ContentInfoState = {
    content: Content | undefined,
    notfound: boolean,
}

export const ContentAbout = (prop: { match: MatchType }) => {
    const match = useRouteMatch("/doc/:id");
    if (match == null) {
        throw new Error("unreachable");
    }
    const m = /\/doc\/(\d+)/.exec(match.url);
    const id = m !== null ? Number.parseInt(m[1]) : NaN;
    const [info, setInfo] = useState<ContentInfoState>({ content: undefined, notfound:false });
    useEffect(() => {
        (async () => {
            if (!isNaN(id)) {
                const c = await ContentAccessor.findById(id);
                setInfo({ content: c, notfound: c === undefined });
            }
        })()
    }, []);
    if (isNaN(id)) {
        return (<Typography variant='h2'>Oops. Invalid ID</Typography>)
    }
    else if(info.notfound){
        return (<Typography variant='h2'>Content has been removed.</Typography>)
    }
    else if (info.content === undefined) {
        return (<LoadingCircle />);
    }
    else return (<Switch>
        <Route exact path={`${prop.match.path}/:id`}>
            <ContentInfo content={info.content}></ContentInfo>
        </Route>
        <Route exact path={`${prop.match.path}/:id/reader`}>
            <MangaReader content={info.content}></MangaReader>
        </Route>
        <Route>
            <div>404 Not Found invalid url : {prop.match.path}</div>
        </Route>
    </Switch>);
}

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        display: "flex",
        [theme.breakpoints.down("sm")]: {
            flexDirection: "column",
            alignItems: "center",
        }
    },
    thumbnail_content: {
        maxWidth: '300px',
        maxHeight: '300px'
    },
    tag_list: {
        display: 'flex',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
        overflowY: 'hidden',
        '& > *': {
            margin: theme.spacing(0.5),
        },
    },
    title: {
        marginLeft: theme.spacing(1),
    },
    InfoContainer: {
        display: 'grid',
        gridTemplateColumns: '100px auto',
        overflowY: 'hidden',
    }
}))

export const ContentInfo = (props: { content: Content, children?: React.ReactNode }) => {
    const classes = useStyles();
    const theme = useTheme();
    const content = props?.content;
    let allTag = content.tags;
    const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.substr(7));
    allTag = allTag.filter(x => !x.startsWith("artist:"));
    return (<Paper className={classes.root}>
        <Link component={RouterLink} to={makeMangaReaderUrl(content.id)}>
            <ThumbnailContainer content={content} className={classes.thumbnail_content}></ThumbnailContainer>
        </Link>
        <Box style={{ padding: theme.spacing(1) }}>
            <Link variant='h5' color='inherit' component={RouterLink} to={makeMangaReaderUrl(content.id)}
                className={classes.title}>
                {content.title}
            </Link>
            <Box className={classes.InfoContainer}>
                <Typography variant='subtitle1'>Artist</Typography>
                <Box>{artists.join(", ")}</Box>
                <Typography variant='subtitle1'>Tags</Typography>
                <Box className={classes.tag_list}>
                    {allTag.map(x => {
                        return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>);
                    })}
                </Box>
            </Box>
        </Box>
    </Paper>);
}