Emi Matchu
8e5939e408
To help with space, I'm just showing the word "Nostalgic" (or "???" if it's from a series we don't recognize, this is hardcoded by ID), and trusting that from context it will be obvious that it's the "Nostalgic Faerie" case or whatever. (Moreover, in both the button and the select we're omitting the species name, by similar reasoning!) Note that this _still_ doesn't actually apply the style to the outfit whatsoever; this is all just local state as we're continuing to play with UI concepts. Actually applying it is probably next though! (Though there's a couple more UI things I want to do, like some affordances to clarify that a Style is applied and that Expression changes won't work.)
39 lines
980 B
JavaScript
39 lines
980 B
JavaScript
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,
|
|
seriesName: altStyleData.series_name,
|
|
adjectiveName: altStyleData.adjective_name,
|
|
thumbnailUrl: altStyleData.thumbnail_url,
|
|
};
|
|
}
|