add common menu

src/client/app.tsx

@@ -1,12 +1,11 @@
 import React, { createContext, useEffect, useRef, useState } from 'react';
 import ReactDom from 'react-dom';
 import {BrowserRouter, Redirect, Route, Switch as RouterSwitch} from 'react-router-dom';
-import { Gallery, ContentAbout, LoginPage, NotFoundPage} from './page/mod';
+import { Gallery, ContentAbout, LoginPage, NotFoundPage, ProfilePage,DifferencePage} from './page/mod';
 import {getInitialValue, UserContext} from './state';
 
 import './css/style.css';
 
-const FooProfile = ()=><div>test profile</div>;
 const App = () => {
     const [user,setUser] = useState("");
     const [userPermission,setUserPermission] = useState<string[]>([]);
@@ -30,7 +29,8 @@ const App = () => {
                     <Route path="/search" render={()=><Gallery />}></Route>
                     <Route path="/doc" render={(prop)=><ContentAbout {...prop}/>}></Route>
                     <Route path="/login" render={()=><LoginPage></LoginPage>}/>
-                    <Route path="/profile" component={FooProfile}></Route>
+                    <Route path="/profile" component={ProfilePage}></Route>
+                    <Route path="/difference" component={DifferencePage}></Route>
                     <Route>
                         <NotFoundPage/>
                     </Route>

src/client/component/headline.tsx

@@ -6,7 +6,9 @@ import {
     Hidden, Tooltip, Link
 } from '@material-ui/core';
 import { makeStyles, Theme, useTheme, fade } from '@material-ui/core/styles';
-import { ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon, AccountCircle } from '@material-ui/icons';
+import { ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon, AccountCircle
+} from '@material-ui/icons';
+
 import { Link as RouterLink, useRouteMatch } from 'react-router-dom';
 import { doLogout, UserContext } from '../state';
 

src/client/component/navlist.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import {List, ListItem, ListItemIcon, Tooltip, ListItemText} from '@material-ui/core';
-import {ArrowBack as ArrowBackIcon} from '@material-ui/icons';
+import {List, ListItem, ListItemIcon, Tooltip, ListItemText, Divider} from '@material-ui/core';
+import {ArrowBack as ArrowBackIcon, Settings as SettingIcon, 
+    Collections as CollectionIcon, VideoLibrary as VideoIcon, Home as HomeIcon,
+    Folder as FolderIcon } from '@material-ui/icons';
 import {Link as RouterLink, useHistory} from 'react-router-dom';
 
 export const NavItem = (props:{name:string,to:string, icon:React.ReactElement<any,any>})=>{
@@ -23,4 +25,20 @@ export const NavList = (props: {children?:React.ReactNode})=>{
 
 export const BackItem = (props:{to?:string})=>{
     return <NavItem name="Back" to={props.to ?? "/"} icon={<ArrowBackIcon></ArrowBackIcon>}/>;
+}
+
+export function CommonMenuList(props?:{url?:string}) {
+    //if(props === undefined){
+    //    props = {};
+    //}
+    //props.url = props.url || "";
+    //{props.url !== "" && <><BackItem /> <Divider /></>}
+    return (<NavList>
+        <NavItem name="All" to="/" icon={<HomeIcon />} />
+        <NavItem name="Manga" to="/search?content_type=manga" icon={<CollectionIcon />}></NavItem>
+        <NavItem name="Video" to="/search?content_type=video" icon={<VideoIcon />} />
+        <Divider />
+        <NavItem name="Difference" to="/difference" icon={<FolderIcon/>}></NavItem>
+        <NavItem name="Settings" to="/setting" icon={<SettingIcon />} />
+    </NavList>);
 }

src/client/page/404.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {Typography} from '@material-ui/core';
 import {ArrowBack as ArrowBackIcon} from '@material-ui/icons';
-import { Headline, BackItem, NavList } from '../component/mod';
+import { Headline, BackItem, NavList, CommonMenuList } from '../component/mod';
 
 export const NotFoundPage = ()=>{
-    const menu = (<NavList><BackItem to="/"/></NavList>);
+    const menu = CommonMenuList();
     return <Headline menu={menu}>
         <Typography variant='h2'>404 Not Found</Typography>
     </Headline>

src/client/page/contentinfo.tsx

@@ -5,7 +5,7 @@ import { LoadingCircle } from '../component/loading';
 import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
 import {ArrowBack as ArrowBackIcon } from '@material-ui/icons';
 import { getPresenter } from './reader/reader';
-import { BackItem, ContentInfo, Headline, NavItem, NavList } from '../component/mod';
+import { BackItem, CommonMenuList, ContentInfo, Headline, NavItem, NavList } from '../component/mod';
 
 export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
 export const makeMangaReaderUrl = (id: number) => `/doc/${id}/reader`;
@@ -34,11 +34,7 @@ export const ContentAbout = (prop: { match: MatchType }) => {
     }
     const id = Number.parseInt(match.params['id']);
     const [info, setInfo] = useState<ContentState>({ content: undefined, notfound:false });
-    const menu_list = (link?:string)=>(
-        <NavList>
-                <BackItem to={link}/>
-        </NavList>
-    );
+    const menu_list = () => <CommonMenuList></CommonMenuList>;
     
     useEffect(() => {
         (async () => {

src/client/page/difference.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CommonMenuList, Headline } from "../component/mod";
+import { UserContext } from "../state";
+import { Grid, Typography } from "@material-ui/core";
+
+export function DifferencePage(){
+    const menu = CommonMenuList();
+    return (<Headline menu={menu}>
+        <div>Not implemented</div>
+    </Headline>)
+}

src/client/page/gallery.tsx

@@ -1,24 +1,15 @@
 import React, { useContext, useEffect } from 'react';
-import { NavList, NavItem, Headline, BackItem } from '../component/mod';
-import {ArrowBack as ArrowBackIcon, Settings as SettingIcon, 
-    Collections as CollectionIcon, VideoLibrary as VideoIcon, Home as HomeIcon} from '@material-ui/icons';
+import { Headline, CommonMenuList } from '../component/mod';
 import {GalleryInfo} from '../component/mod';
 import {useLocation} from 'react-router-dom';
 import { QueryStringToMap } from '../accessor/util';
-import { Divider } from '@material-ui/core';
+
 
 export const Gallery = ()=>{
     const location = useLocation();
     const query = QueryStringToMap(location.search);
-
-    const menu_list = (<NavList>
-        {location.search !== "" && <><BackItem/> <Divider/></>}
-        <NavItem name="All" to="/" icon={<HomeIcon/>}/>
-        <NavItem name="Manga" to="/search?content_type=manga" icon={<CollectionIcon/>}></NavItem>
-        <NavItem name="Video" to="/search?content_type=video" icon={<VideoIcon/>}/>
-        <Divider/>
-        <NavItem name="Settings" to="/setting" icon={<SettingIcon/>}/>
-    </NavList>);
+    location;
+    const menu_list = CommonMenuList({url:location.search});
 
     return (<Headline menu={menu_list}>
         <GalleryInfo option={query}></GalleryInfo>

src/client/page/login.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import {Headline} from '../component/mod';
+import {CommonMenuList, Headline} from '../component/mod';
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText,
      DialogTitle, MenuList, Paper, TextField, Typography, useTheme } from '@material-ui/core';
 import { UserContext } from '../state';
@@ -39,8 +39,7 @@ export const LoginPage = ()=>{
         }
         history.push("/");
     }
-    const menu = (<MenuList>
-    </MenuList>);
+    const menu = CommonMenuList();
     return <Headline menu={menu}>
         <Paper style={{ width: theme.spacing(40), padding: theme.spacing(4), alignSelf:'center'}}>
             <Typography variant="h4">Login</Typography>

src/client/page/mod.ts

@@ -2,3 +2,5 @@ export * from './contentinfo';
 export * from './gallery';
 export * from './login';
 export * from './404';
+export * from './profile';
+export * from './difference';

src/client/page/profile.tsx

@@ -0,0 +1,18 @@
+import { CommonMenuList, Headline } from "../component/mod";
+import React, { useContext } from 'react';
+import { UserContext } from "../state";
+import { Grid, Paper, Typography } from "@material-ui/core";
+
+export function ProfilePage(){
+    const userctx = useContext(UserContext);
+    const menu = CommonMenuList();
+    return (<Headline menu={menu}>
+        <Paper style={{alignSelf : 'center'}}>
+            <Grid container>
+                <Grid item>
+                    <Typography>{userctx.username}</Typography>
+                </Grid>
+            </Grid>
+        </Paper>
+    </Headline>)
+}