Use page search hook
This commit is contained in:
parent
b07b220b3c
commit
bd7130d196
4 changed files with 249 additions and 260 deletions
|
@ -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";
|
||||
|
|
|
@ -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(
|
||||
edge => edge.node
|
||||
),
|
||||
collectionSearch.result.data.search.edges.map(edge => edge.node),
|
||||
[]
|
||||
);
|
||||
|
||||
|
@ -136,9 +134,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
|
|||
>
|
||||
{(menuDelete, menuDeleteOpts) => (
|
||||
<MenuUpdateMutation
|
||||
onCompleted={data =>
|
||||
handleUpdate(data, notify, refetch, intl)
|
||||
}
|
||||
onCompleted={data => 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 (
|
||||
data: MenuDetailsSubmitData
|
||||
) => {
|
||||
const handleSubmit = async (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 >
|
||||
0 ||
|
||||
result.data.menuItemBulkDelete.errors.length > 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
|
||||
.errors
|
||||
menuItemCreateOpts.data.menuItemCreate.errors
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -277,8 +269,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
|
|||
collections={collections}
|
||||
errors={maybe(
|
||||
() =>
|
||||
menuItemCreateOpts.data.menuItemCreate
|
||||
.errors,
|
||||
menuItemCreateOpts.data.menuItemCreate.errors,
|
||||
[]
|
||||
)}
|
||||
pages={pages}
|
||||
|
@ -324,8 +315,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
|
|||
menuItemUpdateOpts.loading,
|
||||
maybe(
|
||||
() =>
|
||||
menuItemUpdateOpts.data.menuItemUpdate
|
||||
.errors
|
||||
menuItemUpdateOpts.data.menuItemUpdate.errors
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -345,8 +335,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
|
|||
collections={collections}
|
||||
errors={maybe(
|
||||
() =>
|
||||
menuItemUpdateOpts.data.menuItemUpdate
|
||||
.errors,
|
||||
menuItemUpdateOpts.data.menuItemUpdate.errors,
|
||||
[]
|
||||
)}
|
||||
pages={pages}
|
||||
|
@ -376,8 +365,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
|
|||
);
|
||||
}}
|
||||
</MenuDetailsQuery>
|
||||
)}
|
||||
</SearchPages>
|
||||
);
|
||||
};
|
||||
MenuDetails.displayName = "MenuDetails";
|
||||
|
|
|
@ -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
|
||||
);
|
Loading…
Reference in a new issue