From 9abf57bdf04ac20389c2c651f18e6c43e0e33c7c Mon Sep 17 00:00:00 2001 From: monoid Date: Wed, 6 Jan 2021 22:09:53 +0900 Subject: [PATCH] move file --- src/client/component/contentinfo.tsx | 72 +++++++++++++++++++ src/client/component/loading.tsx | 4 +- src/client/component/mod.ts | 3 + src/client/page/contentinfo.tsx | 70 ++---------------- src/client/page/gallery.tsx | 2 +- .../{presenter => page/reader}/manga.tsx | 4 +- .../presenter.tsx => page/reader/reader.tsx} | 2 +- .../{presenter => page/reader}/video.tsx | 0 8 files changed, 85 insertions(+), 72 deletions(-) create mode 100644 src/client/component/contentinfo.tsx create mode 100644 src/client/component/mod.ts rename src/client/{presenter => page/reader}/manga.tsx (86%) rename src/client/{presenter/presenter.tsx => page/reader/reader.tsx} (90%) rename src/client/{presenter => page/reader}/video.tsx (100%) diff --git a/src/client/component/contentinfo.tsx b/src/client/component/contentinfo.tsx new file mode 100644 index 0000000..2a8d4bf --- /dev/null +++ b/src/client/component/contentinfo.tsx @@ -0,0 +1,72 @@ +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 '../page/reader/reader'; +import { TagChip } from '../component/tagchip'; +import { MangaReader } from '../page/reader/manga'; + +export const makeContentInfoUrl = (id: number) => `/doc/${id}`; +export const makeContentReaderUrl = (id: number) => `/doc/${id}/reader`; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + display: "flex", + [theme.breakpoints.down("sm")]: { + flexDirection: "column", + alignItems: "center", + } + }, + thumbnail_content: { + maxHeight: '400px', + maxWidth: 'min(400px, 100vw)', + }, + 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 ( + + + + + + {content.title} + + + Artist + {artists.join(", ")} + Tags + + {allTag.map(x => { + return (); + })} + + + + ); +} \ No newline at end of file diff --git a/src/client/component/loading.tsx b/src/client/component/loading.tsx index 3b4c169..b9a50fa 100644 --- a/src/client/component/loading.tsx +++ b/src/client/component/loading.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Box, CircularProgress} from '@material-ui/core'; export const LoadingCircle = ()=>{ - return (
+ return ( -
); + ); } \ No newline at end of file diff --git a/src/client/component/mod.ts b/src/client/component/mod.ts new file mode 100644 index 0000000..96ea18f --- /dev/null +++ b/src/client/component/mod.ts @@ -0,0 +1,3 @@ +export * from './contentinfo'; +export * from './loading'; +export * from './tagchip'; \ No newline at end of file diff --git a/src/client/page/contentinfo.tsx b/src/client/page/contentinfo.tsx index f5d0622..32dd964 100644 --- a/src/client/page/contentinfo.tsx +++ b/src/client/page/contentinfo.tsx @@ -3,14 +3,13 @@ import { Redirect, Route, Switch, useHistory, useRouteMatch, match as MatchType, 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'; +import { MangaReader } from './reader/manga'; +import { ContentInfo } from '../component/mod'; export const makeContentInfoUrl = (id: number) => `/doc/${id}`; export const makeMangaReaderUrl = (id: number) => `/doc/${id}/reader`; -type ContentInfoState = { +type ContentState = { content: Content | undefined, notfound: boolean, } @@ -22,7 +21,7 @@ export const ContentAbout = (prop: { match: MatchType }) => { } const m = /\/doc\/(\d+)/.exec(match.url); const id = m !== null ? Number.parseInt(m[1]) : NaN; - const [info, setInfo] = useState({ content: undefined, notfound:false }); + const [info, setInfo] = useState({ content: undefined, notfound:false }); useEffect(() => { (async () => { if (!isNaN(id)) { @@ -51,65 +50,4 @@ export const ContentAbout = (prop: { match: MatchType }) => {
404 Not Found invalid url : {prop.match.path}
); -} - -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 ( - - - - - - {content.title} - - - Artist - {artists.join(", ")} - Tags - - {allTag.map(x => { - return (); - })} - - - - ); } \ No newline at end of file diff --git a/src/client/page/gallery.tsx b/src/client/page/gallery.tsx index 799a725..d93811a 100644 --- a/src/client/page/gallery.tsx +++ b/src/client/page/gallery.tsx @@ -5,7 +5,7 @@ import {useTheme, makeStyles, Theme} from '@material-ui/core/styles'; import {Link as RouterLink} from 'react-router-dom'; import {makeContentInfoUrl} from './contentinfo'; import { LoadingCircle } from '../component/loading'; -import {ThumbnailContainer} from '../presenter/presenter'; +import {ThumbnailContainer} from './reader/reader'; import {TagChip} from '../component/tagchip'; const useStyles = makeStyles((theme:Theme)=>({ diff --git a/src/client/presenter/manga.tsx b/src/client/page/reader/manga.tsx similarity index 86% rename from src/client/presenter/manga.tsx rename to src/client/page/reader/manga.tsx index e3b002f..aab0f07 100644 --- a/src/client/presenter/manga.tsx +++ b/src/client/page/reader/manga.tsx @@ -1,8 +1,8 @@ import React, {useState, useEffect} from 'react'; import {Redirect, Route ,Switch,useHistory, useRouteMatch, match as MatchType, Link as RouterLink} from 'react-router-dom'; -import { LoadingCircle } from '../component/loading'; +import { LoadingCircle } from '../../component/loading'; import { Link, Paper, makeStyles, Theme, Box, Typography } from '@material-ui/core'; -import { Content, makeThumbnailUrl } from '../accessor/contents'; +import { Content, makeThumbnailUrl } from '../../accessor/contents'; type MangaType = "manga"|"artist cg"|"donjinshi"|"western" diff --git a/src/client/presenter/presenter.tsx b/src/client/page/reader/reader.tsx similarity index 90% rename from src/client/presenter/presenter.tsx rename to src/client/page/reader/reader.tsx index c3330a3..22414c6 100644 --- a/src/client/presenter/presenter.tsx +++ b/src/client/page/reader/reader.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Content, makeThumbnailUrl } from '../accessor/contents'; +import { Content, makeThumbnailUrl } from '../../accessor/contents'; import {MangaReader} from './manga'; export type PresenterCollection = { diff --git a/src/client/presenter/video.tsx b/src/client/page/reader/video.tsx similarity index 100% rename from src/client/presenter/video.tsx rename to src/client/page/reader/video.tsx