From d32c6459b0107aff9671b3189d4625989e076c20 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 2 Nov 2023 17:12:59 -0700
Subject: [PATCH] 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!
---
 .../WardrobePage/useOutfitSaving.js           |  5 +----
 .../WardrobePage/useOutfitState.js            | 16 +++++++-------
 .../components/useCurrentUser.js              |  6 +++++-
 .../wardrobe-2020/loaders/outfits.js          | 21 ++++++++++++++++---
 4 files changed, 31 insertions(+), 17 deletions(-)

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() {