fix: artist page link sending to artist page

Fixes funmusicplace#797.
asartalo · Aug 27, 2024 · 22afe7b · 22afe7b
1 parent 911f722
commit 22afe7b
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/client/src/components/Artist/ArtistTrackGroup.tsx b/client/src/components/Artist/ArtistTrackGroup.tsx
@@ -1,7 +1,7 @@
 import { css } from "@emotion/css";
 import React from "react";
 import ClickToPlay from "../common/ClickToPlay";
-import { Link } from "react-router-dom";
+import { Link, matchPath } from "react-router-dom";
 import { bp } from "../../constants";
 import { getArtistUrl, getReleaseUrl } from "utils/artist";
 import styled from "@emotion/styled";
@@ -50,18 +50,20 @@ export const TrackGroupInfo = styled.div`
   a {
     text-decoration: none;
   }
-  a:first-of-type {
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .track-group-name {
     font-weight: normal;
     margin-bottom: 0.2rem;
   }
-  a:last-of-type {
+
+  .track-group-artist {
     font-size: var(--mi-font-size-xsmall);
     color: var(--mi-light-foreground-color);
   }
-
-  a:hover {
-    text-decoration: underline;
-  }
 `;
 
 const ArtistTrackGroup: React.FC<{
@@ -98,16 +100,13 @@ const ArtistTrackGroup: React.FC<{
                           color: var(--mi-light-foreground-color);
                           font-style: italic;
                         `
+                      + " track-group-name"
                   }
                 >
                   {trackGroup.title.length ? trackGroup.title : t("untitled")}
                 </Link>
               )}
-              {trackGroup.artist && (
-                <Link to={getArtistUrl(trackGroup.artist)}>
-                  {trackGroup.artist?.name}
-                </Link>
-              )}
+              {<ArtistName artist={trackGroup.artist} />}
             </TrackGroupInfo>
             <div
               className={css`
@@ -133,4 +132,15 @@ const ArtistTrackGroup: React.FC<{
   );
 };
 
+const ArtistName: React.FC<{ artist: TrackGroup['artist'] }> = ({ artist }) => {
+  if (!artist) { return null; }
+
+  const artistUrl = getArtistUrl(artist) + '/releases';
+  return (
+    !!matchPath({ path: artistUrl }, window.location.pathname)
+      ? <span className="track-group-artist">{artist.name}</span>
+      : <Link className="track-group-artist" to={artistUrl}>{artist.name}</Link>
+  )
+}
+
 export default ArtistTrackGroup;