Skip to content
This repository has been archived by the owner on May 22, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2 from IronKinoko/favorites-action
Browse files Browse the repository at this point in the history
Favorites action
  • Loading branch information
IronKinoko authored Jun 16, 2020
2 parents b85dac8 + c5a42e7 commit ffa256f
Show file tree
Hide file tree
Showing 23 changed files with 465 additions and 111 deletions.
13 changes: 10 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ english | [中文说明](./README_CHS.md)

## Screenshot

![](https://raw.githubusercontent.com/IronKinoko/assert/master/e-hentai-view/home.png)

![](https://raw.githubusercontent.com/IronKinoko/assert/master/e-hentai-view/menu.png)
<div style="display: flex; justify-content: space-between;">
<img src="https://raw.githubusercontent.com/IronKinoko/asset/master/e-hentai-view/home.png" width="24.5%" title="home"/>
<img src="https://raw.githubusercontent.com/IronKinoko/asset/master/e-hentai-view/menu.png" width="24.5%" title="menu" />
<img src="https://raw.githubusercontent.com/IronKinoko/asset/master/e-hentai-view/home_dark.png" width="24.5%" title="home"/>
<img src="https://raw.githubusercontent.com/IronKinoko/asset/master/e-hentai-view/menu_dark.png" width="24.5%" title="menu" />
</div>

> **My english is poor, this article is provided by Google translation**
Expand Down Expand Up @@ -39,3 +42,7 @@ yarn run dev:app
- [ ] Optimize mobile experience
- [x] download progress
- [ ] download error handing

## Thanks

- [seven332/EhViewer](https://github.com/seven332/EhViewer)
6 changes: 3 additions & 3 deletions app/components/Loading.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
import { CircularProgress } from '@material-ui/core'
import { CircularProgress, CircularProgressProps } from '@material-ui/core'

const useStyles = makeStyles((theme: Theme) =>
createStyles({
Expand All @@ -13,12 +13,12 @@ const useStyles = makeStyles((theme: Theme) =>
},
})
)
const Loading = () => {
const Loading: React.FC<CircularProgressProps> = (props) => {
const classes = useStyles()

return (
<div className={classes.loadingBox}>
<CircularProgress color="primary" />
<CircularProgress color="primary" {...props} />
</div>
)
}
Expand Down
29 changes: 29 additions & 0 deletions app/components/LoadingButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { forwardRef } from 'react'
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'

import Loading from './Loading'
import { IconButton, IconButtonProps } from '@material-ui/core'
import clsx from 'clsx'

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
position: 'relative',
display: 'inline-block',
},
})
)
const LoadingIconButton = forwardRef<
HTMLButtonElement,
IconButtonProps & { loading?: boolean }
>(({ loading, children, className, ...rest }, ref) => {
const classes = useStyles()

return (
<IconButton ref={ref} className={clsx(classes.root, className)} {...rest}>
{children}
{loading && <Loading size={48} />}
</IconButton>
)
})
export default LoadingIconButton
21 changes: 21 additions & 0 deletions app/components/TorrentIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react'
import { SvgIcon } from '@material-ui/core'

const TorrentIcon = (props: any) => {
return (
<SvgIcon viewBox="-10 -10 228 228">
<g>
<path
d="M166,128c0,0-6,18-22,26s-44,6-44,6s11.7967,26.7384,20.5935,46.6836 c37.5236-6.0196,68.344-32.1092,81.09-66.91C195.4099,139.828,188.9531,139.414,184,138C170,134,166,128,166,128z"
fill="currentColor"
/>
<path
d="M104,0C46.5623,0,0,46.5624,0,104c0,46.9452,31.1055,86.6248,73.828,99.5548 C51.6171,147.5624,19.3591,64.6408,22,62c4-4,30-10,36-8s26,80,54,82s42-20,38-30s-26-60-26-60l32-8c0,0,24,58,34,70 c3.7031,4.4416,10.4179,6.418,17.4099,7.1444C207.8007,111.4844,208,107.7656,208,104C208,46.5624,161.4375,0,104,0z"
fill="currentColor"
/>
</g>
</SvgIcon>
)
}

export default TorrentIcon
19 changes: 12 additions & 7 deletions app/hooks/useGallery.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import React from 'react'
import useRequest, { Config } from './useRequest'
import { Detailpage } from 'interface/gallery'

