impress/app/javascript/wardrobe-2020/loaders/items.js

import { useQuery } from "@tanstack/react-query";

export function useItemAppearances(id, options = {}) {
	return useQuery({
		...options,
		queryKey: ["items", String(id)],
		queryFn: () => loadItemAppearances(id),
	});
}

async function loadItemAppearances(id) {
	const res = await fetch(`/items/${encodeURIComponent(id)}/appearances.json`);

	if (!res.ok) {
		throw new Error(
			`loading item appearances failed: ${res.status} ${res.statusText}`,
		);
	}

	return res.json().then(normalizeItemAppearances);
}

function normalizeItemAppearances(appearances) {
	return appearances.map((appearance) => ({
		body: normalizeBody(appearance.body),
		swfAssets: appearance.swf_assets.map((asset) => ({
			id: String(asset.id),
			knownGlitches: asset.known_glitches,
			zone: normalizeZone(asset.zone),
			restrictedZones: asset.restricted_zones.map((z) => normalizeZone(z)),
			urls: {
				swf: asset.urls.swf,
				png: asset.urls.png,
				manifest: asset.urls.manifest,
			},
		})),
	}));
}

function normalizeBody(body) {
	if (String(body.id) === "0") {
		return { id: "0" };
	}

	return {
		id: String(body.id),
		species: {
			id: String(body.species.id),
			name: body.species.name,
			humanName: body.species.humanName,
		},
	};
}

function normalizeZone(zone) {
	return { id: String(zone.id), label: zone.label, depth: zone.depth };
}