fix double redirect issue

src/components/manga/SourceCard.tsx

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