fix(sets): fix links to sets

Author: chiptus

src/hooks/queries/sets/useSetBySlug.ts

@@ -2,8 +2,13 @@ import { useQuery } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
 import { FestivalSet, setsKeys } from "./useSets";
 
-// Business logic function
-async function fetchSetBySlug(slug: string): Promise<FestivalSet> {
+async function fetchSetBySlug({
+  slug,
+  editionId,
+}: {
+  slug: string;
+  editionId: string;
+}): Promise<FestivalSet> {
   const { data, error } = await supabase
     .from("sets")
     .select(
@@ -20,6 +25,7 @@ async function fetchSetBySlug(slug: string): Promise<FestivalSet> {
     `,
     )
     .eq("slug", slug)
+    .eq("festival_edition_id", editionId)
     .eq("archived", false)
     .single();
 
@@ -46,10 +52,13 @@ async function fetchSetBySlug(slug: string): Promise<FestivalSet> {
 }
 
 // Hook
-export function useSetBySlugQuery(slug: string) {
+export function useSetBySlugQuery({
+  slug,
+  editionId,
+}: { slug?: string; editionId?: string } = {}) {
   return useQuery({
-    queryKey: setsKeys.bySlug(slug),
-    queryFn: () => fetchSetBySlug(slug),
-    enabled: !!slug,
+    queryKey: setsKeys.bySlug({ slug, editionId }),
+    queryFn: () => fetchSetBySlug({ slug: slug!, editionId: editionId! }),
+    enabled: !!slug && !!editionId,
   });
 }

src/hooks/queries/sets/useSets.ts

@@ -17,7 +17,7 @@ export const setsKeys = {
   list: (filters?: unknown) => [...setsKeys.lists(), filters] as const,
   details: () => [...setsKeys.all, "detail"] as const,
   detail: (id: string) => [...setsKeys.details(), id] as const,
-  bySlug: (slug: string) => [...setsKeys.details(), "slug", slug] as const,
+  bySlug: (params: unknown) => [...setsKeys.details(), params] as const,
   byEdition: (editionId: string) =>
     [...setsKeys.all, "edition", editionId] as const,
 };

src/pages/EditionView/tabs/ArtistsTab/SetCard/SetImage.tsx

@@ -20,7 +20,7 @@ export function SetImage({ className = "", size = "lg" }: SetImageProps) {
   const containerClass = `${sizeClasses[size]} ${className} overflow-hidden rounded-lg hover:opacity-90 transition-opacity cursor-pointer`;
 
   return (
-    <Link to={`./sets/${set.slug}`} className="block flex-shrink-0">
+    <Link to={`./${set.slug}`} className="block flex-shrink-0">
       {isMultiArtist ? (
         <MixedArtistImage
           artists={set.artists}

src/pages/EditionView/tabs/ScheduleTab/horizontal/SetHeader.tsx

@@ -9,7 +9,7 @@ export function SetHeader({ set }: SetHeaderProps) {
   return (
     <div className="mb-2">
       <Link
-        to={`./sets/${set.slug}`}
+        to={`../../sets/${set.slug}`}
         className="text-white font-semibold hover:text-purple-300 transition-colors block text-sm whitespace-nowrap overflow-hidden text-ellipsis"
       >
         {set.name}

src/pages/SetDetails.tsx

@@ -10,29 +10,30 @@ import { SetGroupVoting } from "./SetDetails/SetGroupVoting";
 import { ArtistNotes } from "./SetDetails/SetNotes";
 import { useUrlState } from "@/hooks/useUrlState";
 import { useSetDetail } from "./SetDetails/useSetDetail";
+import { useSetBySlugQuery } from "@/hooks/queries/sets/useSetBySlug";
+import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
+import { useAuth } from "@/contexts/AuthContext";
 
 export function SetDetails() {
+  const { user } = useAuth();
   const { setSlug } = useParams<{ setSlug: string }>();
-
+  const { edition } = useFestivalEdition();
   const { state: urlState } = useUrlState();
-  const {
-    currentSet,
-    user,
-    userVote,
-    loading,
-    handleVote,
-    getVoteCount,
-    netVoteScore,
-  } = useSetDetail(setSlug);
+  const setQuery = useSetBySlugQuery({
+    slug: setSlug,
+    editionId: edition?.id,
+  });
+  const { userVote, loading, handleVote, getVoteCount, netVoteScore } =
+    useSetDetail(setQuery.data?.id);
 
   if (loading) {
     return <ArtistLoadingState />;
   }
 
-  if (!currentSet) {
+  if (!setQuery.data) {
     return <ArtistNotFoundState />;
   }
-
+  const currentSet = setQuery.data;
   const isMultiArtistSet = currentSet.artists.length > 1;
   const primaryArtist = currentSet.artists[0];
 

src/pages/SetDetails/useSetDetail.ts

@@ -4,7 +4,7 @@ import { useOfflineVoting } from "@/hooks/useOfflineVoting";
 import { useUserPermissionsQuery } from "@/hooks/queries/auth/useUserPermissions";
 import { useOfflineSetsData } from "@/hooks/useOfflineSetsData";
 
-export function useSetDetail(slug: string | undefined) {
+export function useSetDetail(setId: string | undefined) {
   const { user, loading: authLoading } = useAuth();
   const { data: canEdit = false, isLoading: isLoadingPermissions } =
     useUserPermissionsQuery(user?.id, "edit_artists");
@@ -14,16 +14,16 @@ export function useSetDetail(slug: string | undefined) {
 
   const sets = setsQuery.sets;
   const currentSet = useMemo(() => {
-    if (!slug || !sets.length) {
+    if (!setId || !sets.length) {
       return null;
     }
 
-    return sets.find((a) => a.slug === slug) || null;
-  }, [slug, sets]);
+    return sets.find((a) => a.id === setId) || null;
+  }, [setId, sets]);
 
   async function handleVoteAction(voteType: number) {
-    if (!currentSet?.id) return;
-    await handleVote(currentSet.id, voteType);
+    if (!setId) return;
+    await handleVote(setId, voteType);
   }
 
   function getVoteCount(voteType: number) {
@@ -38,11 +38,9 @@ export function useSetDetail(slug: string | undefined) {
     ? 2 * getVoteCount(2) + getVoteCount(1) - getVoteCount(-1)
     : 0;
 
-  const userVote = userVotes[currentSet?.id || ""] || null;
+  const userVote = userVotes[setId || ""] || null;
 
   return {
-    currentSet,
-    user,
     userVote,
     loading: authLoading || isLoadingPermissions || setsQuery.loading,
     canEdit,