Use collection search hook

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -15,7 +15,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
-import { SearchCollections_search_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
+import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import Checkbox from "../Checkbox";
 import ConfirmButton, {
   ConfirmButtonTransitionState

src/discounts/views/SaleDetails.tsx

@@ -17,10 +17,10 @@ import usePaginator, {
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
+import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchCollections from "../../containers/SearchCollections";
 import SearchProducts from "../../containers/SearchProducts";
 import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
@@ -72,6 +72,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const {
+    search: searchCollections,
+    result: searchCollectionsOpts
+  } = useCollectionSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: SaleDetailsPageTab) => {
@@ -410,20 +416,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 })
                               }
                             />
-                            <SearchCollections
-                              variables={DEFAULT_INITIAL_SEARCH_DATA}
-                            >
-                              {({
-                                search: searchCollections,
-                                result: searchCollectionsOpts
-                              }) => (
                             <AssignCollectionDialog
                               collections={maybe(() =>
                                 searchCollectionsOpts.data.search.edges
                                   .map(edge => edge.node)
                                   .filter(
-                                        suggestedCategory =>
+                                    suggestedCategory => suggestedCategory.id
-                                          suggestedCategory.id
                                   )
                               )}
                               confirmButtonState={assignTransitionState}
@@ -445,8 +443,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 })
                               }
                             />
-                              )}
-                            </SearchCollections>
                             <ActionDialog
                               open={
                                 params.action === "unassign-category" &&

src/discounts/views/VoucherDetails.tsx

@@ -17,10 +17,10 @@ import usePaginator, {
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
+import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchCollections from "../../containers/SearchCollections";
 import SearchProducts from "../../containers/SearchProducts";
 import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
@@ -74,6 +74,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const {
+    search: searchCollections,
+    result: searchCollectionsOpts
+  } = useCollectionSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: VoucherDetailsPageTab) => {
@@ -453,20 +459,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 })
                               }
                             />
-                            <SearchCollections
-                              variables={DEFAULT_INITIAL_SEARCH_DATA}
-                            >
-                              {({
-                                search: searchCollections,
-                                result: searchCollectionsOpts
-                              }) => (
                             <AssignCollectionDialog
                               collections={maybe(() =>
                                 searchCollectionsOpts.data.search.edges
                                   .map(edge => edge.node)
                                   .filter(
-                                        suggestedCategory =>
+                                    suggestedCategory => suggestedCategory.id
-                                          suggestedCategory.id
                                   )
                               )}
                               confirmButtonState={assignTransitionState}
@@ -488,8 +486,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 })
                               }
                             />
-                              )}
-                            </SearchCollections>
                             <DiscountCountrySelectDialog
                               confirmButtonState={formTransitionState}
                               countries={maybe(() => shop.countries, [])}

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -14,13 +14,13 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
-import { SearchCollections_search_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
 import { SearchPages_search_edges_node } from "@saleor/containers/SearchPages/types/SearchPages";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages, sectionNames } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
+import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import { UserError } from "@saleor/types";
 import { getErrors, getFieldError } from "@saleor/utils/errors";
 import { getMenuItemByValue, IMenu } from "@saleor/utils/menu";

src/navigation/views/MenuDetails/index.tsx

@@ -6,10 +6,10 @@ import ActionDialog from "@saleor/components/ActionDialog";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
+import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import { categoryUrl } from "../../../categories/urls";
 import { collectionUrl } from "../../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
-import SearchCollections from "../../../containers/SearchCollections";
 import SearchPages from "../../../containers/SearchPages";
 import { getMutationState, maybe } from "../../../misc";
 import { pageUrl } from "../../../pages/urls";
