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

Do not use getMutationState explicitly

Browse source
This commit is contained in:
dominik-zeglen 2019-12-06 18:11:46 +01:00
parent fad6dfe22a
commit 6b62f5cc40
56 changed files with 2127 additions and 2904 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/attributes/views/AttributeCreate/AttributeCreate.tsx
View file

@ -4,7 +4,7 @@ import slugify from "slugify";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ReorderEvent, UserError } from "@saleor/types"; import { ReorderEvent, UserError } from "@saleor/types";
import { import {
add, add,
@ -131,14 +131,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
return ( return (
<AttributeCreateMutation onCompleted={handleCreate}> <AttributeCreateMutation onCompleted={handleCreate}>
{(attributeCreate, attributeCreateOpts) => { {(attributeCreate, attributeCreateOpts) => (
const createTransitionState = getMutationState(
attributeCreateOpts.called,
attributeCreateOpts.loading,
maybe(() => attributeCreateOpts.data.attributeCreate.errors)
);
return (
<> <>
<AttributePage <AttributePage
attribute={null} attribute={null}
@ -169,7 +162,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
onValueDelete={id => openModal("remove-value", id)} onValueDelete={id => openModal("remove-value", id)}
onValueReorder={handleValueReorder} onValueReorder={handleValueReorder}
onValueUpdate={id => openModal("edit-value", id)} onValueUpdate={id => openModal("edit-value", id)}
saveButtonBarState={createTransitionState} saveButtonBarState={attributeCreateOpts.state}
values={values.map((value, valueIndex) => ({ values={values.map((value, valueIndex) => ({
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
id: valueIndex.toString(), id: valueIndex.toString(),
@ -211,8 +204,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
</> </>
)} )}
</> </>
); )}
}}
</AttributeCreateMutation> </AttributeCreateMutation>
); );
}; };

62
src/attributes/views/AttributeDetails/AttributeDetails.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ReorderEvent } from "@saleor/types"; import { ReorderEvent } from "@saleor/types";
import { move } from "@saleor/utils/lists"; import { move } from "@saleor/utils/lists";
import AttributeDeleteDialog from "../../components/AttributeDeleteDialog"; import AttributeDeleteDialog from "../../components/AttributeDeleteDialog";
@ -135,52 +135,6 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
onCompleted={handleValueReorderMutation} onCompleted={handleValueReorderMutation}
> >
{attributeValueReorder => { {attributeValueReorder => {
const deleteTransitionState = getMutationState(
attributeDeleteOpts.called,
attributeDeleteOpts.loading,
maybe(
() =>
attributeDeleteOpts.data.attributeDelete
.errors
)
);
const deleteValueTransitionState = getMutationState(
attributeValueDeleteOpts.called,
attributeValueDeleteOpts.loading,
maybe(
() =>
attributeValueDeleteOpts.data
.attributeValueDelete.errors
)
);
const updateTransitionState = getMutationState(
attributeUpdateOpts.called,
attributeUpdateOpts.loading,
maybe(
() =>
attributeUpdateOpts.data.attributeUpdate
.errors
)
);
const updateValueTransitionState = getMutationState(
attributeValueUpdateOpts.called,
attributeValueUpdateOpts.loading,
maybe(
() =>
attributeValueUpdateOpts.data
.attributeValueUpdate.errors
)
);
const createValueTransitionState = getMutationState(
attributeValueCreateOpts.called,
attributeValueCreateOpts.loading,
maybe(
() =>
attributeValueCreateOpts.data
.attributeValueCreate.errors
)
);
const handleValueReorder = ({ const handleValueReorder = ({
newIndex, newIndex,
oldIndex oldIndex
@ -252,7 +206,9 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
onValueUpdate={id => onValueUpdate={id =>
openModal("edit-value", id) openModal("edit-value", id)
} }
saveButtonBarState={updateTransitionState} saveButtonBarState={
attributeUpdateOpts.state
}
values={maybe( values={maybe(
() => data.attribute.values () => data.attribute.values
)} )}
@ -263,7 +219,9 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
() => data.attribute.name, () => data.attribute.name,
"..." "..."
)} )}
confirmButtonState={deleteTransitionState} confirmButtonState={
attributeDeleteOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
attributeDelete({ attributeDelete({
@ -288,7 +246,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
)} )}
useName={true} useName={true}
confirmButtonState={ confirmButtonState={
deleteValueTransitionState attributeValueDeleteOpts.state
} }
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
@ -302,7 +260,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
<AttributeValueEditDialog <AttributeValueEditDialog
attributeValue={null} attributeValue={null}
confirmButtonState={ confirmButtonState={
createValueTransitionState attributeValueCreateOpts.state
} }
disabled={loading} disabled={loading}
errors={maybe( errors={maybe(
@ -329,7 +287,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
) )
)} )}
confirmButtonState={ confirmButtonState={
updateValueTransitionState attributeValueUpdateOpts.state
} }
disabled={loading} disabled={loading}
errors={maybe( errors={maybe(

18
src/attributes/views/AttributeList/AttributeList.tsx
View file

@ -23,7 +23,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { PAGINATE_BY } from "../../../config"; import { PAGINATE_BY } from "../../../config";
import useBulkActions from "../../../hooks/useBulkActions"; import useBulkActions from "../../../hooks/useBulkActions";
import { getMutationState, maybe } from "../../../misc"; import { maybe } from "../../../misc";
import AttributeBulkDeleteDialog from "../../components/AttributeBulkDeleteDialog"; import AttributeBulkDeleteDialog from "../../components/AttributeBulkDeleteDialog";
import AttributeListPage from "../../components/AttributeListPage"; import AttributeListPage from "../../components/AttributeListPage";
import { AttributeBulkDeleteMutation } from "../../mutations"; import { AttributeBulkDeleteMutation } from "../../mutations";
@ -145,16 +145,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
return ( return (
<AttributeBulkDeleteMutation onCompleted={handleBulkDelete}> <AttributeBulkDeleteMutation onCompleted={handleBulkDelete}>
{(attributeBulkDelete, attributeBulkDeleteOpts) => { {(attributeBulkDelete, attributeBulkDeleteOpts) => (
const bulkDeleteMutationState = getMutationState(
attributeBulkDeleteOpts.called,
attributeBulkDeleteOpts.loading,
maybe(
() => attributeBulkDeleteOpts.data.attributeBulkDelete.errors
)
);
return (
<> <>
<AttributeListPage <AttributeListPage
attributes={maybe(() => attributes={maybe(() =>
@ -189,7 +180,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
} }
/> />
<AttributeBulkDeleteDialog <AttributeBulkDeleteDialog
confirmButtonState={bulkDeleteMutationState} confirmButtonState={attributeBulkDeleteOpts.state}
open={ open={
params.action === "remove" && params.action === "remove" &&
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
@ -214,8 +205,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
tabName={maybe(() => tabs[currentTab - 1].name, "...")} tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/> />
</> </>
); )}
}}
</AttributeBulkDeleteMutation> </AttributeBulkDeleteMutation>
); );
}} }}

10
src/categories/views/CategoryCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import CategoryCreatePage from "../components/CategoryCreatePage"; import CategoryCreatePage from "../components/CategoryCreatePage";
import { useCategoryCreateMutation } from "../mutations"; import { useCategoryCreateMutation } from "../mutations";
import { CategoryCreate } from "../types/CategoryCreate"; import { CategoryCreate } from "../types/CategoryCreate";
@ -41,12 +41,6 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
[] []
); );
const formTransitionState = getMutationState(
createCategoryResult.called,
createCategoryResult.loading,
errors
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -56,7 +50,7 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
})} })}
/> />
<CategoryCreatePage <CategoryCreatePage
saveButtonBarState={formTransitionState} saveButtonBarState={createCategoryResult.state}
errors={errors} errors={errors}
disabled={createCategoryResult.loading} disabled={createCategoryResult.loading}
onBack={() => onBack={() =>

42
src/categories/views/CategoryDetails.tsx
View file

@ -14,7 +14,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { PAGINATE_BY } from "../../config"; import { PAGINATE_BY } from "../../config";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { TypedProductBulkDeleteMutation } from "../../products/mutations"; import { TypedProductBulkDeleteMutation } from "../../products/mutations";
import { productBulkDelete } from "../../products/types/productBulkDelete"; import { productBulkDelete } from "../../products/types/productBulkDelete";
import { productAddUrl, productUrl } from "../../products/urls"; import { productAddUrl, productUrl } from "../../products/urls";
@ -147,17 +147,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
}) })
); );
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
maybe(() => updateResult.data.categoryUpdate.errors)
);
const removeDialogTransitionState = getMutationState(
deleteResult.called,
deleteResult.loading,
maybe(() => deleteResult.data.categoryDelete.errors)
);
const handleBulkProductDelete = (data: productBulkDelete) => { const handleBulkProductDelete = (data: productBulkDelete) => {
if (data.productBulkDelete.errors.length === 0) { if (data.productBulkDelete.errors.length === 0) {
closeModal(); closeModal();
@ -181,19 +170,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
<> <>
<WindowTitle title={maybe(() => data.category.name)} /> <WindowTitle title={maybe(() => data.category.name)} />
<TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}> <TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
{(productBulkDelete, productBulkDeleteOpts) => { {(productBulkDelete, productBulkDeleteOpts) => (
const categoryBulkDeleteMutationState = getMutationState(
categoryBulkDeleteOpts.called,
categoryBulkDeleteOpts.loading,
maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
);
const productBulkDeleteMutationState = getMutationState(
productBulkDeleteOpts.called,
productBulkDeleteOpts.loading,
maybe(() => productBulkDeleteOpts.data.productBulkDelete.errors)
);
return (
<> <>
<CategoryUpdatePage <CategoryUpdatePage
changeTab={changeTab} changeTab={changeTab}
@ -256,7 +233,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
products={maybe(() => products={maybe(() =>
data.category.products.edges.map(edge => edge.node) data.category.products.edges.map(edge => edge.node)
)} )}
saveButtonBarState={formTransitionState} saveButtonBarState={updateResult.state}
subcategories={maybe(() => subcategories={maybe(() =>
data.category.children.edges.map(edge => edge.node) data.category.children.edges.map(edge => edge.node)
)} )}
@ -282,7 +259,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
toggleAll={toggleAll} toggleAll={toggleAll}
/> />
<ActionDialog <ActionDialog
confirmButtonState={removeDialogTransitionState} confirmButtonState={deleteResult.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => deleteCategory({ variables: { id } })} onConfirm={() => deleteCategory({ variables: { id } })}
open={params.action === "delete"} open={params.action === "delete"}
@ -297,9 +274,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
defaultMessage="Are you sure you want to delete {categoryName}?" defaultMessage="Are you sure you want to delete {categoryName}?"
values={{ values={{
categoryName: ( categoryName: (
<strong> <strong>{maybe(() => data.category.name, "...")}</strong>
{maybe(() => data.category.name, "...")}
</strong>
) )
}} }}
/> />
@ -313,7 +288,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
params.action === "delete-categories" && params.action === "delete-categories" &&
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
} }
confirmButtonState={categoryBulkDeleteMutationState} confirmButtonState={categoryBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
categoryBulkDelete({ categoryBulkDelete({
@ -343,7 +318,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "delete-products"} open={params.action === "delete-products"}
confirmButtonState={productBulkDeleteMutationState} confirmButtonState={productBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
productBulkDelete({ productBulkDelete({
@ -369,8 +344,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
</> </>
); )}
}}
</TypedProductBulkDeleteMutation> </TypedProductBulkDeleteMutation>
</> </>
); );

10
src/categories/views/CategoryList/CategoryList.tsx
View file

@ -15,7 +15,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import usePaginator, { import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage"; import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
import { useCategoryBulkDeleteMutation } from "../../mutations"; import { useCategoryBulkDeleteMutation } from "../../mutations";
@ -148,12 +148,6 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
onCompleted: handleCategoryBulkDelete onCompleted: handleCategoryBulkDelete
}); });
const bulkDeleteState = getMutationState(
categoryBulkDeleteOpts.called,
categoryBulkDeleteOpts.loading,
maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
);
return ( return (
<> <>
<CategoryListPage <CategoryListPage
@ -199,7 +193,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
} }
/> />
<ActionDialog <ActionDialog
confirmButtonState={bulkDeleteState} confirmButtonState={categoryBulkDeleteOpts.state}
onClose={() => onClose={() =>
navigate( navigate(
categoryListUrl({ categoryListUrl({

22
src/collections/views/CollectionCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { CollectionCreateInput } from "../../types/globalTypes"; import { CollectionCreateInput } from "../../types/globalTypes";
import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage"; import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
import { TypedCollectionCreateMutation } from "../mutations"; import { TypedCollectionCreateMutation } from "../mutations";
@ -38,13 +38,7 @@ export const CollectionCreate: React.FC = () => {
}; };
return ( return (
<TypedCollectionCreateMutation onCompleted={handleCollectionCreateSuccess}> <TypedCollectionCreateMutation onCompleted={handleCollectionCreateSuccess}>
{(createCollection, { called, data, loading }) => { {(createCollection, createCollectionOpts) => (
const formTransitionState = getMutationState(
called,
loading,
maybe(() => data.collectionCreate.errors)
);
return (
<> <>
<WindowTitle <WindowTitle
title={intl.formatMessage({ title={intl.formatMessage({
@ -53,9 +47,12 @@ export const CollectionCreate: React.FC = () => {
})} })}
/> />
<CollectionCreatePage <CollectionCreatePage
errors={maybe(() => data.collectionCreate.errors, [])} errors={maybe(
() => createCollectionOpts.data.collectionCreate.errors,
[]
)}
onBack={() => navigate(collectionListUrl())} onBack={() => navigate(collectionListUrl())}
disabled={loading} disabled={createCollectionOpts.loading}
onSubmit={formData => onSubmit={formData =>
createCollection({ createCollection({
variables: { variables: {
@ -73,11 +70,10 @@ export const CollectionCreate: React.FC = () => {
} }
}) })
} }
saveButtonBarState={formTransitionState} saveButtonBarState={createCollectionOpts.state}
/> />
</> </>
); )}
}}
</TypedCollectionCreateMutation> </TypedCollectionCreateMutation>
); );
}; };

33
src/collections/views/CollectionDetails.tsx
View file

@ -195,31 +195,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
.homepageCollectionUpdate.errors .homepageCollectionUpdate.errors
) )
); );
const assignTransitionState = getMutationState(
assignProduct.opts.called,
assignProduct.opts.loading,
maybe(
() => assignProduct.opts.data.collectionAddProducts.errors
)
);
const unassignTransitionState = getMutationState(
unassignProduct.opts.called,
unassignProduct.opts.loading,
maybe(
() =>
unassignProduct.opts.data.collectionRemoveProducts.errors
)
);
const removeTransitionState = getMutationState(
removeCollection.opts.called,
removeCollection.opts.loading,
maybe(() => removeCollection.opts.data.collectionDelete.errors)
);
const imageRemoveTransitionState = getMutationState(
updateCollection.opts.called,
updateCollection.opts.loading,
maybe(() => updateCollection.opts.data.collectionUpdate.errors)
);
const { loadNextPage, loadPreviousPage, pageInfo } = paginate( const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.collection.products.pageInfo), maybe(() => data.collection.products.pageInfo),
@ -288,7 +263,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
toggleAll={toggleAll} toggleAll={toggleAll}
/> />
<AssignProductDialog <AssignProductDialog
confirmButtonState={assignTransitionState} confirmButtonState={assignProduct.opts.state}
open={params.action === "assign"} open={params.action === "assign"}
onFetch={search} onFetch={search}
loading={result.loading} loading={result.loading}
@ -307,7 +282,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
)} )}
/> />
<ActionDialog <ActionDialog
confirmButtonState={removeTransitionState} confirmButtonState={removeCollection.opts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => removeCollection.mutate({ id })} onConfirm={() => removeCollection.mutate({ id })}
open={params.action === "remove"} open={params.action === "remove"}
@ -331,7 +306,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
confirmButtonState={unassignTransitionState} confirmButtonState={unassignProduct.opts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
unassignProduct.mutate({ unassignProduct.mutate({
@ -359,7 +334,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
confirmButtonState={imageRemoveTransitionState} confirmButtonState={updateCollection.opts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
updateCollection.mutate({ updateCollection.mutate({

50
src/collections/views/CollectionList/CollectionList.tsx
View file

@ -18,7 +18,7 @@ import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import CollectionListPage from "../../components/CollectionListPage/CollectionListPage"; import CollectionListPage from "../../components/CollectionListPage/CollectionListPage";
import { import {
@ -167,28 +167,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
<TypedCollectionBulkPublish <TypedCollectionBulkPublish
onCompleted={handleCollectionBulkPublish} onCompleted={handleCollectionBulkPublish}
> >
{(collectionBulkPublish, collectionBulkPublishOpts) => { {(collectionBulkPublish, collectionBulkPublishOpts) => (
const bulkDeleteTransitionState = getMutationState(
collectionBulkDeleteOpts.called,
collectionBulkDeleteOpts.loading,
maybe(
() =>
collectionBulkDeleteOpts.data.collectionBulkDelete
.errors
)
);
const bulkPublishTransitionState = getMutationState(
collectionBulkPublishOpts.called,
collectionBulkPublishOpts.loading,
maybe(
() =>
collectionBulkPublishOpts.data.collectionBulkPublish
.errors
)
);
return (
<> <>
<CollectionListPage <CollectionListPage
currentTab={currentTab} currentTab={currentTab}
@ -214,9 +193,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
<> <>
<Button <Button
color="primary" color="primary"
onClick={() => onClick={() => openModal("unpublish", listElements)}
openModal("unpublish", listElements)
}
> >
<FormattedMessage <FormattedMessage
defaultMessage="Unpublish" defaultMessage="Unpublish"
@ -251,7 +228,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
} }
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkPublishTransitionState} confirmButtonState={collectionBulkPublishOpts.state}
onConfirm={() => onConfirm={() =>
collectionBulkPublish({ collectionBulkPublish({
variables: { variables: {
@ -272,9 +249,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
values={{ values={{
counter: maybe(() => params.ids.length), counter: maybe(() => params.ids.length),
displayQuantity: ( displayQuantity: (
<strong> <strong>{maybe(() => params.ids.length)}</strong>
{maybe(() => params.ids.length)}
</strong>
) )
}} }}
/> />
@ -286,7 +261,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
} }
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkPublishTransitionState} confirmButtonState={collectionBulkPublishOpts.state}
onConfirm={() => onConfirm={() =>
collectionBulkPublish({ collectionBulkPublish({
variables: { variables: {
@ -307,9 +282,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
values={{ values={{
counter: maybe(() => params.ids.length), counter: maybe(() => params.ids.length),
displayQuantity: ( displayQuantity: (
<strong> <strong>{maybe(() => params.ids.length)}</strong>
{maybe(() => params.ids.length)}
</strong>
) )
}} }}
/> />
@ -321,7 +294,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
} }
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkDeleteTransitionState} confirmButtonState={collectionBulkDeleteOpts.state}
onConfirm={() => onConfirm={() =>
collectionBulkDelete({ collectionBulkDelete({
variables: { variables: {
@ -341,9 +314,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
values={{ values={{
counter: maybe(() => params.ids.length), counter: maybe(() => params.ids.length),
displayQuantity: ( displayQuantity: (
<strong> <strong>{maybe(() => params.ids.length)}</strong>
{maybe(() => params.ids.length)}
</strong>
) )
}} }}
/> />
@ -363,8 +334,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
tabName={maybe(() => tabs[currentTab - 1].name, "...")} tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/> />
</> </>
); )}
}}
</TypedCollectionBulkPublish> </TypedCollectionBulkPublish>
)} )}
</TypedCollectionBulkDelete> </TypedCollectionBulkDelete>

47
src/customers/views/CustomerAddresses.tsx
View file

@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import CustomerAddressDialog from "../components/CustomerAddressDialog"; import CustomerAddressDialog from "../components/CustomerAddressDialog";
import CustomerAddressListPage from "../components/CustomerAddressListPage"; import CustomerAddressListPage from "../components/CustomerAddressListPage";
import { import {
@ -97,39 +97,6 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
{(removeCustomerAddress, removeCustomerAddressOpts) => ( {(removeCustomerAddress, removeCustomerAddressOpts) => (
<TypedCustomerAddressesQuery variables={{ id }}> <TypedCustomerAddressesQuery variables={{ id }}>
{customerData => { {customerData => {
const createAddressTransitionState = getMutationState(
createCustomerAddressOpts.called,
createCustomerAddressOpts.loading,
maybe(
() =>
createCustomerAddressOpts.data.addressCreate
.errors,
[]
)
);
const updateAddressTransitionState = getMutationState(
updateCustomerAddressOpts.called,
updateCustomerAddressOpts.loading,
maybe(
() =>
updateCustomerAddressOpts.data.addressUpdate
.errors,
[]
)
);
const removeAddressTransitionState = getMutationState(
removeCustomerAddressOpts.called,
removeCustomerAddressOpts.loading,
maybe(
() =>
removeCustomerAddressOpts.data.addressDelete
.errors,
[]
)
);
const countryChoices = maybe( const countryChoices = maybe(
() => () =>
shop.countries.map(country => ({ shop.countries.map(country => ({
@ -161,7 +128,9 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
/> />
<CustomerAddressDialog <CustomerAddressDialog
address={undefined} address={undefined}
confirmButtonState={createAddressTransitionState} confirmButtonState={
createCustomerAddressOpts.state
}
countries={countryChoices} countries={countryChoices}
errors={maybe( errors={maybe(
() => () =>
@ -187,7 +156,9 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
addr => addr.id === params.id addr => addr.id === params.id
) )
)} )}
confirmButtonState={updateAddressTransitionState} confirmButtonState={
updateCustomerAddressOpts.state
}
countries={countryChoices} countries={countryChoices}
errors={maybe( errors={maybe(
() => () =>
@ -214,7 +185,9 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
defaultMessage: "Delete Address", defaultMessage: "Delete Address",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={removeAddressTransitionState} confirmButtonState={
removeCustomerAddressOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
removeCustomerAddress({ removeCustomerAddress({

23
src/customers/views/CustomerDetails.tsx
View file

@ -7,7 +7,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { orderListUrl, orderUrl } from "../../orders/urls"; import { orderListUrl, orderUrl } from "../../orders/urls";
import CustomerDetailsPage from "../components/CustomerDetailsPage/CustomerDetailsPage"; import CustomerDetailsPage from "../components/CustomerDetailsPage/CustomerDetailsPage";
import { import {
@ -67,19 +67,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
variables={{ id }} variables={{ id }}
require={["user"]} require={["user"]}
> >
{customerDetails => { {customerDetails => (
const formTransitionState = getMutationState(
updateCustomerOpts.called,
updateCustomerOpts.loading,
maybe(() => updateCustomerOpts.data.customerUpdate.errors)
);
const removeTransitionState = getMutationState(
removeCustomerOpts.called,
removeCustomerOpts.loading,
maybe(() => removeCustomerOpts.data.customerDelete.errors)
);
return (
<> <>
<WindowTitle <WindowTitle
title={maybe(() => customerDetails.data.user.email)} title={maybe(() => customerDetails.data.user.email)}
@ -94,7 +82,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
errors={maybe( errors={maybe(
() => updateCustomerOpts.data.customerUpdate.errors () => updateCustomerOpts.data.customerUpdate.errors
)} )}
saveButtonBar={formTransitionState} saveButtonBar={updateCustomerOpts.state}
onAddressManageClick={() => onAddressManageClick={() =>
navigate(customerAddressesUrl(id)) navigate(customerAddressesUrl(id))
} }
@ -130,7 +118,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
} }
/> />
<ActionDialog <ActionDialog
confirmButtonState={removeTransitionState} confirmButtonState={removeCustomerOpts.state}
onClose={() => navigate(customerUrl(id), true)} onClose={() => navigate(customerUrl(id), true)}
onConfirm={() => removeCustomer()} onConfirm={() => removeCustomer()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -158,8 +146,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
</> </>
); )}
}}
</TypedCustomerDetailsQuery> </TypedCustomerDetailsQuery>
)} )}
</TypedUpdateCustomerMutation> </TypedUpdateCustomerMutation>

18
src/customers/views/CustomerList/CustomerList.tsx
View file

@ -17,7 +17,7 @@ import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import CustomerListPage from "../../components/CustomerListPage"; import CustomerListPage from "../../components/CustomerListPage";
import { TypedBulkRemoveCustomers } from "../../mutations"; import { TypedBulkRemoveCustomers } from "../../mutations";
@ -147,16 +147,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
return ( return (
<TypedBulkRemoveCustomers onCompleted={handleBulkCustomerDelete}> <TypedBulkRemoveCustomers onCompleted={handleBulkCustomerDelete}>
{(bulkRemoveCustomers, bulkRemoveCustomersOpts) => { {(bulkRemoveCustomers, bulkRemoveCustomersOpts) => (
const removeTransitionState = getMutationState(
bulkRemoveCustomersOpts.called,
bulkRemoveCustomersOpts.loading,
maybe(
() => bulkRemoveCustomersOpts.data.customerBulkDelete.errors
)
);
return (
<> <>
<CustomerListPage <CustomerListPage
currentTab={currentTab} currentTab={currentTab}
@ -204,7 +195,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
} }
onClose={closeModal} onClose={closeModal}
confirmButtonState={removeTransitionState} confirmButtonState={bulkRemoveCustomersOpts.state}
onConfirm={() => onConfirm={() =>
bulkRemoveCustomers({ bulkRemoveCustomers({
variables: { variables: {
@ -244,8 +235,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
tabName={maybe(() => tabs[currentTab - 1].name, "...")} tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/> />
</> </>
); )}
}}
</TypedBulkRemoveCustomers> </TypedBulkRemoveCustomers>
); );
}} }}

16
src/discounts/views/SaleCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { decimal, joinDateTime, maybe } from "../../misc";
import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes"; import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
import SaleCreatePage from "../components/SaleCreatePage"; import SaleCreatePage from "../components/SaleCreatePage";
import { TypedSaleCreate } from "../mutations"; import { TypedSaleCreate } from "../mutations";
@ -38,14 +38,7 @@ export const SaleDetails: React.FC = () => {
return ( return (
<TypedSaleCreate onCompleted={handleSaleCreate}> <TypedSaleCreate onCompleted={handleSaleCreate}>
{(saleCreate, saleCreateOpts) => { {(saleCreate, saleCreateOpts) => (
const formTransitionState = getMutationState(
saleCreateOpts.called,
saleCreateOpts.loading,
maybe(() => saleCreateOpts.data.saleCreate.errors)
);
return (
<> <>
<WindowTitle title={intl.formatMessage(sectionNames.sales)} /> <WindowTitle title={intl.formatMessage(sectionNames.sales)} />
<SaleCreatePage <SaleCreatePage
@ -71,11 +64,10 @@ export const SaleDetails: React.FC = () => {
} }
}) })
} }
saveButtonBarState={formTransitionState} saveButtonBarState={saleCreateOpts.state}
/> />
</> </>
); )}
}}
</TypedSaleCreate> </TypedSaleCreate>
); );
}; };

52
src/discounts/views/SaleDetails.tsx
View file

@ -22,7 +22,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch"; import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls"; import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls"; import { collectionUrl } from "../../collections/urls";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { decimal, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls"; import { productUrl } from "../../products/urls";
import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes"; import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
import SaleDetailsPage, { import SaleDetailsPage, {
@ -169,34 +169,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
SaleDetailsPageTab.collections SaleDetailsPageTab.collections
? maybe(() => data.sale.collections.pageInfo) ? maybe(() => data.sale.collections.pageInfo)
: maybe(() => data.sale.products.pageInfo); : maybe(() => data.sale.products.pageInfo);
const formTransitionState = getMutationState(
saleUpdateOpts.called,
saleUpdateOpts.loading,
maybe(() => saleUpdateOpts.data.saleUpdate.errors)
);
const assignTransitionState = getMutationState(
saleCataloguesAddOpts.called,
saleCataloguesAddOpts.loading,
maybe(
() =>
saleCataloguesAddOpts.data.saleCataloguesAdd
.errors
)
);
const unassignTransitionState = getMutationState(
saleCataloguesRemoveOpts.called,
saleCataloguesRemoveOpts.loading,
maybe(
() =>
saleCataloguesRemoveOpts.data.saleCataloguesRemove
.errors
)
);
const removeTransitionState = getMutationState(
saleDeleteOpts.called,
saleDeleteOpts.loading,
maybe(() => saleDeleteOpts.data.saleDelete.errors)
);
const handleCategoriesUnassign = (ids: string[]) => const handleCategoriesUnassign = (ids: string[]) =>
saleCataloguesRemove({ saleCataloguesRemove({
@ -308,7 +280,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
}) })
} }
onRemove={() => openModal("remove")} onRemove={() => openModal("remove")}
saveButtonBarState={formTransitionState} saveButtonBarState={saleUpdateOpts.state}
categoryListToolbar={ categoryListToolbar={
<Button <Button
color="primary" color="primary"
@ -360,7 +332,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
toggleAll={toggleAll} toggleAll={toggleAll}
/> />
<AssignProductDialog <AssignProductDialog
confirmButtonState={assignTransitionState} confirmButtonState={saleCataloguesAddOpts.state}
open={params.action === "assign-product"} open={params.action === "assign-product"}
onFetch={searchProducts} onFetch={searchProducts}
loading={searchProductsOpts.loading} loading={searchProductsOpts.loading}
@ -394,7 +366,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
suggestedCategory => suggestedCategory.id suggestedCategory => suggestedCategory.id
) )
)} )}
confirmButtonState={assignTransitionState} confirmButtonState={saleCataloguesAddOpts.state}
open={params.action === "assign-category"} open={params.action === "assign-category"}
onFetch={searchCategories} onFetch={searchCategories}
loading={searchCategoriesOpts.loading} loading={searchCategoriesOpts.loading}
@ -421,7 +393,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
suggestedCategory => suggestedCategory.id suggestedCategory => suggestedCategory.id
) )
)} )}
confirmButtonState={assignTransitionState} confirmButtonState={saleCataloguesAddOpts.state}
open={params.action === "assign-collection"} open={params.action === "assign-collection"}
onFetch={searchCollections} onFetch={searchCollections}
loading={searchCollectionsOpts.loading} loading={searchCollectionsOpts.loading}
@ -449,7 +421,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
defaultMessage: "Unassign Categories From Sale", defaultMessage: "Unassign Categories From Sale",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={unassignTransitionState} confirmButtonState={
saleCataloguesRemoveOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
handleCategoriesUnassign(params.ids) handleCategoriesUnassign(params.ids)
@ -480,7 +454,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
"Unassign Collections From Sale", "Unassign Collections From Sale",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={unassignTransitionState} confirmButtonState={
saleCataloguesRemoveOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
handleCollectionsUnassign(params.ids) handleCollectionsUnassign(params.ids)
@ -510,7 +486,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
defaultMessage: "Unassign Products From Sale", defaultMessage: "Unassign Products From Sale",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={unassignTransitionState} confirmButtonState={
saleCataloguesRemoveOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
handleProductsUnassign(params.ids) handleProductsUnassign(params.ids)
@ -537,7 +515,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
defaultMessage: "Delete Sale", defaultMessage: "Delete Sale",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={removeTransitionState} confirmButtonState={saleDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
variant="delete" variant="delete"
onConfirm={() => onConfirm={() =>

9
src/discounts/views/SaleList/SaleList.tsx
View file

@ -19,7 +19,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl"; import { commonMessages, sectionNames } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import SaleListPage from "../../components/SaleListPage"; import SaleListPage from "../../components/SaleListPage";
import { TypedSaleBulkDelete } from "../../mutations"; import { TypedSaleBulkDelete } from "../../mutations";
@ -153,11 +153,6 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
return ( return (
<TypedSaleBulkDelete onCompleted={handleSaleBulkDelete}> <TypedSaleBulkDelete onCompleted={handleSaleBulkDelete}>
{(saleBulkDelete, saleBulkDeleteOpts) => { {(saleBulkDelete, saleBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
saleBulkDeleteOpts.called,
saleBulkDeleteOpts.loading,
maybe(() => saleBulkDeleteOpts.data.saleBulkDelete.errors)
);
const onSaleBulkDelete = () => const onSaleBulkDelete = () =>
saleBulkDelete({ saleBulkDelete({
variables: { variables: {
@ -208,7 +203,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
} }
/> />
<ActionDialog <ActionDialog
confirmButtonState={bulkRemoveTransitionState} confirmButtonState={saleBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={onSaleBulkDelete} onConfirm={onSaleBulkDelete}
open={params.action === "remove" && canOpenBulkActionDialog} open={params.action === "remove" && canOpenBulkActionDialog}

16
src/discounts/views/VoucherCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { decimal, joinDateTime, maybe } from "../../misc";
import { import {
DiscountValueTypeEnum, DiscountValueTypeEnum,
VoucherTypeEnum VoucherTypeEnum
@ -36,14 +36,7 @@ export const VoucherDetails: React.FC = () => {
return ( return (
<TypedVoucherCreate onCompleted={handleVoucherCreate}> <TypedVoucherCreate onCompleted={handleVoucherCreate}>
{(voucherCreate, voucherCreateOpts) => { {(voucherCreate, voucherCreateOpts) => (
const formTransitionState = getMutationState(
voucherCreateOpts.called,
voucherCreateOpts.loading,
maybe(() => voucherCreateOpts.data.voucherCreate.errors)
);
return (
<> <>
<WindowTitle title={intl.formatMessage(sectionNames.vouchers)} /> <WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
<VoucherCreatePage <VoucherCreatePage
@ -92,11 +85,10 @@ export const VoucherDetails: React.FC = () => {
} }
}) })
} }
saveButtonBarState={formTransitionState} saveButtonBarState={voucherCreateOpts.state}
/> />
</> </>
); )}
}}
</TypedVoucherCreate> </TypedVoucherCreate>
); );
}; };

64
src/discounts/views/VoucherDetails.tsx
View file

@ -22,7 +22,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch"; import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls"; import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls"; import { collectionUrl } from "../../collections/urls";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc"; import { decimal, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls"; import { productUrl } from "../../products/urls";
import { import {
DiscountValueTypeEnum, DiscountValueTypeEnum,
@ -171,38 +171,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
VoucherDetailsPageTab.collections VoucherDetailsPageTab.collections
? maybe(() => data.voucher.collections.pageInfo) ? maybe(() => data.voucher.collections.pageInfo)
: maybe(() => data.voucher.products.pageInfo); : maybe(() => data.voucher.products.pageInfo);
const formTransitionState = getMutationState(
voucherUpdateOpts.called,
voucherUpdateOpts.loading,
maybe(
() => voucherUpdateOpts.data.voucherUpdate.errors
)
);
const assignTransitionState = getMutationState(
voucherCataloguesAddOpts.called,
voucherCataloguesAddOpts.loading,
maybe(
() =>
voucherCataloguesAddOpts.data.voucherCataloguesAdd
.errors
)
);
const unassignTransitionState = getMutationState(
voucherCataloguesRemoveOpts.called,
voucherCataloguesRemoveOpts.loading,
maybe(
() =>
voucherCataloguesRemoveOpts.data
.voucherCataloguesRemove.errors
)
);
const removeTransitionState = getMutationState(
voucherDeleteOpts.called,
voucherDeleteOpts.loading,
maybe(
() => voucherDeleteOpts.data.voucherDelete.errors
)
);
const handleCategoriesUnassign = (ids: string[]) => const handleCategoriesUnassign = (ids: string[]) =>
voucherCataloguesRemove({ voucherCataloguesRemove({
@ -387,7 +355,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
}) })
} }
onRemove={() => openModal("remove")} onRemove={() => openModal("remove")}
saveButtonBarState={formTransitionState} saveButtonBarState={voucherUpdateOpts.state}
categoryListToolbar={ categoryListToolbar={
<Button <Button
color="primary" color="primary"
@ -446,7 +414,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
suggestedCategory => suggestedCategory.id suggestedCategory => suggestedCategory.id
) )
)} )}
confirmButtonState={assignTransitionState} confirmButtonState={
voucherCataloguesAddOpts.state
}
open={params.action === "assign-category"} open={params.action === "assign-category"}
onFetch={searchCategories} onFetch={searchCategories}
loading={searchCategoriesOpts.loading} loading={searchCategoriesOpts.loading}
@ -473,7 +443,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
suggestedCategory => suggestedCategory.id suggestedCategory => suggestedCategory.id
) )
)} )}
confirmButtonState={assignTransitionState} confirmButtonState={
voucherCataloguesAddOpts.state
}
open={params.action === "assign-collection"} open={params.action === "assign-collection"}
onFetch={searchCollections} onFetch={searchCollections}
loading={searchCollectionsOpts.loading} loading={searchCollectionsOpts.loading}
@ -493,7 +465,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
} }
/> />
<DiscountCountrySelectDialog <DiscountCountrySelectDialog
confirmButtonState={formTransitionState} confirmButtonState={voucherUpdateOpts.state}
countries={maybe(() => shop.countries, [])} countries={maybe(() => shop.countries, [])}
onClose={() => navigate(voucherUrl(id))} onClose={() => navigate(voucherUrl(id))}
onConfirm={formData => onConfirm={formData =>
@ -516,7 +488,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
)} )}
/> />
<AssignProductDialog <AssignProductDialog
confirmButtonState={assignTransitionState} confirmButtonState={
voucherCataloguesAddOpts.state
}
open={params.action === "assign-product"} open={params.action === "assign-product"}
onFetch={searchProducts} onFetch={searchProducts}
loading={searchProductsOpts.loading} loading={searchProductsOpts.loading}
@ -552,7 +526,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
"Unassign Categories From Voucher", "Unassign Categories From Voucher",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={unassignTransitionState} confirmButtonState={
voucherCataloguesRemoveOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
handleCategoriesUnassign(params.ids) handleCategoriesUnassign(params.ids)
@ -583,7 +559,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
"Unassign Collections From Voucher", "Unassign Collections From Voucher",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={unassignTransitionState} confirmButtonState={
voucherCataloguesRemoveOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
handleCollectionsUnassign(params.ids) handleCollectionsUnassign(params.ids)
@ -614,7 +592,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
"Unassign Products From Voucher", "Unassign Products From Voucher",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={unassignTransitionState} confirmButtonState={
voucherCataloguesRemoveOpts.state
}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
handleProductsUnassign(params.ids) handleProductsUnassign(params.ids)
@ -641,7 +621,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
defaultMessage: "Delete Voucher", defaultMessage: "Delete Voucher",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={removeTransitionState} confirmButtonState={voucherDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
variant="delete" variant="delete"
onConfirm={() => onConfirm={() =>

10
src/discounts/views/VoucherList/VoucherList.tsx
View file

@ -19,7 +19,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl"; import { commonMessages, sectionNames } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import VoucherListPage from "../../components/VoucherListPage"; import VoucherListPage from "../../components/VoucherListPage";
import { TypedVoucherBulkDelete } from "../../mutations"; import { TypedVoucherBulkDelete } from "../../mutations";
@ -153,17 +153,13 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
return ( return (
<TypedVoucherBulkDelete onCompleted={handleVoucherBulkDelete}> <TypedVoucherBulkDelete onCompleted={handleVoucherBulkDelete}>
{(voucherBulkDelete, voucherBulkDeleteOpts) => { {(voucherBulkDelete, voucherBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
voucherBulkDeleteOpts.called,
voucherBulkDeleteOpts.loading,
maybe(() => voucherBulkDeleteOpts.data.voucherBulkDelete.errors)
);
const onVoucherBulkDelete = () => const onVoucherBulkDelete = () =>
voucherBulkDelete({ voucherBulkDelete({
variables: { variables: {
ids: params.ids ids: params.ids
} }
}); });
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -211,7 +207,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
} }
/> />
<ActionDialog <ActionDialog
confirmButtonState={bulkRemoveTransitionState} confirmButtonState={voucherBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={onVoucherBulkDelete} onConfirm={onVoucherBulkDelete}
open={params.action === "remove" && canOpenBulkActionDialog} open={params.action === "remove" && canOpenBulkActionDialog}

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

@ -11,7 +11,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import usePageSearch from "@saleor/searches/usePageSearch"; 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 { getMutationState, maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { pageUrl } from "../../../pages/urls"; import { pageUrl } from "../../../pages/urls";
import MenuDetailsPage, { import MenuDetailsPage, {
MenuDetailsSubmitData MenuDetailsSubmitData
@ -137,19 +137,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
onCompleted={data => handleUpdate(data, notify, refetch, intl)} onCompleted={data => handleUpdate(data, notify, refetch, intl)}
> >
{(menuUpdate, menuUpdateOpts) => { {(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)
);
// 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
@ -208,12 +195,12 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
) )
} }
onSubmit={handleSubmit} onSubmit={handleSubmit}
saveButtonState={updateState} saveButtonState={menuUpdateOpts.state}
/> />
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
onClose={closeModal} onClose={closeModal}
confirmButtonState={deleteState} confirmButtonState={menuDeleteOpts.state}
onConfirm={() => menuDelete({ variables: { id } })} onConfirm={() => menuDelete({ variables: { id } })}
variant="delete" variant="delete"
title={intl.formatMessage({ title={intl.formatMessage({
@ -253,15 +240,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
menuItemCreate({ variables }); menuItemCreate({ variables });
}; };
const formTransitionState = getMutationState(
menuItemCreateOpts.called,
menuItemCreateOpts.loading,
maybe(
() =>
menuItemCreateOpts.data.menuItemCreate.errors
)
);
return ( return (
<MenuItemDialog <MenuItemDialog
open={params.action === "add-item"} open={params.action === "add-item"}
@ -277,7 +255,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
categorySearch.result.loading || categorySearch.result.loading ||
collectionSearch.result.loading collectionSearch.result.loading
} }
confirmButtonState={formTransitionState} confirmButtonState={menuItemCreateOpts.state}
disabled={menuItemCreateOpts.loading} disabled={menuItemCreateOpts.loading}
onClose={closeModal} onClose={closeModal}
onSubmit={handleSubmit} onSubmit={handleSubmit}
@ -310,15 +288,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
) )
); );
const formTransitionState = getMutationState(
menuItemUpdateOpts.called,
menuItemUpdateOpts.loading,
maybe(
() =>
menuItemUpdateOpts.data.menuItemUpdate.errors
)
);
const initialFormData: MenuItemDialogFormData = { const initialFormData: MenuItemDialogFormData = {
id: maybe(() => getItemId(menuItem)), id: maybe(() => getItemId(menuItem)),
name: maybe(() => menuItem.name, "..."), name: maybe(() => menuItem.name, "..."),
@ -347,7 +316,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
categorySearch.result.loading || categorySearch.result.loading ||
collectionSearch.result.loading collectionSearch.result.loading
} }
confirmButtonState={formTransitionState} confirmButtonState={menuItemUpdateOpts.state}
disabled={menuItemUpdateOpts.loading} disabled={menuItemUpdateOpts.loading}
onClose={closeModal} onClose={closeModal}
onSubmit={handleSubmit} onSubmit={handleSubmit}

34
src/navigation/views/MenuList.tsx
View file

@ -13,7 +13,7 @@ import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { buttonMessages, commonMessages } from "@saleor/intl"; import { buttonMessages, commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import MenuCreateDialog from "../components/MenuCreateDialog"; import MenuCreateDialog from "../components/MenuCreateDialog";
import MenuListPage from "../components/MenuListPage"; import MenuListPage from "../components/MenuListPage";
@ -107,28 +107,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
<MenuDeleteMutation onCompleted={handleDelete}> <MenuDeleteMutation onCompleted={handleDelete}>
{(menuDelete, menuDeleteOpts) => ( {(menuDelete, menuDeleteOpts) => (
<MenuBulkDeleteMutation onCompleted={handleBulkDelete}> <MenuBulkDeleteMutation onCompleted={handleBulkDelete}>
{(menuBulkDelete, menuBulkDeleteOpts) => { {(menuBulkDelete, menuBulkDeleteOpts) => (
const createTransitionState = getMutationState(
menuCreateOpts.called,
menuCreateOpts.loading,
maybe(() => menuCreateOpts.data.menuCreate.errors)
);
const deleteTransitionState = getMutationState(
menuDeleteOpts.called,
menuDeleteOpts.loading,
maybe(() => menuDeleteOpts.data.menuDelete.errors)
);
const bulkDeleteTransitionState = getMutationState(
menuBulkDeleteOpts.called,
menuBulkDeleteOpts.loading,
maybe(
() => menuBulkDeleteOpts.data.menuBulkDelete.errors
)
);
return (
<> <>
<MenuListPage <MenuListPage
disabled={loading} disabled={loading}
@ -180,7 +159,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
/> />
<MenuCreateDialog <MenuCreateDialog
open={params.action === "add"} open={params.action === "add"}
confirmButtonState={createTransitionState} confirmButtonState={menuCreateOpts.state}
disabled={menuCreateOpts.loading} disabled={menuCreateOpts.loading}
onClose={closeModal} onClose={closeModal}
onConfirm={formData => onConfirm={formData =>
@ -192,7 +171,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
onClose={closeModal} onClose={closeModal}
confirmButtonState={deleteTransitionState} confirmButtonState={menuDeleteOpts.state}
onConfirm={() => onConfirm={() =>
menuDelete({ menuDelete({
variables: { variables: {
@ -229,7 +208,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
maybe(() => params.ids.length > 0) maybe(() => params.ids.length > 0)
} }
onClose={closeModal} onClose={closeModal}
confirmButtonState={bulkDeleteTransitionState} confirmButtonState={menuBulkDeleteOpts.state}
onConfirm={() => onConfirm={() =>
menuBulkDelete({ menuBulkDelete({
variables: { variables: {
@ -266,8 +245,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
</> </>
); )}
}}
</MenuBulkDeleteMutation> </MenuBulkDeleteMutation>
)} )}
</MenuDeleteMutation> </MenuDeleteMutation>

29
src/orders/views/OrderDetails/index.tsx
View file

@ -153,16 +153,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderDraftCancel, orderDraftCancel,
orderDraftFinalize, orderDraftFinalize,
orderPaymentMarkAsPaid orderPaymentMarkAsPaid
}) => { }) => (
const finalizeTransitionState = getMutationState(
orderDraftFinalize.opts.called,
orderDraftFinalize.opts.loading,
maybe(
() =>
orderDraftFinalize.opts.data.draftOrderComplete.errors
)
);
return (
<> <>
{maybe(() => order.status !== OrderStatus.DRAFT) ? ( {maybe(() => order.status !== OrderStatus.DRAFT) ? (
<> <>
@ -204,8 +195,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onPaymentCapture={() => openModal("capture")} onPaymentCapture={() => openModal("capture")}
onPaymentVoid={() => openModal("void")} onPaymentVoid={() => openModal("void")}
onPaymentRefund={() => openModal("refund")} onPaymentRefund={() => openModal("refund")}
onProductClick={id => () => onProductClick={id => () => navigate(productUrl(id))}
navigate(productUrl(id))}
onBillingAddressEdit={() => onBillingAddressEdit={() =>
openModal("edit-billing-address") openModal("edit-billing-address")
} }
@ -241,8 +231,8 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderPaymentMarkAsPaid.opts.loading, orderPaymentMarkAsPaid.opts.loading,
maybe( maybe(
() => () =>
orderPaymentMarkAsPaid.opts.data orderPaymentMarkAsPaid.opts.data.orderMarkAsPaid
.orderMarkAsPaid.errors .errors
) )
)} )}
onClose={closeModal} onClose={closeModal}
@ -290,8 +280,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderPaymentRefund.opts.loading, orderPaymentRefund.opts.loading,
maybe( maybe(
() => () =>
orderPaymentRefund.opts.data.orderRefund orderPaymentRefund.opts.data.orderRefund.errors
.errors
) )
)} )}
initial={maybe(() => order.total.gross.amount)} initial={maybe(() => order.total.gross.amount)}
@ -474,7 +463,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderNumber={maybe(() => order.number)} orderNumber={maybe(() => order.number)}
/> />
<OrderDraftFinalizeDialog <OrderDraftFinalizeDialog
confirmButtonState={finalizeTransitionState} confirmButtonState={orderDraftFinalize.opts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => orderDraftFinalize.mutate({ id })} onConfirm={() => orderDraftFinalize.mutate({ id })}
open={params.action === "finalize"} open={params.action === "finalize"}
@ -523,8 +512,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "add-order-line"} open={params.action === "add-order-line"}
hasMore={maybe( hasMore={maybe(
() => () =>
variantSearchOpts.data.search.pageInfo variantSearchOpts.data.search.pageInfo.hasNextPage
.hasNextPage
)} )}
products={maybe(() => products={maybe(() =>
variantSearchOpts.data.search.edges.map( variantSearchOpts.data.search.edges.map(
@ -609,8 +597,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
} }
/> />
</> </>
); )}
}}
</OrderOperations> </OrderOperations>
)} )}
</OrderDetailsMessages> </OrderDetailsMessages>

12
src/orders/views/OrderDraftList/OrderDraftList.tsx
View file

@ -16,7 +16,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, { import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import OrderDraftListPage from "../../components/OrderDraftListPage"; import OrderDraftListPage from "../../components/OrderDraftListPage";
import { import {
@ -167,14 +167,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
onCompleted={handleOrderDraftBulkCancel} onCompleted={handleOrderDraftBulkCancel}
> >
{(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => { {(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
orderDraftBulkDeleteOpts.called,
orderDraftBulkDeleteOpts.loading,
maybe(
() =>
orderDraftBulkDeleteOpts.data.draftOrderBulkDelete.errors
)
);
const onOrderDraftBulkDelete = () => const onOrderDraftBulkDelete = () =>
orderDraftBulkDelete({ orderDraftBulkDelete({
variables: { variables: {
@ -225,7 +217,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
} }
/> />
<ActionDialog <ActionDialog
confirmButtonState={bulkRemoveTransitionState} confirmButtonState={orderDraftBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={onOrderDraftBulkDelete} onConfirm={onOrderDraftBulkDelete}
open={params.action === "remove"} open={params.action === "remove"}

9
src/orders/views/OrderList/OrderList.tsx
View file

@ -15,7 +15,7 @@ import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog"; import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
import OrderListPage from "../../components/OrderListPage/OrderListPage"; import OrderListPage from "../../components/OrderListPage/OrderListPage";
@ -176,11 +176,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
return ( return (
<TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}> <TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}>
{(orderBulkCancel, orderBulkCancelOpts) => { {(orderBulkCancel, orderBulkCancelOpts) => {
const orderBulkCancelTransitionState = getMutationState(
orderBulkCancelOpts.called,
orderBulkCancelOpts.loading,
maybe(() => orderBulkCancelOpts.data.orderBulkCancel.errors)
);
const onOrderBulkCancel = (restock: boolean) => const onOrderBulkCancel = (restock: boolean) =>
orderBulkCancel({ orderBulkCancel({
variables: { variables: {
@ -244,7 +239,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
} }
/> />
<OrderBulkCancelDialog <OrderBulkCancelDialog
confirmButtonState={orderBulkCancelTransitionState} confirmButtonState={orderBulkCancelOpts.state}
numberOfOrders={maybe( numberOfOrders={maybe(
() => params.ids.length.toString(), () => params.ids.length.toString(),
"..." "..."

16
src/pages/views/PageCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import PageDetailsPage from "../components/PageDetailsPage"; import PageDetailsPage from "../components/PageDetailsPage";
import { TypedPageCreate } from "../mutations"; import { TypedPageCreate } from "../mutations";
import { PageCreate as PageCreateData } from "../types/PageCreate"; import { PageCreate as PageCreateData } from "../types/PageCreate";
@ -32,14 +32,7 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
return ( return (
<TypedPageCreate onCompleted={handlePageCreate}> <TypedPageCreate onCompleted={handlePageCreate}>
{(pageCreate, pageCreateOpts) => { {(pageCreate, pageCreateOpts) => (
const formTransitionState = getMutationState(
pageCreateOpts.called,
pageCreateOpts.loading,
maybe(() => pageCreateOpts.data.pageCreate.errors)
);
return (
<> <>
<WindowTitle <WindowTitle
title={intl.formatMessage({ title={intl.formatMessage({
@ -50,7 +43,7 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
<PageDetailsPage <PageDetailsPage
disabled={pageCreateOpts.loading} disabled={pageCreateOpts.loading}
errors={maybe(() => pageCreateOpts.data.pageCreate.errors, [])} errors={maybe(() => pageCreateOpts.data.pageCreate.errors, [])}
saveButtonBarState={formTransitionState} saveButtonBarState={pageCreateOpts.state}
page={null} page={null}
onBack={() => navigate(pageListUrl())} onBack={() => navigate(pageListUrl())}
onRemove={() => undefined} onRemove={() => undefined}
@ -77,8 +70,7 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
} }
/> />
</> </>
); )}
}}
</TypedPageCreate> </TypedPageCreate>
); );
}; };

28
src/pages/views/PageDetails.tsx
View file

@ -6,7 +6,7 @@ import ActionDialog from "@saleor/components/ActionDialog";
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { PageInput } from "../../types/globalTypes"; import { PageInput } from "../../types/globalTypes";
import PageDetailsPage, { FormData } from "../components/PageDetailsPage"; import PageDetailsPage, { FormData } from "../components/PageDetailsPage";
import { TypedPageRemove, TypedPageUpdate } from "../mutations"; import { TypedPageRemove, TypedPageUpdate } from "../mutations";
@ -56,19 +56,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
<TypedPageUpdate> <TypedPageUpdate>
{(pageUpdate, pageUpdateOpts) => ( {(pageUpdate, pageUpdateOpts) => (
<TypedPageDetailsQuery variables={{ id }}> <TypedPageDetailsQuery variables={{ id }}>
{pageDetails => { {pageDetails => (
const formTransitionState = getMutationState(
pageUpdateOpts.called,
pageUpdateOpts.loading,
maybe(() => pageUpdateOpts.data.pageUpdate.errors)
);
const removeTransitionState = getMutationState(
pageRemoveOpts.called,
pageRemoveOpts.loading,
maybe(() => pageRemoveOpts.data.pageDelete.errors)
);
return (
<> <>
<WindowTitle <WindowTitle
title={maybe(() => pageDetails.data.page.title)} title={maybe(() => pageDetails.data.page.title)}
@ -79,7 +67,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
() => pageUpdateOpts.data.pageUpdate.errors, () => pageUpdateOpts.data.pageUpdate.errors,
[] []
)} )}
saveButtonBarState={formTransitionState} saveButtonBarState={pageUpdateOpts.state}
page={maybe(() => pageDetails.data.page)} page={maybe(() => pageDetails.data.page)}
onBack={() => navigate(pageListUrl())} onBack={() => navigate(pageListUrl())}
onRemove={() => onRemove={() =>
@ -100,7 +88,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
/> />
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
confirmButtonState={removeTransitionState} confirmButtonState={pageRemoveOpts.state}
title={intl.formatMessage({ title={intl.formatMessage({
defaultMessage: "Delete Page", defaultMessage: "Delete Page",
description: "dialog header" description: "dialog header"
@ -116,10 +104,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
values={{ values={{
title: ( title: (
<strong> <strong>
{maybe( {maybe(() => pageDetails.data.page.title, "...")}
() => pageDetails.data.page.title,
"..."
)}
</strong> </strong>
) )
}} }}
@ -127,8 +112,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
</> </>
); )}
}}
</TypedPageDetailsQuery> </TypedPageDetailsQuery>
)} )}
</TypedPageUpdate> </TypedPageUpdate>

34
src/pages/views/PageList.tsx
View file

@ -14,7 +14,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, { import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import PageListPage from "../components/PageListPage/PageListPage"; import PageListPage from "../components/PageListPage/PageListPage";
import { TypedPageBulkPublish, TypedPageBulkRemove } from "../mutations"; import { TypedPageBulkPublish, TypedPageBulkRemove } from "../mutations";
@ -107,20 +107,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
<TypedPageBulkRemove onCompleted={handlePageBulkRemove}> <TypedPageBulkRemove onCompleted={handlePageBulkRemove}>
{(bulkPageRemove, bulkPageRemoveOpts) => ( {(bulkPageRemove, bulkPageRemoveOpts) => (
<TypedPageBulkPublish onCompleted={handlePageBulkPublish}> <TypedPageBulkPublish onCompleted={handlePageBulkPublish}>
{(bulkPagePublish, bulkPagePublishOpts) => { {(bulkPagePublish, bulkPagePublishOpts) => (
const deleteTransitionState = getMutationState(
bulkPageRemoveOpts.called,
bulkPageRemoveOpts.loading,
maybe(() => bulkPageRemoveOpts.data.pageBulkDelete.errors)
);
const publishTransitionState = getMutationState(
bulkPagePublishOpts.called,
bulkPagePublishOpts.loading,
maybe(() => bulkPagePublishOpts.data.pageBulkPublish.errors)
);
return (
<> <>
<PageListPage <PageListPage
disabled={loading} disabled={loading}
@ -139,9 +126,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
<> <>
<Button <Button
color="primary" color="primary"
onClick={() => onClick={() => openModal("unpublish", listElements)}
openModal("unpublish", listElements)
}
> >
<FormattedMessage <FormattedMessage
defaultMessage="Unpublish" defaultMessage="Unpublish"
@ -173,7 +158,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
<ActionDialog <ActionDialog
open={params.action === "publish"} open={params.action === "publish"}
onClose={closeModal} onClose={closeModal}
confirmButtonState={publishTransitionState} confirmButtonState={bulkPagePublishOpts.state}
onConfirm={() => onConfirm={() =>
bulkPagePublish({ bulkPagePublish({
variables: { variables: {
@ -194,9 +179,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
values={{ values={{
counter: maybe(() => params.ids.length), counter: maybe(() => params.ids.length),
displayQuantity: ( displayQuantity: (
<strong> <strong>{maybe(() => params.ids.length)}</strong>
{maybe(() => params.ids.length)}
</strong>
) )
}} }}
/> />
@ -205,7 +188,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
<ActionDialog <ActionDialog
open={params.action === "unpublish"} open={params.action === "unpublish"}
onClose={closeModal} onClose={closeModal}
confirmButtonState={publishTransitionState} confirmButtonState={bulkPagePublishOpts.state}
onConfirm={() => onConfirm={() =>
bulkPagePublish({ bulkPagePublish({
variables: { variables: {
@ -233,7 +216,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
onClose={closeModal} onClose={closeModal}
confirmButtonState={deleteTransitionState} confirmButtonState={bulkPageRemoveOpts.state}
onConfirm={() => onConfirm={() =>
bulkPageRemove({ bulkPageRemove({
variables: { variables: {
@ -259,8 +242,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
/> />
</ActionDialog> </ActionDialog>
</> </>
); )}
}}
</TypedPageBulkPublish> </TypedPageBulkPublish>
)} )}
</TypedPageBulkRemove> </TypedPageBulkRemove>

14
src/plugins/views/PluginsDetails.tsx
View file

@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { ConfigurationItemInput } from "@saleor/types/globalTypes"; import { ConfigurationItemInput } from "@saleor/types/globalTypes";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import PluginsDetailsPage from "../components/PluginsDetailsPage"; import PluginsDetailsPage from "../components/PluginsDetailsPage";
import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog"; import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog";
import { TypedPluginUpdate } from "../mutations"; import { TypedPluginUpdate } from "../mutations";
@ -85,12 +85,6 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
{pluginDetails => ( {pluginDetails => (
<TypedPluginUpdate onCompleted={handleUpdate}> <TypedPluginUpdate onCompleted={handleUpdate}>
{(pluginUpdate, pluginUpdateOpts) => { {(pluginUpdate, pluginUpdateOpts) => {
const formTransitionState = getMutationState(
pluginUpdateOpts.called,
pluginUpdateOpts.loading,
maybe(() => pluginUpdateOpts.data.pluginUpdate.errors)
);
const formErrors = maybe( const formErrors = maybe(
() => pluginUpdateOpts.data.pluginUpdate.errors, () => pluginUpdateOpts.data.pluginUpdate.errors,
[] []
@ -120,7 +114,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
disabled={pluginDetails.loading} disabled={pluginDetails.loading}
errors={formErrors} errors={formErrors}
saveButtonBarState={ saveButtonBarState={
!params.action ? formTransitionState : "default" !params.action ? pluginUpdateOpts.state : "default"
} }
plugin={maybe(() => pluginDetails.data.plugin)} plugin={maybe(() => pluginDetails.data.plugin)}
onBack={() => navigate(pluginsListUrl())} onBack={() => navigate(pluginsListUrl())}
@ -145,7 +139,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
<> <>
<ActionDialog <ActionDialog
confirmButtonState={ confirmButtonState={
!!params.action ? formTransitionState : "default" !!params.action ? pluginUpdateOpts.state : "default"
} }
onClose={closeModal} onClose={closeModal}
open={params.action === "clear" && !!params.field} open={params.action === "clear" && !!params.field}
@ -161,7 +155,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
</ActionDialog> </ActionDialog>
<PluginSecretFieldDialog <PluginSecretFieldDialog
confirmButtonState={ confirmButtonState={
!!params.action ? formTransitionState : "default" !!params.action ? pluginUpdateOpts.state : "default"
} }
field={maybe(() => field={maybe(() =>
pluginDetails.data.plugin.configuration.find( pluginDetails.data.plugin.configuration.find(

19
src/productTypes/views/ProductTypeCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle"; import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import ProductTypeCreatePage, { import ProductTypeCreatePage, {
ProductTypeForm ProductTypeForm
} from "../components/ProductTypeCreatePage"; } from "../components/ProductTypeCreatePage";
@ -30,11 +30,7 @@ export const ProductTypeCreate: React.FC = () => {
}; };
return ( return (
<TypedProductTypeCreateMutation onCompleted={handleCreateSuccess}> <TypedProductTypeCreateMutation onCompleted={handleCreateSuccess}>
{( {(createProductType, createProductTypeOpts) => {
createProductType,
{ called, loading, data: createProductTypeData }
) => {
const formTransitionState = getMutationState(loading, called);
const handleCreate = (formData: ProductTypeForm) => const handleCreate = (formData: ProductTypeForm) =>
createProductType({ createProductType({
variables: { variables: {
@ -61,17 +57,16 @@ export const ProductTypeCreate: React.FC = () => {
<ProductTypeCreatePage <ProductTypeCreatePage
defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)} defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
disabled={loading} disabled={loading}
errors={ errors={maybe(
createProductTypeData () => createProductTypeOpts.data.productTypeCreate.errors,
? createProductTypeData.productTypeCreate.errors []
: undefined )}
}
pageTitle={intl.formatMessage({ pageTitle={intl.formatMessage({
defaultMessage: "Create Product Type", defaultMessage: "Create Product Type",
description: "header", description: "header",
id: "productTypeCreatePageHeader" id: "productTypeCreatePageHeader"
})} })}
saveButtonBarState={formTransitionState} saveButtonBarState={createProductTypeOpts.state}
taxTypes={maybe(() => data.taxTypes, [])} taxTypes={maybe(() => data.taxTypes, [])}
onBack={() => navigate(productTypeListUrl())} onBack={() => navigate(productTypeListUrl())}
onSubmit={handleCreate} onSubmit={handleCreate}

13
src/productTypes/views/ProductTypeList/ProductTypeList.tsx
View file

@ -19,7 +19,7 @@ import usePaginator, {
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import { configurationMenuUrl } from "../../../configuration"; import { configurationMenuUrl } from "../../../configuration";
import { getMutationState, maybe } from "../../../misc"; import { maybe } from "../../../misc";
import ProductTypeListPage from "../../components/ProductTypeListPage"; import ProductTypeListPage from "../../components/ProductTypeListPage";
import { TypedProductTypeBulkDeleteMutation } from "../../mutations"; import { TypedProductTypeBulkDeleteMutation } from "../../mutations";
import { TypedProductTypeListQuery } from "../../queries"; import { TypedProductTypeListQuery } from "../../queries";
@ -155,15 +155,6 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
onCompleted={handleProductTypeBulkDelete} onCompleted={handleProductTypeBulkDelete}
> >
{(productTypeBulkDelete, productTypeBulkDeleteOpts) => { {(productTypeBulkDelete, productTypeBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
productTypeBulkDeleteOpts.called,
productTypeBulkDeleteOpts.loading,
maybe(
() =>
productTypeBulkDeleteOpts.data.productTypeBulkDelete.errors
)
);
const onProductTypeBulkDelete = () => const onProductTypeBulkDelete = () =>
productTypeBulkDelete({ productTypeBulkDelete({
variables: { variables: {
@ -212,7 +203,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
} }
/> />
<ActionDialog <ActionDialog
confirmButtonState={bulkRemoveTransitionState} confirmButtonState={productTypeBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={onProductTypeBulkDelete} onConfirm={onProductTypeBulkDelete}
open={params.action === "remove"} open={params.action === "remove"}

44
src/productTypes/views/ProductTypeUpdate/index.tsx
View file

@ -9,7 +9,7 @@ import useBulkActions from "@saleor/hooks/useBulkActions";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import AssignAttributeDialog from "@saleor/productTypes/components/AssignAttributeDialog"; import AssignAttributeDialog from "@saleor/productTypes/components/AssignAttributeDialog";
import { ReorderEvent } from "@saleor/types"; import { ReorderEvent } from "@saleor/types";
import { AttributeTypeEnum } from "@saleor/types/globalTypes"; import { AttributeTypeEnum } from "@saleor/types/globalTypes";
@ -190,38 +190,6 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
const loading = updateProductType.opts.loading || dataLoading; const loading = updateProductType.opts.loading || dataLoading;
const assignTransactionState = getMutationState(
assignAttribute.opts.called,
assignAttribute.opts.loading,
maybe(
() => assignAttribute.opts.data.attributeAssign.errors
)
);
const unassignTransactionState = getMutationState(
unassignAttribute.opts.called,
unassignAttribute.opts.loading,
maybe(
() => unassignAttribute.opts.data.attributeUnassign.errors
)
);
const deleteTransactionState = getMutationState(
deleteProductType.opts.called,
deleteProductType.opts.loading,
maybe(
() => deleteProductType.opts.data.productTypeDelete.errors
)
);
const formTransitionState = getMutationState(
updateProductType.opts.called,
updateProductType.opts.loading,
maybe(
() => updateProductType.opts.data.productTypeUpdate.errors
)
);
const handleAttributeReorder = ( const handleAttributeReorder = (
event: ReorderEvent, event: ReorderEvent,
type: AttributeTypeEnum type: AttributeTypeEnum
@ -252,7 +220,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
errors={errors.formErrors} errors={errors.formErrors}
pageTitle={maybe(() => data.productType.name)} pageTitle={maybe(() => data.productType.name)}
productType={maybe(() => data.productType)} productType={maybe(() => data.productType)}
saveButtonBarState={formTransitionState} saveButtonBarState={updateProductType.opts.state}
taxTypes={maybe(() => data.taxTypes, [])} taxTypes={maybe(() => data.taxTypes, [])}
onAttributeAdd={type => onAttributeAdd={type =>
navigate( navigate(
@ -345,7 +313,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
edge => edge.node edge => edge.node
) )
)} )}
confirmButtonState={assignTransactionState} confirmButtonState={assignAttribute.opts.state}
errors={maybe( errors={maybe(
() => () =>
assignAttribute.opts.data.attributeAssign.errors.map( assignAttribute.opts.data.attributeAssign.errors.map(
@ -387,7 +355,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
/> />
))} ))}
<ProductTypeDeleteDialog <ProductTypeDeleteDialog
confirmButtonState={deleteTransactionState} confirmButtonState={deleteProductType.opts.state}
name={maybe(() => data.productType.name, "...")} name={maybe(() => data.productType.name, "...")}
open={params.action === "remove"} open={params.action === "remove"}
onClose={() => navigate(productTypeUrl(id))} onClose={() => navigate(productTypeUrl(id))}
@ -395,7 +363,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
/> />
<ProductTypeBulkAttributeUnassignDialog <ProductTypeBulkAttributeUnassignDialog
attributeQuantity={maybe(() => params.ids.length)} attributeQuantity={maybe(() => params.ids.length)}
confirmButtonState={unassignTransactionState} confirmButtonState={unassignAttribute.opts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={handleBulkAttributeUnassign} onConfirm={handleBulkAttributeUnassign}
open={params.action === "unassign-attributes"} open={params.action === "unassign-attributes"}
@ -414,7 +382,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
.name, .name,
"..." "..."
)} )}
confirmButtonState={unassignTransactionState} confirmButtonState={unassignAttribute.opts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={handleAttributeUnassign} onConfirm={handleAttributeUnassign}
open={params.action === "unassign-attribute"} open={params.action === "unassign-attribute"}

25
src/products/views/ProductCreate.tsx
View file

@ -9,7 +9,7 @@ import useShop from "@saleor/hooks/useShop";
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 useProductTypeSearch from "@saleor/searches/useProductTypeSearch"; import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
import { decimal, getMutationState, maybe } from "../../misc"; import { decimal, maybe } from "../../misc";
import ProductCreatePage, { import ProductCreatePage, {
ProductCreatePageSubmitData ProductCreatePageSubmitData
} from "../components/ProductCreatePage"; } from "../components/ProductCreatePage";
@ -70,14 +70,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
return ( return (
<TypedProductCreateMutation onCompleted={handleSuccess}> <TypedProductCreateMutation onCompleted={handleSuccess}>
{( {(productCreate, productCreateOpts) => {
productCreate,
{
called: productCreateCalled,
data: productCreateData,
loading: productCreateDataLoading
}
) => {
const handleSubmit = (formData: ProductCreatePageSubmitData) => { const handleSubmit = (formData: ProductCreatePageSubmitData) => {
productCreate({ productCreate({
variables: { variables: {
@ -108,11 +101,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
}); });
}; };
const formTransitionState = getMutationState(
productCreateCalled,
productCreateDataLoading,
maybe(() => productCreateData.productCreate.errors)
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -131,8 +119,11 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
() => searchCollectionOpts.data.search.edges, () => searchCollectionOpts.data.search.edges,
[] []
).map(edge => edge.node)} ).map(edge => edge.node)}
disabled={productCreateDataLoading} disabled={productCreateOpts.loading}
errors={maybe(() => productCreateData.productCreate.errors, [])} errors={maybe(
() => productCreateOpts.data.productCreate.errors,
[]
)}
fetchCategories={searchCategory} fetchCategories={searchCategory}
fetchCollections={searchCollection} fetchCollections={searchCollection}
fetchProductTypes={searchProductTypes} fetchProductTypes={searchProductTypes}
@ -145,7 +136,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
)} )}
onBack={handleBack} onBack={handleBack}
onSubmit={handleSubmit} onSubmit={handleSubmit}
saveButtonBarState={formTransitionState} saveButtonBarState={productCreateOpts.state}
fetchMoreCategories={{ fetchMoreCategories={{
hasMore: maybe( hasMore: maybe(
() => searchCategoryOpts.data.search.pageInfo.hasNextPage () => searchCategoryOpts.data.search.pageInfo.hasNextPage

16
src/products/views/ProductImage.tsx
View file

@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import ProductImagePage from "../components/ProductImagePage"; import ProductImagePage from "../components/ProductImagePage";
import { import {
TypedProductImageDeleteMutation, TypedProductImageDeleteMutation,
@ -68,16 +68,6 @@ export const ProductImage: React.FC<ProductImageProps> = ({
}; };
const image = data && data.product && data.product.mainImage; const image = data && data.product && data.product.mainImage;
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
maybe(() => updateResult.data.productImageUpdate.errors)
);
const deleteTransitionState = getMutationState(
deleteResult.called,
deleteResult.loading,
[]
);
return ( return (
<> <>
<ProductImagePage <ProductImagePage
@ -95,7 +85,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
} }
onRowClick={handleImageClick} onRowClick={handleImageClick}
onSubmit={handleUpdate} onSubmit={handleUpdate}
saveButtonBarState={formTransitionState} saveButtonBarState={updateResult.state}
/> />
<ActionDialog <ActionDialog
onClose={() => onClose={() =>
@ -108,7 +98,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
description: "dialog header" description: "dialog header"
})} })}
variant="delete" variant="delete"
confirmButtonState={deleteTransitionState} confirmButtonState={deleteResult.state}
> >
<DialogContentText> <DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to delete this image?" /> <FormattedMessage defaultMessage="Are you sure you want to delete this image?" />

41
src/products/views/ProductList/ProductList.tsx
View file

@ -21,7 +21,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ProductListVariables } from "@saleor/products/types/ProductList"; import { ProductListVariables } from "@saleor/products/types/ProductList";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import { getSortUrlVariables } from "@saleor/utils/sort"; import { getSortUrlVariables } from "@saleor/utils/sort";
@ -216,27 +216,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
<TypedProductBulkPublishMutation <TypedProductBulkPublishMutation
onCompleted={handleBulkPublish} onCompleted={handleBulkPublish}
> >
{(productBulkPublish, productBulkPublishOpts) => { {(productBulkPublish, productBulkPublishOpts) => (
const bulkDeleteMutationState = getMutationState(
productBulkDeleteOpts.called,
productBulkDeleteOpts.loading,
maybe(
() =>
productBulkDeleteOpts.data.productBulkDelete.errors
)
);
const bulkPublishMutationState = getMutationState(
productBulkPublishOpts.called,
productBulkPublishOpts.loading,
maybe(
() =>
productBulkPublishOpts.data.productBulkPublish
.errors
)
);
return (
<> <>
<ProductListPage <ProductListPage
activeAttributeSortId={params.attributeId} activeAttributeSortId={params.attributeId}
@ -259,9 +239,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
} }
gridAttributes={maybe( gridAttributes={maybe(
() => () =>
attributes.data.grid.edges.map( attributes.data.grid.edges.map(edge => edge.node),
edge => edge.node
),
[] []
)} )}
totalGridAttributes={maybe( totalGridAttributes={maybe(
@ -366,9 +344,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
selected={listElements.length} selected={listElements.length}
toggle={toggle} toggle={toggle}
toggleAll={toggleAll} toggleAll={toggleAll}
onSearchChange={query => onSearchChange={query => changeFilterField({ query })}
changeFilterField({ query })
}
onFilterAdd={filter => onFilterAdd={filter =>
changeFilterField(createFilter(filter)) changeFilterField(createFilter(filter))
} }
@ -380,7 +356,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
/> />
<ActionDialog <ActionDialog
open={params.action === "delete"} open={params.action === "delete"}
confirmButtonState={bulkDeleteMutationState} confirmButtonState={productBulkDeleteOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
productBulkDelete({ productBulkDelete({
@ -410,7 +386,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "publish"} open={params.action === "publish"}
confirmButtonState={bulkPublishMutationState} confirmButtonState={productBulkPublishOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
productBulkPublish({ productBulkPublish({
@ -442,7 +418,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "unpublish"} open={params.action === "unpublish"}
confirmButtonState={bulkPublishMutationState} confirmButtonState={productBulkPublishOpts.state}
onClose={closeModal} onClose={closeModal}
onConfirm={() => onConfirm={() =>
productBulkPublish({ productBulkPublish({
@ -489,8 +465,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
)} )}
/> />
</> </>
); )}
}}
</TypedProductBulkPublishMutation> </TypedProductBulkPublishMutation>
)} )}
</TypedProductBulkDeleteMutation> </TypedProductBulkDeleteMutation>

19
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -206,21 +206,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
updateSimpleProduct.opts.data.productVariantUpdate.errors updateSimpleProduct.opts.data.productVariantUpdate.errors
) )
); );
const deleteTransitionState = getMutationState(
deleteProduct.opts.called,
deleteProduct.opts.loading,
maybe(() => deleteProduct.opts.data.productDelete.errors)
);
const bulkProductVariantDeleteTransitionState = getMutationState(
bulkProductVariantDelete.opts.called,
bulkProductVariantDelete.opts.loading,
maybe(
() =>
bulkProductVariantDelete.opts.data.productVariantBulkDelete
.errors
)
);
const categories = maybe( const categories = maybe(
() => searchCategoriesOpts.data.search.edges, () => searchCategoriesOpts.data.search.edges,
@ -308,7 +293,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
onClose={() => navigate(productUrl(id), true)} onClose={() => navigate(productUrl(id), true)}
confirmButtonState={deleteTransitionState} confirmButtonState={deleteProduct.opts.state}
onConfirm={() => deleteProduct.mutate({ id })} onConfirm={() => deleteProduct.mutate({ id })}
variant="delete" variant="delete"
title={intl.formatMessage({ title={intl.formatMessage({
@ -329,7 +314,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
<ActionDialog <ActionDialog
open={params.action === "remove-variants"} open={params.action === "remove-variants"}
onClose={() => navigate(productUrl(id), true)} onClose={() => navigate(productUrl(id), true)}
confirmButtonState={bulkProductVariantDeleteTransitionState} confirmButtonState={bulkProductVariantDelete.opts.state}
onConfirm={() => onConfirm={() =>
bulkProductVariantDelete.mutate({ bulkProductVariantDelete.mutate({
ids: params.ids ids: params.ids

20
src/products/views/ProductVariant.tsx
View file

@ -6,7 +6,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { decimal, getMutationState, maybe } from "../../misc"; import { decimal, maybe } from "../../misc";
import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog"; import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog";
import ProductVariantPage, { import ProductVariantPage, {
ProductVariantPageSubmitData ProductVariantPageSubmitData
@ -77,19 +77,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
updateVariant.opts.loading || updateVariant.opts.loading ||
assignImage.opts.loading || assignImage.opts.loading ||
unassignImage.opts.loading; unassignImage.opts.loading;
const formTransitionState = getMutationState(
updateVariant.opts.called,
updateVariant.opts.loading,
maybe(
() =>
updateVariant.opts.data.productVariantUpdate.productErrors
)
);
const removeTransitionState = getMutationState(
deleteVariant.opts.called,
deleteVariant.opts.loading,
maybe(() => deleteVariant.opts.data.productVariantDelete.errors)
);
const handleImageSelect = (id: string) => () => { const handleImageSelect = (id: string) => () => {
if (variant) { if (variant) {
if ( if (
@ -114,7 +102,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
<WindowTitle title={maybe(() => data.productVariant.name)} /> <WindowTitle title={maybe(() => data.productVariant.name)} />
<ProductVariantPage <ProductVariantPage
errors={errors} errors={errors}
saveButtonBarState={formTransitionState} saveButtonBarState={updateVariant.opts.state}
loading={disableFormSave} loading={disableFormSave}
placeholderImage={placeholderImg} placeholderImage={placeholderImg}
variant={variant} variant={variant}
@ -150,7 +138,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
}} }}
/> />
<ProductVariantDeleteDialog <ProductVariantDeleteDialog
confirmButtonState={removeTransitionState} confirmButtonState={deleteVariant.opts.state}
onClose={() => onClose={() =>
navigate(productVariantEditUrl(productId, variantId)) navigate(productVariantEditUrl(productId, variantId))
} }

12
src/products/views/ProductVariantCreate.tsx
View file

@ -5,7 +5,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { decimal, getMutationState, maybe } from "../../misc"; import { decimal, maybe } from "../../misc";
import ProductVariantCreatePage, { import ProductVariantCreatePage, {
ProductVariantCreatePageSubmitData ProductVariantCreatePageSubmitData
} from "../components/ProductVariantCreatePage"; } from "../components/ProductVariantCreatePage";
@ -77,14 +77,6 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({ productId }) => {
const disableForm = productLoading || variantCreateResult.loading; const disableForm = productLoading || variantCreateResult.loading;
const formTransitionstate = getMutationState(
variantCreateResult.called,
variantCreateResult.loading,
maybe(
() =>
variantCreateResult.data.productVariantCreate.productErrors
)
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -110,7 +102,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({ productId }) => {
onBack={handleBack} onBack={handleBack}
onSubmit={handleSubmit} onSubmit={handleSubmit}
onVariantClick={handleVariantClick} onVariantClick={handleVariantClick}
saveButtonBarState={formTransitionstate} saveButtonBarState={variantCreateResult.state}
/> />
</> </>
); );

10
src/services/views/ServiceCreate/ServiceCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ServiceCreateMutation } from "@saleor/services/mutations"; import { ServiceCreateMutation } from "@saleor/services/mutations";
import { ServiceCreate as ServiceCreateData } from "@saleor/services/types/ServiceCreate"; import { ServiceCreate as ServiceCreateData } from "@saleor/services/types/ServiceCreate";
import ServiceCreatePage, { import ServiceCreatePage, {
@ -51,12 +51,6 @@ export const ServiceCreate: React.FC<ServiceCreateProps> = ({ setToken }) => {
} }
}); });
const formTransitionState = getMutationState(
serviceCreateOpts.called,
serviceCreateOpts.loading,
maybe(() => serviceCreateOpts.data.serviceAccountCreate.errors)
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -74,7 +68,7 @@ export const ServiceCreate: React.FC<ServiceCreateProps> = ({ setToken }) => {
onBack={handleBack} onBack={handleBack}
onSubmit={handleSubmit} onSubmit={handleSubmit}
permissions={maybe(() => shop.permissions)} permissions={maybe(() => shop.permissions)}
saveButtonBarState={formTransitionState} saveButtonBarState={serviceCreateOpts.state}
/> />
</> </>
); );

50
src/services/views/ServiceDetails/ServiceDetails.tsx
View file

@ -7,7 +7,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import ServiceDeleteDialog from "@saleor/services/components/ServiceDeleteDialog"; import ServiceDeleteDialog from "@saleor/services/components/ServiceDeleteDialog";
import ServiceTokenCreateDialog from "@saleor/services/components/ServiceTokenCreateDialog"; import ServiceTokenCreateDialog from "@saleor/services/components/ServiceTokenCreateDialog";
import ServiceTokenDeleteDialog from "@saleor/services/components/ServiceTokenDeleteDialog"; import ServiceTokenDeleteDialog from "@saleor/services/components/ServiceTokenDeleteDialog";
@ -162,46 +162,6 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
} }
}); });
const formTransitionState = getMutationState(
updateServiceOpts.called,
updateServiceOpts.loading,
maybe(
() =>
updateServiceOpts.data.serviceAccountUpdate
.errors
)
);
const deleteTransitionState = getMutationState(
deleteServiceOpts.called,
deleteServiceOpts.loading,
maybe(
() =>
deleteServiceOpts.data.serviceAccountDelete
.errors
)
);
const createTokenTransitionState = getMutationState(
createTokenOpts.called,
createTokenOpts.loading,
maybe(
() =>
createTokenOpts.data.serviceAccountTokenCreate
.errors
)
);
const deleteTokenTransitionState = getMutationState(
deleteTokenOpts.called,
deleteTokenOpts.loading,
maybe(
() =>
deleteTokenOpts.data.serviceAccountTokenDelete
.errors
)
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -223,10 +183,10 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
} }
permissions={maybe(() => shop.permissions)} permissions={maybe(() => shop.permissions)}
service={maybe(() => data.serviceAccount)} service={maybe(() => data.serviceAccount)}
saveButtonBarState={formTransitionState} saveButtonBarState={updateServiceOpts.state}
/> />
<ServiceDeleteDialog <ServiceDeleteDialog
confirmButtonState={deleteTransitionState} confirmButtonState={deleteServiceOpts.state}
name={maybe( name={maybe(
() => data.serviceAccount.name, () => data.serviceAccount.name,
"..." "..."
@ -236,7 +196,7 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
open={params.action === "remove"} open={params.action === "remove"}
/> />
<ServiceTokenCreateDialog <ServiceTokenCreateDialog
confirmButtonState={createTokenTransitionState} confirmButtonState={createTokenOpts.state}
onClose={closeModal} onClose={closeModal}
onCreate={handleTokenCreate} onCreate={handleTokenCreate}
open={params.action === "create-token"} open={params.action === "create-token"}
@ -247,7 +207,7 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
)} )}
/> />
<ServiceTokenDeleteDialog <ServiceTokenDeleteDialog
confirmButtonState={deleteTokenTransitionState} confirmButtonState={deleteTokenOpts.state}
name={maybe(() => { name={maybe(() => {
const token = data.serviceAccount.tokens.find( const token = data.serviceAccount.tokens.find(
token => token.id === params.id token => token.id === params.id

10
src/services/views/ServiceList/ServiceList.tsx
View file

@ -14,7 +14,7 @@ import SaveFilterTabDialog, {
} from "@saleor/components/SaveFilterTabDialog"; } from "@saleor/components/SaveFilterTabDialog";
import { configurationMenuUrl } from "@saleor/configuration"; import { configurationMenuUrl } from "@saleor/configuration";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ServiceDeleteMutation } from "@saleor/services/mutations"; import { ServiceDeleteMutation } from "@saleor/services/mutations";
import { ServiceDelete } from "@saleor/services/types/ServiceDelete"; import { ServiceDelete } from "@saleor/services/types/ServiceDelete";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
@ -154,12 +154,6 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
} }
}); });
const removeTransitionState = getMutationState(
deleteServiceOpts.called,
deleteServiceOpts.loading,
maybe(() => deleteServiceOpts.data.serviceAccountDelete.errors)
);
return ( return (
<> <>
<ServiceListPage <ServiceListPage
@ -186,7 +180,7 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
onRemove={handleRemove} onRemove={handleRemove}
/> />
<ServiceDeleteDialog <ServiceDeleteDialog
confirmButtonState={removeTransitionState} confirmButtonState={deleteServiceOpts.state}
name={maybe( name={maybe(
() => () =>
data.serviceAccounts.edges.find( data.serviceAccounts.edges.find(

16
src/shipping/views/ShippingZoneCreate.tsx
View file

@ -5,7 +5,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import ShippingZoneCreatePage from "../components/ShippingZoneCreatePage"; import ShippingZoneCreatePage from "../components/ShippingZoneCreatePage";
import { TypedCreateShippingZone } from "../mutations"; import { TypedCreateShippingZone } from "../mutations";
import { CreateShippingZone } from "../types/CreateShippingZone"; import { CreateShippingZone } from "../types/CreateShippingZone";
@ -27,14 +27,7 @@ const ShippingZoneCreate: React.FC<{}> = () => {
}; };
return ( return (
<TypedCreateShippingZone onCompleted={onShippingZoneCreate}> <TypedCreateShippingZone onCompleted={onShippingZoneCreate}>
{(createShippingZone, createShippingZoneOpts) => { {(createShippingZone, createShippingZoneOpts) => (
const formTransitionState = getMutationState(
createShippingZoneOpts.called,
createShippingZoneOpts.loading,
maybe(() => createShippingZoneOpts.data.shippingZoneCreate.errors, [])
);
return (
<ShippingZoneCreatePage <ShippingZoneCreatePage
countries={maybe(() => shop.countries, [])} countries={maybe(() => shop.countries, [])}
disabled={createShippingZoneOpts.loading} disabled={createShippingZoneOpts.loading}
@ -49,10 +42,9 @@ const ShippingZoneCreate: React.FC<{}> = () => {
} }
}) })
} }
saveButtonBarState={formTransitionState} saveButtonBarState={createShippingZoneOpts.state}
/> />
); )}
}}
</TypedCreateShippingZone> </TypedCreateShippingZone>
); );
}; };

63
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { ShippingMethodTypeEnum } from "../../../types/globalTypes"; import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage"; import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage";
import { TypedShippingZone } from "../../queries"; import { TypedShippingZone } from "../../queries";
@ -91,47 +91,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
> >
{ops => ( {ops => (
<TypedShippingZone variables={{ id }}> <TypedShippingZone variables={{ id }}>
{({ data, loading }) => { {({ data, loading }) => (
const formTransitionState = getMutationState(
ops.shippingZoneUpdate.opts.called,
ops.shippingZoneUpdate.opts.loading,
maybe(
() => ops.shippingZoneUpdate.opts.data.shippingZoneUpdate.errors
)
);
const createRateTransitionState = getMutationState(
ops.shippingRateCreate.opts.called,
ops.shippingRateCreate.opts.loading,
maybe(
() =>
ops.shippingRateCreate.opts.data.shippingPriceCreate.errors
)
);
const deleteRateTransitionState = getMutationState(
ops.shippingRateDelete.opts.called,
ops.shippingRateDelete.opts.loading,
maybe(
() =>
ops.shippingRateDelete.opts.data.shippingPriceDelete.errors
)
);
const updateRateTransitionState = getMutationState(
ops.shippingRateUpdate.opts.called,
ops.shippingRateUpdate.opts.loading,
maybe(
() =>
ops.shippingRateUpdate.opts.data.shippingPriceUpdate.errors
)
);
const deleteZoneTransitionState = getMutationState(
ops.shippingZoneDelete.opts.called,
ops.shippingZoneDelete.opts.loading,
maybe(
() => ops.shippingZoneDelete.opts.data.shippingZoneDelete.errors
)
);
return (
<> <>
<ShippingZoneDetailsPage <ShippingZoneDetailsPage
disabled={loading} disabled={loading}
@ -210,24 +170,25 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
}) })
) )
} }
saveButtonBarState={formTransitionState} saveButtonBarState={ops.shippingZoneUpdate.opts.state}
shippingZone={maybe(() => data.shippingZone)} shippingZone={maybe(() => data.shippingZone)}
/> />
<ShippingZoneDetailsDialogs <ShippingZoneDetailsDialogs
assignCountryTransitionState={formTransitionState} assignCountryTransitionState={ops.shippingZoneUpdate.opts.state}
createRateTransitionState={createRateTransitionState} createRateTransitionState={ops.shippingRateCreate.opts.state}
deleteRateTransitionState={deleteRateTransitionState} deleteRateTransitionState={ops.shippingRateDelete.opts.state}
deleteZoneTransitionState={deleteZoneTransitionState} deleteZoneTransitionState={ops.shippingZoneDelete.opts.state}
id={id} id={id}
ops={ops} ops={ops}
params={params} params={params}
shippingZone={maybe(() => data.shippingZone)} shippingZone={maybe(() => data.shippingZone)}
unassignCountryTransitionState={formTransitionState} unassignCountryTransitionState={
updateRateTransitionState={updateRateTransitionState} ops.shippingZoneUpdate.opts.state
}
updateRateTransitionState={ops.shippingRateUpdate.opts.state}
/> />
</> </>
); )}
}}
</TypedShippingZone> </TypedShippingZone>
)} )}
</ShippingZoneOperations> </ShippingZoneOperations>

28
src/shipping/views/ShippingZonesList.tsx
View file

@ -16,7 +16,7 @@ import usePaginator, {
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import useUser from "@saleor/hooks/useUser"; import useUser from "@saleor/hooks/useUser";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import ShippingZonesListPage from "../components/ShippingZonesListPage"; import ShippingZonesListPage from "../components/ShippingZonesListPage";
import { import {
@ -111,26 +111,6 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
onCompleted={handleBulkDeleteShippingZone} onCompleted={handleBulkDeleteShippingZone}
> >
{(bulkDeleteShippingZone, bulkDeleteShippingZoneOpts) => { {(bulkDeleteShippingZone, bulkDeleteShippingZoneOpts) => {
const deleteTransitionState = getMutationState(
deleteShippingZoneOpts.called,
deleteShippingZoneOpts.loading,
maybe(
() =>
deleteShippingZoneOpts.data.shippingZoneDelete
.errors
)
);
const bulkDeleteTransitionState = getMutationState(
bulkDeleteShippingZoneOpts.called,
bulkDeleteShippingZoneOpts.loading,
maybe(
() =>
bulkDeleteShippingZoneOpts.data
.shippingZoneBulkDelete.errors
)
);
const { const {
loadNextPage, loadNextPage,
loadPreviousPage, loadPreviousPage,
@ -202,7 +182,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
confirmButtonState={deleteTransitionState} confirmButtonState={deleteShippingZoneOpts.state}
variant="delete" variant="delete"
title={intl.formatMessage({ title={intl.formatMessage({
defaultMessage: "Delete Shipping Zone", defaultMessage: "Delete Shipping Zone",
@ -236,7 +216,9 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
</ActionDialog> </ActionDialog>
<ActionDialog <ActionDialog
open={params.action === "remove-many"} open={params.action === "remove-many"}
confirmButtonState={bulkDeleteTransitionState} confirmButtonState={
bulkDeleteShippingZoneOpts.state
}
variant="delete" variant="delete"
title={intl.formatMessage({ title={intl.formatMessage({
defaultMessage: "Delete Shipping Zones", defaultMessage: "Delete Shipping Zones",

22
src/siteSettings/views/index.tsx
View file

@ -7,7 +7,7 @@ import { commonMessages, sectionNames } from "@saleor/intl";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { configurationMenuUrl } from "../../configuration"; import { configurationMenuUrl } from "../../configuration";
import { findInEnum, getMutationState, maybe } from "../../misc"; import { findInEnum, maybe } from "../../misc";
import { AuthorizationKeyType, CountryCode } from "../../types/globalTypes"; import { AuthorizationKeyType, CountryCode } from "../../types/globalTypes";
import SiteSettingsKeyDialog, { import SiteSettingsKeyDialog, {
SiteSettingsKeyDialogForm SiteSettingsKeyDialogForm
@ -166,24 +166,6 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
}); });
}; };
const formTransitionState = getMutationState(
updateShopSettingsOpts.called,
updateShopSettingsOpts.loading,
[
...maybe(
() =>
updateShopSettingsOpts.data.shopDomainUpdate.errors,
[]
),
...maybe(
() =>
updateShopSettingsOpts.data.shopSettingsUpdate
.errors,
[]
)
]
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -207,7 +189,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
}) })
} }
onSubmit={handleUpdateShopSettings} onSubmit={handleUpdateShopSettings}
saveButtonBarState={formTransitionState} saveButtonBarState={updateShopSettingsOpts.state}
/> />
<SiteSettingsKeyDialog <SiteSettingsKeyDialog
errors={maybe( errors={maybe(

36
src/staff/views/StaffDetails.tsx
View file

@ -9,7 +9,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import useUser from "@saleor/hooks/useUser"; import useUser from "@saleor/hooks/useUser";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import StaffDetailsPage from "../components/StaffDetailsPage/StaffDetailsPage"; import StaffDetailsPage from "../components/StaffDetailsPage/StaffDetailsPage";
import { import {
TypedStaffAvatarDeleteMutation, TypedStaffAvatarDeleteMutation,
@ -63,12 +63,6 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
onCompleted: handleChangePassword onCompleted: handleChangePassword
}); });
const changePasswordTransitionState = getMutationState(
changePasswordOpts.called,
changePasswordOpts.loading,
maybe(() => changePasswordOpts.data.passwordChange.errors)
);
return ( return (
<TypedStaffMemberDetailsQuery <TypedStaffMemberDetailsQuery
displayLoader displayLoader
@ -122,24 +116,6 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
onCompleted={handleStaffMemberAvatarDelete} onCompleted={handleStaffMemberAvatarDelete}
> >
{(deleteStaffAvatar, deleteAvatarResult) => { {(deleteStaffAvatar, deleteAvatarResult) => {
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
maybe(() => updateResult.data.staffUpdate.errors)
);
const deleteTransitionState = getMutationState(
deleteResult.called,
deleteResult.loading,
maybe(() => deleteResult.data.staffDelete.errors)
);
const deleteAvatarTransitionState = getMutationState(
deleteAvatarResult.called,
deleteAvatarResult.loading,
maybe(
() =>
deleteAvatarResult.data.userAvatarDelete.errors
)
);
const isUserSameAsViewer = maybe( const isUserSameAsViewer = maybe(
() => user.user.id === data.user.id, () => user.user.id === data.user.id,
true true
@ -201,7 +177,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
} }
permissions={maybe(() => shop.permissions)} permissions={maybe(() => shop.permissions)}
staffMember={maybe(() => data.user)} staffMember={maybe(() => data.user)}
saveButtonBarState={formTransitionState} saveButtonBarState={updateResult.state}
/> />
<ActionDialog <ActionDialog
open={params.action === "remove"} open={params.action === "remove"}
@ -209,7 +185,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
defaultMessage: "delete Staff User", defaultMessage: "delete Staff User",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={deleteTransitionState} confirmButtonState={deleteResult.state}
variant="delete" variant="delete"
onClose={closeModal} onClose={closeModal}
onConfirm={deleteStaffMember} onConfirm={deleteStaffMember}
@ -229,7 +205,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
defaultMessage: "Delete Staff User Avatar", defaultMessage: "Delete Staff User Avatar",
description: "dialog header" description: "dialog header"
})} })}
confirmButtonState={deleteAvatarTransitionState} confirmButtonState={deleteAvatarResult.state}
variant="delete" variant="delete"
onClose={closeModal} onClose={closeModal}
onConfirm={deleteStaffAvatar} onConfirm={deleteStaffAvatar}
@ -248,9 +224,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
</DialogContentText> </DialogContentText>
</ActionDialog> </ActionDialog>
<StaffPasswordResetDialog <StaffPasswordResetDialog
confirmButtonState={ confirmButtonState={changePasswordOpts.state}
changePasswordTransitionState
}
errors={maybe( errors={maybe(
() => () =>
changePasswordOpts.data.passwordChange changePasswordOpts.data.passwordChange

9
src/staff/views/StaffList/StaffList.tsx
View file

@ -18,7 +18,7 @@ import { APP_MOUNT_URI } from "@saleor/config";
import { configurationMenuUrl } from "@saleor/configuration"; import { configurationMenuUrl } from "@saleor/configuration";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import StaffAddMemberDialog, { import StaffAddMemberDialog, {
FormData as AddStaffMemberForm FormData as AddStaffMemberForm
@ -158,11 +158,6 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
} }
} }
}); });
const addTransitionState = getMutationState(
addStaffMemberData.called,
addStaffMemberData.loading,
maybe(() => addStaffMemberData.data.staffCreate.errors)
);
const { loadNextPage, loadPreviousPage, pageInfo } = paginate( const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.staffUsers.pageInfo), maybe(() => data.staffUsers.pageInfo),
@ -201,7 +196,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
onRowClick={id => () => navigate(staffMemberDetailsUrl(id))} onRowClick={id => () => navigate(staffMemberDetailsUrl(id))}
/> />
<StaffAddMemberDialog <StaffAddMemberDialog
confirmButtonState={addTransitionState} confirmButtonState={addStaffMemberData.state}
errors={maybe( errors={maybe(
() => addStaffMemberData.data.staffCreate.errors, () => addStaffMemberData.data.staffCreate.errors,
[] []

21
src/taxes/views/CountryList.tsx
View file

@ -5,7 +5,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { configurationMenuUrl } from "../../configuration"; import { configurationMenuUrl } from "../../configuration";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import CountryListPage from "../components/CountryListPage"; import CountryListPage from "../components/CountryListPage";
import { TypedFetchTaxes, TypedUpdateTaxSettings } from "../mutations"; import { TypedFetchTaxes, TypedUpdateTaxSettings } from "../mutations";
import { TypedCountryListQuery } from "../queries"; import { TypedCountryListQuery } from "../queries";
@ -42,16 +42,7 @@ export const CountryList: React.FC = () => {
<TypedFetchTaxes onCompleted={handleFetchTaxes}> <TypedFetchTaxes onCompleted={handleFetchTaxes}>
{(fetchTaxes, fetchTaxesOpts) => ( {(fetchTaxes, fetchTaxesOpts) => (
<TypedCountryListQuery displayLoader={true}> <TypedCountryListQuery displayLoader={true}>
{({ data, loading }) => { {({ data, loading }) => (
const updateTaxSettingsTransitionState = getMutationState(
updateTaxSettingsOpts.called,
updateTaxSettingsOpts.loading,
maybe(
() => updateTaxSettingsOpts.data.shopSettingsUpdate.errors
)
);
return (
<CountryListPage <CountryListPage
disabled={ disabled={
loading || loading ||
@ -64,8 +55,7 @@ export const CountryList: React.FC = () => {
updateTaxSettings({ updateTaxSettings({
variables: { variables: {
input: { input: {
chargeTaxesOnShipping: chargeTaxesOnShipping: formData.chargeTaxesOnShipping,
formData.chargeTaxesOnShipping,
displayGrossPrices: formData.showGross, displayGrossPrices: formData.showGross,
includeTaxesInPrices: formData.includeTax includeTaxesInPrices: formData.includeTax
} }
@ -73,7 +63,7 @@ export const CountryList: React.FC = () => {
}) })
} }
onTaxFetch={fetchTaxes} onTaxFetch={fetchTaxes}
saveButtonBarState={updateTaxSettingsTransitionState} saveButtonBarState={updateTaxSettingsOpts.state}
shop={maybe(() => ({ shop={maybe(() => ({
...data.shop, ...data.shop,
countries: data.shop.countries.filter( countries: data.shop.countries.filter(
@ -81,8 +71,7 @@ export const CountryList: React.FC = () => {
) )
}))} }))}
/> />
); )}
}}
</TypedCountryListQuery> </TypedCountryListQuery>
)} )}
</TypedFetchTaxes> </TypedFetchTaxes>

13
src/translations/views/TranslationsCategories.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes"; import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes";
import TranslationsCategoriesPage, { import TranslationsCategoriesPage, {
fieldNames fieldNames
@ -84,15 +84,6 @@ const TranslationsCategories: React.FC<TranslationsCategoriesProps> = ({
}); });
}; };
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.categoryTranslate.errors,
[]
)
);
return ( return (
<TranslationsCategoriesPage <TranslationsCategoriesPage
activeField={params.activeField} activeField={params.activeField}
@ -101,7 +92,7 @@ const TranslationsCategories: React.FC<TranslationsCategoriesProps> = ({
} }
languageCode={languageCode} languageCode={languageCode}
languages={maybe(() => shop.languages, [])} languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState} saveButtonState={updateTranslationsOpts.state}
onBack={() => onBack={() =>
navigate( navigate(
languageEntitiesUrl(languageCode, { languageEntitiesUrl(languageCode, {

13
src/translations/views/TranslationsCollections.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes"; import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes";
import TranslationsCollectionsPage, { import TranslationsCollectionsPage, {
fieldNames fieldNames
@ -86,15 +86,6 @@ const TranslationsCollections: React.FC<TranslationsCollectionsProps> = ({
}); });
}; };
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.collectionTranslate.errors,
[]
)
);
return ( return (
<TranslationsCollectionsPage <TranslationsCollectionsPage
activeField={params.activeField} activeField={params.activeField}
@ -104,7 +95,7 @@ const TranslationsCollections: React.FC<TranslationsCollectionsProps> = ({
} }
languageCode={languageCode} languageCode={languageCode}
languages={maybe(() => shop.languages, [])} languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState} saveButtonState={updateTranslationsOpts.state}
onEdit={onEdit} onEdit={onEdit}
onDiscard={onDiscard} onDiscard={onDiscard}
onBack={() => onBack={() =>

10
src/translations/views/TranslationsPages.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
PageTranslationInput PageTranslationInput
@ -87,12 +87,6 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
}); });
}; };
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(() => updateTranslationsOpts.data.pageTranslate.errors, [])
);
return ( return (
<TranslationsPagesPage <TranslationsPagesPage
activeField={params.activeField} activeField={params.activeField}
@ -101,7 +95,7 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
} }
languageCode={languageCode} languageCode={languageCode}
languages={maybe(() => shop.languages, [])} languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState} saveButtonState={updateTranslationsOpts.state}
onBack={() => onBack={() =>
navigate( navigate(
languageEntitiesUrl(languageCode, { languageEntitiesUrl(languageCode, {

4
src/translations/views/TranslationsProductTypes.tsx
View file

@ -114,9 +114,9 @@ const TranslationsProductTypes: React.FC<TranslationsProductTypesProps> = ({
const saveButtonState = getMutationState( const saveButtonState = getMutationState(
updateAttributeTranslationsOpts.called || updateAttributeTranslationsOpts.called ||
updateAttributeTranslationsOpts.called, updateAttributeValueTranslationsOpts.called,
updateAttributeTranslationsOpts.loading || updateAttributeTranslationsOpts.loading ||
updateAttributeTranslationsOpts.loading, updateAttributeValueTranslationsOpts.loading,
maybe( maybe(
() => () =>
updateAttributeTranslationsOpts.data.attributeTranslate updateAttributeTranslationsOpts.data.attributeTranslate

13
src/translations/views/TranslationsProducts.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes"; import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes";
import TranslationsProductsPage, { import TranslationsProductsPage, {
fieldNames fieldNames
@ -84,15 +84,6 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
}); });
}; };
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.productTranslate.errors,
[]
)
);
return ( return (
<TranslationsProductsPage <TranslationsProductsPage
activeField={params.activeField} activeField={params.activeField}
@ -101,7 +92,7 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
} }
languageCode={languageCode} languageCode={languageCode}
languages={maybe(() => shop.languages, [])} languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState} saveButtonState={updateTranslationsOpts.state}
onBack={() => onBack={() =>
navigate( navigate(
languageEntitiesUrl(languageCode, { languageEntitiesUrl(languageCode, {

10
src/translations/views/TranslationsSales.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
NameTranslationInput NameTranslationInput
@ -81,12 +81,6 @@ const TranslationsSales: React.FC<TranslationsSalesProps> = ({
}); });
}; };
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(() => updateTranslationsOpts.data.saleTranslate.errors, [])
);
return ( return (
<TranslationsSalesPage <TranslationsSalesPage
activeField={params.activeField} activeField={params.activeField}
@ -95,7 +89,7 @@ const TranslationsSales: React.FC<TranslationsSalesProps> = ({
} }
languages={maybe(() => shop.languages, [])} languages={maybe(() => shop.languages, [])}
languageCode={languageCode} languageCode={languageCode}
saveButtonState={saveButtonState} saveButtonState={updateTranslationsOpts.state}
onBack={() => onBack={() =>
navigate( navigate(
languageEntitiesUrl(languageCode, { languageEntitiesUrl(languageCode, {

13
src/translations/views/TranslationsVouchers.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
NameTranslationInput NameTranslationInput
@ -81,15 +81,6 @@ const TranslationsVouchers: React.FC<TranslationsVouchersProps> = ({
}); });
}; };
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.voucherTranslate.errors,
[]
)
);
return ( return (
<TranslationsVouchersPage <TranslationsVouchersPage
activeField={params.activeField} activeField={params.activeField}
@ -98,7 +89,7 @@ const TranslationsVouchers: React.FC<TranslationsVouchersProps> = ({
} }
languages={maybe(() => shop.languages, [])} languages={maybe(() => shop.languages, [])}
languageCode={languageCode} languageCode={languageCode}
saveButtonState={saveButtonState} saveButtonState={updateTranslationsOpts.state}
onBack={() => onBack={() =>
navigate( navigate(
languageEntitiesUrl(languageCode, { languageEntitiesUrl(languageCode, {

10
src/webhooks/views/WebhooksCreate.tsx
View file

@ -8,7 +8,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate"; import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage"; import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
import { TypedWebhookCreate } from "../mutations"; import { TypedWebhookCreate } from "../mutations";
import { import {
@ -63,12 +63,6 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
} }
}); });
const formTransitionState = getMutationState(
webhookCreateOpts.called,
webhookCreateOpts.loading,
maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors)
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -89,7 +83,7 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
)} )}
onBack={handleBack} onBack={handleBack}
onSubmit={handleSubmit} onSubmit={handleSubmit}
saveButtonBarState={formTransitionState} saveButtonBarState={webhookCreateOpts.state}
/> />
</> </>
); );

20
src/webhooks/views/WebhooksDetails.tsx
View file

@ -11,7 +11,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate"; import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
import { getMutationState, maybe } from "../../misc"; import { maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage"; import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations"; import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
import { TypedWebhooksDetailsQuery } from "../queries"; import { TypedWebhooksDetailsQuery } from "../queries";
@ -85,14 +85,6 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
{(webhookDelete, webhookDeleteOpts) => ( {(webhookDelete, webhookDeleteOpts) => (
<TypedWebhooksDetailsQuery variables={{ id }}> <TypedWebhooksDetailsQuery variables={{ id }}>
{webhookDetails => { {webhookDetails => {
const formTransitionState = getMutationState(
webhookUpdateOpts.called,
webhookUpdateOpts.loading,
maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors
)
);
const handleRemoveConfirm = () => const handleRemoveConfirm = () =>
webhookDelete({ webhookDelete({
variables: { variables: {
@ -105,12 +97,6 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
[] []
); );
const deleteTransitionState = getMutationState(
webhookDeleteOpts.called,
webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
);
return ( return (
<> <>
<WindowTitle <WindowTitle
@ -119,7 +105,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
<WebhooksDetailsPage <WebhooksDetailsPage
disabled={webhookDetails.loading} disabled={webhookDetails.loading}
errors={formErrors} errors={formErrors}
saveButtonBarState={formTransitionState} saveButtonBarState={webhookUpdateOpts.state}
webhook={maybe(() => webhookDetails.data.webhook)} webhook={maybe(() => webhookDetails.data.webhook)}
fetchServiceAccounts={searchServiceAccount} fetchServiceAccounts={searchServiceAccount}
services={maybe(() => services={maybe(() =>
@ -148,7 +134,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
}} }}
/> />
<WebhookDeleteDialog <WebhookDeleteDialog
confirmButtonState={deleteTransitionState} confirmButtonState={webhookDeleteOpts.state}
name={maybe( name={maybe(
() => webhookDetails.data.webhook.name, () => webhookDetails.data.webhook.name,
"..." "..."

10
src/webhooks/views/WebhooksList.tsx
View file

@ -10,7 +10,7 @@ import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
@ -150,12 +150,6 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
}); });
}; };
const deleteTransitionState = getMutationState(
webhookDeleteOpts.called,
webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
);
return ( return (
<> <>
<WebhooksListPage <WebhooksListPage
@ -182,7 +176,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
onRowClick={id => () => navigate(webhooksUrl(id))} onRowClick={id => () => navigate(webhooksUrl(id))}
/> />
<WebhookDeleteDialog <WebhookDeleteDialog
confirmButtonState={deleteTransitionState} confirmButtonState={webhookDeleteOpts.state}
name={maybe( name={maybe(
() => () =>
data.webhooks.edges.find( data.webhooks.edges.find(