fix: allow track searching in header search menu

client/src/components/Header/HeaderSearch.tsx

@@ -1,35 +1,72 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import api from "services/api";
 import AutoComplete from "components/common/AutoComplete";
 
 const HeaderSearch: React.FC = () => {
-  const navigate = useNavigate();
   const { t } = useTranslation("translation", { keyPrefix: "headerSearch" });
 
   const getOptions = React.useCallback(async (searchString: string) => {
-    const results = await api.getMany<Artist>(`artists`, {
+    const artists = await api.getMany<Artist>(`artists`, {
       name: searchString,
     });
-    return results.results.map((r) => ({
-      id: r.urlSlug ?? r.id,
-      name: r.name,
-    }));
+    const trackGroups = await api.getMany<TrackGroup>(`trackGroups`, {
+      title: searchString,
+    });
+    const tracks = await api.getMany<Track>(`tracks`, {
+      title: searchString,
+    });
+    return [
+      ...artists.results.map((r) => ({
+        artistId: r.urlSlug ?? r.id,
+        id: r.id,
+        name: r.name,
+      })),
+      ...trackGroups.results.map((t) => ({
+        id: t.urlSlug ?? t.id,
+        artistId: t.artist?.urlSlug ?? t.artistId,
+        trackGroupId: t.urlSlug ?? t.id,
+        name: t.title,
+      })),
+      ...tracks.results.map((t) => ({
+        id: t.id,
+        trackGroupId: t.trackGroup.urlSlug ?? t.trackGroupId,
+        artistId: t.trackGroup.artist.urlSlug ?? t.trackGroup.artistId,
+        name: t.title,
+      })),
+    ];
   }, []);
 
   return (
     <AutoComplete
       getOptions={getOptions}
       showBackground
       placeholder={t("searchArtists") ?? ""}
+      usesNavigation
       resultsPrefix={t("searchSuggestions") ?? undefined}
-      onSelect={(val) => {
-        navigate(`/${val}`);
+      optionDisplay={(r: {
+        id: number | string;
+        name: string;
+        artistId?: number | string;
+        trackGroupId?: number | string;
+      }) => {
+        let url = "";
+
+        if (r.artistId) {
+          url += r.artistId;
+
+          if (r.trackGroupId) {
+            url += `/release/${r.trackGroupId}`;
+
+            if (r.id !== r.trackGroupId) {
+              url += `/tracks/${r.id}`;
+            }
+          }
+        }
+
+        return <Link to={url}>{r.name}</Link>;
       }}
-      optionDisplay={(r: { id: number | string; name: string }) => (
-        <Link to={`/${r.id}`}>{r.name}</Link>
-      )}
     />
   );
 };

client/src/components/common/AutoComplete.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import Background from "components/common/Background";
 import Button from "./Button";
 import styled from "@emotion/styled";
+import { useLocation } from "react-router-dom";
 
 const SearchResultsDiv = styled.div`
   position: absolute;
@@ -65,6 +66,7 @@ const SearchResult = styled.li`
   button:hover,
   a:hover {
     color: var(--mi-white) !important;
+    background-color: var(--mi-black) !important;
   }
   @media (prefers-color-scheme: dark) {
     button:hover,
@@ -85,13 +87,17 @@ const AutoComplete: React.FC<{
   optionDisplay?: (result: {
     id: number | string;
     name: string;
+    artistId?: string | number;
+    trackGroupId?: string | number;
   }) => React.ReactNode;
   placeholder?: string | null;
   allowNew?: boolean;
   showBackground?: boolean;
+  usesNavigation?: boolean;
 }> = ({
   getOptions,
   resultsPrefix,
+  usesNavigation,
   optionDisplay,
   onSelect,
   placeholder,
@@ -107,6 +113,7 @@ const AutoComplete: React.FC<{
     { id: number | string; name: string; isNew?: boolean }[]
   >([]);
   const [navigationIndex, setNavigationIndex] = React.useState(0);
+  let location = useLocation();
 
   const onChangeValue = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -152,6 +159,7 @@ const AutoComplete: React.FC<{
         onSelect?.(value);
       }
       setSearchValue("");
+      setShowSuggestions(false);
     },
     [onSelect, searchResults]
   );
@@ -160,6 +168,12 @@ const AutoComplete: React.FC<{
     searchCallback(searchValue);
   }, [searchCallback, searchValue]);
 
+  React.useEffect(() => {
+    if (usesNavigation) {
+      setShowSuggestions(false);
+    }
+  }, [usesNavigation, location]);
+
   return (
     <div
       className={css`

prisma/migrations/20241211141101_change_default_purchase_currency_to_lowercase/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "UserTrackGroupPurchase" ALTER COLUMN "currencyPaid" SET DEFAULT 'usd';