link sharing ^^

src/OutfitPreview.js

@@ -10,8 +10,10 @@ import {
   Image,
   PseudoBox,
   Spinner,
+  Stack,
   Text,
   Tooltip,
+  useClipboard,
 } from "@chakra-ui/core";
 
 import { Delay } from "./util";
@@ -68,6 +70,8 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
     visibleLayers
   );
 
+  const { onCopy, hasCopied } = useClipboard(getShareUrl(outfitState));
+
   if (error) {
     return (
       <FullScreenCenter>
@@ -133,9 +137,9 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
         bottom={{ base: 2, lg: 6 }}
         // Grid layout for the content!
         display="grid"
-        gridTemplateAreas={`"space picker download"`}
+        gridTemplateAreas={`"space picker buttons"`}
         gridTemplateColumns="minmax(0, 1fr) auto 1fr"
-        alignItems="center"
+        alignItems="flex-end"
       >
         <Box gridArea="space"></Box>
         <PseudoBox
@@ -151,7 +155,43 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
             onBlur={() => setHasFocus(false)}
           />
         </PseudoBox>
-        <Flex gridArea="download" justify="flex-end">
+        <Stack gridArea="buttons" spacing="2" align="flex-end">
+          <Box>
+            <Tooltip
+              label={hasCopied ? "Copied!" : "Copy link"}
+              placement="left"
+            >
+              <IconButton
+                icon={hasCopied ? "check" : "link"}
+                aria-label="Copy link"
+                isRound
+                onClick={onCopy}
+                onFocus={() => setHasFocus(true)}
+                onBlur={() => setHasFocus(false)}
+                variant="unstyled"
+                backgroundColor="gray.600"
+                color="gray.50"
+                boxShadow="md"
+                d="flex"
+                alignItems="center"
+                justifyContent="center"
+                opacity={hasFocus ? 1 : 0}
+                transition="all 0.2s"
+                _groupHover={{
+                  opacity: 1,
+                }}
+                _focus={{
+                  opacity: 1,
+                  backgroundColor: "gray.500",
+                }}
+                _hover={{
+                  backgroundColor: "gray.500",
+                }}
+                outline="initial"
+              />
+            </Tooltip>
+          </Box>
+          <Box>
             <Tooltip label="Download" placement="left">
               <IconButton
                 icon="download"
@@ -190,7 +230,8 @@ function OutfitPreview({ outfitState, dispatchToOutfit }) {
                 outline="initial"
               />
             </Tooltip>
-        </Flex>
+          </Box>
+        </Stack>
       </Box>
       <Box pos="absolute" left="3" top="3">
         <IconButton
@@ -315,4 +356,29 @@ function useDownloadableImage(visibleLayers) {
   return [downloadImageUrl, prepareDownload];
 }
 
+function getShareUrl(outfitState) {
+  const {
+    name,
+    speciesId,
+    colorId,
+    wornItemIds,
+    closetedItemIds,
+  } = outfitState;
+
+  const params = new URLSearchParams();
+  params.append("name", name);
+  params.append("species", speciesId);
+  params.append("color", colorId);
+  for (const itemId of wornItemIds) {
+    params.append("objects[]", itemId);
+  }
+  for (const itemId of closetedItemIds) {
+    params.append("closet[]", itemId);
+  }
+
+  const { origin, pathname } = window.location;
+  const url = origin + pathname + "?" + params.toString();
+  return url;
+}
+
 export default OutfitPreview;

src/SearchPanel.js

@@ -95,7 +95,9 @@ function SearchResults({ query, outfitState, dispatchToOutfit }) {
           offset: items.length,
         },
         updateQuery: (prev, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return prev;
+          if (!fetchMoreResult || fetchMoreResult.query !== prev.query) {
+            return prev;
+          }
 
           // Note: This is a bit awkward because, if the results count ends on
           // a multiple of 30, the user will see a flash of loading before

src/useOutfitState.js

@@ -29,6 +29,21 @@ function useOutfitState() {
     }
   );
 
+  React.useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has("species")) {
+      dispatchToOutfit({
+        type: "reset",
+        name: urlParams.get("name"),
+        speciesId: urlParams.get("species"),
+        colorId: urlParams.get("color"),
+        wornItemIds: urlParams.getAll("objects[]"),
+        closetedItemIds: urlParams.getAll("closet[]"),
+      });
+    }
+    window.history.replaceState(null, "", window.location.href.split("?")[0]);
+  });
+
   const { name, speciesId, colorId } = state;
 
   // It's more convenient to manage these as a Set in state, but most callers
@@ -82,6 +97,7 @@ function useOutfitState() {
     zonesAndItems,
     name,
     wornItemIds,
+    closetedItemIds,
     allItemIds,
     speciesId,
     colorId,
@@ -150,10 +166,14 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
       const { name, speciesId, colorId, wornItemIds, closetedItemIds } = action;
       return {
         name,
-        speciesId: String(speciesId || baseState.speciesId),
-        colorId: String(colorId || baseState.colorId),
-        wornItemIds: new Set(wornItemIds.map(String)),
-        closetedItemIds: new Set(closetedItemIds.map(String)),
+        speciesId: speciesId ? String(speciesId) : baseState.speciesId,
+        colorId: colorId ? String(colorId) : baseState.colorId,
+        wornItemIds: wornItemIds
+          ? new Set(wornItemIds.map(String))
+          : baseState.wornItemIds,
+        closetedItemIds: closetedItemIds
+          ? new Set(closetedItemIds.map(String))
+          : baseState.closetedItemIds,
       };
     default:
       throw new Error(`unexpected action ${JSON.stringify(action)}`);