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,26 +75,27 @@ interface IProps {
 export default function SourceCard(props: IProps) {
     const {
         source: {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            id, name, lang, iconUrl, supportsLatest,
-            id, name, lang, iconUrl, supportsLatest, isConfigurable,
         },
     } = props;
 
-    const theme = useTheme();
     const history = useHistory();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
 
     const classes = useStyles();
 
+    const redirectTo = (e: any, to: string) => {
+        history.push(to);
+
+        // prevent parent tags from getting the event
+        e.stopPropagation();
+    };
+
     return (
-        <Card className={classes.card}>
+        <Card
-            <Link
+            className={classes.card}
-                to={`/sources/${id}/popular/`}
+            onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
-                style={{
-                    textDecoration: 'none',
-                    color: theme.palette.text.primary,
-                }}
         >
             <CardContent className={classes.root}>
 
@@ -119,7 +119,7 @@ export default function SourceCard(props: IProps) {
                     <div className={classes.showMobile}>
                         <IconButton
                             style={{ width: 59, height: 59 }}
-                                onClick={() => history.push(`/sources/${id}/search/`)}
+                            onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                             size="large"
                             edge="end"
                         >
@@ -129,7 +129,7 @@ export default function SourceCard(props: IProps) {
                         </IconButton>
                         {supportsLatest && (
                             <IconButton
-                                    onClick={() => history.push(`/sources/${id}/latest/`)}
+                                onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
                                 size="large"
                             >
                                 <FiberNewOutlinedIcon
@@ -142,7 +142,7 @@ export default function SourceCard(props: IProps) {
                         <Button
                             variant="outlined"
                             style={{ marginLeft: 20 }}
-                                onClick={() => history.push(`/sources/${id}/search/`)}
+                            onClick={(e) => redirectTo(e, `/sources/${id}/search/`)}
                         >
                             Search
                         </Button>
@@ -150,7 +150,7 @@ export default function SourceCard(props: IProps) {
                             <Button
                                 variant="outlined"
                                 style={{ marginLeft: 20 }}
-                                    onClick={() => history.push(`/sources/${id}/latest/`)}
+                                onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
                             >
                                 Latest
                             </Button>
@@ -158,14 +158,13 @@ export default function SourceCard(props: IProps) {
                         <Button
                             variant="outlined"
                             style={{ marginLeft: 20 }}
-                                onClick={() => history.push(`/sources/${id}/popular/`)}
+                            onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
                         >
                             Browse
                         </Button>
                     </div>
                 </div>
             </CardContent>
-            </Link>
         </Card>
     );
 }