diff --git a/src/productTypes/fixtures.ts b/src/productTypes/fixtures.ts index 17ef73a82..ffd35d801 100644 --- a/src/productTypes/fixtures.ts +++ b/src/productTypes/fixtures.ts @@ -1,7 +1,7 @@ import { SearchProductTypes_search_edges_node, SearchProductTypes_search_edges_node_productAttributes -} from "@saleor/containers/SearchProductTypes/types/SearchProductTypes"; +} from "@saleor/searches/types/SearchProductTypes"; import { AttributeInputTypeEnum } from "../types/globalTypes"; import { ProductTypeDetails_productType } from "./types/ProductTypeDetails"; import { ProductTypeList_productTypes_edges_node } from "./types/ProductTypeList"; diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index be5bd60a2..af5293613 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -13,7 +13,6 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import SeoForm from "@saleor/components/SeoForm"; import VisibilityCard from "@saleor/components/VisibilityCard"; -import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/containers/SearchProductTypes/types/SearchProductTypes"; import useDateLocalize from "@saleor/hooks/useDateLocalize"; import useFormset from "@saleor/hooks/useFormset"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; @@ -25,6 +24,7 @@ import { } from "@saleor/products/utils/data"; import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories"; import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections"; +import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/searches/types/SearchProductTypes"; import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import { FetchMoreProps, UserError } from "../../../types"; diff --git a/src/products/utils/data.ts b/src/products/utils/data.ts index 4c3a2eec6..fd4abe9cf 100644 --- a/src/products/utils/data.ts +++ b/src/products/utils/data.ts @@ -2,13 +2,13 @@ import { RawDraftContentState } from "draft-js"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField"; -import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/containers/SearchProductTypes/types/SearchProductTypes"; import { maybe } from "@saleor/misc"; import { ProductDetails_product, ProductDetails_product_collections, ProductDetails_product_variants } from "@saleor/products/types/ProductDetails"; +import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/searches/types/SearchProductTypes"; import { ProductAttributeInput } from "../components/ProductAttributes"; import { VariantAttributeInput } from "../components/ProductVariantAttributes"; import { ProductVariant } from "../types/ProductVariant"; diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index 7c4dafa80..aec0d7120 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -2,12 +2,12 @@ import React from "react"; import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; -import SearchProductTypes from "@saleor/containers/SearchProductTypes"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch"; +import useProductTypeSearch from "@saleor/searches/useProductTypeSearch"; import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config"; import { decimal, getMutationState, maybe } from "../../misc"; import ProductCreatePage, { @@ -40,152 +40,138 @@ export const ProductUpdate: React.FC = () => { } = useCollectionSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA }); + const { + loadMore: loadMoreProductTypes, + search: searchProductTypes, + result: searchProductTypesOpts + } = useProductTypeSearch({ + variables: DEFAULT_INITIAL_SEARCH_DATA + }); const handleBack = () => navigate(productListUrl()); + const handleSuccess = (data: ProductCreate) => { + if (data.productCreate.errors.length === 0) { + notify({ + text: intl.formatMessage({ + defaultMessage: "Product created" + }) + }); + navigate(productUrl(data.productCreate.product.id)); + } else { + const attributeError = data.productCreate.errors.find( + err => err.field === "attributes" + ); + if (!!attributeError) { + notify({ text: attributeError.message }); + } + } + }; + return ( - - {({ - loadMore: loadMoreProductTypes, - search: searchProductTypes, - result: searchProductTypesOpts - }) => { - const handleSuccess = (data: ProductCreate) => { - if (data.productCreate.errors.length === 0) { - notify({ - text: intl.formatMessage({ - defaultMessage: "Product created" - }) - }); - navigate(productUrl(data.productCreate.product.id)); - } else { - const attributeError = data.productCreate.errors.find( - err => err.field === "attributes" - ); - if (!!attributeError) { - notify({ text: attributeError.message }); + + {( + productCreate, + { + called: productCreateCalled, + data: productCreateData, + loading: productCreateDataLoading + } + ) => { + const handleSubmit = (formData: ProductCreatePageSubmitData) => { + productCreate({ + variables: { + attributes: formData.attributes.map(attribute => ({ + id: attribute.id, + values: attribute.value + })), + basePrice: decimal(formData.basePrice), + category: formData.category, + chargeTaxes: formData.chargeTaxes, + collections: formData.collections, + descriptionJson: JSON.stringify(formData.description), + isPublished: formData.isPublished, + name: formData.name, + productType: formData.productType, + publicationDate: + formData.publicationDate !== "" + ? formData.publicationDate + : null, + seo: { + description: formData.seoDescription, + title: formData.seoTitle + }, + sku: formData.sku, + stockQuantity: + formData.stockQuantity !== null ? formData.stockQuantity : 0 } - } + }); }; + const formTransitionState = getMutationState( + productCreateCalled, + productCreateDataLoading, + maybe(() => productCreateData.productCreate.errors) + ); return ( - - {( - productCreate, - { - called: productCreateCalled, - data: productCreateData, - loading: productCreateDataLoading - } - ) => { - const handleSubmit = (formData: ProductCreatePageSubmitData) => { - productCreate({ - variables: { - attributes: formData.attributes.map(attribute => ({ - id: attribute.id, - values: attribute.value - })), - basePrice: decimal(formData.basePrice), - category: formData.category, - chargeTaxes: formData.chargeTaxes, - collections: formData.collections, - descriptionJson: JSON.stringify(formData.description), - isPublished: formData.isPublished, - name: formData.name, - productType: formData.productType, - publicationDate: - formData.publicationDate !== "" - ? formData.publicationDate - : null, - seo: { - description: formData.seoDescription, - title: formData.seoTitle - }, - sku: formData.sku, - stockQuantity: - formData.stockQuantity !== null - ? formData.stockQuantity - : 0 - } - }); - }; - - const formTransitionState = getMutationState( - productCreateCalled, - productCreateDataLoading, - maybe(() => productCreateData.productCreate.errors) - ); - return ( - <> - - shop.defaultCurrency)} - categories={maybe( - () => searchCategoryOpts.data.search.edges, - [] - ).map(edge => edge.node)} - collections={maybe( - () => searchCollectionOpts.data.search.edges, - [] - ).map(edge => edge.node)} - disabled={productCreateDataLoading} - errors={maybe( - () => productCreateData.productCreate.errors, - [] - )} - fetchCategories={searchCategory} - fetchCollections={searchCollection} - fetchProductTypes={searchProductTypes} - header={intl.formatMessage({ - defaultMessage: "New Product", - description: "page header" - })} - productTypes={maybe(() => - searchProductTypesOpts.data.search.edges.map( - edge => edge.node - ) - )} - onBack={handleBack} - onSubmit={handleSubmit} - saveButtonBarState={formTransitionState} - fetchMoreCategories={{ - hasMore: maybe( - () => - searchCategoryOpts.data.search.pageInfo.hasNextPage - ), - loading: searchCategoryOpts.loading, - onFetchMore: loadMoreCategories - }} - fetchMoreCollections={{ - hasMore: maybe( - () => - searchCollectionOpts.data.search.pageInfo.hasNextPage - ), - loading: searchCollectionOpts.loading, - onFetchMore: loadMoreCollections - }} - fetchMoreProductTypes={{ - hasMore: maybe( - () => - searchProductTypesOpts.data.search.pageInfo - .hasNextPage - ), - loading: searchProductTypesOpts.loading, - onFetchMore: loadMoreProductTypes - }} - /> - - ); - }} - + <> + + shop.defaultCurrency)} + categories={maybe( + () => searchCategoryOpts.data.search.edges, + [] + ).map(edge => edge.node)} + collections={maybe( + () => searchCollectionOpts.data.search.edges, + [] + ).map(edge => edge.node)} + disabled={productCreateDataLoading} + errors={maybe(() => productCreateData.productCreate.errors, [])} + fetchCategories={searchCategory} + fetchCollections={searchCollection} + fetchProductTypes={searchProductTypes} + header={intl.formatMessage({ + defaultMessage: "New Product", + description: "page header" + })} + productTypes={maybe(() => + searchProductTypesOpts.data.search.edges.map(edge => edge.node) + )} + onBack={handleBack} + onSubmit={handleSubmit} + saveButtonBarState={formTransitionState} + fetchMoreCategories={{ + hasMore: maybe( + () => searchCategoryOpts.data.search.pageInfo.hasNextPage + ), + loading: searchCategoryOpts.loading, + onFetchMore: loadMoreCategories + }} + fetchMoreCollections={{ + hasMore: maybe( + () => searchCollectionOpts.data.search.pageInfo.hasNextPage + ), + loading: searchCollectionOpts.loading, + onFetchMore: loadMoreCollections + }} + fetchMoreProductTypes={{ + hasMore: maybe( + () => searchProductTypesOpts.data.search.pageInfo.hasNextPage + ), + loading: searchProductTypesOpts.loading, + onFetchMore: loadMoreProductTypes + }} + /> + ); }} - + ); }; export default ProductUpdate; diff --git a/src/containers/SearchProductTypes/types/SearchProductTypes.ts b/src/searches/types/SearchProductTypes.ts similarity index 84% rename from src/containers/SearchProductTypes/types/SearchProductTypes.ts rename to src/searches/types/SearchProductTypes.ts index 2aaf2fe5e..300ebc329 100644 --- a/src/containers/SearchProductTypes/types/SearchProductTypes.ts +++ b/src/searches/types/SearchProductTypes.ts @@ -2,7 +2,7 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { AttributeInputTypeEnum } from "./../../../types/globalTypes"; +import { AttributeInputTypeEnum } from "./../../types/globalTypes"; // ==================================================== // GraphQL query operation: SearchProductTypes @@ -22,7 +22,9 @@ export interface SearchProductTypes_search_edges_node_productAttributes { slug: string | null; name: string | null; valueRequired: boolean; - values: (SearchProductTypes_search_edges_node_productAttributes_values | null)[] | null; + values: + | (SearchProductTypes_search_edges_node_productAttributes_values | null)[] + | null; } export interface SearchProductTypes_search_edges_node { @@ -30,7 +32,9 @@ export interface SearchProductTypes_search_edges_node { id: string; name: string; hasVariants: boolean; - productAttributes: (SearchProductTypes_search_edges_node_productAttributes | null)[] | null; + productAttributes: + | (SearchProductTypes_search_edges_node_productAttributes | null)[] + | null; } export interface SearchProductTypes_search_edges { diff --git a/src/containers/SearchProductTypes/index.tsx b/src/searches/useProductTypeSearch.ts similarity index 82% rename from src/containers/SearchProductTypes/index.tsx rename to src/searches/useProductTypeSearch.ts index 6adf1ef5a..60517f670 100644 --- a/src/containers/SearchProductTypes/index.tsx +++ b/src/searches/useProductTypeSearch.ts @@ -1,7 +1,7 @@ import gql from "graphql-tag"; +import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch"; import { pageInfoFragment } from "@saleor/queries"; -import TopLevelSearch from "../TopLevelSearch"; import { SearchProductTypes, SearchProductTypesVariables @@ -41,6 +41,7 @@ export const searchProductTypes = gql` } `; -export default TopLevelSearch( - searchProductTypes -); +export default makeTopLevelSearch< + SearchProductTypes, + SearchProductTypesVariables +>(searchProductTypes);