Set up the special color mutation on the client?

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

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{" "}

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;

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;