From fff2a8caeaead86a935c91c9913f548ab7217cf1 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 19 Nov 2019 17:50:40 +0100
Subject: [PATCH] Use product search hook

---
 src/collections/views/CollectionDetails.tsx   | 45 ++++++-------
 .../AssignProductDialog.tsx                   |  2 +-
 src/discounts/views/SaleDetails.tsx           | 67 +++++++++----------
 src/discounts/views/VoucherDetails.tsx        | 67 +++++++++----------
 .../types/SearchProducts.ts                   |  0
 .../useProductSearch.ts}                      |  4 +-
 6 files changed, 89 insertions(+), 96 deletions(-)
 rename src/{containers/SearchProducts => searches}/types/SearchProducts.ts (100%)
 rename src/{containers/SearchProducts/index.tsx => searches/useProductSearch.ts} (80%)

diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx
index 6832343bb..0fe3b6da9 100644
--- a/src/collections/views/CollectionDetails.tsx
+++ b/src/collections/views/CollectionDetails.tsx
@@ -13,8 +13,8 @@ import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import { commonMessages } from "@saleor/intl";
+import useProductSearch from "@saleor/searches/useProductSearch";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchProducts from "../../containers/SearchProducts";
 import { getMutationState, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
 import { CollectionInput } from "../../types/globalTypes";
@@ -50,6 +50,9 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   );
   const paginate = usePaginator();
   const intl = useIntl();
