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:
parent
1830689a19
commit
d32c6459b0
4 changed files with 31 additions and 17 deletions
|
@ -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,
|
||||||
|
|
|
@ -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)),
|
|
||||||
),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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`,
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue