Use category search hook

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -19,7 +19,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
-import { SearchCategories_search_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
+import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
 import Checkbox from "../Checkbox";
 
 export interface FormData {

src/discounts/views/SaleDetails.tsx

@@ -16,10 +16,10 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import useCategorySearch from "@saleor/searches/useCategorySearch";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchCategories from "../../containers/SearchCategories";
 import SearchCollections from "../../containers/SearchCollections";
 import SearchProducts from "../../containers/SearchProducts";
 import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
@@ -66,6 +66,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
     params.ids
   );
   const intl = useIntl();
+  const {
+    search: searchCategories,
+    result: searchCategoriesOpts
+  } = useCategorySearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: SaleDetailsPageTab) => {
@@ -377,20 +383,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 />
                               )}
                             </SearchProducts>
-                            <SearchCategories
-                              variables={DEFAULT_INITIAL_SEARCH_DATA}
-                            >
-                              {({
-                                search: searchCategories,
-                                result: searchCategoriesOpts
-                              }) => (
                             <AssignCategoriesDialog
                               categories={maybe(() =>
                                 searchCategoriesOpts.data.search.edges
                                   .map(edge => edge.node)
                                   .filter(
-                                        suggestedCategory =>
+                                    suggestedCategory => suggestedCategory.id
-                                          suggestedCategory.id
                                   )
                               )}
                               confirmButtonState={assignTransitionState}
@@ -412,8 +410,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                 })
                               }
                             />
-                              )}
-                            </SearchCategories>
                             <SearchCollections
                               variables={DEFAULT_INITIAL_SEARCH_DATA}
                             >

src/discounts/views/VoucherDetails.tsx

@@ -16,10 +16,10 @@ import usePaginator, {
 } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import useCategorySearch from "@saleor/searches/useCategorySearch";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchCategories from "../../containers/SearchCategories";
 import SearchCollections from "../../containers/SearchCollections";
 import SearchProducts from "../../containers/SearchProducts";
 import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
@@ -68,6 +68,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     params.ids
   );
   const intl = useIntl();
+  const {
+    search: searchCategories,
+    result: searchCategoriesOpts
+  } = useCategorySearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: VoucherDetailsPageTab) => {
@@ -420,20 +426,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               toggle={toggle}
                               toggleAll={toggleAll}
                             />
-                            <SearchCategories
-                              variables={DEFAULT_INITIAL_SEARCH_DATA}
-                            >
-                              {({
-                                search: searchCategories,
-                                result: searchCategoriesOpts
-                              }) => (
                             <AssignCategoriesDialog
                               categories={maybe(() =>
                                 searchCategoriesOpts.data.search.edges
                                   .map(edge => edge.node)
                                   .filter(
-                                        suggestedCategory =>
+                                    suggestedCategory => suggestedCategory.id
-                                          suggestedCategory.id
                                   )
                               )}
                               confirmButtonState={assignTransitionState}
@@ -455,8 +453,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 })
                               }
                             />
