import { useQuery } from "@tanstack/react-query"; export function useAltStylesForSpecies(speciesId, options = {}) { return useQuery({ ...options, queryKey: ["altStylesForSpecies", String(speciesId)], queryFn: () => loadAltStylesForSpecies(speciesId), }); } async function loadAltStylesForSpecies(speciesId) { const res = await fetch( `/species/${encodeURIComponent(speciesId)}/alt-styles.json`, ); if (!res.ok) { throw new Error( `loading alt styles failed: ${res.status} ${res.statusText}`, ); } return res.json().then(normalizeAltStyles); } function normalizeAltStyles(altStylesData) { return altStylesData.map(normalizeAltStyle); } function normalizeAltStyle(altStyleData) { return { id: altStyleData.id, speciesId: altStyleData.species_id, colorId: altStyleData.color_id, bodyId: altStyleData.body_id, adjectiveName: altStyleData.adjective_name, thumbnailUrl: altStyleData.thumbnail_url, }; }