Merge

Author: switz

src/components/Row.tsx

@@ -14,10 +14,19 @@ type RowProps = {
   active?: boolean;
   loading?: boolean;
   activeSegments?: Record<string, string | undefined>;
+  fallbackParams?: Record<string, string>;
   isActiveOverride?: boolean;
 };
 
-const Row = ({ children, href, activeSegments, isActiveOverride, loading, ...props }: RowProps) => {
+const Row = ({
+  children,
+  href,
+  activeSegments,
+  isActiveOverride,
+  loading,
+  fallbackParams,
+  ...props
+}: RowProps) => {
   const [isPending, startTransition] = useTransition();
   const params = useParams();
   const pathname = usePathname();
@@ -27,7 +36,9 @@ const Row = ({ children, href, activeSegments, isActiveOverride, loading, ...pro
 
   // if every segment is true, then we're active
   if (isActiveOverride === undefined && activeSegments) {
-    isActive = Object.entries(activeSegments).every(([key, value]) => params[key] === value);
+    isActive = Object.entries(activeSegments).every(
+      ([key, value]) => (params[key] ?? fallbackParams?.[key]) === value
+    );
   }
 
   if (!href) {

src/lib/RelistenAPI.ts

@@ -8,6 +8,11 @@ import type { Artist, Tape, Year, ArtistShows, Show, Day } from '@/types';
 export class RelistenAPI {
   private static baseURL = API_DOMAIN;
 
+  // Validate artist slug format
+  private static isValidArtistSlug(slug: string): boolean {
+    return /^[a-z-]+$/i.test(slug);
+  }
+
   // Generic cached fetch method
   private static cachedFetch = cache(
     async <T>(
@@ -72,10 +77,8 @@ export class RelistenAPI {
   static fetchRandomShow = cache(async (artistSlug: string): Promise<Partial<Tape> | undefined> => {
     if (!artistSlug) return undefined;
 
-    // if doesnt match
-    if (!/^[a-z-]+$/i.test(artistSlug)) {
+    if (!this.isValidArtistSlug(artistSlug)) {
       console.error('Tried to load url that doesnt match artist slug format:', artistSlug);
-
       return notFound();
     }
 
@@ -88,6 +91,11 @@ export class RelistenAPI {
   static fetchYears = cache(async (slug?: string): Promise<Year[]> => {
     if (!slug) return [];
 
+    if (!this.isValidArtistSlug(slug)) {
+      console.error('Tried to load url that doesnt match artist slug format:', slug);
+      return notFound();
+    }
+
     return this.cachedFetch<Year[]>(`/api/v2/artists/${slug}/years`);
   });