diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index 88377434d..b7ace4373 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/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 = ({ }; // Display values - const [selectedAttributes, setSelectedAttributes] = useStateFromProps< - ProductAttributeValueChoices[] - >([]); - const [selectedCategory, setSelectedCategory] = useStateFromProps( initial?.category || "" ); @@ -245,15 +240,10 @@ export const ProductCreatePage: React.FC = ({ ); 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 = ({ const handleProductTypeSelect = createProductTypeSelectHandler( change, setAttributeData, - setSelectedAttributes, setProductType, productTypeChoiceList ); diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index b79f8b1bf..a83cca3f4 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/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 = ({ 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 = ({ ); const handleAttributeChange = createAttributeChangeHandler( changeAttributeData, - setSelectedAttributes, - selectedAttributes, - attributes, triggerChange ); const handleAttributeMultiChange = createAttributeMultiChangeHandler( changeAttributeData, - setSelectedAttributes, - selectedAttributes, attributes, triggerChange ); diff --git a/src/products/utils/handlers.ts b/src/products/utils/handlers.ts index 39d3099a3..4571ec244 100644 --- a/src/products/utils/handlers.ts +++ b/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 { - getAttributeInputFromProductType, - ProductAttributeValueChoices, - ProductType -} from "./data"; +import { getAttributeInputFromProductType, ProductType } from "./data"; export function createAttributeChangeHandler( changeAttributeData: FormsetChange, - setSelectedAttributes: (data: ProductAttributeValueChoices[]) => void, - selectedAttributes: ProductAttributeValueChoices[], - attributes: FormsetData, 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, - setSelectedAttributes: (data: ProductAttributeValueChoices[]) => void, - selectedAttributes: ProductAttributeValueChoices[], attributes: FormsetData, triggerChange: () => void ): FormsetChange { @@ -63,10 +31,13 @@ export function createAttributeMultiChangeHandler( value }; - const itemIndex = selectedAttributes.findIndex( - item => item.id === attributeId - ); - const attributeValues = selectedAttributes[itemIndex].values; + const itemIndex = attributes.findIndex(item => item.id === attributeId); + const attributeValues: MultiAutocompleteChoiceType[] = attributes[ + itemIndex + ].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) => 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: [] - })) - ); }; }