djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use page search hook

Browse source
This commit is contained in:
dominik-zeglen 2019-11-19 17:40:23 +01:00
parent b07b220b3c
commit bd7130d196
4 changed files with 249 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
View file

@ -14,13 +14,13 @@ import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton"; } from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import { SearchPages_search_edges_node } from "@saleor/containers/SearchPages/types/SearchPages";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
import useStateFromProps from "@saleor/hooks/useStateFromProps"; import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { buttonMessages, sectionNames } from "@saleor/intl"; import { buttonMessages, sectionNames } from "@saleor/intl";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories"; import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections"; 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 { UserError } from "@saleor/types";
import { getErrors, getFieldError } from "@saleor/utils/errors"; import { getErrors, getFieldError } from "@saleor/utils/errors";
import { getMenuItemByValue, IMenu } from "@saleor/utils/menu"; import { getMenuItemByValue, IMenu } from "@saleor/utils/menu";

501
src/navigation/views/MenuDetails/index.tsx
View file

@ -7,10 +7,10 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import usePageSearch from "@saleor/searches/usePageSearch";
import { categoryUrl } from "../../../categories/urls"; import { categoryUrl } from "../../../categories/urls";
import { collectionUrl } from "../../../collections/urls"; import { collectionUrl } from "../../../collections/urls";
import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config"; import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
import SearchPages from "../../../containers/SearchPages";
import { getMutationState, maybe } from "../../../misc"; import { getMutationState, maybe } from "../../../misc";
import { pageUrl } from "../../../pages/urls"; import { pageUrl } from "../../../pages/urls";
import MenuDetailsPage, { import MenuDetailsPage, {
@ -65,6 +65,9 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
const collectionSearch = useCollectionSearch({ const collectionSearch = useCollectionSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA variables: DEFAULT_INITIAL_SEARCH_DATA
}); });
const pageSearch = usePageSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const closeModal = () => const closeModal = () =>
navigate( navigate(
@ -101,283 +104,267 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
}; };
return ( return (
<SearchPages variables={DEFAULT_INITIAL_SEARCH_DATA}> <MenuDetailsQuery displayLoader variables={{ id }}>
{pageSearch => ( {({ data, loading, refetch }) => {
<MenuDetailsQuery displayLoader variables={{ id }}> const handleQueryChange = (query: string) => {
{({ data, loading, refetch }) => { categorySearch.search(query);
const handleQueryChange = (query: string) => { collectionSearch.search(query);
categorySearch.search(query); pageSearch.search(query);
collectionSearch.search(query); };
pageSearch.search(query);
};
const categories = maybe( const categories = maybe(
() => () => categorySearch.result.data.search.edges.map(edge => edge.node),
categorySearch.result.data.search.edges.map(edge => edge.node), []
[] );
);
const collections = maybe( const collections = maybe(
() => () =>
collectionSearch.result.data.search.edges.map( collectionSearch.result.data.search.edges.map(edge => edge.node),
edge => edge.node []
), );
[]
);
const pages = maybe( const pages = maybe(
() => pageSearch.result.data.search.edges.map(edge => edge.node), () => pageSearch.result.data.search.edges.map(edge => edge.node),
[] []
); );
return ( return (
<MenuDeleteMutation <MenuDeleteMutation
onCompleted={data => handleDelete(data, navigate, notify, intl)} onCompleted={data => handleDelete(data, navigate, notify, intl)}
>
{(menuDelete, menuDeleteOpts) => (
<MenuUpdateMutation
onCompleted={data => handleUpdate(data, notify, refetch, intl)}
> >
{(menuDelete, menuDeleteOpts) => ( {(menuUpdate, menuUpdateOpts) => {
<MenuUpdateMutation const deleteState = getMutationState(
onCompleted={data => menuDeleteOpts.called,
handleUpdate(data, notify, refetch, intl) menuDeleteOpts.loading,
} maybe(() => menuDeleteOpts.data.menuDelete.errors)
> );
{(menuUpdate, menuUpdateOpts) => {
const deleteState = getMutationState(
menuDeleteOpts.called,
menuDeleteOpts.loading,
maybe(() => menuDeleteOpts.data.menuDelete.errors)
);
const updateState = getMutationState( const updateState = getMutationState(
menuUpdateOpts.called, menuUpdateOpts.called,
menuUpdateOpts.loading, menuUpdateOpts.loading,
maybe(() => menuUpdateOpts.data.menuUpdate.errors), maybe(() => menuUpdateOpts.data.menuUpdate.errors),
maybe(() => menuUpdateOpts.data.menuItemMove.errors) maybe(() => menuUpdateOpts.data.menuItemMove.errors)
); );
// This is a workaround to let know <MenuDetailsPage /> // This is a workaround to let know <MenuDetailsPage />
// that it should clean operation stack if mutations // that it should clean operation stack if mutations
// were successful // were successful
const handleSubmit = async ( const handleSubmit = async (data: MenuDetailsSubmitData) => {
data: MenuDetailsSubmitData try {
) => { const result = await menuUpdate({
try { variables: {
const result = await menuUpdate({ id,
variables: { moves: getMoves(data),
id, name: data.name,
moves: getMoves(data), removeIds: getRemoveIds(data)
name: data.name, }
removeIds: getRemoveIds(data) });
} if (result) {
}); if (
if (result) { result.data.menuItemBulkDelete.errors.length > 0 ||
if ( result.data.menuItemMove.errors.length > 0 ||
result.data.menuItemBulkDelete.errors.length > result.data.menuUpdate.errors.length > 0
0 || ) {
result.data.menuItemMove.errors.length > 0 ||
result.data.menuUpdate.errors.length > 0
) {
return false;
}
}
return true;
} catch {
return false; return false;
} }
}; }
return true;
} catch {
return false;
}
};
return ( return (
<> <>
<MenuDetailsPage <MenuDetailsPage
disabled={loading} disabled={loading}
menu={maybe(() => data.menu)} menu={maybe(() => data.menu)}
onBack={() => navigate(menuListUrl())} onBack={() => navigate(menuListUrl())}
onDelete={() => onDelete={() =>
navigate( navigate(
menuUrl(id, { menuUrl(id, {
action: "remove" 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 </DialogContentText>
open={params.action === "remove"} </ActionDialog>
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>
<MenuItemCreateMutation <MenuItemCreateMutation
onCompleted={data => onCompleted={data =>
handleItemCreate(data, notify, closeModal, intl) handleItemCreate(data, notify, closeModal, intl)
} }
> >
{(menuItemCreate, menuItemCreateOpts) => { {(menuItemCreate, menuItemCreateOpts) => {
const handleSubmit = ( const handleSubmit = (
data: MenuItemDialogFormData data: MenuItemDialogFormData
) => { ) => {
const variables: MenuItemCreateVariables = { const variables: MenuItemCreateVariables = {
input: getMenuItemCreateInputData(id, data) input: getMenuItemCreateInputData(id, data)
}; };
menuItemCreate({ variables }); menuItemCreate({ variables });
}; };
const formTransitionState = getMutationState( const formTransitionState = getMutationState(
menuItemCreateOpts.called, menuItemCreateOpts.called,
menuItemCreateOpts.loading, menuItemCreateOpts.loading,
maybe( maybe(
() => () =>
menuItemCreateOpts.data.menuItemCreate menuItemCreateOpts.data.menuItemCreate.errors
.errors )
) );
);
return ( return (
<MenuItemDialog <MenuItemDialog
open={params.action === "add-item"} open={params.action === "add-item"}
categories={categories} categories={categories}
collections={collections} collections={collections}
errors={maybe( errors={maybe(
() => () =>
menuItemCreateOpts.data.menuItemCreate menuItemCreateOpts.data.menuItemCreate.errors,
.errors, []
[] )}
)} pages={pages}
pages={pages} loading={
loading={ categorySearch.result.loading ||
categorySearch.result.loading || collectionSearch.result.loading
collectionSearch.result.loading }
} confirmButtonState={formTransitionState}
confirmButtonState={formTransitionState} disabled={menuItemCreateOpts.loading}
disabled={menuItemCreateOpts.loading} onClose={closeModal}
onClose={closeModal} onSubmit={handleSubmit}
onSubmit={handleSubmit} onQueryChange={handleQueryChange}
onQueryChange={handleQueryChange} />
/> );
); }}
}} </MenuItemCreateMutation>
</MenuItemCreateMutation> <MenuItemUpdateMutation
<MenuItemUpdateMutation onCompleted={data =>
onCompleted={data => handleItemUpdate(data, id, navigate, notify, intl)
handleItemUpdate(data, id, navigate, notify, intl) }
} >
> {(menuItemUpdate, menuItemUpdateOpts) => {
{(menuItemUpdate, menuItemUpdateOpts) => { const handleSubmit = (
const handleSubmit = ( data: MenuItemDialogFormData
data: MenuItemDialogFormData ) => {
) => { const variables: MenuItemUpdateVariables = {
const variables: MenuItemUpdateVariables = { id: params.id,
id: params.id, input: getMenuItemInputData(data)
input: getMenuItemInputData(data) };
};
menuItemUpdate({ variables }); menuItemUpdate({ variables });
}; };
const menuItem = maybe(() => const menuItem = maybe(() =>
getNode( getNode(
data.menu.items, data.menu.items,
findNode(data.menu.items, params.id) findNode(data.menu.items, params.id)
) )
); );
const formTransitionState = getMutationState( const formTransitionState = getMutationState(
menuItemUpdateOpts.called, menuItemUpdateOpts.called,
menuItemUpdateOpts.loading, menuItemUpdateOpts.loading,
maybe( maybe(
() => () =>
menuItemUpdateOpts.data.menuItemUpdate menuItemUpdateOpts.data.menuItemUpdate.errors
.errors )
) );
);
const initialFormData: MenuItemDialogFormData = { const initialFormData: MenuItemDialogFormData = {
id: maybe(() => getItemId(menuItem)), id: maybe(() => getItemId(menuItem)),
name: maybe(() => menuItem.name, "..."), name: maybe(() => menuItem.name, "..."),
type: maybe<MenuItemType>( type: maybe<MenuItemType>(
() => getItemType(menuItem), () => getItemType(menuItem),
"category" "category"
) )
}; };
return ( return (
<MenuItemDialog <MenuItemDialog
open={params.action === "edit-item"} open={params.action === "edit-item"}
categories={categories} categories={categories}
collections={collections} collections={collections}
errors={maybe( errors={maybe(
() => () =>
menuItemUpdateOpts.data.menuItemUpdate menuItemUpdateOpts.data.menuItemUpdate.errors,
.errors, []
[] )}
)} pages={pages}
pages={pages} initial={initialFormData}
initial={initialFormData} initialDisplayValue={getInitialDisplayValue(
initialDisplayValue={getInitialDisplayValue( menuItem
menuItem )}
)} loading={
loading={ categorySearch.result.loading ||
categorySearch.result.loading || collectionSearch.result.loading
collectionSearch.result.loading }
} confirmButtonState={formTransitionState}
confirmButtonState={formTransitionState} disabled={menuItemUpdateOpts.loading}
disabled={menuItemUpdateOpts.loading} onClose={closeModal}
onClose={closeModal} onSubmit={handleSubmit}
onSubmit={handleSubmit} onQueryChange={handleQueryChange}
onQueryChange={handleQueryChange} />
/> );
); }}
}} </MenuItemUpdateMutation>
</MenuItemUpdateMutation> </>
</> );
); }}
}} </MenuUpdateMutation>
</MenuUpdateMutation> )}
)} </MenuDeleteMutation>
</MenuDeleteMutation> );
); }}
}} </MenuDetailsQuery>
</MenuDetailsQuery>
)}
</SearchPages>
); );
}; };
MenuDetails.displayName = "MenuDetails"; MenuDetails.displayName = "MenuDetails";

0
src/containers/SearchPages/types/SearchPages.ts → src/searches/types/SearchPages.ts
View file

6
src/containers/SearchPages/index.tsx → src/searches/usePageSearch.ts
View file

@ -1,7 +1,7 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
import { pageInfoFragment } from "@saleor/queries"; import { pageInfoFragment } from "@saleor/queries";
import TopLevelSearch from "../TopLevelSearch";
import { SearchPages, SearchPagesVariables } from "./types/SearchPages"; import { SearchPages, SearchPagesVariables } from "./types/SearchPages";
export const searchPages = gql` export const searchPages = gql`
@ -21,4 +21,6 @@ export const searchPages = gql`
} }
`; `;
export default TopLevelSearch<SearchPages, SearchPagesVariables>(searchPages); export default makeTopLevelSearch<SearchPages, SearchPagesVariables>(
searchPages
);