From e149d535954e3c6c1d33dfe4cafcfe2ac9bc0fe0 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 17 Jan 2021 08:04:21 -0800
Subject: [PATCH] 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 | 28 +++++++++++++++++++-------
 src/app/WardrobePage/useOutfitState.js |  5 +++++
 src/server/types/Outfit.js             |  5 +++++
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index e8caa28..df771dc 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/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!
  */
diff --git a/src/app/WardrobePage/useOutfitState.js b/src/app/WardrobePage/useOutfitState.js
index 7e9c411..719a1a7 100644
--- a/src/app/WardrobePage/useOutfitState.js
+++ b/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,
diff --git a/src/server/types/Outfit.js b/src/server/types/Outfit.js
index 60fb5a4..7a31325 100644
--- a/src/server/types/Outfit.js
+++ b/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 }),