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,16 +40,16 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
   } = useCollectionSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-
-  const handleBack = () => navigate(productListUrl());
-
-  return (
-    <SearchProductTypes 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({
@@ -103,9 +103,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
               },
               sku: formData.sku,
               stockQuantity:
-                      formData.stockQuantity !== null
-                        ? formData.stockQuantity
-                        : 0
+                formData.stockQuantity !== null ? formData.stockQuantity : 0
             }
           });
         };
@@ -134,10 +132,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
                 []
               ).map(edge => edge.node)}
               disabled={productCreateDataLoading}
-                    errors={maybe(
-                      () => productCreateData.productCreate.errors,
-                      []
-                    )}
+              errors={maybe(() => productCreateData.productCreate.errors, [])}
               fetchCategories={searchCategory}
               fetchCollections={searchCollection}
               fetchProductTypes={searchProductTypes}
@@ -146,34 +141,28 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
                 description: "page header"
               })}
               productTypes={maybe(() =>
-                      searchProductTypesOpts.data.search.edges.map(
-                        edge => edge.node
-                      )
+                searchProductTypesOpts.data.search.edges.map(edge => edge.node)
               )}
               onBack={handleBack}
               onSubmit={handleSubmit}
               saveButtonBarState={formTransitionState}
               fetchMoreCategories={{
                 hasMore: maybe(
-                        () =>
-                          searchCategoryOpts.data.search.pageInfo.hasNextPage
+                  () => searchCategoryOpts.data.search.pageInfo.hasNextPage
                 ),
                 loading: searchCategoryOpts.loading,
                 onFetchMore: loadMoreCategories
               }}
               fetchMoreCollections={{
                 hasMore: maybe(
-                        () =>
-                          searchCollectionOpts.data.search.pageInfo.hasNextPage
+                  () => searchCollectionOpts.data.search.pageInfo.hasNextPage
                 ),
                 loading: searchCollectionOpts.loading,
                 onFetchMore: loadMoreCollections
               }}
               fetchMoreProductTypes={{
                 hasMore: maybe(
-                        () =>
-                          searchProductTypesOpts.data.search.pageInfo
-                            .hasNextPage
+                  () => searchProductTypesOpts.data.search.pageInfo.hasNextPage
                 ),
                 loading: searchProductTypesOpts.loading,
                 onFetchMore: loadMoreProductTypes
@@ -184,8 +173,5 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
       }}
     </TypedProductCreateMutation>
   );
-      }}
-    </SearchProductTypes>
-  );
 };
 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>(
-  searchProductTypes
-);
+export default makeTopLevelSearch<
+  SearchProductTypes,
+  SearchProductTypesVariables
+>(searchProductTypes);