Use page search hook
This commit is contained in:
dominik-zeglen
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,283 +104,267 @@ 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) => {
|
||||
categorySearch.search(query);
|
||||
collectionSearch.search(query);
|
||||
pageSearch.search(query);
|
||||
};
|
||||
<MenuDetailsQuery displayLoader variables={{ id }}>
|
||||
{({ 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 (
|
||||
<MenuDeleteMutation
|
||||
onCompleted={data => handleDelete(data, navigate, notify, intl)}
|
||||
return (
|
||||
<MenuDeleteMutation
|
||||
onCompleted={data => handleDelete(data, navigate, notify, intl)}
|
||||
>
|
||||
{(menuDelete, menuDeleteOpts) => (
|
||||
<MenuUpdateMutation
|
||||
onCompleted={data => handleUpdate(data, notify, refetch, intl)}
|
||||
>
|
||||
{(menuDelete, menuDeleteOpts) => (
|
||||
<MenuUpdateMutation
|
||||
onCompleted={data =>
|
||||
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 <MenuDetailsPage />
|
||||
// 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 <MenuDetailsPage />
|
||||
// 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 (
|
||||
<>
|
||||
<MenuDetailsPage
|
||||
disabled={loading}
|
||||
menu={maybe(() => data.menu)}
|
||||
onBack={() => navigate(menuListUrl())}
|
||||
onDelete={() =>
|
||||
navigate(
|
||||
menuUrl(id, {
|
||||
action: "remove"
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<MenuDetailsPage
|
||||
disabled={loading}
|
||||
menu={maybe(() => 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}
|
||||
/>
|
||||
<ActionDialog
|
||||
open={params.action === "remove"}
|
||||
onClose={closeModal}
|
||||
confirmButtonState={deleteState}
|
||||
onConfirm={() => menuDelete({ variables: { id } })}
|
||||
variant="delete"
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Delete Menu",
|
||||
description: "dialog header",
|
||||
id: "menuDetailsDeleteMenuHeader"
|
||||
})}
|
||||
>
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to delete menu {menuName}?"
|
||||
id="menuDetailsDeleteMenuContent"
|
||||
values={{
|
||||
menuName: (
|
||||
<strong>
|
||||
{maybe(() => data.menu.name, "...")}
|
||||
</strong>
|
||||
)
|
||||
}
|
||||
onItemAdd={() =>
|
||||
navigate(
|
||||
menuUrl(id, {
|
||||
action: "add-item"
|
||||
})
|
||||
)
|
||||
}
|
||||
onItemClick={handleItemClick}
|
||||
onItemEdit={itemId =>
|
||||
navigate(
|
||||
menuUrl(id, {
|
||||
action: "edit-item",
|
||||
id: itemId
|
||||
})
|
||||
)
|
||||
}
|
||||
onSubmit={handleSubmit}
|
||||
saveButtonState={updateState}
|
||||
}}
|
||||
/>
|
||||
<ActionDialog
|
||||
open={params.action === "remove"}
|
||||
onClose={closeModal}
|
||||
confirmButtonState={deleteState}
|
||||
onConfirm={() => menuDelete({ variables: { id } })}
|
||||
variant="delete"
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Delete Menu",
|
||||
description: "dialog header",
|
||||
id: "menuDetailsDeleteMenuHeader"
|
||||
})}
|
||||
>
|
||||
<DialogContentText>
|
||||
<FormattedMessage
|
||||
defaultMessage="Are you sure you want to delete menu {menuName}?"
|
||||
id="menuDetailsDeleteMenuContent"
|
||||
values={{
|
||||
menuName: (
|
||||
<strong>
|
||||
{maybe(() => data.menu.name, "...")}
|
||||
</strong>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
|
||||
<MenuItemCreateMutation
|
||||
onCompleted={data =>
|
||||
handleItemCreate(data, notify, closeModal, intl)
|
||||
}
|
||||
>
|
||||
{(menuItemCreate, menuItemCreateOpts) => {
|
||||
const handleSubmit = (
|
||||
data: MenuItemDialogFormData
|
||||
) => {
|
||||
const variables: MenuItemCreateVariables = {
|
||||
input: getMenuItemCreateInputData(id, data)
|
||||
};
|
||||
<MenuItemCreateMutation
|
||||
onCompleted={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 (
|
||||
<MenuItemDialog
|
||||
open={params.action === "add-item"}
|
||||
categories={categories}
|
||||
collections={collections}
|
||||
errors={maybe(
|
||||
() =>
|
||||
menuItemCreateOpts.data.menuItemCreate
|
||||
.errors,
|
||||
[]
|
||||
)}
|
||||
pages={pages}
|
||||
loading={
|
||||
categorySearch.result.loading ||
|
||||
collectionSearch.result.loading
|
||||
}
|
||||
confirmButtonState={formTransitionState}
|
||||
disabled={menuItemCreateOpts.loading}
|
||||
onClose={closeModal}
|
||||
onSubmit={handleSubmit}
|
||||
onQueryChange={handleQueryChange}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</MenuItemCreateMutation>
|
||||
<MenuItemUpdateMutation
|
||||
onCompleted={data =>
|
||||
handleItemUpdate(data, id, navigate, notify, intl)
|
||||
}
|
||||
>
|
||||
{(menuItemUpdate, menuItemUpdateOpts) => {
|
||||
const handleSubmit = (
|
||||
data: MenuItemDialogFormData
|
||||
) => {
|
||||
const variables: MenuItemUpdateVariables = {
|
||||
id: params.id,
|
||||
input: getMenuItemInputData(data)
|
||||
};
|
||||
return (
|
||||
<MenuItemDialog
|
||||
open={params.action === "add-item"}
|
||||
categories={categories}
|
||||
collections={collections}
|
||||
errors={maybe(
|
||||
() =>
|
||||
menuItemCreateOpts.data.menuItemCreate.errors,
|
||||
[]
|
||||
)}
|
||||
pages={pages}
|
||||
loading={
|
||||
categorySearch.result.loading ||
|
||||
collectionSearch.result.loading
|
||||
}
|
||||
confirmButtonState={formTransitionState}
|
||||
disabled={menuItemCreateOpts.loading}
|
||||
onClose={closeModal}
|
||||
onSubmit={handleSubmit}
|
||||
onQueryChange={handleQueryChange}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</MenuItemCreateMutation>
|
||||
<MenuItemUpdateMutation
|
||||
onCompleted={data =>
|
||||
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<MenuItemType>(
|
||||
() => getItemType(menuItem),
|
||||
"category"
|
||||
)
|
||||
};
|
||||
const initialFormData: MenuItemDialogFormData = {
|
||||
id: maybe(() => getItemId(menuItem)),
|
||||
name: maybe(() => menuItem.name, "..."),
|
||||
type: maybe<MenuItemType>(
|
||||
() => getItemType(menuItem),
|
||||
"category"
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemDialog
|
||||
open={params.action === "edit-item"}
|
||||
categories={categories}
|
||||
collections={collections}
|
||||
errors={maybe(
|
||||
() =>
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</MenuItemUpdateMutation>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</MenuUpdateMutation>
|
||||
)}
|
||||
</MenuDeleteMutation>
|
||||
);
|
||||
}}
|
||||
</MenuDetailsQuery>
|
||||
)}
|
||||
</SearchPages>
|
||||
return (
|
||||
<MenuItemDialog
|
||||
open={params.action === "edit-item"}
|
||||
categories={categories}
|
||||
collections={collections}
|
||||
errors={maybe(
|
||||
() =>
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</MenuItemUpdateMutation>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</MenuUpdateMutation>
|
||||
)}
|
||||
</MenuDeleteMutation>
|
||||
);
|
||||
}}
|
||||
</MenuDetailsQuery>
|
||||
);
|
||||
};
|
||||
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