From cae2f1a9776ba359b5218615c43d50cc559c0bfe Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 31 Jul 2020 23:00:10 -0700
Subject: [PATCH] Set up the special color mutation on the client?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Optimistic UI seems to just be like, not working… I'm seeing some Google results suggesting maybe just get to v3, which is a bit of upgrade work but might be worth it
---
 .../WardrobePage/support/ItemSupportDrawer.js | 67 ++++++++++++++++++-
 src/app/WardrobePage/support/SupportOnly.js   |  9 +--
 .../WardrobePage/support/useSupportSecret.js  | 19 ++++++
 3 files changed, 85 insertions(+), 10 deletions(-)
 create mode 100644 src/app/WardrobePage/support/useSupportSecret.js

diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index 6c65ce2..bd0849c 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/src/app/WardrobePage/support/ItemSupportDrawer.js
@@ -1,6 +1,6 @@
 import * as React from "react";
 import gql from "graphql-tag";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery, useMutation } from "@apollo/client";
 import {
   Badge,
   Box,
@@ -19,7 +19,9 @@ import {
   Spinner,
   useBreakpointValue,
 } from "@chakra-ui/core";
-import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { CheckCircleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+
+import useSupportSecret from "./useSupportSecret";
 
 /**
  * ItemSupportDrawer shows Support UI for the item when open.
@@ -71,6 +73,8 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
 }
 
 function SpecialColorFields({ item }) {
+  const supportSecret = useSupportSecret();
+
   const { loading, error, data } = useQuery(
     gql`
       query ItemSupportDrawerSpecialColorFields($itemId: ID!) {
@@ -90,6 +94,28 @@ function SpecialColorFields({ item }) {
     { variables: { itemId: item.id } }
   );
 
+  const [
+    mutate,
+    { loading: loading2, error: error2, data: data2 },
+  ] = useMutation(gql`
+    mutation ItemSupportDrawerSetManualSpecialColor(
+      $itemId: ID!
+      $colorId: ID
+      $supportSecret: String!
+    ) {
+      setManualSpecialColor(
+        itemId: $itemId
+        colorId: $colorId
+        supportSecret: $supportSecret
+      ) {
+        manualSpecialColor {
+          __typename
+          id
+        }
+      }
+    }
+  `);
+
   const nonStandardColors = data?.allColors?.filter((c) => !c.isStandard) || [];
   nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
 
@@ -100,8 +126,42 @@ function SpecialColorFields({ item }) {
         placeholder={
           loading ? "Loading…" : "Default: Auto-detect from item description"
         }
-        icon={loading ? <Spinner /> : undefined}
+        icon={
+          loading || loading2 ? (
+            <Spinner />
+          ) : data2 ? (
+            <CheckCircleIcon />
+          ) : undefined
+        }
         value={data?.item?.manualSpecialColor?.id}
+        onChange={(e) => {
+          const colorId = e.target.value;
+          const color =
+            colorId != null ? { __typename: "Color", id: colorId } : null;
+          console.log({
+            __typename: "Mutation",
+            setManualSpecialColor: {
+              __typename: "Item",
+              id: item.id,
+              manualSpecialColor: color,
+            },
+          });
+          mutate({
+            variables: {
+              itemId: item.id,
+              colorId,
+              supportSecret,
+            },
+            optimisticResponse: {
+              __typename: "Mutation",
+              setManualSpecialColor: {
+                __typename: "Item",
+                id: item.id,
+                manualSpecialColor: color,
+              },
+            },
+          });
+        }}
       >
         {nonStandardColors.map((color) => (
           <option key={color.id} value={color.id}>
@@ -110,6 +170,7 @@ function SpecialColorFields({ item }) {
         ))}
       </Select>
       {error && <FormErrorMessage>{error.message}</FormErrorMessage>}
+      {error2 && <FormErrorMessage>{error2.message}</FormErrorMessage>}
       {!error && (
         <FormHelperText>
           This controls which previews we show on the{" "}
diff --git a/src/app/WardrobePage/support/SupportOnly.js b/src/app/WardrobePage/support/SupportOnly.js
index 33a71a5..870066a 100644
--- a/src/app/WardrobePage/support/SupportOnly.js
+++ b/src/app/WardrobePage/support/SupportOnly.js
@@ -1,4 +1,4 @@
-import * as React from "react";
+import useSupportSecret from "./useSupportSecret";
 
 /**
  * SupportOnly only shows its contents to Support users. For most users, the
@@ -12,13 +12,8 @@ import * as React from "react";
  * the server checks the provided secret for each Support request.
  */
 function SupportOnly({ children }) {
-  const supportSecret = React.useMemo(getSupportSecret, []);
-
+  const supportSecret = useSupportSecret();
   return supportSecret ? children : null;
 }
 
-function getSupportSecret() {
-  return localStorage.getItem("supportSecret");
-}
-
 export default SupportOnly;
diff --git a/src/app/WardrobePage/support/useSupportSecret.js b/src/app/WardrobePage/support/useSupportSecret.js
new file mode 100644
index 0000000..84fc40d
--- /dev/null
+++ b/src/app/WardrobePage/support/useSupportSecret.js
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+/**
+ * useSupportSecret returns the Support secret that the server requires for
+ * Support actions... if the user has it set. For most users, this returns
+ * nothing!
+ *
+ * To become a Support user, you visit /?supportSecret=..., which saves the
+ * secret to your device.
+ *
+ * Note that this hook doesn't check that the secret is *correct*, so it's
+ * possible that it will return an invalid secret. That's okay, because
+ * the server checks the provided secret for each Support request.
+ */
+function useSupportSecret() {
+  return React.useMemo(() => localStorage.getItem("supportSecret"), []);
+}
+
+export default useSupportSecret;