Normalize outfit data as we load it into wardrobe-2020

Rather than letting the fact that the server API models outfits a bit
differently (underscore keys, integer IDs for things), I'd rather
convert it to the familiar field names and expected types!
This commit is contained in:
Emi Matchu 2023-11-02 17:12:59 -07:00
parent 1830689a19
commit d32c6459b0
4 changed files with 31 additions and 17 deletions

View file

@ -55,10 +55,7 @@ function useOutfitSaving(outfitState, dispatchToOutfit) {
const saveOutfitMutation = useSaveOutfitMutation({ const saveOutfitMutation = useSaveOutfitMutation({
onSuccess: (outfit) => { onSuccess: (outfit) => {
if ( if (outfit.id === outfitState.id && outfit.name !== outfitState.name) {
String(outfit.id) === String(outfitState.id) &&
outfit.name !== outfitState.name
) {
dispatchToOutfit({ dispatchToOutfit({
type: "rename", type: "rename",
outfitName: outfit.name, outfitName: outfit.name,

View file

@ -30,8 +30,8 @@ function useOutfitState() {
status: outfitStatus, status: outfitStatus,
} = useSavedOutfit(urlOutfitState.id, { enabled: urlOutfitState.id != null }); } = useSavedOutfit(urlOutfitState.id, { enabled: urlOutfitState.id != null });
const creator = outfitData?.user; const creator = outfitData?.creator;
const updatedAt = outfitData?.updated_at; const updatedAt = outfitData?.updatedAt;
// We memoize this to make `outfitStateWithoutExtras` an even more reliable // We memoize this to make `outfitStateWithoutExtras` an even more reliable
// stable object! // stable object!
@ -430,15 +430,13 @@ function getOutfitStateFromOutfitData(outfit) {
} }
return { return {
id: String(outfit.id), id: outfit.id,
name: outfit.name, name: outfit.name,
speciesId: String(outfit.species_id), speciesId: outfit.speciesId,
colorId: String(outfit.color_id), colorId: outfit.colorId,
pose: outfit.pose, pose: outfit.pose,
wornItemIds: new Set((outfit.item_ids?.worn || []).map((id) => String(id))), wornItemIds: new Set(outfit.wornItemIds),
closetedItemIds: new Set( closetedItemIds: new Set(outfit.closetedItemIds),
(outfit.item_ids?.closeted || []).map((id) => String(id)),
),
}; };
} }

View file

@ -18,7 +18,11 @@ function useCurrentUser() {
function readCurrentUserId() { function readCurrentUserId() {
try { try {
const element = document.querySelector("meta[name=dti-current-user-id]"); const element = document.querySelector("meta[name=dti-current-user-id]");
return JSON.parse(element.getAttribute("content")); const value = element.getAttribute("content");
if (value === "null") {
return null;
}
return value;
} catch (error) { } catch (error) {
console.error( console.error(
`[readCurrentUserId] Couldn't read user ID, using null instead`, `[readCurrentUserId] Couldn't read user ID, using null instead`,

View file

@ -15,7 +15,7 @@ export function useSaveOutfitMutation(options) {
...options, ...options,
mutationFn: saveOutfit, mutationFn: saveOutfit,
onSuccess: (outfit) => { onSuccess: (outfit) => {
queryClient.setQueryData(["outfits", String(outfit.id)], outfit); queryClient.setQueryData(["outfits", outfit.id], outfit);
options.onSuccess(outfit); options.onSuccess(outfit);
}, },
}); });
@ -28,7 +28,7 @@ async function loadSavedOutfit(id) {
throw new Error(`loading outfit failed: ${res.status} ${res.statusText}`); throw new Error(`loading outfit failed: ${res.status} ${res.statusText}`);
} }
return res.json(); return res.json().then(normalizeOutfit);
} }
async function saveOutfit({ async function saveOutfit({
@ -77,7 +77,22 @@ async function saveOutfit({
throw new Error(`saving outfit failed: ${res.status} ${res.statusText}`); throw new Error(`saving outfit failed: ${res.status} ${res.statusText}`);
} }
return res.json(); return res.json().then(normalizeOutfit);
}
function normalizeOutfit(outfit) {
return {
id: String(outfit.id),
name: outfit.name,
speciesId: String(outfit.species_id),
colorId: String(outfit.color_id),
pose: outfit.pose,
wornItemIds: (outfit.item_ids?.worn || []).map((id) => String(id)),
closetedItemIds: (outfit.item_ids?.closeted || []).map((id) => String(id)),
creator: outfit.user ? { id: String(outfit.user.id) } : null,
createdAt: outfit.created_at,
updatedAt: outfit.updated_at,
};
} }
function getCSRFToken() { function getCSRFToken() {