ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix double redirect issue

Browse Source
This commit is contained in:
Aria Moradi
2021-09-09 22:19:33 +04:30
parent 2e96dcedb3
commit 7f27e3b745
1 changed files with 74 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/manga/SourceCard.tsx
View File

@@ -6,11 +6,10 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import React from 'react';
import { useTheme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
import { Link, useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
@@ -76,96 +75,96 @@ interface IProps {
export default function SourceCard(props: IProps) { export default function SourceCard(props: IProps) {
const { const {
source: { source: {
// eslint-disable-next-line @typescript-eslint/no-unused-vars id, name, lang, iconUrl, supportsLatest,
id, name, lang, iconUrl, supportsLatest, isConfigurable,
}, },
} = props; } = props;
const theme = useTheme();
const history = useHistory(); const history = useHistory();
const [serverAddress] = useLocalStorage<String>('serverBaseURL', ''); const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const classes = useStyles(); const classes = useStyles();
return ( const redirectTo = (e: any, to: string) => {
<Card className={classes.card}> history.push(to);
<Link
to={`/sources/${id}/popular/`}
style={{
textDecoration: 'none',
color: theme.palette.text.primary,
}}
>
<CardContent className={classes.root}>
<div style={{ display: 'flex' }}> // prevent parent tags from getting the event
<Avatar e.stopPropagation();
variant="rounded" };
className={classes.icon}
alt={name} return (
src={serverAddress + iconUrl} <Card
/> className={classes.card}
<div style={{ display: 'flex', flexDirection: 'column' }}> onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
<Typography variant="h5" component="h2"> >
{name} <CardContent className={classes.root}>
</Typography>
<Typography variant="caption" display="block" gutterBottom> <div style={{ display: 'flex' }}>
{langCodeToName(lang)} <Avatar
</Typography> variant="rounded"
</div> className={classes.icon}
alt={name}
src={serverAddress + iconUrl}
/>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h5" component="h2">
{name}
</Typography>
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
</Typography>
</div> </div>
<div> </div>
<div className={classes.showMobile}> <div>
<div className={classes.showMobile}>
<IconButton
style={{ width: 59, height: 59 }}
onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
size="large"
edge="end"
>
<SearchIcon
fontSize="medium"
/>
</IconButton>
{supportsLatest && (
<IconButton <IconButton
style={{ width: 59, height: 59 }} onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
onClick={() => history.push(`/sources/${id}/search/`)}
size="large" size="large"
edge="end"
> >
<SearchIcon <FiberNewOutlinedIcon
fontSize="medium" fontSize="large"
/> />
</IconButton> </IconButton>
{supportsLatest && ( )}
<IconButton
onClick={() => history.push(`/sources/${id}/latest/`)}
size="large"
>
<FiberNewOutlinedIcon
fontSize="large"
/>
</IconButton>
)}
</div>
<div className={classes.showBigger}>
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={() => history.push(`/sources/${id}/search/`)}
>
Search
</Button>
{supportsLatest && (
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={() => history.push(`/sources/${id}/latest/`)}
>
Latest
</Button>
)}
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={() => history.push(`/sources/${id}/popular/`)}
>
Browse
</Button>
</div>
</div> </div>
</CardContent> <div className={classes.showBigger}>
</Link> <Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
>
Search
</Button>
{supportsLatest && (
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
>
Latest
</Button>
)}
<Button
variant="outlined"
style={{ marginLeft: 20 }}
onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
>
Browse
</Button>
</div>
</div>
</CardContent>
</Card> </Card>
); );
} }