-                              )}
-                            </SearchCategories>
                             <SearchCollections
                               variables={DEFAULT_INITIAL_SEARCH_DATA}
                             >

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -14,13 +14,13 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
-import { SearchCategories_search_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
 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 { UserError } from "@saleor/types";
 import { getErrors, getFieldError } from "@saleor/utils/errors";
 import { getMenuItemByValue, IMenu } from "@saleor/utils/menu";

src/navigation/views/MenuDetails/index.tsx

@@ -5,10 +5,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 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 { categoryUrl } from "../../../categories/urls";
 import { collectionUrl } from "../../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
-import SearchCategories from "../../../containers/SearchCategories";
 import SearchCollections from "../../../containers/SearchCollections";
 import SearchPages from "../../../containers/SearchPages";
 import { getMutationState, maybe } from "../../../misc";
@@ -59,6 +59,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const categorySearch = useCategorySearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const closeModal = () =>
     navigate(
@@ -97,8 +100,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
   return (
     <SearchPages variables={DEFAULT_INITIAL_SEARCH_DATA}>
       {pageSearch => (
-        <SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
-          {categorySearch => (
         <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
           {collectionSearch => (
             <MenuDetailsQuery displayLoader variables={{ id }}>
@@ -127,9 +128,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
 
                 const pages = maybe(
                   () =>
-                        pageSearch.result.data.search.edges.map(
+                    pageSearch.result.data.search.edges.map(edge => edge.node),
-                          edge => edge.node
-                        ),
                   []
                 );
 
@@ -149,20 +148,14 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                           const deleteState = getMutationState(
                             menuDeleteOpts.called,
                             menuDeleteOpts.loading,
-                                maybe(
+                            maybe(() => menuDeleteOpts.data.menuDelete.errors)
-                                  () => menuDeleteOpts.data.menuDelete.errors
-                                )
                           );
 
                           const updateState = getMutationState(
                             menuUpdateOpts.called,
                             menuUpdateOpts.loading,
-                                maybe(
+                            maybe(() => menuUpdateOpts.data.menuUpdate.errors),
-                                  () => menuUpdateOpts.data.menuUpdate.errors
+                            maybe(() => menuUpdateOpts.data.menuItemMove.errors)
-                                ),
-                                maybe(
-                                  () => menuUpdateOpts.data.menuItemMove.errors
-                                )
                           );
 
                           // This is a workaround to let know <MenuDetailsPage />
@@ -182,10 +175,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                               });
                               if (result) {
                                 if (
-                                      result.data.menuItemBulkDelete.errors
+                                  result.data.menuItemBulkDelete.errors.length >
-                                        .length > 0 ||
-                                      result.data.menuItemMove.errors.length >
                                     0 ||
+                                  result.data.menuItemMove.errors.length > 0 ||
                                   result.data.menuUpdate.errors.length > 0
                                 ) {
                                   return false;
@@ -250,10 +242,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                     values={{
                                       menuName: (
                                         <strong>
-                                              {maybe(
+                                          {maybe(() => data.menu.name, "...")}
-                                                () => data.menu.name,
-                                                "..."
-                                              )}
                                         </strong>
                                       )
                                     }}
@@ -290,8 +279,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                     menuItemCreateOpts.loading,
                                     maybe(
                                       () =>
-                                            menuItemCreateOpts.data
+                                        menuItemCreateOpts.data.menuItemCreate
-                                              .menuItemCreate.errors
+                                          .errors
                                     )
                                   );
 
@@ -302,8 +291,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                       collections={collections}
                                       errors={maybe(
                                         () =>
-                                              menuItemCreateOpts.data
+                                          menuItemCreateOpts.data.menuItemCreate
-                                                .menuItemCreate.errors,
+                                            .errors,
                                         []
                                       )}
                                       pages={pages}
@@ -311,9 +300,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                         categorySearch.result.loading ||
                                         collectionSearch.result.loading
                                       }
-                                          confirmButtonState={
+                                      confirmButtonState={formTransitionState}
-                                            formTransitionState
-                                          }
                                       disabled={menuItemCreateOpts.loading}
                                       onClose={closeModal}
                                       onSubmit={handleSubmit}
@@ -357,8 +344,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                     menuItemUpdateOpts.loading,
                                     maybe(
                                       () =>
-                                            menuItemUpdateOpts.data
+                                        menuItemUpdateOpts.data.menuItemUpdate
-                                              .menuItemUpdate.errors
+                                          .errors
                                     )
                                   );
 
@@ -378,8 +365,8 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                       collections={collections}
                                       errors={maybe(
                                         () =>
-                                              menuItemUpdateOpts.data
+                                          menuItemUpdateOpts.data.menuItemUpdate
-                                                .menuItemUpdate.errors,
+                                            .errors,
                                         []
                                       )}
                                       pages={pages}
@@ -391,9 +378,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                                         categorySearch.result.loading ||
                                         collectionSearch.result.loading
                                       }
-                                          confirmButtonState={
+                                      confirmButtonState={formTransitionState}
-                                            formTransitionState
-                                          }
                                       disabled={menuItemUpdateOpts.loading}
                                       onClose={closeModal}
                                       onSubmit={handleSubmit}
@@ -414,8 +399,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
           )}
         </SearchCollections>
       )}
-        </SearchCategories>
-      )}
     </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 { SearchCategories_search_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
 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";
@@ -25,6 +24,7 @@ import {
   ProductAttributeValueChoices,
   ProductType
 } from "@saleor/products/utils/data";
+import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
 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 { SearchCategories_search_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
 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 { 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

@@ -6,8 +6,8 @@ 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 { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
-import SearchCategories from "../../containers/SearchCategories";
 import SearchCollections from "../../containers/SearchCollections";
 import { decimal, getMutationState, maybe } from "../../misc";
 import ProductCreatePage, {
@@ -26,16 +26,17 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
   const notify = useNotifier();
   const shop = useShop();
   const intl = useIntl();
+  const {
+    loadMore: loadMoreCategories,
+    search: searchCategory,
+    result: searchCategoryOpts
+  } = useCategorySearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const handleBack = () => navigate(productListUrl());
 
   return (
-    <SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({
-        loadMore: loadMoreCategories,
-        search: searchCategory,
-        result: searchCategoryOpts
-      }) => (
     <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
       {({
         loadMore: loadMoreCollections,
@@ -89,9 +90,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
                         category: formData.category,
                         chargeTaxes: formData.chargeTaxes,
                         collections: formData.collections,
-                            descriptionJson: JSON.stringify(
+                        descriptionJson: JSON.stringify(formData.description),
-                              formData.description
-                            ),
                         isPublished: formData.isPublished,
                         name: formData.name,
                         productType: formData.productType,
@@ -192,8 +191,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
         </SearchProductTypes>
       )}
     </SearchCollections>
-      )}
-    </SearchCategories>
   );
 };
 export default ProductUpdate;

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -14,8 +14,8 @@ import useShop from "@saleor/hooks/useShop";
 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 { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
-import SearchCategories from "../../../containers/SearchCategories";
 import SearchCollections from "../../../containers/SearchCollections";
 import { getMutationState, maybe } from "../../../misc";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
@@ -55,6 +55,13 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
   );
   const intl = useIntl();
   const shop = useShop();
+  const {
+    loadMore: loadMoreCategories,
+    search: searchCategories,
+    result: searchCategoriesOpts
+  } = useCategorySearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const openModal = (action: ProductUrlDialog) =>
     navigate(
@@ -64,12 +71,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     );
 
   return (
-    <SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({
-        loadMore: loadMoreCategories,
-        search: searchCategories,
-        result: searchCategoriesOpts
-      }) => (
     <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
       {({
         loadMore: loadMoreCollections,
@@ -108,8 +109,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
             const handleImageCreate = (data: ProductImageCreate) => {
               const imageError = data.productImageCreate.errors.find(
                 error =>
-                      error.field ===
+                  error.field === ("image" as keyof ProductImageCreateVariables)
-                      ("image" as keyof ProductImageCreateVariables)
               );
               if (imageError) {
                 notify({
@@ -121,8 +121,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
               notify({
                 text: intl.formatMessage(commonMessages.savedChanges)
               });
-                const handleVariantAdd = () =>
+            const handleVariantAdd = () => navigate(productVariantAddUrl(id));
-                  navigate(productVariantAddUrl(id));
 
             const handleBulkProductVariantCreate = (
               data: ProductVariantBulkCreate
@@ -201,12 +200,9 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                       updateSimpleProduct.opts.called,
                     updateProduct.opts.loading ||
                       updateSimpleProduct.opts.loading,
+                    maybe(() => updateProduct.opts.data.productUpdate.errors),
                     maybe(
-                          () => updateProduct.opts.data.productUpdate.errors
+                      () => updateSimpleProduct.opts.data.productUpdate.errors
-                        ),
-                        maybe(
-                          () =>
-                            updateSimpleProduct.opts.data.productUpdate.errors
                     ),
                     maybe(
                       () =>
@@ -217,9 +213,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
                   const deleteTransitionState = getMutationState(
                     deleteProduct.opts.called,
                     deleteProduct.opts.loading,
-                        maybe(
+                    maybe(() => deleteProduct.opts.data.productDelete.errors)
-                          () => deleteProduct.opts.data.productDelete.errors
-                        )
                   );
 
                   const bulkProductVariantDeleteTransitionState = getMutationState(
@@ -412,8 +406,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         </TypedProductDetailsQuery>
       )}
     </SearchCollections>
-      )}
-    </SearchCategories>
   );
 };
 export default ProductUpdate;

src/searches/useCategorySearch.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 {
   SearchCategories,
   SearchCategoriesVariables
@@ -24,6 +24,6 @@ export const searchCategories = gql`
   }
 `;
 
-export default TopLevelSearch<SearchCategories, SearchCategoriesVariables>(
+export default makeTopLevelSearch<SearchCategories, SearchCategoriesVariables>(
   searchCategories
 );