add contentinfo page

src/client/js/app.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import {BrowserRouter, Route} from 'react-router-dom';
+import {BrowserRouter, Route, Switch as RouterSwitch} from 'react-router-dom';
 import {Headline} from './headline';
 import {Gallery} from './gallery';
+import {ContentInfo} from './contentinfo';
 
-import style from '../css/style.css';
-
+import '../css/style.css';
 
+const FooProfile = ()=><div>test profile</div>;
 const App = ()=> (
     <BrowserRouter>
         <Headline>
-            <Route path="/" exact>
-                <Gallery></Gallery>
-            </Route>
-            <Route path="/profile"><div>test profile</div></Route>
+            <RouterSwitch>
+                <Route path="/" exact component={Gallery}></Route>
+                <Route path="/content" component={ContentInfo}>
+                </Route>
+                <Route path="/profile" component={FooProfile}>
+                </Route>
+                <Route>
+                    <div>404 Not Found</div>
+                </Route>
+            </RouterSwitch>
         </Headline>
     </BrowserRouter>
 );

src/client/js/contentinfo.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {useHistory, useRouteMatch} from 'react-router-dom';
+
+export const makeContentInfoUrl = (id:number)=>`/content/${id}`;
+
+export const ContentInfo = (props?:{children?:React.ReactNode})=>{
+    const match = useRouteMatch("/content/:id");
+    return(<div>{match?.url}</div>)
+}

src/client/js/gallery.tsx

@@ -1,10 +1,12 @@
-import { Box, CircularProgress, Typography, Paper, Chip, withStyles, colors } from '@material-ui/core';
+import { Box, CircularProgress, Typography, Paper, Chip, withStyles, colors, Link } from '@material-ui/core';
 import {ChipProps} from '@material-ui/core/Chip';
 import React, { useEffect, useState } from 'react';
 import {QueryListOption,Content} from '../../model/contents';
 import {ClientContentAccessesor} from '../accessor/contents';
 import {useTheme, makeStyles, Theme, emphasize, fade} from '@material-ui/core/styles';
 import {blue , pink} from '@material-ui/core/colors';
+import {Link as RouterLink} from 'react-router-dom';
+import {makeContentInfoUrl} from './contentinfo';
 
 type TagChipStyleProp = {
     color: string
@@ -67,8 +69,8 @@ const useStyles = makeStyles((theme:Theme)=>({
         gridGap: theme.spacing(4),
     },
     table_thumbnail:{
-        width: 200,
-        height: 200,
+        width: theme.spacing(25),
+        height: theme.spacing(25),
         background: '#272733',
         display: 'flex',
         alignItems: 'center',
@@ -88,15 +90,18 @@ const useStyles = makeStyles((theme:Theme)=>({
         display: 'flex',
         flexDirection: 'column',
     },
+    content_info_title:{
+        marginLeft:theme.spacing(2),
+    },
     tag_list:{
         display: 'flex',
         justifyContent: 'flex-start',
         flexWrap: 'wrap',
+        overflowY: 'hidden',
         '& > *': {
             margin: theme.spacing(0.5),
         },
-          
-    }
+    },
 }));
 
 export type GalleryProp = {
@@ -128,17 +133,19 @@ export const Gallery = (props: GalleryProp)=>{
                 state.content.map(x=>{
                     const thumbnail_url = `/content/${x.id}/${x.content_type}/thumbnail`;
                     return (<Paper key={x.id} elevation={4} className={classes.contentPaper}>
-                        <a className={classes.table_thumbnail}>{
+                        <Link className={classes.table_thumbnail} component={RouterLink} to={makeContentInfoUrl(x.id)}>{
                             x.content_type === "manga" ? <img className={classes.content_thumnail} src={thumbnail_url}></img> :
                             <video className={classes.content_thumnail} src={thumbnail_url}></video>
-                        }</a>
+                        }</Link>
                         <Box className={classes.content_info}>
-                            <Typography variant="h5" style={{marginLeft:theme.spacing(2)}}>{x.title}</Typography>
+                            <Link component={RouterLink} to={makeContentInfoUrl(x.id)} variant="h5" color="inherit"
+                                className={classes.content_info_title}>
+                                {x.title}
+                            </Link>
                             <Box className={classes.tag_list}>
                                 {x.tags.map(x=>{
                                     const tagcolor = getTagColorName(x);
-                                    console.log(tagcolor);
-                                    return (<TagChip key={x} label={x} clickable={true} color={tagcolor}></TagChip>);
+                                    return (<TagChip key={x} label={x} clickable={true} color={tagcolor} size="small"></TagChip>);
                             })}
                             </Box>
                         </Box>

src/client/js/headline.tsx

@@ -106,7 +106,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 }));
 
-export const Headline = (prop: { children?: React.ReactNode }) => {
+export const Headline = (prop: { children?: React.ReactNode, navListItem?: React.ReactNode}) => {
     const [v, setv] = useState(false);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const classes = useStyles();
@@ -145,6 +145,7 @@ export const Headline = (prop: { children?: React.ReactNode }) => {
                     </ListItemIcon>
                     <ListItemText primary="Back"></ListItemText>
                 </ListItem>
+                {prop.navListItem}
             </List>
             </>);
     return (<div className={classes.root}>