Back links to Your Outfits, *if* it's yours

Previously, when you clicked on a saved outfit from Your Outfits, the back button would take you back to the homepage, which was confusing for scanning through stuff! Now, it goes back to Your Outfits if it's yours.

I'm not suuure this is the behavior we want? But it seems intuitive enough!

src/app/WardrobePage/OutfitControls.js

@@ -25,6 +25,7 @@ import { getBestImageUrlForLayer } from "../components/OutfitPreview";
 import PosePicker from "./PosePicker";
 import SpeciesColorPicker from "../components/SpeciesColorPicker";
 import { loadImage, useLocalStorage } from "../util";
+import useCurrentUser from "../components/useCurrentUser";
 import useOutfitAppearance from "../components/useOutfitAppearance";
 
 /**
@@ -142,13 +143,7 @@ function OutfitControls({
           }}
         >
           <Box gridArea="back" onClick={maybeUnlockFocus}>
-            <ControlButton
-              as={Link}
-              to="/"
-              icon={<ArrowBackIcon />}
-              aria-label="Leave this outfit"
-              d="inline-flex" // Not sure why <a> requires this to style right! ^^`
-            />
+            <BackButton outfitState={outfitState} />
           </Box>
           {showAnimationControls && (
             <Box gridArea="play-pause" display="flex" justifyContent="center">
@@ -211,6 +206,25 @@ function OutfitControls({
   );
 }
 
+/**
+ * BackButton takes you back home, or to Your Outfits if this outfit is yours.
+ */
+function BackButton({ outfitState }) {
+  const currentUser = useCurrentUser();
+  const outfitBelongsToCurrentUser =
+    outfitState.creator && outfitState.creator.id === currentUser.id;
+
+  return (
+    <ControlButton
+      as={Link}
+      to={outfitBelongsToCurrentUser ? "/your-outfits" : "/"}
+      icon={<ArrowBackIcon />}
+      aria-label="Leave this outfit"
+      d="inline-flex" // Not sure why <a> requires this to style right! ^^`
+    />
+  );
+}
+
 /**
  * DownloadButton downloads the outfit as an image!
  */

src/app/WardrobePage/useOutfitState.js

@@ -30,6 +30,9 @@ function useOutfitState() {
         outfit(id: $id) {
           id
           name
+          creator {
+            id
+          }
           petAppearance {
             id
             species {
@@ -87,6 +90,7 @@ function useOutfitState() {
   // access them as arrays! e.g. for `.map()`.
   const outfit = outfitData?.outfit;
   const id = state.id;
+  const creator = outfit?.creator;
   const name = state.name || outfit?.name;
   const speciesId = state.speciesId || outfit?.petAppearance?.species?.id;
   const colorId = state.colorId || outfit?.petAppearance?.color?.id;
@@ -207,6 +211,7 @@ function useOutfitState() {
 
   const outfitState = {
     id,
+    creator,
     zonesAndItems,
     incompatibleItems,
     name,

src/server/types/Outfit.js

@@ -7,6 +7,7 @@ const typeDefs = gql`
     petAppearance: PetAppearance!
     wornItems: [Item!]!
     closetedItems: [Item!]!
+    creator: User
 
     # This is a convenience field: you could query this from the combination of
     # petAppearance and wornItems, but this gets you it in one shot!
@@ -67,6 +68,10 @@ const resolvers = {
         .filter((oir) => !oir.isWorn)
         .map((oir) => ({ id: oir.itemId }));
     },
+    creator: async ({ id }, _, { outfitLoader }) => {
+      const outfit = await outfitLoader.load(id);
+      return { id: outfit.userId };
+    },
   },
   Query: {
     outfit: (_, { id }) => ({ id }),