fix: artist page link sending to artist page

Fixes #797.
funmusicplace · Aug 27, 2024 · 3dab939 · 3dab939
1 parent 911f722
commit 3dab939
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/client/src/components/Artist/ArtistTrackGroup.tsx b/client/src/components/Artist/ArtistTrackGroup.tsx
@@ -1,9 +1,9 @@
 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 { getArtistUrl, getReleasesUrl, getReleaseUrl } from "utils/artist";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
@@ -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 = getReleasesUrl(artist);
+  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;
diff --git a/client/src/utils/artist.ts b/client/src/utils/artist.ts
@@ -22,6 +22,10 @@ export const getArtistUrl = (artist: { urlSlug?: string; id?: number }) => {
   return `/${getArtistUrlReference(artist)}`;
 };
 
+export const getReleasesUrl = (artist: { urlSlug?: string; id?: number }) => {
+  return `${getArtistUrl(artist)}/releases`;
+}
+
 export const getArtistManageUrl = (artistId: number) => {
   return `/manage/artists/${artistId}`;
 };