Merge pull request 'Make maps card behave like normal link' (#288) from feature/maps-new-tab into staging

Reviewed-on: #288
Reviewed-by: Rhys Lloyd <quaternions@noreply@itzana.me>

web/src/app/maps/page.tsx

@@ -1,5 +1,4 @@
 import {useState, useEffect} from "react";
-import {useNavigate} from "react-router-dom";
 import Webpage from "@/app/_components/webpage";
 import {
     Box,
@@ -37,7 +36,6 @@ interface Map {
 
 interface MapCardProps {
     map: Map;
-    onClick: (mapId: number) => void;
     formatDate: (timestamp: number) => string;
     getGameName: (gameId: number) => string;
     getGameLabelStyles: (gameId: number) => {
@@ -46,7 +44,7 @@ interface MapCardProps {
     };
 }
 
-function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
+function MapCard({ map, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
     const { thumbnailUrl, isLoading } = useAssetThumbnail(map.ID, '420x420');
 
     return (
@@ -63,7 +61,7 @@ function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }:
                 }
             }}
         >
-            <CardActionArea onClick={() => onClick(map.ID)}>
+            <CardActionArea component={Link} to={`/maps/${map.ID}`}>
                 <Box sx={{ position: 'relative', overflow: 'hidden' }}>
                     <Skeleton
                         variant="rectangular"
@@ -127,7 +125,6 @@ function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }:
 export default function MapsPage() {
     useTitle("Map Collection");
 
-    const navigate = useNavigate();
     const [maps, setMaps] = useState<Map[]>([]);
     const [loading, setLoading] = useState(true);
     const [searchQuery, setSearchQuery] = useState("");
@@ -200,10 +197,6 @@ export default function MapsPage() {
         window.scrollTo({top: 0, behavior: 'smooth'});
     };
 
-    const handleMapClick = (mapId: number) => {
-        navigate(`/maps/${mapId}`);
-    };
-
     const formatDate = (timestamp: number) => {
         return new Date(timestamp * 1000).toLocaleDateString('en-US', {
             year: 'numeric',
@@ -340,7 +333,6 @@ export default function MapsPage() {
                                     <Grid size={{ xs: 12, sm: 6, md: 4}} key={map.ID}>
                                         <MapCard
                                             map={map}
-                                            onClick={handleMapClick}
                                             formatDate={formatDate}
                                             getGameName={getGameName}
                                             getGameLabelStyles={getGameLabelStyles}