diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index 6ca803f..55bc806 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/src/app/WardrobePage/support/ItemSupportDrawer.js
@@ -76,9 +76,8 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
-
-
-
+
+
@@ -88,17 +87,16 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
);
}
-function ItemSupportSpecialColorFields({ item }) {
- const supportSecret = useSupportSecret();
-
- const { loading: itemLoading, error: itemError, data: itemData } = useQuery(
+function ItemSupportFields({ item }) {
+ const { loading, error, data } = useQuery(
gql`
- query ItemSupportDrawerManualSpecialColor($itemId: ID!) {
+ query ItemSupportFields($itemId: ID!) {
item(id: $itemId) {
id
manualSpecialColor {
id
}
+ explicitlyBodySpecific
}
}
`,
@@ -112,10 +110,39 @@ function ItemSupportSpecialColorFields({ item }) {
// This cheap trick of changing the display name every re-render
// persuades Apollo that this is a different query, so it re-checks
// its cache and finds the empty `manualSpecialColor`. Weird!
- displayName: `ItemSupportDrawerManualSpecialColor-${new Date()}`,
+ displayName: `ItemSupportFields-${new Date()}`,
}
);
+ const errorColor = useColorModeValue("red.500", "red.300");
+
+ return (
+ <>
+ {error && {error.message}}
+
+
+ >
+ );
+}
+
+function ItemSupportSpecialColorFields({
+ loading,
+ error,
+ item,
+ manualSpecialColor,
+}) {
+ const supportSecret = useSupportSecret();
+
const {
loading: colorsLoading,
error: colorsError,
@@ -154,6 +181,32 @@ function ItemSupportSpecialColorFields({ item }) {
}
`);
+ const onChange = React.useCallback(
+ (e) => {
+ const colorId = e.target.value || null;
+ const color =
+ colorId != null ? { __typename: "Color", id: colorId } : null;
+ mutate({
+ variables: {
+ itemId: item.id,
+ colorId,
+ supportSecret,
+ },
+ optimisticResponse: {
+ __typename: "Mutation",
+ setManualSpecialColor: {
+ __typename: "Item",
+ id: item.id,
+ manualSpecialColor: color,
+ },
+ },
+ }).catch((e) => {
+ // Ignore errors from the promise, because we'll handle them on render!
+ });
+ },
+ [item.id, mutate, supportSecret]
+ );
+
const nonStandardColors =
colorsData?.allColors?.filter((c) => !c.isStandard) || [];
nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
@@ -161,45 +214,24 @@ function ItemSupportSpecialColorFields({ item }) {
const linkColor = useColorModeValue("green.500", "green.300");
return (
-
+
Special color
) : mutationData ? (
) : undefined
}
- onChange={(e) => {
- const colorId = e.target.value || null;
- const color =
- colorId != null ? { __typename: "Color", id: colorId } : null;
- mutate({
- variables: {
- itemId: item.id,
- colorId,
- supportSecret,
- },
- optimisticResponse: {
- __typename: "Mutation",
- setManualSpecialColor: {
- __typename: "Item",
- id: item.id,
- manualSpecialColor: color,
- },
- },
- });
- }}
+ onChange={onChange}
>
{nonStandardColors.map((color) => (