Use page search hook

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -14,13 +14,13 @@ import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
-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 { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
 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

@@ -7,10 +7,10 @@ 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 usePageSearch from "@saleor/searches/usePageSearch";
 import { categoryUrl } from "../../../categories/urls";
 import { collectionUrl } from "../../../collections/urls";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
-import SearchPages from "../../../containers/SearchPages";
 import { getMutationState, maybe } from "../../../misc";
 import { pageUrl } from "../../../pages/urls";
 import MenuDetailsPage, {
@@ -65,6 +65,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
   const collectionSearch = useCollectionSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
+  const pageSearch = usePageSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const closeModal = () =>
     navigate(
@@ -101,8 +104,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
   };
 
   return (
-    <SearchPages variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {pageSearch => (
     <MenuDetailsQuery displayLoader variables={{ id }}>
       {({ data, loading, refetch }) => {
         const handleQueryChange = (query: string) => {
@@ -112,16 +113,13 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
         };
 
         const categories = maybe(
-              () =>
+          () => categorySearch.result.data.search.edges.map(edge => edge.node),
-                categorySearch.result.data.search.edges.map(edge => edge.node),
           []
         );
 
         const collections = maybe(
           () =>
-                collectionSearch.result.data.search.edges.map(
+            collectionSearch.result.data.search.edges.map(edge => edge.node),
-                  edge => edge.node
-                ),
           []
         );
 
@@ -136,9 +134,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
           >
             {(menuDelete, menuDeleteOpts) => (
               <MenuUpdateMutation
-                    onCompleted={data =>
+                onCompleted={data => handleUpdate(data, notify, refetch, intl)}
-                      handleUpdate(data, notify, refetch, intl)
-                    }
               >
                 {(menuUpdate, menuUpdateOpts) => {
                   const deleteState = getMutationState(
@@ -157,9 +153,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                   // This is a workaround to let know <MenuDetailsPage />
                   // that it should clean operation stack if mutations
                   // were successful
-                      const handleSubmit = async (
+                  const handleSubmit = async (data: MenuDetailsSubmitData) => {
-                        data: MenuDetailsSubmitData
-                      ) => {
                     try {
                       const result = await menuUpdate({
                         variables: {
@@ -171,8 +165,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                       });
                       if (result) {
                         if (
-                              result.data.menuItemBulkDelete.errors.length >
+                          result.data.menuItemBulkDelete.errors.length > 0 ||
-                                0 ||
                           result.data.menuItemMove.errors.length > 0 ||
                           result.data.menuUpdate.errors.length > 0
                         ) {
@@ -265,8 +258,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                             menuItemCreateOpts.loading,
                             maybe(
                               () =>
-                                    menuItemCreateOpts.data.menuItemCreate
+                                menuItemCreateOpts.data.menuItemCreate.errors
-                                      .errors
                             )
                           );
 
@@ -277,8 +269,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                               collections={collections}
                               errors={maybe(
                                 () =>
-                                      menuItemCreateOpts.data.menuItemCreate
+                                  menuItemCreateOpts.data.menuItemCreate.errors,
-                                        .errors,
                                 []
                               )}
                               pages={pages}
@@ -324,8 +315,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                             menuItemUpdateOpts.loading,
                             maybe(
                               () =>
-                                    menuItemUpdateOpts.data.menuItemUpdate
+                                menuItemUpdateOpts.data.menuItemUpdate.errors
-                                      .errors
                             )
                           );
 
@@ -345,8 +335,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
                               collections={collections}
                               errors={maybe(
                                 () =>
-                                      menuItemUpdateOpts.data.menuItemUpdate
+                                  menuItemUpdateOpts.data.menuItemUpdate.errors,
-                                        .errors,
                                 []
                               )}
                               pages={pages}
@@ -376,8 +365,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
         );
       }}
     </MenuDetailsQuery>
-      )}
-    </SearchPages>
   );
 };
 MenuDetails.displayName = "MenuDetails";

src/searches/usePageSearch.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 { SearchPages, SearchPagesVariables } from "./types/SearchPages";
 
 export const searchPages = gql`
@@ -21,4 +21,6 @@ export const searchPages = gql`
   }
 `;
 
-export default TopLevelSearch<SearchPages, SearchPagesVariables>(searchPages);
+export default makeTopLevelSearch<SearchPages, SearchPagesVariables>(
+  searchPages
+);