Use product type search hook

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";

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";

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";

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<ProductUpdateProps> = () => {
   } = 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 (
-    <SearchProductTypes variables={DEFAULT_INITIAL_SEARCH_DATA}>
+    <TypedProductCreateMutation onCompleted={handleSuccess}>
-      {({
+      {(
-        loadMore: loadMoreProductTypes,
+        productCreate,
-        search: searchProductTypes,
+        {
-        result: searchProductTypesOpts
+          called: productCreateCalled,
-      }) => {
+          data: productCreateData,
-        const handleSuccess = (data: ProductCreate) => {
+          loading: productCreateDataLoading
-          if (data.productCreate.errors.length === 0) {
+        }
-            notify({
+      ) => {
-              text: intl.formatMessage({
+        const handleSubmit = (formData: ProductCreatePageSubmitData) => {
-                defaultMessage: "Product created"
+          productCreate({
-              })
+            variables: {
-            });
+              attributes: formData.attributes.map(attribute => ({
-            navigate(productUrl(data.productCreate.product.id));
+                id: attribute.id,
-          } else {
+                values: attribute.value
-            const attributeError = data.productCreate.errors.find(
+              })),
-              err => err.field === "attributes"
+              basePrice: decimal(formData.basePrice),
-            );
+              category: formData.category,
-            if (!!attributeError) {
+              chargeTaxes: formData.chargeTaxes,
-              notify({ text: attributeError.message });
+              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 (
-          <TypedProductCreateMutation onCompleted={handleSuccess}>
+          <>
-            {(
+            <WindowTitle
-              productCreate,
+              title={intl.formatMessage({
-              {
+                defaultMessage: "Create Product",
-                called: productCreateCalled,
+                description: "window title"
-                data: productCreateData,
+              })}
-                loading: productCreateDataLoading
+            />
-              }
+            <ProductCreatePage
-            ) => {
+              currency={maybe(() => shop.defaultCurrency)}
-              const handleSubmit = (formData: ProductCreatePageSubmitData) => {
+              categories={maybe(
-                productCreate({
+                () => searchCategoryOpts.data.search.edges,
-                  variables: {
+                []
-                    attributes: formData.attributes.map(attribute => ({
+              ).map(edge => edge.node)}
-                      id: attribute.id,
+              collections={maybe(
-                      values: attribute.value
+                () => searchCollectionOpts.data.search.edges,
-                    })),
+                []
-                    basePrice: decimal(formData.basePrice),
+              ).map(edge => edge.node)}
-                    category: formData.category,
+              disabled={productCreateDataLoading}
-                    chargeTaxes: formData.chargeTaxes,
+              errors={maybe(() => productCreateData.productCreate.errors, [])}
-                    collections: formData.collections,
+              fetchCategories={searchCategory}
-                    descriptionJson: JSON.stringify(formData.description),
+              fetchCollections={searchCollection}
-                    isPublished: formData.isPublished,
+              fetchProductTypes={searchProductTypes}
-                    name: formData.name,
+              header={intl.formatMessage({
-                    productType: formData.productType,
+                defaultMessage: "New Product",
-                    publicationDate:
+                description: "page header"
-                      formData.publicationDate !== ""
+              })}
-                        ? formData.publicationDate
+              productTypes={maybe(() =>
-                        : null,
+                searchProductTypesOpts.data.search.edges.map(edge => edge.node)
-                    seo: {
+              )}
-                      description: formData.seoDescription,
+              onBack={handleBack}
-                      title: formData.seoTitle
+              onSubmit={handleSubmit}
-                    },
+              saveButtonBarState={formTransitionState}
-                    sku: formData.sku,
+              fetchMoreCategories={{
-                    stockQuantity:
+                hasMore: maybe(
-                      formData.stockQuantity !== null
+                  () => searchCategoryOpts.data.search.pageInfo.hasNextPage
-                        ? formData.stockQuantity
+                ),
-                        : 0
+                loading: searchCategoryOpts.loading,
-                  }
+                onFetchMore: loadMoreCategories
-                });
+              }}
-              };
+              fetchMoreCollections={{
-
+                hasMore: maybe(
-              const formTransitionState = getMutationState(
+                  () => searchCollectionOpts.data.search.pageInfo.hasNextPage
-                productCreateCalled,
+                ),
-                productCreateDataLoading,
+                loading: searchCollectionOpts.loading,
-                maybe(() => productCreateData.productCreate.errors)
+                onFetchMore: loadMoreCollections
-              );
+              }}
-              return (
+              fetchMoreProductTypes={{
-                <>
+                hasMore: maybe(
-                  <WindowTitle
+                  () => searchProductTypesOpts.data.search.pageInfo.hasNextPage
-                    title={intl.formatMessage({
+                ),
-                      defaultMessage: "Create Product",
+                loading: searchProductTypesOpts.loading,
-                      description: "window title"
+                onFetchMore: loadMoreProductTypes
-                    })}
+              }}
-                  />
+            />
-                  <ProductCreatePage
+          </>
-                    currency={maybe(() => 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
-                    }}
-                  />
-                </>
-              );
-            }}
-          </TypedProductCreateMutation>
         );
       }}
-    </SearchProductTypes>
+    </TypedProductCreateMutation>
   );
 };
 export default ProductUpdate;

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 {

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, SearchProductTypesVariables>(
+export default makeTopLevelSearch<
-  searchProductTypes
+  SearchProductTypes,
-);
+  SearchProductTypesVariables
+>(searchProductTypes);