export default function useGallery(
{ url }: { [k: string]: string },
config?: Config<Detailpage>
) {
const res = useRequest<Detailpage>({ url: '/api/gallery' + url }, config)
import useSWR from 'swr'
import { axios } from 'apis'
export default function useGallery({ url }: { [k: string]: string }) {
const res = useSWR(
'/api/gallery' + url,
async (url) => {
const res = await axios.get<Detailpage>(url)
if (res.data.error) throw new Error('error')
return res.data
},
{ errorRetryInterval: 100 }
)
return res
}
11 changes: 11 additions & 0 deletions app/interface/gallery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,21 @@ export interface IndexListItemPorps {
expunged: boolean
rating: string
torrentcount: string
torrents: {
added: string
fsize: string
hash: string
name: string
tsize: string
url: string
}[]
tags: string[]
url: string
time: string
path: string
rating_count: string
favcount: string
favoritelink: string
}

export interface DetailPageListItemProps {
Expand Down
2 changes: 1 addition & 1 deletion app/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const nextConfig = {
autoPrerender: false,
},
env: {
VERSION: '2.0.1',
VERSION: '2.1.0',
},
}

Expand Down
2 changes: 2 additions & 0 deletions app/pages/[gid]/[token]/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react'
import { NextPage } from 'next'
import {
Grid,
Expand Down Expand Up @@ -25,6 +26,7 @@ import TagList from '@/detail/TagList'
import PageList from '@/detail/PageList'
import Info from '@/detail/Info'
import Loading from 'components/Loading'

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
Expand Down
81 changes: 52 additions & 29 deletions app/src/detail/CommentList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,20 @@ import {
ListItemText,
Typography,
Divider,
AppBar,
Toolbar,
IconButton,
} from '@material-ui/core'
import SlideUpDialog from 'components/SlideUpDialog'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import {
createStyles,
makeStyles,
Theme,
useTheme,
} from '@material-ui/core/styles'
import clsx from 'clsx'
import { useIsmobile } from '@/theme'
import ArrowBackIcon from '@material-ui/icons/ArrowBack'

const useStyles = makeStyles((theme: Theme) =>
createStyles({
Expand Down Expand Up @@ -48,32 +58,27 @@ const CommentListContent: React.FC<CommentListProps> = ({
</Typography>
) : (
commentList.map((o, k) => (
<React.Fragment key={k}>
<ListItem>
<ListItemText
primary={
<Grid container justify="space-between">
<Typography component="span">{o.userName}</Typography>
<Typography component="span">{o.time}</Typography>
</Grid>
}
secondary={
<div
className={clsx(classes.comment, {
[classes.hidden]: hidden,
})}
dangerouslySetInnerHTML={{
__html: `${o.comment}<span> ${o.score}</span>`,
}}
/>
}
secondaryTypographyProps={{ component: 'div' }}
/>
</ListItem>
{k !== commentList.length - 1 && (
<Divider variant="fullWidth" orientation="horizontal" />
)}
</React.Fragment>
<ListItem key={k} divider={k !== commentList.length - 1}>
<ListItemText
primary={
<Grid container justify="space-between">
<Typography component="span">{o.userName}</Typography>
<Typography component="span">{o.time}</Typography>
</Grid>
}
secondary={
<div
className={clsx(classes.comment, {
[classes.hidden]: hidden,
})}
dangerouslySetInnerHTML={{
__html: `${o.comment}<span> ${o.score}</span>`,
}}
/>
}
secondaryTypographyProps={{ component: 'div' }}
/>
</ListItem>
))
)}
</List>
Expand All @@ -82,7 +87,8 @@ const CommentListContent: React.FC<CommentListProps> = ({

const CommentList: React.FC<CommentListProps> = ({ commentList }) => {
const [open, setOpen] = useState(false)

const theme = useTheme()
const matches = useIsmobile()
return (
<>
<CommentListContent hidden commentList={commentList.slice(0, 2)} />
Expand All @@ -93,7 +99,24 @@ const CommentList: React.FC<CommentListProps> = ({ commentList }) => {
</Button>
</CardActions>
)}
<SlideUpDialog open={open} onClose={() => setOpen(false)} scroll="paper">
<SlideUpDialog
fullScreen={Boolean(matches)}
open={open}
onClose={() => setOpen(false)}
scroll="paper"
>
{matches && (
<AppBar position="static">
<Toolbar>
<IconButton edge="start" onClick={() => setOpen(false)}>
<ArrowBackIcon />
</IconButton>
<Typography style={{ marginLeft: theme.spacing(2) }} variant="h6">
Comments
</Typography>
</Toolbar>
</AppBar>
)}
<CommentListContent commentList={commentList} />
</SlideUpDialog>
</>
Expand Down
100 changes: 100 additions & 0 deletions app/src/detail/FavIconButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React, { useState } from 'react'
import { axios } from 'apis'
import { IndexListItemPorps } from 'interface/gallery'
import {
Tooltip,
IconButton,
SwipeableDrawer,
AppBar,
Toolbar,
Typography,
List,
ListItem,
ListItemIcon,
ListItemText,
Grid,
} from '@material-ui/core'
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
import FavoriteIcon from '@material-ui/icons/Favorite'
import useFavoritesInfo from 'hooks/useFavoritesInfo'
import FolderIcon from '@material-ui/icons/Folder'
import { mutate } from 'swr'
import { Detailpage } from 'interface/gallery'
import { cloneDeep } from 'lodash'
import LoadingIconButton from 'components/LoadingButton'
const FavIconButton: React.FC<{ info: IndexListItemPorps }> = ({ info }) => {
const { data } = useFavoritesInfo()
const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false)
const handleFavorite = async () => {
if (info.favoritelink !== '') {
update('favdel', '')
} else {
setOpen(true)
}
}

const update = async (favcat: string | number, favoritelink: string) => {
setLoading(true)
await axios.put(`/api/favorites/add${info.path}?favcat=${favcat}`)
setLoading(false)
mutate('/api/gallery' + info.path, (v: Detailpage) => {
const a = cloneDeep(v)
a.info.favoritelink = favoritelink
return a
})
}
return (
<>
<Tooltip title={info.favoritelink || 'Add'}>
<LoadingIconButton
loading={loading}
color="primary"
onClick={handleFavorite}
>
{info.favoritelink !== '' ? <FavoriteIcon /> : <FavoriteBorderIcon />}
</LoadingIconButton>
</Tooltip>
{data && (
<SwipeableDrawer
anchor="right"
disableDiscovery
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Favorites</Typography>
</Toolbar>
</AppBar>
<List onClick={() => setOpen(false)} style={{ width: 250 }}>
{data.slice(1).map((o) => (
<ListItem
key={o.index}
button
onClick={() => update(o.index, o.favName)}
>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText>
<Grid container>
<Grid item xs zeroMinWidth>
<Typography noWrap>{o.favName}</Typography>
</Grid>
<Grid>
<Typography>{o.count}</Typography>
</Grid>
</Grid>
</ListItemText>
</ListItem>
))}
</List>
</SwipeableDrawer>
)}
</>
)
}

export default FavIconButton
Loading

0 comments on commit ffa256f

Please sign in to comment.