diff --git a/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js b/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js index 4bc61618..9ceb5551 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js +++ b/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js @@ -55,10 +55,7 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { const saveOutfitMutation = useSaveOutfitMutation({ onSuccess: (outfit) => { - if ( - String(outfit.id) === String(outfitState.id) && - outfit.name !== outfitState.name - ) { + if (outfit.id === outfitState.id && outfit.name !== outfitState.name) { dispatchToOutfit({ type: "rename", outfitName: outfit.name, diff --git a/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js b/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js index 25533b50..7f3b9e23 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js +++ b/app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js @@ -30,8 +30,8 @@ function useOutfitState() { status: outfitStatus, } = useSavedOutfit(urlOutfitState.id, { enabled: urlOutfitState.id != null }); - const creator = outfitData?.user; - const updatedAt = outfitData?.updated_at; + const creator = outfitData?.creator; + const updatedAt = outfitData?.updatedAt; // We memoize this to make `outfitStateWithoutExtras` an even more reliable // stable object! @@ -430,15 +430,13 @@ function getOutfitStateFromOutfitData(outfit) { } return { - id: String(outfit.id), + id: outfit.id, name: outfit.name, - speciesId: String(outfit.species_id), - colorId: String(outfit.color_id), + speciesId: outfit.speciesId, + colorId: outfit.colorId, pose: outfit.pose, - wornItemIds: new Set((outfit.item_ids?.worn || []).map((id) => String(id))), - closetedItemIds: new Set( - (outfit.item_ids?.closeted || []).map((id) => String(id)), - ), + wornItemIds: new Set(outfit.wornItemIds), + closetedItemIds: new Set(outfit.closetedItemIds), }; } diff --git a/app/javascript/wardrobe-2020/components/useCurrentUser.js b/app/javascript/wardrobe-2020/components/useCurrentUser.js index 8e04c2db..1e168c4d 100644 --- a/app/javascript/wardrobe-2020/components/useCurrentUser.js +++ b/app/javascript/wardrobe-2020/components/useCurrentUser.js @@ -18,7 +18,11 @@ function useCurrentUser() { function readCurrentUserId() { try { 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) { console.error( `[readCurrentUserId] Couldn't read user ID, using null instead`, diff --git a/app/javascript/wardrobe-2020/loaders/outfits.js b/app/javascript/wardrobe-2020/loaders/outfits.js index 6612cfc6..09a111c9 100644 --- a/app/javascript/wardrobe-2020/loaders/outfits.js +++ b/app/javascript/wardrobe-2020/loaders/outfits.js @@ -15,7 +15,7 @@ export function useSaveOutfitMutation(options) { ...options, mutationFn: saveOutfit, onSuccess: (outfit) => { - queryClient.setQueryData(["outfits", String(outfit.id)], outfit); + queryClient.setQueryData(["outfits", outfit.id], outfit); options.onSuccess(outfit); }, }); @@ -28,7 +28,7 @@ async function loadSavedOutfit(id) { throw new Error(`loading outfit failed: ${res.status} ${res.statusText}`); } - return res.json(); + return res.json().then(normalizeOutfit); } async function saveOutfit({ @@ -77,7 +77,22 @@ async function saveOutfit({ 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() {