Merge pull request #769 from mirumee/fix/redundant-code-and-custom-attribute-value

Fix custom attribute value

src/products/components/ProductAttributes/ProductAttributes.tsx

@@ -196,7 +196,9 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
                           displayValue={
                             attribute.data.values.find(
                               value => value.slug === attribute.value[0]
-                            )?.name || ""
+                            )?.name ||
+                            attribute.value[0] ||
+                            ""
                           }
                           emptyOption={!attribute.data.isRequired}
                           error={!!error}

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -19,7 +19,6 @@ import { sectionNames } from "@saleor/intl";
 import {
   getAttributeInputFromProductType,
   getChoices,
-  ProductAttributeValueChoices,
   ProductType
 } from "@saleor/products/utils/data";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
@@ -194,10 +193,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   };
 
   // Display values
-  const [selectedAttributes, setSelectedAttributes] = useStateFromProps<
-    ProductAttributeValueChoices[]
-  >([]);
-
   const [selectedCategory, setSelectedCategory] = useStateFromProps(
     initial?.category || ""
   );
@@ -245,15 +240,10 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
         );
         const handleAttributeChange = createAttributeChangeHandler(
           changeAttributeData,
-          setSelectedAttributes,
-          selectedAttributes,
-          attributes,
           triggerChange
         );
         const handleAttributeMultiChange = createAttributeMultiChangeHandler(
           changeAttributeData,
-          setSelectedAttributes,
-          selectedAttributes,
           attributes,
           triggerChange
         );
@@ -261,7 +251,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
         const handleProductTypeSelect = createProductTypeSelectHandler(
           change,
           setAttributeData,
-          setSelectedAttributes,
           setProductType,
           productTypeChoiceList
         );

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -37,9 +37,7 @@ import {
   getAttributeInputFromProduct,
   getChoices,
   getProductUpdatePageFormData,
-  getSelectedAttributesFromProduct,
   getStockInputFromProduct,
-  ProductAttributeValueChoices,
   ProductUpdatePageFormData
 } from "../../utils/data";
 import {
@@ -155,10 +153,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
     remove: removeStock
   } = useFormset(stockInput);
 
-  const [selectedAttributes, setSelectedAttributes] = useStateFromProps<
-    ProductAttributeValueChoices[]
-  >(getSelectedAttributesFromProduct(product));
-
   const [selectedCategory, setSelectedCategory] = useStateFromProps(
     maybe(() => product.category.name, "")
   );
@@ -248,15 +242,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
         );
         const handleAttributeChange = createAttributeChangeHandler(
           changeAttributeData,
-          setSelectedAttributes,
-          selectedAttributes,
-          attributes,
           triggerChange
         );
         const handleAttributeMultiChange = createAttributeMultiChangeHandler(
           changeAttributeData,
-          setSelectedAttributes,
-          selectedAttributes,
           attributes,
           triggerChange
         );

src/products/utils/handlers.ts

@@ -1,46 +1,16 @@
+import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import { FormChange } from "@saleor/hooks/useForm";
 import { FormsetChange, FormsetData } from "@saleor/hooks/useFormset";
-import { maybe } from "@saleor/misc";
 import { toggle } from "@saleor/utils/lists";
 
 import { ProductAttributeInputData } from "../components/ProductAttributes";
-import {
+import { getAttributeInputFromProductType, ProductType } from "./data";
-  getAttributeInputFromProductType,
-  ProductAttributeValueChoices,
-  ProductType
-} from "./data";
 
 export function createAttributeChangeHandler(
   changeAttributeData: FormsetChange<string[]>,
-  setSelectedAttributes: (data: ProductAttributeValueChoices[]) => void,
-  selectedAttributes: ProductAttributeValueChoices[],
-  attributes: FormsetData<ProductAttributeInputData>,
   triggerChange: () => void
 ): FormsetChange {
   return (attributeId: string, value: string) => {
-    const attributeValue = attributes
-      .find(attribute => attribute.id === attributeId)
-      .data.values.find(attributeValue => attributeValue.slug === value);
-
-    const valueChoice = {
-      label: maybe(() => attributeValue.name, value),
-      value
-    };
-
-    const itemIndex = selectedAttributes.findIndex(
-      item => item.id === attributeId
-    );
-    const attribute = selectedAttributes[itemIndex];
-
-    setSelectedAttributes([
-      ...selectedAttributes.slice(0, itemIndex),
-      {
-        ...attribute,
-        values: [valueChoice]
-      },
-      ...selectedAttributes.slice(itemIndex + 1)
-    ]);
-
     triggerChange();
     changeAttributeData(attributeId, value === "" ? [] : [value]);
   };
@@ -48,8 +18,6 @@ export function createAttributeChangeHandler(
 
 export function createAttributeMultiChangeHandler(
   changeAttributeData: FormsetChange<string[]>,
-  setSelectedAttributes: (data: ProductAttributeValueChoices[]) => void,
-  selectedAttributes: ProductAttributeValueChoices[],
   attributes: FormsetData<ProductAttributeInputData>,
   triggerChange: () => void
 ): FormsetChange {
@@ -63,10 +31,13 @@ export function createAttributeMultiChangeHandler(
       value
     };
 
-    const itemIndex = selectedAttributes.findIndex(
+    const itemIndex = attributes.findIndex(item => item.id === attributeId);
-      item => item.id === attributeId
+    const attributeValues: MultiAutocompleteChoiceType[] = attributes[
-    );
+      itemIndex
-    const attributeValues = selectedAttributes[itemIndex].values;
+    ].data.values.map(value => ({
+      label: value.name,
+      value: value.id
+    }));
 
     const newAttributeValues = toggle(
       valueChoice,
@@ -74,16 +45,6 @@ export function createAttributeMultiChangeHandler(
       (a, b) => a.value === b.value
     );
 
-    const newSelectedAttributes = [
-      ...selectedAttributes.slice(0, itemIndex),
-      {
-        ...selectedAttributes[itemIndex],
-        values: newAttributeValues
-      },
-      ...selectedAttributes.slice(itemIndex + 1)
-    ];
-    setSelectedAttributes(newSelectedAttributes);
-
     triggerChange();
     changeAttributeData(
       attributeId,
@@ -95,7 +56,6 @@ export function createAttributeMultiChangeHandler(
 export function createProductTypeSelectHandler(
   change: FormChange,
   setAttributes: (data: FormsetData<ProductAttributeInputData>) => void,
-  setSelectedAttributes: (data: ProductAttributeValueChoices[]) => void,
   setProductType: (productType: ProductType) => void,
   productTypeChoiceList: ProductType[]
 ): FormChange {
@@ -108,12 +68,6 @@ export function createProductTypeSelectHandler(
     change(event);
 
     setAttributes(getAttributeInputFromProductType(selectedProductType));
-    setSelectedAttributes(
-      selectedProductType.productAttributes.map(attribute => ({
-        id: attribute.id,
-        values: []
-      }))
-    );
   };
 }