From bd7130d1968503433228b2ea74bfcb10be01fbc8 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 19 Nov 2019 17:40:23 +0100 Subject: [PATCH] Use page search hook --- .../MenuItemDialog/MenuItemDialog.tsx | 2 +- src/navigation/views/MenuDetails/index.tsx | 501 +++++++++--------- .../types/SearchPages.ts | 0 .../index.tsx => searches/usePageSearch.ts} | 6 +- 4 files changed, 249 insertions(+), 260 deletions(-) rename src/{containers/SearchPages => searches}/types/SearchPages.ts (100%) rename src/{containers/SearchPages/index.tsx => searches/usePageSearch.ts} (76%) diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx index 5b5620654..44c66ad92 100644 --- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx +++ b/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"; diff --git a/src/navigation/views/MenuDetails/index.tsx b/src/navigation/views/MenuDetails/index.tsx index 227cddf6b..be9d84514 100644 --- a/src/navigation/views/MenuDetails/index.tsx +++ b/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 = ({ id, params }) => { const collectionSearch = useCollectionSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA }); + const pageSearch = usePageSearch({ + variables: DEFAULT_INITIAL_SEARCH_DATA + }); const closeModal = () => navigate( @@ -101,283 +104,267 @@ const MenuDetails: React.FC = ({ id, params }) => { }; return ( - - {pageSearch => ( - - {({ data, loading, refetch }) => { - const handleQueryChange = (query: string) => { - categorySearch.search(query); - collectionSearch.search(query); - pageSearch.search(query); - }; + + {({ data, loading, refetch }) => { + const handleQueryChange = (query: string) => { + categorySearch.search(query); + collectionSearch.search(query); + pageSearch.search(query); + }; - const categories = maybe( - () => - categorySearch.result.data.search.edges.map(edge => edge.node), - [] - ); + const categories = maybe( + () => categorySearch.result.data.search.edges.map(edge => edge.node), + [] + ); - const collections = maybe( - () => - collectionSearch.result.data.search.edges.map( - edge => edge.node - ), - [] - ); + const collections = maybe( + () => + collectionSearch.result.data.search.edges.map(edge => edge.node), + [] + ); - const pages = maybe( - () => pageSearch.result.data.search.edges.map(edge => edge.node), - [] - ); + const pages = maybe( + () => pageSearch.result.data.search.edges.map(edge => edge.node), + [] + ); - return ( - handleDelete(data, navigate, notify, intl)} + return ( + handleDelete(data, navigate, notify, intl)} + > + {(menuDelete, menuDeleteOpts) => ( + handleUpdate(data, notify, refetch, intl)} > - {(menuDelete, menuDeleteOpts) => ( - - handleUpdate(data, notify, refetch, intl) - } - > - {(menuUpdate, menuUpdateOpts) => { - const deleteState = getMutationState( - menuDeleteOpts.called, - menuDeleteOpts.loading, - maybe(() => menuDeleteOpts.data.menuDelete.errors) - ); + {(menuUpdate, menuUpdateOpts) => { + const deleteState = getMutationState( + menuDeleteOpts.called, + menuDeleteOpts.loading, + maybe(() => menuDeleteOpts.data.menuDelete.errors) + ); - const updateState = getMutationState( - menuUpdateOpts.called, - menuUpdateOpts.loading, - maybe(() => menuUpdateOpts.data.menuUpdate.errors), - maybe(() => menuUpdateOpts.data.menuItemMove.errors) - ); + const updateState = getMutationState( + menuUpdateOpts.called, + menuUpdateOpts.loading, + maybe(() => menuUpdateOpts.data.menuUpdate.errors), + maybe(() => menuUpdateOpts.data.menuItemMove.errors) + ); - // This is a workaround to let know - // that it should clean operation stack if mutations - // were successful - const handleSubmit = async ( - data: MenuDetailsSubmitData - ) => { - try { - const result = await menuUpdate({ - variables: { - id, - moves: getMoves(data), - name: data.name, - removeIds: getRemoveIds(data) - } - }); - if (result) { - if ( - result.data.menuItemBulkDelete.errors.length > - 0 || - result.data.menuItemMove.errors.length > 0 || - result.data.menuUpdate.errors.length > 0 - ) { - return false; - } - } - return true; - } catch { + // This is a workaround to let know + // that it should clean operation stack if mutations + // were successful + const handleSubmit = async (data: MenuDetailsSubmitData) => { + try { + const result = await menuUpdate({ + variables: { + id, + moves: getMoves(data), + name: data.name, + removeIds: getRemoveIds(data) + } + }); + if (result) { + if ( + result.data.menuItemBulkDelete.errors.length > 0 || + result.data.menuItemMove.errors.length > 0 || + result.data.menuUpdate.errors.length > 0 + ) { return false; } - }; + } + return true; + } catch { + return false; + } + }; - return ( - <> - data.menu)} - onBack={() => navigate(menuListUrl())} - onDelete={() => - navigate( - menuUrl(id, { - action: "remove" - }) + return ( + <> + data.menu)} + onBack={() => navigate(menuListUrl())} + onDelete={() => + navigate( + menuUrl(id, { + action: "remove" + }) + ) + } + onItemAdd={() => + navigate( + menuUrl(id, { + action: "add-item" + }) + ) + } + onItemClick={handleItemClick} + onItemEdit={itemId => + navigate( + menuUrl(id, { + action: "edit-item", + id: itemId + }) + ) + } + onSubmit={handleSubmit} + saveButtonState={updateState} + /> + menuDelete({ variables: { id } })} + variant="delete" + title={intl.formatMessage({ + defaultMessage: "Delete Menu", + description: "dialog header", + id: "menuDetailsDeleteMenuHeader" + })} + > + + + {maybe(() => data.menu.name, "...")} + ) - } - onItemAdd={() => - navigate( - menuUrl(id, { - action: "add-item" - }) - ) - } - onItemClick={handleItemClick} - onItemEdit={itemId => - navigate( - menuUrl(id, { - action: "edit-item", - id: itemId - }) - ) - } - onSubmit={handleSubmit} - saveButtonState={updateState} + }} /> - menuDelete({ variables: { id } })} - variant="delete" - title={intl.formatMessage({ - defaultMessage: "Delete Menu", - description: "dialog header", - id: "menuDetailsDeleteMenuHeader" - })} - > - - - {maybe(() => data.menu.name, "...")} - - ) - }} - /> - - + + - - handleItemCreate(data, notify, closeModal, intl) - } - > - {(menuItemCreate, menuItemCreateOpts) => { - const handleSubmit = ( - data: MenuItemDialogFormData - ) => { - const variables: MenuItemCreateVariables = { - input: getMenuItemCreateInputData(id, data) - }; + + handleItemCreate(data, notify, closeModal, intl) + } + > + {(menuItemCreate, menuItemCreateOpts) => { + const handleSubmit = ( + data: MenuItemDialogFormData + ) => { + const variables: MenuItemCreateVariables = { + input: getMenuItemCreateInputData(id, data) + }; - menuItemCreate({ variables }); - }; + menuItemCreate({ variables }); + }; - const formTransitionState = getMutationState( - menuItemCreateOpts.called, - menuItemCreateOpts.loading, - maybe( - () => - menuItemCreateOpts.data.menuItemCreate - .errors - ) - ); + const formTransitionState = getMutationState( + menuItemCreateOpts.called, + menuItemCreateOpts.loading, + maybe( + () => + menuItemCreateOpts.data.menuItemCreate.errors + ) + ); - return ( - - menuItemCreateOpts.data.menuItemCreate - .errors, - [] - )} - pages={pages} - loading={ - categorySearch.result.loading || - collectionSearch.result.loading - } - confirmButtonState={formTransitionState} - disabled={menuItemCreateOpts.loading} - onClose={closeModal} - onSubmit={handleSubmit} - onQueryChange={handleQueryChange} - /> - ); - }} - - - handleItemUpdate(data, id, navigate, notify, intl) - } - > - {(menuItemUpdate, menuItemUpdateOpts) => { - const handleSubmit = ( - data: MenuItemDialogFormData - ) => { - const variables: MenuItemUpdateVariables = { - id: params.id, - input: getMenuItemInputData(data) - }; + return ( + + menuItemCreateOpts.data.menuItemCreate.errors, + [] + )} + pages={pages} + loading={ + categorySearch.result.loading || + collectionSearch.result.loading + } + confirmButtonState={formTransitionState} + disabled={menuItemCreateOpts.loading} + onClose={closeModal} + onSubmit={handleSubmit} + onQueryChange={handleQueryChange} + /> + ); + }} + + + handleItemUpdate(data, id, navigate, notify, intl) + } + > + {(menuItemUpdate, menuItemUpdateOpts) => { + const handleSubmit = ( + data: MenuItemDialogFormData + ) => { + const variables: MenuItemUpdateVariables = { + id: params.id, + input: getMenuItemInputData(data) + }; - menuItemUpdate({ variables }); - }; + menuItemUpdate({ variables }); + }; - const menuItem = maybe(() => - getNode( - data.menu.items, - findNode(data.menu.items, params.id) - ) - ); + const menuItem = maybe(() => + getNode( + data.menu.items, + findNode(data.menu.items, params.id) + ) + ); - const formTransitionState = getMutationState( - menuItemUpdateOpts.called, - menuItemUpdateOpts.loading, - maybe( - () => - menuItemUpdateOpts.data.menuItemUpdate - .errors - ) - ); + const formTransitionState = getMutationState( + menuItemUpdateOpts.called, + menuItemUpdateOpts.loading, + maybe( + () => + menuItemUpdateOpts.data.menuItemUpdate.errors + ) + ); - const initialFormData: MenuItemDialogFormData = { - id: maybe(() => getItemId(menuItem)), - name: maybe(() => menuItem.name, "..."), - type: maybe( - () => getItemType(menuItem), - "category" - ) - }; + const initialFormData: MenuItemDialogFormData = { + id: maybe(() => getItemId(menuItem)), + name: maybe(() => menuItem.name, "..."), + type: maybe( + () => getItemType(menuItem), + "category" + ) + }; - return ( - - menuItemUpdateOpts.data.menuItemUpdate - .errors, - [] - )} - pages={pages} - initial={initialFormData} - initialDisplayValue={getInitialDisplayValue( - menuItem - )} - loading={ - categorySearch.result.loading || - collectionSearch.result.loading - } - confirmButtonState={formTransitionState} - disabled={menuItemUpdateOpts.loading} - onClose={closeModal} - onSubmit={handleSubmit} - onQueryChange={handleQueryChange} - /> - ); - }} - - - ); - }} - - )} - - ); - }} - - )} - + return ( + + menuItemUpdateOpts.data.menuItemUpdate.errors, + [] + )} + pages={pages} + initial={initialFormData} + initialDisplayValue={getInitialDisplayValue( + menuItem + )} + loading={ + categorySearch.result.loading || + collectionSearch.result.loading + } + confirmButtonState={formTransitionState} + disabled={menuItemUpdateOpts.loading} + onClose={closeModal} + onSubmit={handleSubmit} + onQueryChange={handleQueryChange} + /> + ); + }} + + + ); + }} + + )} + + ); + }} + ); }; MenuDetails.displayName = "MenuDetails"; diff --git a/src/containers/SearchPages/types/SearchPages.ts b/src/searches/types/SearchPages.ts similarity index 100% rename from src/containers/SearchPages/types/SearchPages.ts rename to src/searches/types/SearchPages.ts diff --git a/src/containers/SearchPages/index.tsx b/src/searches/usePageSearch.ts similarity index 76% rename from src/containers/SearchPages/index.tsx rename to src/searches/usePageSearch.ts index bd6ce287e..75eebbde0 100644 --- a/src/containers/SearchPages/index.tsx +++ b/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); +export default makeTopLevelSearch( + searchPages +);