minor ui improvements to download!

src/OutfitPreview.js

@@ -12,6 +12,7 @@ import {
   Spinner,
   Text,
   Tooltip,
+  useToast,
 } from "@chakra-ui/core";
 
 import { Delay } from "./util";
@@ -37,6 +38,7 @@ export const itemAppearanceFragment = gql`
 
 function OutfitPreview({ outfitState }) {
   const { wornItemIds, speciesId, colorId } = outfitState;
+  const toast = useToast();
 
   const { loading, error, data } = useQuery(
     gql`
@@ -125,9 +127,17 @@ function OutfitPreview({ outfitState }) {
           as="a"
           // eslint-disable-next-line no-script-url
           href={downloadImageUrl || "javascript:void 0"}
-          download="Outfit.png"
+          download={(outfitState.name || "Outfit") + ".png"}
           onMouseEnter={prepareDownload}
           onFocus={prepareDownload}
+          onClick={() => {
+            if (!downloadImageUrl) {
+              toast({
+                title:
+                  "Just a second, try again when the image is done loading!",
+              });
+            }
+          }}
           variant="unstyled"
           color="gray.50"
           d="flex"

src/WardrobePage.js

@@ -134,7 +134,10 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
 
   return (
     <Box color="green.800">
-      <OutfitHeading />
+      <OutfitHeading
+        outfitState={outfitState}
+        dispatchToOutfit={dispatchToOutfit}
+      />
       <Stack spacing="10">
         {loading &&
           [1, 2, 3].map((i) => (
@@ -163,12 +166,18 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
   );
 }
 
-function OutfitHeading() {
+function OutfitHeading({ outfitState, dispatchToOutfit }) {
   return (
     <Box>
-      <PseudoBox role="group" d="inline-block" position="relative">
+      <PseudoBox role="group" d="inline-block" position="relative" width="100%">
         <Heading1 mb="6">
-          <Editable defaultValue="Zafara Agent (roopal27)">
+          <Editable
+            value={outfitState.name}
+            placeholder="Untitled outfit (click to edit)"
+            onChange={(value) =>
+              dispatchToOutfit({ type: "rename", outfitName: value })
+            }
+          >
             {({ isEditing, onRequestEdit }) => (
               <>
                 <EditablePreview />

src/useOutfitState.js

@@ -12,6 +12,7 @@ function useOutfitState() {
   const [state, dispatchToOutfit] = React.useReducer(
     outfitStateReducer(apolloClient),
     {
+      name: "Zafara Agent (roopal27)",
       wornItemIds: new Set([
         "38913",
         "38911",
@@ -28,7 +29,7 @@ function useOutfitState() {
     }
   );
 
-  const { speciesId, colorId } = state;
+  const { name, speciesId, colorId } = state;
 
   // It's more convenient to manage these as a Set in state, but most callers
   // will find it more convenient to access them as arrays! e.g. for `.map()`
@@ -79,6 +80,7 @@ function useOutfitState() {
 
   const outfitState = {
     zonesAndItems,
+    name,
     wornItemIds,
     allItemIds,
     speciesId,
@@ -90,6 +92,8 @@ function useOutfitState() {
 
 const outfitStateReducer = (apolloClient) => (baseState, action) => {
   switch (action.type) {
+    case "rename":
+      return { ...baseState, name: action.outfitName };
     case "wearItem":
       return produce(baseState, (state) => {
         // A hack to work around https://github.com/immerjs/immer/issues/586