refactor(api): genres → src/api modules (Effort 1)

src/api/genres/types.ts

@@ -0,0 +1,8 @@
+export type Genre = {
+  id: string;
+  name: string;
+};
+
+export const genresKeys = {
+  all: () => ["genres"] as const,
+};

src/hooks/queries/genres/useCreateGenreMutation.ts → src/api/genres/useCreateGenreMutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
 import { useToast } from "@/components/ui/use-toast";
+import { genresKeys } from "./types";
 
 interface CreateGenreParams {
   name: string;
@@ -29,8 +30,7 @@ export function useCreateGenreMutation() {
       return data;
     },
     onSuccess: () => {
-      // Invalidate genres query if it exists
-      queryClient.invalidateQueries({ queryKey: ["genres"] });
+      queryClient.invalidateQueries({ queryKey: genresKeys.all() });
 
       toast({
         title: "Success",

src/api/genres/useGenres.ts

@@ -0,0 +1,28 @@
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { Genre, genresKeys } from "./types";
+
+export async function fetchGenres(): Promise<Genre[]> {
+  const { data, error } = await supabase
+    .from("music_genres")
+    .select("id, name")
+    .order("name");
+
+  if (error) {
+    throw new Error("Failed to load genres");
+  }
+
+  return data || [];
+}
+
+export function genresQuery() {
+  return queryOptions({
+    queryKey: genresKeys.all(),
+    queryFn: fetchGenres,
+    staleTime: 10 * 60 * 1000,
+  });
+}
+
+export function useGenresQuery() {
+  return useQuery(genresQuery());
+}

src/components/GenreBadge.test.tsx

@@ -1,110 +1,98 @@
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
+import type { UseQueryResult } from "@tanstack/react-query";
 import { GenreBadge } from "./GenreBadge";
-import * as useGenresModule from "@/hooks/queries/genres/useGenres";
-
-vi.mock("@/hooks/queries/genres/useGenres");
+import * as useGenresModule from "@/api/genres/useGenres";
+import type { Genre } from "@/api/genres/types";
+
+vi.mock("@/api/genres/useGenres");
+
+function mockGenresQuery(result: {
+  data?: Genre[];
+  isLoading?: boolean;
+  error?: Error | null;
+}) {
+  vi.spyOn(useGenresModule, "useGenresQuery").mockReturnValue({
+    data: result.data ?? [],
+    isLoading: result.isLoading ?? false,
+    error: result.error ?? null,
+  } as unknown as UseQueryResult<Genre[], Error>);
+}
 
 describe("GenreBadge", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   it("renders genre name when genre is found", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [
+    mockGenresQuery({
+      data: [
         { id: "1", name: "Rock" },
         { id: "2", name: "Pop" },
       ],
-      loading: false,
-      error: null,
     });
 
     render(<GenreBadge genreId="1" />);
     expect(screen.getByText("Rock")).toBeInTheDocument();
   });
 
   it("renders null when loading", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [],
-      loading: true,
-      error: null,
-    });
+    mockGenresQuery({ isLoading: true });
 
     const { container } = render(<GenreBadge genreId="1" />);
     expect(container.firstChild).toBeNull();
   });
 
   it("renders null when error", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [],
-      loading: false,
-      error: new Error("Failed to load"),
-    });
+    mockGenresQuery({ error: new Error("Failed to load") });
 
     const { container } = render(<GenreBadge genreId="1" />);
     expect(container.firstChild).toBeNull();
   });
 
   it("renders null when genre is not found", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [
+    mockGenresQuery({
+      data: [
         { id: "1", name: "Rock" },
         { id: "2", name: "Pop" },
       ],
-      loading: false,
-      error: null,
     });
 
     const { container } = render(<GenreBadge genreId="999" />);
     expect(container.firstChild).toBeNull();
   });
 
   it("renders with default size", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [{ id: "1", name: "Rock" }],
-      loading: false,
-      error: null,
-    });
+    mockGenresQuery({ data: [{ id: "1", name: "Rock" }] });
 
     const { container } = render(<GenreBadge genreId="1" />);
     const badge = container.querySelector("div");
     expect(badge).not.toHaveClass("text-xs", "px-2", "py-1");
   });
 
   it("renders with small size", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [{ id: "1", name: "Rock" }],
-      loading: false,
-      error: null,
-    });
+    mockGenresQuery({ data: [{ id: "1", name: "Rock" }] });
 
     const { container } = render(<GenreBadge genreId="1" size="sm" />);
     const badge = container.querySelector("div");
     expect(badge).toHaveClass("text-xs", "px-2", "py-1");
   });
 
   it("has correct styling classes", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [{ id: "1", name: "Rock" }],
-      loading: false,
-      error: null,
-    });
+    mockGenresQuery({ data: [{ id: "1", name: "Rock" }] });
 
     const { container } = render(<GenreBadge genreId="1" />);
     const badge = container.querySelector("div");
     expect(badge).toHaveClass("bg-purple-600/50", "text-purple-100");
   });
 
   it("finds correct genre from multiple genres", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [
+    mockGenresQuery({
+      data: [
         { id: "1", name: "Rock" },
         { id: "2", name: "Pop" },
         { id: "3", name: "Jazz" },
       ],
-      loading: false,
-      error: null,
     });
 
     render(<GenreBadge genreId="2" />);
@@ -114,11 +102,7 @@ describe("GenreBadge", () => {
   });
 
   it("renders when genres list is empty", () => {
-    vi.spyOn(useGenresModule, "useGenres").mockReturnValue({
-      genres: [],
-      loading: false,
-      error: null,
-    });
+    mockGenresQuery({ data: [] });
 
     const { container } = render(<GenreBadge genreId="1" />);
     expect(container.firstChild).toBeNull();

src/components/GenreBadge.tsx

@@ -1,15 +1,15 @@
 import { Badge } from "@/components/ui/badge";
-import { useGenres } from "@/hooks/queries/genres/useGenres";
+import { useGenresQuery } from "@/api/genres/useGenres";
 
 interface GenreBadgeProps {
   genreId: string;
   size?: "default" | "sm";
 }
 
 export function GenreBadge({ genreId, size = "default" }: GenreBadgeProps) {
-  const { genres, loading, error } = useGenres();
+  const { data: genres = [], isLoading, error } = useGenresQuery();
 
-  if (loading || error) return null;
+  if (isLoading || error) return null;
 
   const genre = genres.find((g) => g.id === genreId);
   if (!genre) return null;

src/pages/EditionView/tabs/ArtistsTab/filters/FilterSortControls.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import type { SortOption, FilterSortState } from "@/hooks/useUrlState";
-import { useGenres } from "@/hooks/queries/genres/useGenres";
+import { useGenresQuery } from "@/api/genres/useGenres";
 import { SortControls } from "./SortControls";
 import { MobileFilters } from "./MobileFilters";
 import { DesktopFilters } from "./DesktopFilters";
@@ -24,7 +24,7 @@ export function FilterSortControls({
 }: FilterSortControlsProps) {
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
-  const { genres } = useGenres();
+  const { data: genres = [] } = useGenresQuery();
 
   useEffect(() => {
     function checkMobile() {

src/pages/admin/AddGenreDialog.tsx

@@ -1,5 +1,5 @@
 import { useForm } from "react-hook-form";
-import { useCreateGenreMutation } from "@/hooks/queries/genres/useCreateGenreMutation";
+import { useCreateGenreMutation } from "@/api/genres/useCreateGenreMutation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";

src/pages/admin/ArtistsManagement/AddArtistDialog.tsx

@@ -23,7 +23,7 @@ import {
 import { Music } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { useUserPermissionsQuery } from "@/hooks/queries/auth/useUserPermissions";
-import { useGenresQuery } from "@/hooks/queries/genres/useGenres";
+import { useGenresQuery } from "@/api/genres/useGenres";
 import { useCreateArtistMutation } from "@/hooks/queries/artists/useCreateArtist";
 import { useUpdateArtistMutation } from "@/hooks/queries/artists/useUpdateArtist";
 import { GenreMultiSelect } from "./GenreMultiSelect";

src/pages/admin/ArtistsManagement/BulkEditor/GenresCell.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { GenreMultiSelect } from "../GenreMultiSelect";
-import { useGenresQuery } from "@/hooks/queries/genres/useGenres";
+import { useGenresQuery } from "@/api/genres/useGenres";
 import { Check, X } from "lucide-react";
 
 interface GenresCellProps {