+  const { search, result } = useProductSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const closeModal = () =>
     navigate(
@@ -284,29 +287,25 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                     toggle={toggle}
                     toggleAll={toggleAll}
                   />
-                  <SearchProducts variables={DEFAULT_INITIAL_SEARCH_DATA}>
-                    {({ search, result }) => (
-                      <AssignProductDialog
-                        confirmButtonState={assignTransitionState}
-                        open={params.action === "assign"}
-                        onFetch={search}
-                        loading={result.loading}
-                        onClose={closeModal}
-                        onSubmit={products =>
-                          assignProduct.mutate({
-                            ...paginationState,
-                            collectionId: id,
-                            productIds: products.map(product => product.id)
-                          })
-                        }
-                        products={maybe(() =>
-                          result.data.search.edges
-                            .map(edge => edge.node)
-                            .filter(suggestedProduct => suggestedProduct.id)
-                        )}
-                      />
+                  <AssignProductDialog
+                    confirmButtonState={assignTransitionState}
+                    open={params.action === "assign"}
+                    onFetch={search}
+                    loading={result.loading}
+                    onClose={closeModal}
+                    onSubmit={products =>
+                      assignProduct.mutate({
+                        ...paginationState,
+                        collectionId: id,
+                        productIds: products.map(product => product.id)
+                      })
+                    }
+                    products={maybe(() =>
+                      result.data.search.edges
+                        .map(edge => edge.node)
+                        .filter(suggestedProduct => suggestedProduct.id)
                     )}
-                  </SearchProducts>
+                  />
                   <ActionDialog
                     confirmButtonState={removeTransitionState}
                     onClose={closeModal}
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 4fcfeb626..82cff4fa8 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -21,7 +21,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
-import { SearchProducts_search_edges_node } from "../../containers/SearchProducts/types/SearchProducts";
+import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import Checkbox from "../Checkbox";
 
 export interface FormData {
diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx
index 40d302530..82e4c07ff 100644
--- a/src/discounts/views/SaleDetails.tsx
+++ b/src/discounts/views/SaleDetails.tsx
@@ -18,10 +18,10 @@ 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 useProductSearch from "@saleor/searches/useProductSearch";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchProducts from "../../containers/SearchProducts";
 import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
 import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
@@ -78,6 +78,12 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   } = useCollectionSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const {
+    search: searchProducts,
+    result: searchProductsOpts
+  } = useProductSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: SaleDetailsPageTab) => {
@@ -353,42 +359,33 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                               toggle={toggle}
                               toggleAll={toggleAll}
                             />
-                            <SearchProducts
-                              variables={DEFAULT_INITIAL_SEARCH_DATA}
-                            >
-                              {({
-                                search: searchProducts,
-                                result: searchProductsOpts
-                              }) => (
-                                <AssignProductDialog
-                                  confirmButtonState={assignTransitionState}
-                                  open={params.action === "assign-product"}
-                                  onFetch={searchProducts}
-                                  loading={searchProductsOpts.loading}
-                                  onClose={closeModal}
-                                  onSubmit={products =>
-                                    saleCataloguesAdd({
-                                      variables: {
-                                        ...paginationState,
-                                        id,
-                                        input: {
-                                          products: products.map(
-                                            product => product.id
-                                          )
-                                        }
-                                      }
-                                    })
-                                  }
-                                  products={maybe(() =>
-                                    searchProductsOpts.data.search.edges
-                                      .map(edge => edge.node)
-                                      .filter(
-                                        suggestedProduct => suggestedProduct.id
+                            <AssignProductDialog
+                              confirmButtonState={assignTransitionState}
+                              open={params.action === "assign-product"}
+                              onFetch={searchProducts}
+                              loading={searchProductsOpts.loading}
+                              onClose={closeModal}
+                              onSubmit={products =>
+                                saleCataloguesAdd({
+                                  variables: {
+                                    ...paginationState,
+                                    id,
+                                    input: {
+                                      products: products.map(
+                                        product => product.id
                                       )
-                                  )}
-                                />
+                                    }
+                                  }
+                                })
+                              }
+                              products={maybe(() =>
+                                searchProductsOpts.data.search.edges
+                                  .map(edge => edge.node)
+                                  .filter(
+                                    suggestedProduct => suggestedProduct.id
+                                  )
                               )}
-                            </SearchProducts>
+                            />
                             <AssignCategoriesDialog
                               categories={maybe(() =>
                                 searchCategoriesOpts.data.search.edges
diff --git a/src/discounts/views/VoucherDetails.tsx b/src/discounts/views/VoucherDetails.tsx
index bb37763e8..9d12ea3f0 100644
--- a/src/discounts/views/VoucherDetails.tsx
+++ b/src/discounts/views/VoucherDetails.tsx
@@ -18,10 +18,10 @@ 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 useProductSearch from "@saleor/searches/useProductSearch";
 import { categoryUrl } from "../../categories/urls";
 import { collectionUrl } from "../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA, PAGINATE_BY } from "../../config";
-import SearchProducts from "../../containers/SearchProducts";
 import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
 import { productUrl } from "../../products/urls";
 import {
@@ -80,6 +80,12 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   } = useCollectionSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const {
+    search: searchProducts,
+    result: searchProductsOpts
+  } = useProductSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const paginationState = createPaginationState(PAGINATE_BY, params);
   const changeTab = (tab: VoucherDetailsPageTab) => {
@@ -509,42 +515,33 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                 []
                               )}
                             />
-                            <SearchProducts
-                              variables={DEFAULT_INITIAL_SEARCH_DATA}
-                            >
-                              {({
-                                search: searchProducts,
-                                result: searchProductsOpts
-                              }) => (
-                                <AssignProductDialog
-                                  confirmButtonState={assignTransitionState}
-                                  open={params.action === "assign-product"}
-                                  onFetch={searchProducts}
-                                  loading={searchProductsOpts.loading}
-                                  onClose={closeModal}
-                                  onSubmit={products =>
-                                    voucherCataloguesAdd({
-                                      variables: {
-                                        ...paginationState,
-                                        id,
-                                        input: {
-                                          products: products.map(
-                                            product => product.id
-                                          )
-                                        }
-                                      }
-                                    })
-                                  }
-                                  products={maybe(() =>
-                                    searchProductsOpts.data.search.edges
-                                      .map(edge => edge.node)
-                                      .filter(
-                                        suggestedProduct => suggestedProduct.id
+                            <AssignProductDialog
+                              confirmButtonState={assignTransitionState}
+                              open={params.action === "assign-product"}
+                              onFetch={searchProducts}
+                              loading={searchProductsOpts.loading}
+                              onClose={closeModal}
+                              onSubmit={products =>
+                                voucherCataloguesAdd({
+                                  variables: {
+                                    ...paginationState,
+                                    id,
+                                    input: {
+                                      products: products.map(
+                                        product => product.id
                                       )
-                                  )}
-                                />
+                                    }
+                                  }
+                                })
+                              }
+                              products={maybe(() =>
+                                searchProductsOpts.data.search.edges
+                                  .map(edge => edge.node)
+                                  .filter(
+                                    suggestedProduct => suggestedProduct.id
+                                  )
                               )}
-                            </SearchProducts>
+                            />
                             <ActionDialog
                               open={
                                 params.action === "unassign-category" &&
diff --git a/src/containers/SearchProducts/types/SearchProducts.ts b/src/searches/types/SearchProducts.ts
similarity index 100%
rename from src/containers/SearchProducts/types/SearchProducts.ts
rename to src/searches/types/SearchProducts.ts
diff --git a/src/containers/SearchProducts/index.tsx b/src/searches/useProductSearch.ts
similarity index 80%
rename from src/containers/SearchProducts/index.tsx
rename to src/searches/useProductSearch.ts
index ce86cb09b..1e2ae7fcd 100644
--- a/src/containers/SearchProducts/index.tsx
+++ b/src/searches/useProductSearch.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 {
   SearchProducts,
   SearchProductsVariables
@@ -27,6 +27,6 @@ export const searchProducts = gql`
   }
 `;
 
-export default TopLevelSearch<SearchProducts, SearchProductsVariables>(
+export default makeTopLevelSearch<SearchProducts, SearchProductsVariables>(
   searchProducts
 );