@@ -62,6 +62,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
   const categorySearch = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const collectionSearch = useCollectionSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const closeModal = () =>
     navigate(
@@ -100,8 +103,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
   return (
     <SearchPages variables={DEFAULT_INITIAL_SEARCH_DATA}>
       {pageSearch => (
-        <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
-          {collectionSearch => (
         <MenuDetailsQuery displayLoader variables={{ id }}>
           {({ data, loading, refetch }) => {
             const handleQueryChange = (query: string) => {
@@ -112,9 +113,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
 
             const categories = maybe(
               () =>
-                    categorySearch.result.data.search.edges.map(
+                categorySearch.result.data.search.edges.map(edge => edge.node),
-                      edge => edge.node
-                    ),
               []
             );
 
@@ -127,16 +126,13 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
             );
 
             const pages = maybe(
-                  () =>
+              () => pageSearch.result.data.search.edges.map(edge => edge.node),
-                    pageSearch.result.data.search.edges.map(edge => edge.node),
               []
             );
 
             return (
               <MenuDeleteMutation
-                    onCompleted={data =>
+                onCompleted={data => handleDelete(data, navigate, notify, intl)}
-                      handleDelete(data, navigate, notify, intl)
-                    }
               >
                 {(menuDelete, menuDeleteOpts) => (
                   <MenuUpdateMutation
@@ -225,9 +221,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                             open={params.action === "remove"}
                             onClose={closeModal}
                             confirmButtonState={deleteState}
-                                onConfirm={() =>
+                            onConfirm={() => menuDelete({ variables: { id } })}
-                                  menuDelete({ variables: { id } })
-                                }
                             variant="delete"
                             title={intl.formatMessage({
                               defaultMessage: "Delete Menu",
@@ -252,12 +246,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
 
                           <MenuItemCreateMutation
                             onCompleted={data =>
-                                  handleItemCreate(
+                              handleItemCreate(data, notify, closeModal, intl)
-                                    data,
-                                    notify,
-                                    closeModal,
-                                    intl
-                                  )
                             }
                           >
                             {(menuItemCreate, menuItemCreateOpts) => {
@@ -265,10 +254,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                 data: MenuItemDialogFormData
                               ) => {
                                 const variables: MenuItemCreateVariables = {
-                                      input: getMenuItemCreateInputData(
+                                  input: getMenuItemCreateInputData(id, data)
-                                        id,
-                                        data
-                                      )
                                 };
 
                                 menuItemCreate({ variables });
@@ -311,13 +297,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                           </MenuItemCreateMutation>
                           <MenuItemUpdateMutation
                             onCompleted={data =>
-                                  handleItemUpdate(
+                              handleItemUpdate(data, id, navigate, notify, intl)
-                                    data,
-                                    id,
-                                    navigate,
-                                    notify,
-                                    intl
-                                  )
                             }
                           >
                             {(menuItemUpdate, menuItemUpdateOpts) => {
@@ -397,8 +377,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
           }}
         </MenuDetailsQuery>
       )}
-        </SearchCollections>
-      )}
     </SearchPages>
   );
 };

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 { SearchCollections_search_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
 import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/containers/SearchProductTypes/types/SearchProductTypes";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import useFormset from "@saleor/hooks/useFormset";
@@ -25,6 +24,7 @@ import {
   ProductType
 } 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 createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { FetchMoreProps, UserError } from "../../../types";

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -12,13 +12,13 @@ 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 { SearchCollections_search_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import useFormset from "@saleor/hooks/useFormset";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
+import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import { FetchMoreProps, ListActions, UserError } from "@saleor/types";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";

src/products/views/ProductCreate.tsx

@@ -7,8 +7,8 @@ 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 { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
-import SearchCollections from "../../containers/SearchCollections";
 import { decimal, getMutationState, maybe } from "../../misc";
 import ProductCreatePage, {
   ProductCreatePageSubmitData
@@ -33,16 +33,17 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const {
+    loadMore: loadMoreCollections,
+    search: searchCollection,
+    result: searchCollectionOpts
+  } = useCollectionSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const handleBack = () => navigate(productListUrl());
 
   return (
-    <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({
-        loadMore: loadMoreCollections,
-        search: searchCollection,
-        result: searchCollectionOpts
-      }) => (
     <SearchProductTypes variables={DEFAULT_INITIAL_SEARCH_DATA}>
       {({
         loadMore: loadMoreProductTypes,
@@ -77,9 +78,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
                 loading: productCreateDataLoading
               }
             ) => {
-                  const handleSubmit = (
+              const handleSubmit = (formData: ProductCreatePageSubmitData) => {
-                    formData: ProductCreatePageSubmitData
-                  ) => {
                 productCreate({
                   variables: {
                     attributes: formData.attributes.map(attribute => ({
@@ -157,8 +156,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
                     fetchMoreCategories={{
                       hasMore: maybe(
                         () =>
-                              searchCategoryOpts.data.search.pageInfo
+                          searchCategoryOpts.data.search.pageInfo.hasNextPage
-                                .hasNextPage
                       ),
                       loading: searchCategoryOpts.loading,
                       onFetchMore: loadMoreCategories
@@ -166,8 +164,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
                     fetchMoreCollections={{
                       hasMore: maybe(
                         () =>
-                              searchCollectionOpts.data.search.pageInfo
+                          searchCollectionOpts.data.search.pageInfo.hasNextPage
-                                .hasNextPage
                       ),
                       loading: searchCollectionOpts.loading,
                       onFetchMore: loadMoreCollections
@@ -189,8 +186,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
         );
       }}
     </SearchProductTypes>
-      )}
-    </SearchCollections>
   );
 };
 export default ProductUpdate;

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -15,8 +15,8 @@ import { commonMessages } from "@saleor/intl";
 import ProductVariantCreateDialog from "@saleor/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog";
 import { ProductVariantBulkCreate } from "@saleor/products/types/ProductVariantBulkCreate";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
+import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
-import SearchCollections from "../../../containers/SearchCollections";
 import { getMutationState, maybe } from "../../../misc";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
 import ProductUpdateOperations from "../../containers/ProductUpdateOperations";
@@ -62,6 +62,13 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const {
+    loadMore: loadMoreCollections,
+    search: searchCollections,
+    result: searchCollectionsOpts
+  } = useCollectionSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const openModal = (action: ProductUrlDialog) =>
     navigate(
@@ -71,12 +78,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     );
 
   return (
-    <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({
-        loadMore: loadMoreCollections,
-        search: searchCollections,
-        result: searchCollectionsOpts
-      }) => (
     <TypedProductDetailsQuery
       displayLoader
       require={["product"]}
@@ -196,18 +197,13 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                 updateProduct.opts.loading ||
                 loading;
               const formTransitionState = getMutationState(
-                    updateProduct.opts.called ||
+                updateProduct.opts.called || updateSimpleProduct.opts.called,
-                      updateSimpleProduct.opts.called,
+                updateProduct.opts.loading || updateSimpleProduct.opts.loading,
-                    updateProduct.opts.loading ||
-                      updateSimpleProduct.opts.loading,
                 maybe(() => updateProduct.opts.data.productUpdate.errors),
-                    maybe(
+                maybe(() => updateSimpleProduct.opts.data.productUpdate.errors),
-                      () => updateSimpleProduct.opts.data.productUpdate.errors
-                    ),
                 maybe(
                   () =>
-                        updateSimpleProduct.opts.data.productVariantUpdate
+                    updateSimpleProduct.opts.data.productVariantUpdate.errors
-                          .errors
                 )
               );
               const deleteTransitionState = getMutationState(
@@ -221,8 +217,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                 bulkProductVariantDelete.opts.loading,
                 maybe(
                   () =>
-                        bulkProductVariantDelete.opts.data
+                    bulkProductVariantDelete.opts.data.productVariantBulkDelete
-                          .productVariantBulkDelete.errors
+                      .errors
                 )
               );
 
@@ -269,9 +265,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                     onVariantAdd={handleVariantAdd}
                     onVariantsAdd={handleVariantCreatorOpen}
                     onVariantShow={variantId => () =>
-                          navigate(
+                      navigate(productVariantEditUrl(product.id, variantId))}
-                            productVariantEditUrl(product.id, variantId)
-                          )}
                     onImageUpload={handleImageUpload}
                     onImageEdit={handleImageEdit}
                     onImageDelete={handleImageDelete}
@@ -297,8 +291,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                     fetchMoreCategories={{
                       hasMore: maybe(
                         () =>
-                              searchCategoriesOpts.data.search.pageInfo
+                          searchCategoriesOpts.data.search.pageInfo.hasNextPage
-                                .hasNextPage
                       ),
                       loading: searchCategoriesOpts.loading,
                       onFetchMore: loadMoreCategories
@@ -306,8 +299,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                     fetchMoreCollections={{
                       hasMore: maybe(
                         () =>
-                              searchCollectionsOpts.data.search.pageInfo
+                          searchCollectionsOpts.data.search.pageInfo.hasNextPage
-                                .hasNextPage
                       ),
                       loading: searchCollectionsOpts.loading,
                       onFetchMore: loadMoreCollections
@@ -337,9 +329,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                   <ActionDialog
                     open={params.action === "remove-variants"}
                     onClose={() => navigate(productUrl(id), true)}
-                        confirmButtonState={
+                    confirmButtonState={bulkProductVariantDeleteTransitionState}
-                          bulkProductVariantDeleteTransitionState
-                        }
                     onConfirm={() =>
                       bulkProductVariantDelete.mutate({
                         ids: params.ids
@@ -358,9 +348,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                         values={{
                           counter: maybe(() => params.ids.length),
                           displayQuantity: (
-                                <strong>
+                            <strong>{maybe(() => params.ids.length)}</strong>
-                                  {maybe(() => params.ids.length)}
-                                </strong>
                           )
                         }}
                       />
@@ -404,8 +392,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         );
       }}
     </TypedProductDetailsQuery>
-      )}
-    </SearchCollections>
   );
 };
 export default ProductUpdate;

src/searches/useCollectionSearch.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 {
   SearchCollections,
   SearchCollectionsVariables
@@ -24,6 +24,7 @@ export const searchCollections = gql`
   }
 `;
 
-export default TopLevelSearch<SearchCollections, SearchCollectionsVariables>(
+export default makeTopLevelSearch<
-  searchCollections
+  SearchCollections,
-);
+  SearchCollectionsVariables
+>(searchCollections);