Use customer search hook

src/orders/components/OrderCustomer/OrderCustomer.tsx

@@ -16,10 +16,10 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete
 import Skeleton from "@saleor/components/Skeleton";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
+import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers";
 import { FetchMoreProps, UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { SearchCustomers_search_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers";
 import { customerUrl } from "../../../customers/urls";
 import { createHref, maybe } from "../../../misc";
 import { OrderDetails_order } from "../../types/OrderDetails";

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -13,8 +13,8 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
+import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers";
 import { FetchMoreProps, UserPermissionProps } from "@saleor/types";
-import { SearchCustomers_search_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers";
 import { maybe } from "../../../misc";
 import { DraftOrderInput } from "../../../types/globalTypes";
 import { OrderDetails_order } from "../../types/OrderDetails";

src/orders/fixtures.ts

@@ -1,5 +1,5 @@
+import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers";
 import { MessageDescriptor } from "react-intl";
-import { SearchCustomers_search_edges_node } from "../containers/SearchCustomers/types/SearchCustomers";
 import { transformOrderStatus, transformPaymentStatus } from "../misc";
 import {
   FulfillmentStatus,

src/orders/views/OrderDetails/index.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useUser from "@saleor/hooks/useUser";
+import useCustomerSearch from "@saleor/searches/useCustomerSearch";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
-import SearchCustomers from "../../../containers/SearchCustomers";
 import { customerUrl } from "../../../customers/urls";
 import { getMutationState, maybe, transformAddressToForm } from "../../../misc";
 import { productUrl } from "../../../products/urls";
@@ -74,6 +74,13 @@ interface OrderDetailsProps {
 export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
   const navigate = useNavigator();
   const { user } = useUser();
+  const {
+    loadMore: loadMoreCustomers,
+    search: searchUsers,
+    result: users
+  } = useCustomerSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   return (
     <TypedOrderDetailsQuery
@@ -91,12 +98,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
             })
           );
         return (
-          <SearchCustomers variables={DEFAULT_INITIAL_SEARCH_DATA}>
-            {({
-              loadMore: loadMoreCustomers,
-              search: searchUsers,
-              result: users
-            }) => (
           <OrderDetailsMessages>
             {orderMessages => (
               <OrderOperations
@@ -151,8 +152,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                     orderDraftFinalize.opts.loading,
                     maybe(
                       () =>
-                            orderDraftFinalize.opts.data.draftOrderComplete
+                        orderDraftFinalize.opts.data.draftOrderComplete.errors
-                              .errors
                     )
                   );
                   return (
@@ -160,9 +160,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                       {maybe(() => order.status !== OrderStatus.DRAFT) ? (
                         <>
                           <WindowTitle
-                                title={maybe(
+                            title={maybe(() => "Order #" + data.order.number)}
-                                  () => "Order #" + data.order.number
-                                )}
                           />
                           <OrderDetailsPage
                             onNoteAdd={variables =>
@@ -177,10 +175,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                               () => data.order.availableShippingMethods,
                               []
                             )}
-                                userPermissions={maybe(
+                            userPermissions={maybe(() => user.permissions, [])}
-                                  () => user.permissions,
-                                  []
-                                )}
                             onOrderCancel={() => openModal("cancel")}
                             onOrderFulfill={() => openModal("fulfill")}
                             onFulfillmentCancel={fulfillmentId =>
@@ -220,8 +215,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                               orderCancel.opts.called,
                               orderCancel.opts.loading,
                               maybe(
-                                    () =>
+                                () => orderCancel.opts.data.orderCancel.errors
-                                      orderCancel.opts.data.orderCancel.errors
                               )
                             )}
                             number={maybe(() => order.number)}
@@ -256,9 +250,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             confirmButtonState={getMutationState(
                               orderVoid.opts.called,
                               orderVoid.opts.loading,
-                                  maybe(
+                              maybe(() => orderVoid.opts.data.orderVoid.errors)
-                                    () => orderVoid.opts.data.orderVoid.errors
-                                  )
                             )}
                             open={params.action === "void"}
                             onClose={closeModal}
@@ -328,8 +320,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                                   lines: maybe(() => order.lines, [])
                                     .filter(
                                       line =>
-                                            line.quantityFulfilled <
+                                        line.quantityFulfilled < line.quantity
-                                            line.quantity
                                     )
                                     .map((line, lineIndex) => ({
                                       orderLineId: line.id,
@@ -374,8 +365,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             trackingNumber={maybe(
                               () =>
                                 data.order.fulfillments.find(
-                                      fulfillment =>
+                                  fulfillment => fulfillment.id === params.id
-                                        fulfillment.id === params.id
                                 ).trackingNumber
                             )}
                             onConfirm={variables =>
@@ -407,9 +397,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             }
                             users={maybe(
                               () =>
-                                    users.data.search.edges.map(
+                                users.data.search.edges.map(edge => edge.node),
-                                      edge => edge.node
-                                    ),
                               []
                             )}
                             hasMore={maybe(
@@ -428,18 +416,15 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             }
                             onDraftFinalize={() => openModal("finalize")}
                             onDraftRemove={() => openModal("cancel")}
-                                onOrderLineAdd={() =>
+                            onOrderLineAdd={() => openModal("add-order-line")}
-                                  openModal("add-order-line")
-                                }
                             onBack={() => navigate(orderListUrl())}
                             order={order}
-                                countries={maybe(
+                            countries={maybe(() => data.shop.countries, []).map(
-                                  () => data.shop.countries,
+                              country => ({
-                                  []
-                                ).map(country => ({
                                 code: country.code,
                                 label: country.country
-                                }))}
+                              })
+                            )}
                             onProductClick={id => () =>
                               navigate(productUrl(encodeURIComponent(id)))}
                             onBillingAddressEdit={() =>
@@ -464,10 +449,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             onProfileView={() =>
                               navigate(customerUrl(order.user.id))
                             }
-                                userPermissions={maybe(
+                            userPermissions={maybe(() => user.permissions, [])}
-                                  () => user.permissions,
-                                  []
-                                )}
                           />
                           <OrderDraftCancelDialog
                             confirmButtonState={getMutationState(
@@ -475,23 +457,19 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                               orderDraftCancel.opts.loading,
                               maybe(
                                 () =>
-                                      orderDraftCancel.opts.data
+                                  orderDraftCancel.opts.data.draftOrderDelete
-                                        .draftOrderDelete.errors
+                                    .errors
                               )
                             )}
                             onClose={closeModal}
-                                onConfirm={() =>
+                            onConfirm={() => orderDraftCancel.mutate({ id })}
-                                  orderDraftCancel.mutate({ id })
-                                }
                             open={params.action === "cancel"}
                             orderNumber={maybe(() => order.number)}
                           />
                           <OrderDraftFinalizeDialog
                             confirmButtonState={finalizeTransitionState}
                             onClose={closeModal}
-                                onConfirm={() =>
+                            onConfirm={() => orderDraftFinalize.mutate({ id })}
-                                  orderDraftFinalize.mutate({ id })
-                                }
                             open={params.action === "finalize"}
                             orderNumber={maybe(() => order.number)}
                             warnings={orderDraftFinalizeWarnings(order)}
@@ -575,9 +553,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                         confirmButtonState={getMutationState(
                           orderUpdate.opts.called,
                           orderUpdate.opts.loading,
-                              maybe(
+                          maybe(() => orderUpdate.opts.data.orderUpdate.errors)
-                                () => orderUpdate.opts.data.orderUpdate.errors
-                              )
                         )}
                         address={transformAddressToForm(
                           maybe(() => order.shippingAddress)
@@ -608,9 +584,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                         confirmButtonState={getMutationState(
                           orderUpdate.opts.called,
                           orderUpdate.opts.loading,
-                              maybe(
+                          maybe(() => orderUpdate.opts.data.orderUpdate.errors)
-                                () => orderUpdate.opts.data.orderUpdate.errors
-                              )
                         )}
                         address={transformAddressToForm(
                           maybe(() => order.billingAddress)
@@ -643,8 +617,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
               </OrderOperations>
             )}
           </OrderDetailsMessages>
-            )}
-          </SearchCustomers>
         );
       }}
     </TypedOrderDetailsQuery>

src/searches/useCustomerSearch.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 {
   SearchCustomers,
   SearchCustomersVariables
@@ -24,6 +24,6 @@ export const searchCustomers = gql`
   }
 `;
 
-export default TopLevelSearch<SearchCustomers, SearchCustomersVariables>(
+export default makeTopLevelSearch<SearchCustomers, SearchCustomersVariables>(
   searchCustomers
 );