diff --git a/CHANGELOG.md b/CHANGELOG.md index f8144c1cab0..3a4805e8503 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ All notable, unreleased changes to this project will be documented in this file. - Use eslint - #285 by @dominik-zeglen - Enforce using "name" property in style hooks - #288 by @dominik-zeglen - Add ability to reset own password - #289 by @dominik-zeglen +- Move mutation state to mutation - #297 by @dominik-zeglen ## 2.0.0 diff --git a/src/attributes/views/AttributeCreate/AttributeCreate.tsx b/src/attributes/views/AttributeCreate/AttributeCreate.tsx index d027089b6b7..05a4abe3db9 100644 --- a/src/attributes/views/AttributeCreate/AttributeCreate.tsx +++ b/src/attributes/views/AttributeCreate/AttributeCreate.tsx @@ -4,7 +4,7 @@ import slugify from "slugify"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ReorderEvent, UserError } from "@saleor/types"; import { add, @@ -131,88 +131,80 @@ const AttributeDetails: React.FC = ({ params }) => { return ( - {(attributeCreate, attributeCreateOpts) => { - const createTransitionState = getMutationState( - attributeCreateOpts.called, - attributeCreateOpts.loading, - maybe(() => attributeCreateOpts.data.attributeCreate.errors) - ); - - return ( - <> - attributeCreateOpts.data.attributeCreate.errors, - [] - )} - onBack={() => navigate(attributeListUrl())} - onDelete={undefined} - onSubmit={input => - attributeCreate({ - variables: { - input: { - ...input, - storefrontSearchPosition: parseInt( - input.storefrontSearchPosition, - 0 - ), - values: values.map(value => ({ - name: value.name - })) - } - } - }) - } - onValueAdd={() => openModal("add-value")} - onValueDelete={id => openModal("remove-value", id)} - onValueReorder={handleValueReorder} - onValueUpdate={id => openModal("edit-value", id)} - saveButtonBarState={createTransitionState} - values={values.map((value, valueIndex) => ({ - __typename: "AttributeValue" as "AttributeValue", - id: valueIndex.toString(), - slug: slugify(value.name).toLowerCase(), - sortOrder: valueIndex, - type: null, - value: null, - ...value - }))} - /> - - {values.length > 0 && ( - <> - values[id].name, "...")} - confirmButtonState="default" - onClose={closeModal} - onConfirm={handleValueDelete} - /> - values[params.id])} - confirmButtonState="default" - disabled={false} - errors={valueErrors} - open={params.action === "edit-value"} - onClose={closeModal} - onSubmit={handleValueUpdate} - /> - + {(attributeCreate, attributeCreateOpts) => ( + <> + attributeCreateOpts.data.attributeCreate.errors, + [] )} - - ); - }} + onBack={() => navigate(attributeListUrl())} + onDelete={undefined} + onSubmit={input => + attributeCreate({ + variables: { + input: { + ...input, + storefrontSearchPosition: parseInt( + input.storefrontSearchPosition, + 0 + ), + values: values.map(value => ({ + name: value.name + })) + } + } + }) + } + onValueAdd={() => openModal("add-value")} + onValueDelete={id => openModal("remove-value", id)} + onValueReorder={handleValueReorder} + onValueUpdate={id => openModal("edit-value", id)} + saveButtonBarState={attributeCreateOpts.status} + values={values.map((value, valueIndex) => ({ + __typename: "AttributeValue" as "AttributeValue", + id: valueIndex.toString(), + slug: slugify(value.name).toLowerCase(), + sortOrder: valueIndex, + type: null, + value: null, + ...value + }))} + /> + + {values.length > 0 && ( + <> + values[id].name, "...")} + confirmButtonState="default" + onClose={closeModal} + onConfirm={handleValueDelete} + /> + values[params.id])} + confirmButtonState="default" + disabled={false} + errors={valueErrors} + open={params.action === "edit-value"} + onClose={closeModal} + onSubmit={handleValueUpdate} + /> + + )} + + )} ); }; diff --git a/src/attributes/views/AttributeDetails/AttributeDetails.tsx b/src/attributes/views/AttributeDetails/AttributeDetails.tsx index e6870487af2..e9ce1cce39a 100644 --- a/src/attributes/views/AttributeDetails/AttributeDetails.tsx +++ b/src/attributes/views/AttributeDetails/AttributeDetails.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ReorderEvent } from "@saleor/types"; import { move } from "@saleor/utils/lists"; import AttributeDeleteDialog from "../../components/AttributeDeleteDialog"; @@ -135,52 +135,6 @@ const AttributeDetails: React.FC = ({ id, params }) => { onCompleted={handleValueReorderMutation} > {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 = ({ newIndex, oldIndex @@ -252,7 +206,9 @@ const AttributeDetails: React.FC = ({ id, params }) => { onValueUpdate={id => openModal("edit-value", id) } - saveButtonBarState={updateTransitionState} + saveButtonBarState={ + attributeUpdateOpts.status + } values={maybe( () => data.attribute.values )} @@ -263,7 +219,9 @@ const AttributeDetails: React.FC = ({ id, params }) => { () => data.attribute.name, "..." )} - confirmButtonState={deleteTransitionState} + confirmButtonState={ + attributeDeleteOpts.status + } onClose={closeModal} onConfirm={() => attributeDelete({ @@ -288,7 +246,7 @@ const AttributeDetails: React.FC = ({ id, params }) => { )} useName={true} confirmButtonState={ - deleteValueTransitionState + attributeValueDeleteOpts.status } onClose={closeModal} onConfirm={() => @@ -302,7 +260,7 @@ const AttributeDetails: React.FC = ({ id, params }) => { = ({ id, params }) => { ) )} confirmButtonState={ - updateValueTransitionState + attributeValueUpdateOpts.status } disabled={loading} errors={maybe( diff --git a/src/attributes/views/AttributeList/AttributeList.tsx b/src/attributes/views/AttributeList/AttributeList.tsx index 35ddbedf937..e1b827045d2 100644 --- a/src/attributes/views/AttributeList/AttributeList.tsx +++ b/src/attributes/views/AttributeList/AttributeList.tsx @@ -23,7 +23,7 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import { PAGINATE_BY } from "../../../config"; import useBulkActions from "../../../hooks/useBulkActions"; -import { getMutationState, maybe } from "../../../misc"; +import { maybe } from "../../../misc"; import AttributeBulkDeleteDialog from "../../components/AttributeBulkDeleteDialog"; import AttributeListPage from "../../components/AttributeListPage"; import { AttributeBulkDeleteMutation } from "../../mutations"; @@ -145,77 +145,67 @@ const AttributeList: React.FC = ({ params }) => { return ( - {(attributeBulkDelete, attributeBulkDeleteOpts) => { - const bulkDeleteMutationState = getMutationState( - attributeBulkDeleteOpts.called, - attributeBulkDeleteOpts.loading, - maybe( - () => attributeBulkDeleteOpts.data.attributeBulkDelete.errors - ) - ); - - return ( - <> - - data.attributes.edges.map(edge => edge.node) - )} - currentTab={currentTab} - disabled={loading || attributeBulkDeleteOpts.loading} - initialSearch={params.query || ""} - isChecked={isSelected} - onAdd={() => navigate(attributeAddUrl())} - onAll={() => navigate(attributeListUrl())} - onBack={() => navigate(configurationMenuUrl)} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onRowClick={id => () => navigate(attributeUrl(id))} - onSearchChange={query => changeFilterField({ query })} - onTabChange={handleTabChange} - onTabDelete={() => openModal("delete-search")} - onTabSave={() => openModal("save-search")} - pageInfo={pageInfo} - selected={listElements.length} - tabs={tabs.map(tab => tab.name)} - toggle={toggle} - toggleAll={toggleAll} - toolbar={ - openModal("remove", listElements)} - > - - - } - /> - params.ids.length > 0) - } - onConfirm={() => - attributeBulkDelete({ variables: { ids: params.ids } }) - } - onClose={closeModal} - quantity={maybe(() => params.ids.length)} - /> - - tabs[currentTab - 1].name, "...")} - /> - - ); - }} + {(attributeBulkDelete, attributeBulkDeleteOpts) => ( + <> + + data.attributes.edges.map(edge => edge.node) + )} + currentTab={currentTab} + disabled={loading || attributeBulkDeleteOpts.loading} + initialSearch={params.query || ""} + isChecked={isSelected} + onAdd={() => navigate(attributeAddUrl())} + onAll={() => navigate(attributeListUrl())} + onBack={() => navigate(configurationMenuUrl)} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onRowClick={id => () => navigate(attributeUrl(id))} + onSearchChange={query => changeFilterField({ query })} + onTabChange={handleTabChange} + onTabDelete={() => openModal("delete-search")} + onTabSave={() => openModal("save-search")} + pageInfo={pageInfo} + selected={listElements.length} + tabs={tabs.map(tab => tab.name)} + toggle={toggle} + toggleAll={toggleAll} + toolbar={ + openModal("remove", listElements)} + > + + + } + /> + params.ids.length > 0) + } + onConfirm={() => + attributeBulkDelete({ variables: { ids: params.ids } }) + } + onClose={closeModal} + quantity={maybe(() => params.ids.length)} + /> + + tabs[currentTab - 1].name, "...")} + /> + + )} ); }} diff --git a/src/categories/views/CategoryCreate.tsx b/src/categories/views/CategoryCreate.tsx index 592552c00e7..1eb3c56f555 100644 --- a/src/categories/views/CategoryCreate.tsx +++ b/src/categories/views/CategoryCreate.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import CategoryCreatePage from "../components/CategoryCreatePage"; import { useCategoryCreateMutation } from "../mutations"; import { CategoryCreate } from "../types/CategoryCreate"; @@ -41,12 +41,6 @@ export const CategoryCreateView: React.FC = ({ [] ); - const formTransitionState = getMutationState( - createCategoryResult.called, - createCategoryResult.loading, - errors - ); - return ( <> = ({ })} /> diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 5c6aa7d4de4..13b585d146a 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -14,7 +14,7 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import { commonMessages } from "@saleor/intl"; import { PAGINATE_BY } from "../../config"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { TypedProductBulkDeleteMutation } from "../../products/mutations"; import { productBulkDelete } from "../../products/types/productBulkDelete"; import { productAddUrl, productUrl } from "../../products/urls"; @@ -147,17 +147,6 @@ export const CategoryDetails: React.FC = ({ }) ); - 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) => { if (data.productBulkDelete.errors.length === 0) { closeModal(); @@ -181,196 +170,181 @@ export const CategoryDetails: React.FC = ({ <> data.category.name)} /> - {(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 ( - <> - data.category)} - disabled={loading} - errors={maybe(() => updateResult.data.categoryUpdate.errors)} - onAddCategory={() => navigate(categoryAddUrl(id))} - onAddProduct={() => navigate(productAddUrl)} - onBack={() => - navigate( - maybe( - () => categoryUrl(data.category.parent.id), - categoryListUrl() - ) + {(productBulkDelete, productBulkDeleteOpts) => ( + <> + data.category)} + disabled={loading} + errors={maybe(() => updateResult.data.categoryUpdate.errors)} + onAddCategory={() => navigate(categoryAddUrl(id))} + onAddProduct={() => navigate(productAddUrl)} + onBack={() => + navigate( + maybe( + () => categoryUrl(data.category.parent.id), + categoryListUrl() ) - } - onCategoryClick={id => () => navigate(categoryUrl(id))} - onDelete={() => openModal("delete")} - onImageDelete={() => - updateCategory({ - variables: { - id, - input: { - backgroundImage: null - } + ) + } + onCategoryClick={id => () => navigate(categoryUrl(id))} + onDelete={() => openModal("delete")} + onImageDelete={() => + updateCategory({ + variables: { + id, + input: { + backgroundImage: null } - }) - } - onImageUpload={file => - updateCategory({ - variables: { - id, - input: { - backgroundImage: file - } + } + }) + } + onImageUpload={file => + updateCategory({ + variables: { + id, + input: { + backgroundImage: file } - }) - } - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - pageInfo={pageInfo} - onProductClick={id => () => navigate(productUrl(id))} - onSubmit={formData => - updateCategory({ - variables: { - id, - input: { - backgroundImageAlt: formData.backgroundImageAlt, - descriptionJson: JSON.stringify(formData.description), - name: formData.name, - seo: { - description: formData.seoDescription, - title: formData.seoTitle - } + } + }) + } + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + pageInfo={pageInfo} + onProductClick={id => () => navigate(productUrl(id))} + onSubmit={formData => + updateCategory({ + variables: { + id, + input: { + backgroundImageAlt: formData.backgroundImageAlt, + descriptionJson: JSON.stringify(formData.description), + name: formData.name, + seo: { + description: formData.seoDescription, + title: formData.seoTitle } } - }) - } - products={maybe(() => - data.category.products.edges.map(edge => edge.node) - )} - saveButtonBarState={formTransitionState} - subcategories={maybe(() => - data.category.children.edges.map(edge => edge.node) - )} - subcategoryListToolbar={ - openModal("delete-categories", listElements)} - > - - - } - productListToolbar={ - openModal("delete-products", listElements)} - > - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - deleteCategory({ variables: { id } })} - open={params.action === "delete"} - title={intl.formatMessage({ - defaultMessage: "Delete category", - description: "dialog title" - })} - variant="delete" - > - - - {maybe(() => data.category.name, "...")} - - ) - }} - /> - - - - - - params.ids.length > 0) - } - confirmButtonState={categoryBulkDeleteMutationState} - onClose={closeModal} - onConfirm={() => - categoryBulkDelete({ - variables: { ids: params.ids } - }).then(() => refetch()) - } - title={intl.formatMessage({ - defaultMessage: "Delete categories", - description: "dialog title" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: ( - {maybe(() => params.ids.length)} - ) - }} - /> - - - - - - - productBulkDelete({ - variables: { ids: params.ids } - }).then(() => refetch()) - } - title={intl.formatMessage({ - defaultMessage: "Delete products", - description: "dialog title" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: ( - {maybe(() => params.ids.length)} - ) - }} - /> - - - - ); - }} + } + }) + } + products={maybe(() => + data.category.products.edges.map(edge => edge.node) + )} + saveButtonBarState={updateResult.status} + subcategories={maybe(() => + data.category.children.edges.map(edge => edge.node) + )} + subcategoryListToolbar={ + openModal("delete-categories", listElements)} + > + + + } + productListToolbar={ + openModal("delete-products", listElements)} + > + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + /> + deleteCategory({ variables: { id } })} + open={params.action === "delete"} + title={intl.formatMessage({ + defaultMessage: "Delete category", + description: "dialog title" + })} + variant="delete" + > + + {maybe(() => data.category.name, "...")} + ) + }} + /> + + + + + + params.ids.length > 0) + } + confirmButtonState={categoryBulkDeleteOpts.status} + onClose={closeModal} + onConfirm={() => + categoryBulkDelete({ + variables: { ids: params.ids } + }).then(() => refetch()) + } + title={intl.formatMessage({ + defaultMessage: "Delete categories", + description: "dialog title" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + + + + + productBulkDelete({ + variables: { ids: params.ids } + }).then(() => refetch()) + } + title={intl.formatMessage({ + defaultMessage: "Delete products", + description: "dialog title" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + + )} ); diff --git a/src/categories/views/CategoryList/CategoryList.tsx b/src/categories/views/CategoryList/CategoryList.tsx index ac38342a709..d8bdcdac833 100644 --- a/src/categories/views/CategoryList/CategoryList.tsx +++ b/src/categories/views/CategoryList/CategoryList.tsx @@ -15,7 +15,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage"; import { useCategoryBulkDeleteMutation } from "../../mutations"; @@ -148,12 +148,6 @@ export const CategoryList: React.FC = ({ params }) => { onCompleted: handleCategoryBulkDelete }); - const bulkDeleteState = getMutationState( - categoryBulkDeleteOpts.called, - categoryBulkDeleteOpts.loading, - maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors) - ); - return ( <> = ({ params }) => { } /> navigate( categoryListUrl({ diff --git a/src/collections/views/CollectionCreate.tsx b/src/collections/views/CollectionCreate.tsx index 9b747b30eeb..8db1fcda506 100644 --- a/src/collections/views/CollectionCreate.tsx +++ b/src/collections/views/CollectionCreate.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { CollectionCreateInput } from "../../types/globalTypes"; import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage"; import { TypedCollectionCreateMutation } from "../mutations"; @@ -38,46 +38,42 @@ export const CollectionCreate: React.FC = () => { }; return ( - {(createCollection, { called, data, loading }) => { - const formTransitionState = getMutationState( - called, - loading, - maybe(() => data.collectionCreate.errors) - ); - return ( - <> - - data.collectionCreate.errors, [])} - onBack={() => navigate(collectionListUrl())} - disabled={loading} - onSubmit={formData => - createCollection({ - variables: { - input: { - backgroundImage: formData.backgroundImage.value, - backgroundImageAlt: formData.backgroundImageAlt, - descriptionJson: JSON.stringify(formData.description), - isPublished: formData.isPublished, - name: formData.name, - seo: { - description: formData.seoDescription, - title: formData.seoTitle - } + {(createCollection, createCollectionOpts) => ( + <> + + createCollectionOpts.data.collectionCreate.errors, + [] + )} + onBack={() => navigate(collectionListUrl())} + disabled={createCollectionOpts.loading} + onSubmit={formData => + createCollection({ + variables: { + input: { + backgroundImage: formData.backgroundImage.value, + backgroundImageAlt: formData.backgroundImageAlt, + descriptionJson: JSON.stringify(formData.description), + isPublished: formData.isPublished, + name: formData.name, + seo: { + description: formData.seoDescription, + title: formData.seoTitle } } - }) - } - saveButtonBarState={formTransitionState} - /> - - ); - }} + } + }) + } + saveButtonBarState={createCollectionOpts.status} + /> + + )} ); }; diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index 589b3599ca8..6b4828c35f2 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -195,31 +195,6 @@ export const CollectionDetails: React.FC = ({ .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( maybe(() => data.collection.products.pageInfo), @@ -288,7 +263,7 @@ export const CollectionDetails: React.FC = ({ toggleAll={toggleAll} /> = ({ )} /> removeCollection.mutate({ id })} open={params.action === "remove"} @@ -331,7 +306,7 @@ export const CollectionDetails: React.FC = ({ unassignProduct.mutate({ @@ -359,7 +334,7 @@ export const CollectionDetails: React.FC = ({ updateCollection.mutate({ diff --git a/src/collections/views/CollectionList/CollectionList.tsx b/src/collections/views/CollectionList/CollectionList.tsx index c85b99e1725..8423d104158 100644 --- a/src/collections/views/CollectionList/CollectionList.tsx +++ b/src/collections/views/CollectionList/CollectionList.tsx @@ -18,7 +18,7 @@ import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import CollectionListPage from "../../components/CollectionListPage/CollectionListPage"; import { @@ -167,204 +167,174 @@ export const CollectionList: React.FC = ({ params }) => { - {(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 ( - <> - changeFilterField({ query })} - onAdd={() => navigate(collectionAddUrl)} - onAll={() => navigate(collectionListUrl())} - onTabChange={handleTabChange} - onTabDelete={() => openModal("delete-search")} - onTabSave={() => openModal("save-search")} - tabs={tabs.map(tab => tab.name)} - disabled={loading} - collections={maybe(() => - data.collections.edges.map(edge => edge.node) - )} - settings={settings} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - pageInfo={pageInfo} - onRowClick={id => () => navigate(collectionUrl(id))} - toolbar={ - <> - - - openModal("remove", listElements)} - > - - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - params.ids.length > 0) - } - onClose={closeModal} - confirmButtonState={bulkPublishTransitionState} - onConfirm={() => - collectionBulkPublish({ - variables: { - ids: params.ids, - isPublished: true - } - }) - } - variant="default" - title={intl.formatMessage({ - defaultMessage: "Publish collections", - description: "dialog title" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - params.ids.length > 0) - } - onClose={closeModal} - confirmButtonState={bulkPublishTransitionState} - onConfirm={() => - collectionBulkPublish({ - variables: { - ids: params.ids, - isPublished: false - } - }) - } - variant="default" - title={intl.formatMessage({ - defaultMessage: "Unpublish collections", - description: "dialog title" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - params.ids.length > 0) - } - onClose={closeModal} - confirmButtonState={bulkDeleteTransitionState} - onConfirm={() => - collectionBulkDelete({ - variables: { - ids: params.ids - } - }) - } - variant="delete" - title={intl.formatMessage({ - defaultMessage: "Delete collections", - description: "dialog title" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - - tabs[currentTab - 1].name, "...")} - /> - - ); - }} + {(collectionBulkPublish, collectionBulkPublishOpts) => ( + <> + changeFilterField({ query })} + onAdd={() => navigate(collectionAddUrl)} + onAll={() => navigate(collectionListUrl())} + onTabChange={handleTabChange} + onTabDelete={() => openModal("delete-search")} + onTabSave={() => openModal("save-search")} + tabs={tabs.map(tab => tab.name)} + disabled={loading} + collections={maybe(() => + data.collections.edges.map(edge => edge.node) + )} + settings={settings} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + pageInfo={pageInfo} + onRowClick={id => () => navigate(collectionUrl(id))} + toolbar={ + <> + + + openModal("remove", listElements)} + > + + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + /> + params.ids.length > 0) + } + onClose={closeModal} + confirmButtonState={collectionBulkPublishOpts.status} + onConfirm={() => + collectionBulkPublish({ + variables: { + ids: params.ids, + isPublished: true + } + }) + } + variant="default" + title={intl.formatMessage({ + defaultMessage: "Publish collections", + description: "dialog title" + })} + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + params.ids.length > 0) + } + onClose={closeModal} + confirmButtonState={collectionBulkPublishOpts.status} + onConfirm={() => + collectionBulkPublish({ + variables: { + ids: params.ids, + isPublished: false + } + }) + } + variant="default" + title={intl.formatMessage({ + defaultMessage: "Unpublish collections", + description: "dialog title" + })} + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + params.ids.length > 0) + } + onClose={closeModal} + confirmButtonState={collectionBulkDeleteOpts.status} + onConfirm={() => + collectionBulkDelete({ + variables: { + ids: params.ids + } + }) + } + variant="delete" + title={intl.formatMessage({ + defaultMessage: "Delete collections", + description: "dialog title" + })} + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + + tabs[currentTab - 1].name, "...")} + /> + + )} )} diff --git a/src/customers/views/CustomerAddresses.tsx b/src/customers/views/CustomerAddresses.tsx index da7c300193a..5e2758deb85 100644 --- a/src/customers/views/CustomerAddresses.tsx +++ b/src/customers/views/CustomerAddresses.tsx @@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import CustomerAddressDialog from "../components/CustomerAddressDialog"; import CustomerAddressListPage from "../components/CustomerAddressListPage"; import { @@ -97,39 +97,6 @@ const CustomerAddresses: React.FC = ({ {(removeCustomerAddress, removeCustomerAddressOpts) => ( {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( () => shop.countries.map(country => ({ @@ -161,7 +128,9 @@ const CustomerAddresses: React.FC = ({ /> @@ -187,7 +156,9 @@ const CustomerAddresses: React.FC = ({ addr => addr.id === params.id ) )} - confirmButtonState={updateAddressTransitionState} + confirmButtonState={ + updateCustomerAddressOpts.status + } countries={countryChoices} errors={maybe( () => @@ -214,7 +185,9 @@ const CustomerAddresses: React.FC = ({ defaultMessage: "Delete Address", description: "dialog header" })} - confirmButtonState={removeAddressTransitionState} + confirmButtonState={ + removeCustomerAddressOpts.status + } onClose={closeModal} onConfirm={() => removeCustomerAddress({ diff --git a/src/customers/views/CustomerDetails.tsx b/src/customers/views/CustomerDetails.tsx index d7da1b0a019..07c49aa2e15 100644 --- a/src/customers/views/CustomerDetails.tsx +++ b/src/customers/views/CustomerDetails.tsx @@ -7,7 +7,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { orderListUrl, orderUrl } from "../../orders/urls"; import CustomerDetailsPage from "../components/CustomerDetailsPage/CustomerDetailsPage"; import { @@ -67,99 +67,86 @@ export const CustomerDetailsView: React.FC = ({ variables={{ id }} require={["user"]} > - {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 ( - <> - customerDetails.data.user.email)} - /> - customerDetails.data.user)} - disabled={ - customerDetails.loading || - updateCustomerOpts.loading || - removeCustomerOpts.loading - } - errors={maybe( - () => updateCustomerOpts.data.customerUpdate.errors - )} - saveButtonBar={formTransitionState} - onAddressManageClick={() => - navigate(customerAddressesUrl(id)) - } - onBack={() => navigate(customerListUrl())} - onRowClick={id => navigate(orderUrl(id))} - onSubmit={formData => - updateCustomer({ - variables: { - id, - input: { - email: formData.email, - firstName: formData.firstName, - isActive: formData.isActive, - lastName: formData.lastName, - note: formData.note - } + {customerDetails => ( + <> + customerDetails.data.user.email)} + /> + customerDetails.data.user)} + disabled={ + customerDetails.loading || + updateCustomerOpts.loading || + removeCustomerOpts.loading + } + errors={maybe( + () => updateCustomerOpts.data.customerUpdate.errors + )} + saveButtonBar={updateCustomerOpts.status} + onAddressManageClick={() => + navigate(customerAddressesUrl(id)) + } + onBack={() => navigate(customerListUrl())} + onRowClick={id => navigate(orderUrl(id))} + onSubmit={formData => + updateCustomer({ + variables: { + id, + input: { + email: formData.email, + firstName: formData.firstName, + isActive: formData.isActive, + lastName: formData.lastName, + note: formData.note } + } + }) + } + onDelete={() => + navigate( + customerUrl(id, { + action: "remove" + }) + ) + } + onViewAllOrdersClick={() => + navigate( + orderListUrl({ + email: maybe(() => customerDetails.data.user.email) }) - } - onDelete={() => - navigate( - customerUrl(id, { - action: "remove" - }) - ) - } - onViewAllOrdersClick={() => - navigate( - orderListUrl({ - email: maybe(() => customerDetails.data.user.email) - }) - ) - } - /> - navigate(customerUrl(id), true)} - onConfirm={() => removeCustomer()} - title={intl.formatMessage({ - defaultMessage: "Delete Customer", - description: "dialog header" - })} - variant="delete" - open={params.action === "remove"} - > - - - {maybe( - () => customerDetails.data.user.email, - "..." - )} - - ) - }} - /> - - - - ); - }} + ) + } + /> + navigate(customerUrl(id), true)} + onConfirm={() => removeCustomer()} + title={intl.formatMessage({ + defaultMessage: "Delete Customer", + description: "dialog header" + })} + variant="delete" + open={params.action === "remove"} + > + + + {maybe( + () => customerDetails.data.user.email, + "..." + )} + + ) + }} + /> + + + + )} )} diff --git a/src/customers/views/CustomerList/CustomerList.tsx b/src/customers/views/CustomerList/CustomerList.tsx index e190dd12165..11fbf222c71 100644 --- a/src/customers/views/CustomerList/CustomerList.tsx +++ b/src/customers/views/CustomerList/CustomerList.tsx @@ -17,7 +17,7 @@ import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import CustomerListPage from "../../components/CustomerListPage"; import { TypedBulkRemoveCustomers } from "../../mutations"; @@ -147,105 +147,95 @@ export const CustomerList: React.FC = ({ params }) => { return ( - {(bulkRemoveCustomers, bulkRemoveCustomersOpts) => { - const removeTransitionState = getMutationState( - bulkRemoveCustomersOpts.called, - bulkRemoveCustomersOpts.loading, - maybe( - () => bulkRemoveCustomersOpts.data.customerBulkDelete.errors - ) - ); - - return ( - <> - changeFilterField({ query })} - onAll={() => navigate(customerListUrl())} - onTabChange={handleTabChange} - onTabDelete={() => openModal("delete-search")} - onTabSave={() => openModal("save-search")} - tabs={tabs.map(tab => tab.name)} - customers={maybe(() => - data.customers.edges.map(edge => edge.node) - )} - settings={settings} - disabled={loading} - pageInfo={pageInfo} - onAdd={() => navigate(customerAddUrl)} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(customerUrl(id))} - toolbar={ - - navigate( - customerListUrl({ - action: "remove", - ids: listElements - }) - ) - } - > - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - params.ids.length > 0) - } - onClose={closeModal} - confirmButtonState={removeTransitionState} - onConfirm={() => - bulkRemoveCustomers({ - variables: { - ids: params.ids - } - }) - } - variant="delete" - title={intl.formatMessage({ - defaultMessage: "Delete Customers", - description: "dialog header" - })} - > - - params.ids.length), - displayQuantity: ( - {maybe(() => params.ids.length)} - ) - }} - /> - - - - tabs[currentTab - 1].name, "...")} - /> - - ); - }} + {(bulkRemoveCustomers, bulkRemoveCustomersOpts) => ( + <> + changeFilterField({ query })} + onAll={() => navigate(customerListUrl())} + onTabChange={handleTabChange} + onTabDelete={() => openModal("delete-search")} + onTabSave={() => openModal("save-search")} + tabs={tabs.map(tab => tab.name)} + customers={maybe(() => + data.customers.edges.map(edge => edge.node) + )} + settings={settings} + disabled={loading} + pageInfo={pageInfo} + onAdd={() => navigate(customerAddUrl)} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + onRowClick={id => () => navigate(customerUrl(id))} + toolbar={ + + navigate( + customerListUrl({ + action: "remove", + ids: listElements + }) + ) + } + > + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + /> + params.ids.length > 0) + } + onClose={closeModal} + confirmButtonState={bulkRemoveCustomersOpts.status} + onConfirm={() => + bulkRemoveCustomers({ + variables: { + ids: params.ids + } + }) + } + variant="delete" + title={intl.formatMessage({ + defaultMessage: "Delete Customers", + description: "dialog header" + })} + > + + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + + tabs[currentTab - 1].name, "...")} + /> + + )} ); }} diff --git a/src/discounts/views/SaleCreate.tsx b/src/discounts/views/SaleCreate.tsx index 1acdef0bf92..829bfff9b56 100644 --- a/src/discounts/views/SaleCreate.tsx +++ b/src/discounts/views/SaleCreate.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; 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 SaleCreatePage from "../components/SaleCreatePage"; import { TypedSaleCreate } from "../mutations"; @@ -38,44 +38,36 @@ export const SaleDetails: React.FC = () => { return ( - {(saleCreate, saleCreateOpts) => { - const formTransitionState = getMutationState( - saleCreateOpts.called, - saleCreateOpts.loading, - maybe(() => saleCreateOpts.data.saleCreate.errors) - ); - - return ( - <> - - shop.defaultCurrency)} - disabled={saleCreateOpts.loading} - errors={maybe(() => saleCreateOpts.data.saleCreate.errors)} - onBack={() => navigate(saleListUrl())} - onSubmit={formData => - saleCreate({ - variables: { - input: { - endDate: formData.hasEndDate - ? joinDateTime(formData.endDate, formData.endTime) - : null, - name: formData.name, - startDate: joinDateTime( - formData.startDate, - formData.startTime - ), - type: discountValueTypeEnum(formData.type), - value: decimal(formData.value) - } + {(saleCreate, saleCreateOpts) => ( + <> + + shop.defaultCurrency)} + disabled={saleCreateOpts.loading} + errors={maybe(() => saleCreateOpts.data.saleCreate.errors)} + onBack={() => navigate(saleListUrl())} + onSubmit={formData => + saleCreate({ + variables: { + input: { + endDate: formData.hasEndDate + ? joinDateTime(formData.endDate, formData.endTime) + : null, + name: formData.name, + startDate: joinDateTime( + formData.startDate, + formData.startTime + ), + type: discountValueTypeEnum(formData.type), + value: decimal(formData.value) } - }) - } - saveButtonBarState={formTransitionState} - /> - - ); - }} + } + }) + } + saveButtonBarState={saleCreateOpts.status} + /> + + )} ); }; diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx index 133f3ab2645..a56bb28e4e6 100644 --- a/src/discounts/views/SaleDetails.tsx +++ b/src/discounts/views/SaleDetails.tsx @@ -22,7 +22,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; import { categoryUrl } from "../../categories/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 { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes"; import SaleDetailsPage, { @@ -169,34 +169,6 @@ export const SaleDetails: React.FC = ({ id, params }) => { SaleDetailsPageTab.collections ? maybe(() => data.sale.collections.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[]) => saleCataloguesRemove({ @@ -308,7 +280,7 @@ export const SaleDetails: React.FC = ({ id, params }) => { }) } onRemove={() => openModal("remove")} - saveButtonBarState={formTransitionState} + saveButtonBarState={saleUpdateOpts.status} categoryListToolbar={ - } - /> - - menuCreate({ - variables: { input: formData } - }) - } - /> - - menuDelete({ - variables: { - id: params.id - } + {(menuBulkDelete, menuBulkDeleteOpts) => ( + <> + + data.menus.edges.map(edge => edge.node) + )} + settings={settings} + onAdd={() => + navigate( + menuListUrl({ + action: "add" }) - } - variant="delete" - title={intl.formatMessage({ - defaultMessage: "Delete Menu", - description: "dialog header", - id: "menuListDeleteMenuHeader" - })} - > - - - data.menus.edges.find( - edge => edge.node.id === params.id - ).node.name, - "..." - ) - }} - /> - - - params.ids.length > 0) - } - onClose={closeModal} - confirmButtonState={bulkDeleteTransitionState} - onConfirm={() => - menuBulkDelete({ - variables: { - ids: params.ids - } + ) + } + onBack={() => navigate(configurationMenuUrl)} + onDelete={id => + navigate( + menuListUrl({ + action: "remove", + id }) - } - variant="delete" - title={intl.formatMessage({ - defaultMessage: "Delete Menus", - description: "dialog header", - id: "menuListDeleteMenusHeader" - })} - > - - params.ids.length.toString(), - "..." - ), - displayQuantity: ( - - {maybe( - () => params.ids.length.toString(), - "..." - )} - - ) - }} - /> - - - - ); - }} + ) + } + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + onRowClick={id => () => navigate(menuUrl(id))} + pageInfo={pageInfo} + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + toolbar={ + + } + /> + + menuCreate({ + variables: { input: formData } + }) + } + /> + + menuDelete({ + variables: { + id: params.id + } + }) + } + variant="delete" + title={intl.formatMessage({ + defaultMessage: "Delete Menu", + description: "dialog header", + id: "menuListDeleteMenuHeader" + })} + > + + + data.menus.edges.find( + edge => edge.node.id === params.id + ).node.name, + "..." + ) + }} + /> + + + params.ids.length > 0) + } + onClose={closeModal} + confirmButtonState={menuBulkDeleteOpts.status} + onConfirm={() => + menuBulkDelete({ + variables: { + ids: params.ids + } + }) + } + variant="delete" + title={intl.formatMessage({ + defaultMessage: "Delete Menus", + description: "dialog header", + id: "menuListDeleteMenusHeader" + })} + > + + params.ids.length.toString(), + "..." + ), + displayQuantity: ( + + {maybe( + () => params.ids.length.toString(), + "..." + )} + + ) + }} + /> + + + + )} )} diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 38b079ffb82..e7f91d93d86 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -153,464 +153,451 @@ export const OrderDetails: React.FC = ({ id, params }) => { orderDraftCancel, orderDraftFinalize, orderPaymentMarkAsPaid - }) => { - const finalizeTransitionState = getMutationState( - orderDraftFinalize.opts.called, - orderDraftFinalize.opts.loading, - maybe( - () => - orderDraftFinalize.opts.data.draftOrderComplete.errors - ) - ); - return ( - <> - {maybe(() => order.status !== OrderStatus.DRAFT) ? ( - <> - "Order #" + data.order.number)} - /> - - orderAddNote.mutate({ - input: variables, - order: id + }) => ( + <> + {maybe(() => order.status !== OrderStatus.DRAFT) ? ( + <> + "Order #" + data.order.number)} + /> + + orderAddNote.mutate({ + input: variables, + order: id + }) + } + onBack={() => navigate(orderListUrl())} + order={order} + shippingMethods={maybe( + () => data.order.availableShippingMethods, + [] + )} + userPermissions={maybe(() => user.permissions, [])} + onOrderCancel={() => openModal("cancel")} + onOrderFulfill={() => openModal("fulfill")} + onFulfillmentCancel={fulfillmentId => + navigate( + orderUrl(id, { + action: "cancel-fulfillment", + id: fulfillmentId }) - } - onBack={() => navigate(orderListUrl())} - order={order} - shippingMethods={maybe( - () => data.order.availableShippingMethods, - [] - )} - userPermissions={maybe(() => user.permissions, [])} - onOrderCancel={() => openModal("cancel")} - onOrderFulfill={() => openModal("fulfill")} - onFulfillmentCancel={fulfillmentId => - navigate( - orderUrl(id, { - action: "cancel-fulfillment", - id: fulfillmentId - }) - ) - } - onFulfillmentTrackingNumberUpdate={fulfillmentId => - navigate( - orderUrl(id, { - action: "edit-fulfillment", - id: fulfillmentId - }) - ) - } - onPaymentCapture={() => openModal("capture")} - onPaymentVoid={() => openModal("void")} - onPaymentRefund={() => openModal("refund")} - onProductClick={id => () => - navigate(productUrl(id))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onPaymentPaid={() => openModal("mark-paid")} - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - /> - orderCancel.opts.data.orderCancel.errors - ) - )} - number={maybe(() => order.number)} - open={params.action === "cancel"} - onClose={closeModal} - onSubmit={variables => - orderCancel.mutate({ - id, - ...variables + ) + } + onFulfillmentTrackingNumberUpdate={fulfillmentId => + navigate( + orderUrl(id, { + action: "edit-fulfillment", + id: fulfillmentId }) - } - /> - - orderPaymentMarkAsPaid.opts.data - .orderMarkAsPaid.errors - ) - )} - onClose={closeModal} - onConfirm={() => - orderPaymentMarkAsPaid.mutate({ - id - }) - } - open={params.action === "mark-paid"} - /> - orderVoid.opts.data.orderVoid.errors) - )} - open={params.action === "void"} - onClose={closeModal} - onConfirm={() => orderVoid.mutate({ id })} - /> - - orderPaymentCapture.opts.data.orderCapture - .errors - ) - )} - initial={maybe(() => order.total.gross.amount)} - open={params.action === "capture"} - variant="capture" - onClose={closeModal} - onSubmit={variables => - orderPaymentCapture.mutate({ + ) + } + onPaymentCapture={() => openModal("capture")} + onPaymentVoid={() => openModal("void")} + onPaymentRefund={() => openModal("refund")} + onProductClick={id => () => navigate(productUrl(id))} + onBillingAddressEdit={() => + openModal("edit-billing-address") + } + onShippingAddressEdit={() => + openModal("edit-shipping-address") + } + onPaymentPaid={() => openModal("mark-paid")} + onProfileView={() => + navigate(customerUrl(order.user.id)) + } + /> + orderCancel.opts.data.orderCancel.errors + ) + )} + number={maybe(() => order.number)} + open={params.action === "cancel"} + onClose={closeModal} + onSubmit={variables => + orderCancel.mutate({ + id, + ...variables + }) + } + /> + + orderPaymentMarkAsPaid.opts.data.orderMarkAsPaid + .errors + ) + )} + onClose={closeModal} + onConfirm={() => + orderPaymentMarkAsPaid.mutate({ + id + }) + } + open={params.action === "mark-paid"} + /> + orderVoid.opts.data.orderVoid.errors) + )} + open={params.action === "void"} + onClose={closeModal} + onConfirm={() => orderVoid.mutate({ id })} + /> + + orderPaymentCapture.opts.data.orderCapture + .errors + ) + )} + initial={maybe(() => order.total.gross.amount)} + open={params.action === "capture"} + variant="capture" + onClose={closeModal} + onSubmit={variables => + orderPaymentCapture.mutate({ + ...variables, + id + }) + } + /> + + orderPaymentRefund.opts.data.orderRefund.errors + ) + )} + initial={maybe(() => order.total.gross.amount)} + open={params.action === "refund"} + variant="refund" + onClose={closeModal} + onSubmit={variables => + orderPaymentRefund.mutate({ + ...variables, + id + }) + } + /> + + orderCreateFulfillment.opts.data + .orderFulfillmentCreate.errors + ) + )} + open={params.action === "fulfill"} + lines={maybe(() => order.lines, []).filter( + line => line.quantityFulfilled < line.quantity + )} + onClose={closeModal} + onSubmit={variables => + orderCreateFulfillment.mutate({ + input: { ...variables, - id - }) - } - /> - - orderPaymentRefund.opts.data.orderRefund - .errors - ) - )} - initial={maybe(() => order.total.gross.amount)} - open={params.action === "refund"} - variant="refund" - onClose={closeModal} - onSubmit={variables => - orderPaymentRefund.mutate({ + lines: maybe(() => order.lines, []) + .filter( + line => + line.quantityFulfilled < line.quantity + ) + .map((line, lineIndex) => ({ + orderLineId: line.id, + quantity: variables.lines[lineIndex] + })) + .filter(line => line.quantity > 0) + }, + order: order.id + }) + } + /> + + orderFulfillmentCancel.opts.data + .orderFulfillmentCancel.errors + ) + )} + open={params.action === "cancel-fulfillment"} + onConfirm={variables => + orderFulfillmentCancel.mutate({ + id: params.id, + input: variables + }) + } + onClose={closeModal} + /> + + orderFulfillmentUpdateTracking.opts.data + .orderFulfillmentUpdateTracking.errors + ) + )} + open={params.action === "edit-fulfillment"} + trackingNumber={maybe( + () => + data.order.fulfillments.find( + fulfillment => fulfillment.id === params.id + ).trackingNumber + )} + onConfirm={variables => + orderFulfillmentUpdateTracking.mutate({ + id: params.id, + input: { ...variables, - id - }) - } - /> - - orderCreateFulfillment.opts.data - .orderFulfillmentCreate.errors - ) - )} - open={params.action === "fulfill"} - lines={maybe(() => order.lines, []).filter( - line => line.quantityFulfilled < line.quantity - )} - onClose={closeModal} - onSubmit={variables => - orderCreateFulfillment.mutate({ - input: { - ...variables, - lines: maybe(() => order.lines, []) - .filter( - line => - line.quantityFulfilled < line.quantity - ) - .map((line, lineIndex) => ({ - orderLineId: line.id, - quantity: variables.lines[lineIndex] - })) - .filter(line => line.quantity > 0) - }, - order: order.id - }) - } - /> - - orderFulfillmentCancel.opts.data - .orderFulfillmentCancel.errors - ) - )} - open={params.action === "cancel-fulfillment"} - onConfirm={variables => - orderFulfillmentCancel.mutate({ - id: params.id, - input: variables - }) - } - onClose={closeModal} - /> - - orderFulfillmentUpdateTracking.opts.data - .orderFulfillmentUpdateTracking.errors - ) - )} - open={params.action === "edit-fulfillment"} - trackingNumber={maybe( + notifyCustomer: true + } + }) + } + onClose={closeModal} + /> + + ) : ( + <> + "Draft order #" + data.order.number + )} + /> + + orderAddNote.mutate({ + input: variables, + order: id + }) + } + users={maybe( + () => + users.data.search.edges.map(edge => edge.node), + [] + )} + hasMore={maybe( + () => users.data.search.pageInfo.hasNextPage, + false + )} + onFetchMore={loadMoreCustomers} + fetchUsers={searchUsers} + loading={users.loading} + usersLoading={users.loading} + onCustomerEdit={data => + orderDraftUpdate.mutate({ + id, + input: data + }) + } + onDraftFinalize={() => openModal("finalize")} + onDraftRemove={() => openModal("cancel")} + onOrderLineAdd={() => openModal("add-order-line")} + onBack={() => navigate(orderListUrl())} + order={order} + countries={maybe(() => data.shop.countries, []).map( + country => ({ + code: country.code, + label: country.country + }) + )} + onProductClick={id => () => + navigate(productUrl(encodeURIComponent(id)))} + onBillingAddressEdit={() => + openModal("edit-billing-address") + } + onShippingAddressEdit={() => + openModal("edit-shipping-address") + } + onShippingMethodEdit={() => + openModal("edit-shipping") + } + onOrderLineRemove={id => + orderLineDelete.mutate({ id }) + } + onOrderLineChange={(id, data) => + orderLineUpdate.mutate({ + id, + input: data + }) + } + saveButtonBarState="default" + onProfileView={() => + navigate(customerUrl(order.user.id)) + } + userPermissions={maybe(() => user.permissions, [])} + /> + - data.order.fulfillments.find( - fulfillment => fulfillment.id === params.id - ).trackingNumber - )} - onConfirm={variables => - orderFulfillmentUpdateTracking.mutate({ - id: params.id, - input: { - ...variables, - notifyCustomer: true - } - }) - } - onClose={closeModal} - /> - - ) : ( - <> - "Draft order #" + data.order.number - )} - /> - - orderAddNote.mutate({ - input: variables, - order: id - }) - } - users={maybe( + orderDraftCancel.opts.data.draftOrderDelete + .errors + ) + )} + onClose={closeModal} + onConfirm={() => orderDraftCancel.mutate({ id })} + open={params.action === "cancel"} + orderNumber={maybe(() => order.number)} + /> + orderDraftFinalize.mutate({ id })} + open={params.action === "finalize"} + orderNumber={maybe(() => order.number)} + warnings={orderDraftFinalizeWarnings(order)} + /> + - users.data.search.edges.map(edge => edge.node), - [] - )} - hasMore={maybe( - () => users.data.search.pageInfo.hasNextPage, - false - )} - onFetchMore={loadMoreCustomers} - fetchUsers={searchUsers} - loading={users.loading} - usersLoading={users.loading} - onCustomerEdit={data => - orderDraftUpdate.mutate({ - id, - input: data - }) - } - onDraftFinalize={() => openModal("finalize")} - onDraftRemove={() => openModal("cancel")} - onOrderLineAdd={() => openModal("add-order-line")} - onBack={() => navigate(orderListUrl())} - order={order} - countries={maybe(() => data.shop.countries, []).map( - country => ({ - code: country.code, - label: country.country - }) - )} - onProductClick={id => () => - navigate(productUrl(encodeURIComponent(id)))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onShippingMethodEdit={() => - openModal("edit-shipping") - } - onOrderLineRemove={id => - orderLineDelete.mutate({ id }) - } - onOrderLineChange={(id, data) => - orderLineUpdate.mutate({ - id, - input: data - }) - } - saveButtonBarState="default" - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - userPermissions={maybe(() => user.permissions, [])} - /> - - orderDraftCancel.opts.data.draftOrderDelete - .errors - ) - )} - onClose={closeModal} - onConfirm={() => orderDraftCancel.mutate({ id })} - open={params.action === "cancel"} - orderNumber={maybe(() => order.number)} - /> - orderDraftFinalize.mutate({ id })} - open={params.action === "finalize"} - orderNumber={maybe(() => order.number)} - warnings={orderDraftFinalizeWarnings(order)} - /> - - orderShippingMethodUpdate.opts.data - .orderUpdateShipping.errors - ) - )} - open={params.action === "edit-shipping"} - shippingMethod={maybe( - () => order.shippingMethod.id, - "..." - )} - shippingMethods={maybe( - () => order.availableShippingMethods - )} - onClose={closeModal} - onSubmit={variables => - orderShippingMethodUpdate.mutate({ - id, - input: { - shippingMethod: variables.shippingMethod - } - }) - } - /> - - orderLinesAdd.opts.data.draftOrderLinesCreate - .errors - ) - )} - loading={variantSearchOpts.loading} - open={params.action === "add-order-line"} - hasMore={maybe( + orderShippingMethodUpdate.opts.data + .orderUpdateShipping.errors + ) + )} + open={params.action === "edit-shipping"} + shippingMethod={maybe( + () => order.shippingMethod.id, + "..." + )} + shippingMethods={maybe( + () => order.availableShippingMethods + )} + onClose={closeModal} + onSubmit={variables => + orderShippingMethodUpdate.mutate({ + id, + input: { + shippingMethod: variables.shippingMethod + } + }) + } + /> + - variantSearchOpts.data.search.pageInfo - .hasNextPage - )} - products={maybe(() => - variantSearchOpts.data.search.edges.map( - edge => edge.node - ) - )} - onClose={closeModal} - onFetch={variantSearch} - onFetchMore={loadMore} - onSubmit={variants => - orderLinesAdd.mutate({ - id, - input: variants.map(variant => ({ - quantity: 1, - variantId: variant.id - })) - }) - } - /> - + orderLinesAdd.opts.data.draftOrderLinesCreate + .errors + ) + )} + loading={variantSearchOpts.loading} + open={params.action === "add-order-line"} + hasMore={maybe( + () => + variantSearchOpts.data.search.pageInfo.hasNextPage + )} + products={maybe(() => + variantSearchOpts.data.search.edges.map( + edge => edge.node + ) + )} + onClose={closeModal} + onFetch={variantSearch} + onFetchMore={loadMore} + onSubmit={variants => + orderLinesAdd.mutate({ + id, + input: variants.map(variant => ({ + quantity: 1, + variantId: variant.id + })) + }) + } + /> + + )} + orderUpdate.opts.data.orderUpdate.errors) + )} + address={transformAddressToForm( + maybe(() => order.shippingAddress) + )} + countries={maybe(() => data.shop.countries, []).map( + country => ({ + code: country.code, + label: country.country + }) + )} + errors={maybe( + () => orderUpdate.opts.data.orderUpdate.errors, + [] + )} + open={params.action === "edit-shipping-address"} + variant="shipping" + onClose={closeModal} + onConfirm={shippingAddress => + orderUpdate.mutate({ + id, + input: { + shippingAddress + } + }) + } + /> + orderUpdate.opts.data.orderUpdate.errors) + )} + address={transformAddressToForm( + maybe(() => order.billingAddress) + )} + countries={maybe(() => data.shop.countries, []).map( + country => ({ + code: country.code, + label: country.country + }) + )} + errors={maybe( + () => orderUpdate.opts.data.orderUpdate.errors, + [] )} - orderUpdate.opts.data.orderUpdate.errors) - )} - address={transformAddressToForm( - maybe(() => order.shippingAddress) - )} - countries={maybe(() => data.shop.countries, []).map( - country => ({ - code: country.code, - label: country.country - }) - )} - errors={maybe( - () => orderUpdate.opts.data.orderUpdate.errors, - [] - )} - open={params.action === "edit-shipping-address"} - variant="shipping" - onClose={closeModal} - onConfirm={shippingAddress => - orderUpdate.mutate({ - id, - input: { - shippingAddress - } - }) - } - /> - orderUpdate.opts.data.orderUpdate.errors) - )} - address={transformAddressToForm( - maybe(() => order.billingAddress) - )} - countries={maybe(() => data.shop.countries, []).map( - country => ({ - code: country.code, - label: country.country - }) - )} - errors={maybe( - () => orderUpdate.opts.data.orderUpdate.errors, - [] - )} - open={params.action === "edit-billing-address"} - variant="billing" - onClose={closeModal} - onConfirm={billingAddress => - orderUpdate.mutate({ - id, - input: { - billingAddress - } - }) - } - /> - - ); - }} + open={params.action === "edit-billing-address"} + variant="billing" + onClose={closeModal} + onConfirm={billingAddress => + orderUpdate.mutate({ + id, + input: { + billingAddress + } + }) + } + /> + + )} )} diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index f9b1ad9a7cf..319ced5b6bb 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -16,7 +16,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import OrderDraftListPage from "../../components/OrderDraftListPage"; import { @@ -167,14 +167,6 @@ export const OrderDraftList: React.FC = ({ params }) => { onCompleted={handleOrderDraftBulkCancel} > {(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => { - const bulkRemoveTransitionState = getMutationState( - orderDraftBulkDeleteOpts.called, - orderDraftBulkDeleteOpts.loading, - maybe( - () => - orderDraftBulkDeleteOpts.data.draftOrderBulkDelete.errors - ) - ); const onOrderDraftBulkDelete = () => orderDraftBulkDelete({ variables: { @@ -225,7 +217,7 @@ export const OrderDraftList: React.FC = ({ params }) => { } /> = ({ params }) => { return ( {(orderBulkCancel, orderBulkCancelOpts) => { - const orderBulkCancelTransitionState = getMutationState( - orderBulkCancelOpts.called, - orderBulkCancelOpts.loading, - maybe(() => orderBulkCancelOpts.data.orderBulkCancel.errors) - ); const onOrderBulkCancel = (restock: boolean) => orderBulkCancel({ variables: { @@ -244,7 +239,7 @@ export const OrderList: React.FC = ({ params }) => { } /> params.ids.length.toString(), "..." diff --git a/src/pages/views/PageCreate.tsx b/src/pages/views/PageCreate.tsx index 3267a99b675..1acdf2e157a 100644 --- a/src/pages/views/PageCreate.tsx +++ b/src/pages/views/PageCreate.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import PageDetailsPage from "../components/PageDetailsPage"; import { TypedPageCreate } from "../mutations"; import { PageCreate as PageCreateData } from "../types/PageCreate"; @@ -32,53 +32,45 @@ export const PageCreate: React.FC = () => { return ( - {(pageCreate, pageCreateOpts) => { - const formTransitionState = getMutationState( - pageCreateOpts.called, - pageCreateOpts.loading, - maybe(() => pageCreateOpts.data.pageCreate.errors) - ); - - return ( - <> - - pageCreateOpts.data.pageCreate.errors, [])} - saveButtonBarState={formTransitionState} - page={null} - onBack={() => navigate(pageListUrl())} - onRemove={() => undefined} - onSubmit={formData => - pageCreate({ - variables: { - input: { - contentJson: JSON.stringify(formData.content), - isPublished: formData.isPublished, - publicationDate: formData.isPublished - ? null - : formData.publicationDate === "" - ? null - : formData.publicationDate, - seo: { - description: formData.seoDescription, - title: formData.seoTitle - }, - slug: formData.slug === "" ? null : formData.slug, - title: formData.title - } + {(pageCreate, pageCreateOpts) => ( + <> + + pageCreateOpts.data.pageCreate.errors, [])} + saveButtonBarState={pageCreateOpts.status} + page={null} + onBack={() => navigate(pageListUrl())} + onRemove={() => undefined} + onSubmit={formData => + pageCreate({ + variables: { + input: { + contentJson: JSON.stringify(formData.content), + isPublished: formData.isPublished, + publicationDate: formData.isPublished + ? null + : formData.publicationDate === "" + ? null + : formData.publicationDate, + seo: { + description: formData.seoDescription, + title: formData.seoTitle + }, + slug: formData.slug === "" ? null : formData.slug, + title: formData.title } - }) - } - /> - - ); - }} + } + }) + } + /> + + )} ); }; diff --git a/src/pages/views/PageDetails.tsx b/src/pages/views/PageDetails.tsx index 83e956fae0f..8e3658127c4 100644 --- a/src/pages/views/PageDetails.tsx +++ b/src/pages/views/PageDetails.tsx @@ -6,7 +6,7 @@ import ActionDialog from "@saleor/components/ActionDialog"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { PageInput } from "../../types/globalTypes"; import PageDetailsPage, { FormData } from "../components/PageDetailsPage"; import { TypedPageRemove, TypedPageUpdate } from "../mutations"; @@ -56,79 +56,63 @@ export const PageDetails: React.FC = ({ id, params }) => { {(pageUpdate, pageUpdateOpts) => ( - {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 ( - <> - pageDetails.data.page.title)} - /> - pageUpdateOpts.data.pageUpdate.errors, - [] - )} - saveButtonBarState={formTransitionState} - page={maybe(() => pageDetails.data.page)} - onBack={() => navigate(pageListUrl())} - onRemove={() => - navigate( - pageUrl(id, { - action: "remove" - }) - ) - } - onSubmit={formData => - pageUpdate({ - variables: { - id, - input: createPageInput(formData) - } + {pageDetails => ( + <> + pageDetails.data.page.title)} + /> + pageUpdateOpts.data.pageUpdate.errors, + [] + )} + saveButtonBarState={pageUpdateOpts.status} + page={maybe(() => pageDetails.data.page)} + onBack={() => navigate(pageListUrl())} + onRemove={() => + navigate( + pageUrl(id, { + action: "remove" }) - } - /> - navigate(pageUrl(id))} - onConfirm={pageRemove} - variant="delete" - > - - - {maybe( - () => pageDetails.data.page.title, - "..." - )} - - ) - }} - /> - - - - ); - }} + ) + } + onSubmit={formData => + pageUpdate({ + variables: { + id, + input: createPageInput(formData) + } + }) + } + /> + navigate(pageUrl(id))} + onConfirm={pageRemove} + variant="delete" + > + + + {maybe(() => pageDetails.data.page.title, "...")} + + ) + }} + /> + + + + )} )} diff --git a/src/pages/views/PageList.tsx b/src/pages/views/PageList.tsx index b8a487efca4..7c713b835b6 100644 --- a/src/pages/views/PageList.tsx +++ b/src/pages/views/PageList.tsx @@ -14,7 +14,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import PageListPage from "../components/PageListPage/PageListPage"; import { TypedPageBulkPublish, TypedPageBulkRemove } from "../mutations"; @@ -107,148 +107,74 @@ export const PageList: React.FC = ({ params }) => { {(bulkPageRemove, bulkPageRemoveOpts) => ( - {(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 ( - <> - - data.pages.edges.map(edge => edge.node) - )} - pageInfo={pageInfo} - onAdd={() => navigate(pageCreateUrl)} - onBack={() => navigate(configurationMenuUrl)} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(pageUrl(id))} - toolbar={ - <> - - - openModal("remove", listElements)} - > - - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - /> - - bulkPagePublish({ - variables: { - ids: params.ids, - isPublished: true - } - }) - } - title={intl.formatMessage({ - defaultMessage: "Publish Pages", - description: "dialog header" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - - bulkPagePublish({ - variables: { - ids: params.ids, - isPublished: false - } - }) - } - title={intl.formatMessage({ - defaultMessage: "Unpublish Pages", - description: "dialog header" - })} - > - params.ids.length), - displayQuantity: ( - {maybe(() => params.ids.length)} - ) - }} - /> - - - bulkPageRemove({ - variables: { - ids: params.ids - } - }) - } - variant="delete" - title={intl.formatMessage({ - defaultMessage: "Delete Pages", - description: "dialog header" - })} - > + {(bulkPagePublish, bulkPagePublishOpts) => ( + <> + + data.pages.edges.map(edge => edge.node) + )} + pageInfo={pageInfo} + onAdd={() => navigate(pageCreateUrl)} + onBack={() => navigate(configurationMenuUrl)} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + onRowClick={id => () => navigate(pageUrl(id))} + toolbar={ + <> + + + openModal("remove", listElements)} + > + + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + /> + + bulkPagePublish({ + variables: { + ids: params.ids, + isPublished: true + } + }) + } + title={intl.formatMessage({ + defaultMessage: "Publish Pages", + description: "dialog header" + })} + > + params.ids.length), @@ -257,10 +183,66 @@ export const PageList: React.FC = ({ params }) => { ) }} /> - - - ); - }} + + + + bulkPagePublish({ + variables: { + ids: params.ids, + isPublished: false + } + }) + } + title={intl.formatMessage({ + defaultMessage: "Unpublish Pages", + description: "dialog header" + })} + > + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + bulkPageRemove({ + variables: { + ids: params.ids + } + }) + } + variant="delete" + title={intl.formatMessage({ + defaultMessage: "Delete Pages", + description: "dialog header" + })} + > + params.ids.length), + displayQuantity: ( + {maybe(() => params.ids.length)} + ) + }} + /> + + + )} )} diff --git a/src/plugins/views/PluginsDetails.tsx b/src/plugins/views/PluginsDetails.tsx index edd4f1b1f6b..538718ac889 100644 --- a/src/plugins/views/PluginsDetails.tsx +++ b/src/plugins/views/PluginsDetails.tsx @@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; import { ConfigurationItemInput } from "@saleor/types/globalTypes"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import PluginsDetailsPage from "../components/PluginsDetailsPage"; import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog"; import { TypedPluginUpdate } from "../mutations"; @@ -85,12 +85,6 @@ export const PluginsDetails: React.FC = ({ {pluginDetails => ( {(pluginUpdate, pluginUpdateOpts) => { - const formTransitionState = getMutationState( - pluginUpdateOpts.called, - pluginUpdateOpts.loading, - maybe(() => pluginUpdateOpts.data.pluginUpdate.errors) - ); - const formErrors = maybe( () => pluginUpdateOpts.data.pluginUpdate.errors, [] @@ -120,7 +114,7 @@ export const PluginsDetails: React.FC = ({ disabled={pluginDetails.loading} errors={formErrors} saveButtonBarState={ - !params.action ? formTransitionState : "default" + !params.action ? pluginUpdateOpts.status : "default" } plugin={maybe(() => pluginDetails.data.plugin)} onBack={() => navigate(pluginsListUrl())} @@ -145,7 +139,7 @@ export const PluginsDetails: React.FC = ({ <> = ({ pluginDetails.data.plugin.configuration.find( diff --git a/src/productTypes/views/ProductTypeCreate.tsx b/src/productTypes/views/ProductTypeCreate.tsx index de3dbc5685d..f116699cae7 100644 --- a/src/productTypes/views/ProductTypeCreate.tsx +++ b/src/productTypes/views/ProductTypeCreate.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import ProductTypeCreatePage, { ProductTypeForm } from "../components/ProductTypeCreatePage"; @@ -30,11 +30,7 @@ export const ProductTypeCreate: React.FC = () => { }; return ( - {( - createProductType, - { called, loading, data: createProductTypeData } - ) => { - const formTransitionState = getMutationState(loading, called); + {(createProductType, createProductTypeOpts) => { const handleCreate = (formData: ProductTypeForm) => createProductType({ variables: { @@ -61,17 +57,16 @@ export const ProductTypeCreate: React.FC = () => { data.shop.defaultWeightUnit)} disabled={loading} - errors={ - createProductTypeData - ? createProductTypeData.productTypeCreate.errors - : undefined - } + errors={maybe( + () => createProductTypeOpts.data.productTypeCreate.errors, + [] + )} pageTitle={intl.formatMessage({ defaultMessage: "Create Product Type", description: "header", id: "productTypeCreatePageHeader" })} - saveButtonBarState={formTransitionState} + saveButtonBarState={createProductTypeOpts.status} taxTypes={maybe(() => data.taxTypes, [])} onBack={() => navigate(productTypeListUrl())} onSubmit={handleCreate} diff --git a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx index 3c09b3a146f..88b43aca97e 100644 --- a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx +++ b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx @@ -19,7 +19,7 @@ import usePaginator, { import { commonMessages } from "@saleor/intl"; import { ListViews } from "@saleor/types"; import { configurationMenuUrl } from "../../../configuration"; -import { getMutationState, maybe } from "../../../misc"; +import { maybe } from "../../../misc"; import ProductTypeListPage from "../../components/ProductTypeListPage"; import { TypedProductTypeBulkDeleteMutation } from "../../mutations"; import { TypedProductTypeListQuery } from "../../queries"; @@ -155,15 +155,6 @@ export const ProductTypeList: React.FC = ({ params }) => { onCompleted={handleProductTypeBulkDelete} > {(productTypeBulkDelete, productTypeBulkDeleteOpts) => { - const bulkRemoveTransitionState = getMutationState( - productTypeBulkDeleteOpts.called, - productTypeBulkDeleteOpts.loading, - maybe( - () => - productTypeBulkDeleteOpts.data.productTypeBulkDelete.errors - ) - ); - const onProductTypeBulkDelete = () => productTypeBulkDelete({ variables: { @@ -212,7 +203,7 @@ export const ProductTypeList: React.FC = ({ params }) => { } /> = ({ 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 = ( event: ReorderEvent, type: AttributeTypeEnum @@ -252,7 +220,7 @@ export const ProductTypeUpdate: React.FC = ({ errors={errors.formErrors} pageTitle={maybe(() => data.productType.name)} productType={maybe(() => data.productType)} - saveButtonBarState={formTransitionState} + saveButtonBarState={updateProductType.opts.status} taxTypes={maybe(() => data.taxTypes, [])} onAttributeAdd={type => navigate( @@ -345,7 +313,7 @@ export const ProductTypeUpdate: React.FC = ({ edge => edge.node ) )} - confirmButtonState={assignTransactionState} + confirmButtonState={assignAttribute.opts.status} errors={maybe( () => assignAttribute.opts.data.attributeAssign.errors.map( @@ -387,7 +355,7 @@ export const ProductTypeUpdate: React.FC = ({ /> ))} data.productType.name, "...")} open={params.action === "remove"} onClose={() => navigate(productTypeUrl(id))} @@ -395,7 +363,7 @@ export const ProductTypeUpdate: React.FC = ({ /> params.ids.length)} - confirmButtonState={unassignTransactionState} + confirmButtonState={unassignAttribute.opts.status} onClose={closeModal} onConfirm={handleBulkAttributeUnassign} open={params.action === "unassign-attributes"} @@ -414,7 +382,7 @@ export const ProductTypeUpdate: React.FC = ({ .name, "..." )} - confirmButtonState={unassignTransactionState} + confirmButtonState={unassignAttribute.opts.status} onClose={closeModal} onConfirm={handleAttributeUnassign} open={params.action === "unassign-attribute"} diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index f71ef477ccb..8bfc63a54b6 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -9,7 +9,7 @@ import useShop from "@saleor/hooks/useShop"; import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useProductTypeSearch from "@saleor/searches/useProductTypeSearch"; -import { decimal, getMutationState, maybe } from "../../misc"; +import { decimal, maybe } from "../../misc"; import ProductCreatePage, { ProductCreatePageSubmitData } from "../components/ProductCreatePage"; @@ -70,14 +70,7 @@ export const ProductUpdate: React.FC = () => { return ( - {( - productCreate, - { - called: productCreateCalled, - data: productCreateData, - loading: productCreateDataLoading - } - ) => { + {(productCreate, productCreateOpts) => { const handleSubmit = (formData: ProductCreatePageSubmitData) => { productCreate({ variables: { @@ -108,11 +101,6 @@ export const ProductUpdate: React.FC = () => { }); }; - const formTransitionState = getMutationState( - productCreateCalled, - productCreateDataLoading, - maybe(() => productCreateData.productCreate.errors) - ); return ( <> = () => { () => searchCollectionOpts.data.search.edges, [] ).map(edge => edge.node)} - disabled={productCreateDataLoading} - errors={maybe(() => productCreateData.productCreate.errors, [])} + disabled={productCreateOpts.loading} + errors={maybe( + () => productCreateOpts.data.productCreate.errors, + [] + )} fetchCategories={searchCategory} fetchCollections={searchCollection} fetchProductTypes={searchProductTypes} @@ -145,7 +136,7 @@ export const ProductUpdate: React.FC = () => { )} onBack={handleBack} onSubmit={handleSubmit} - saveButtonBarState={formTransitionState} + saveButtonBarState={productCreateOpts.status} fetchMoreCategories={{ hasMore: maybe( () => searchCategoryOpts.data.search.pageInfo.hasNextPage diff --git a/src/products/views/ProductImage.tsx b/src/products/views/ProductImage.tsx index 2ec56987964..a89328949d8 100644 --- a/src/products/views/ProductImage.tsx +++ b/src/products/views/ProductImage.tsx @@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import ProductImagePage from "../components/ProductImagePage"; import { TypedProductImageDeleteMutation, @@ -68,16 +68,6 @@ export const ProductImage: React.FC = ({ }; 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 ( <> = ({ } onRowClick={handleImageClick} onSubmit={handleUpdate} - saveButtonBarState={formTransitionState} + saveButtonBarState={updateResult.status} /> @@ -108,7 +98,7 @@ export const ProductImage: React.FC = ({ description: "dialog header" })} variant="delete" - confirmButtonState={deleteTransitionState} + confirmButtonState={deleteResult.status} > diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index 6d994460874..d4ff1c671c5 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -21,7 +21,7 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ProductListVariables } from "@saleor/products/types/ProductList"; import { ListViews } from "@saleor/types"; import { getSortUrlVariables } from "@saleor/utils/sort"; @@ -216,281 +216,256 @@ export const ProductList: React.FC = ({ params }) => { - {(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 ( - <> - - attributes.data.availableInGrid.edges.map( - edge => edge.node - ), - [] - )} - currencySymbol={currencySymbol} - currentTab={currentTab} - defaultSettings={ - defaultListSettings[ListViews.PRODUCT_LIST] - } - gridAttributes={maybe( - () => - attributes.data.grid.edges.map( - edge => edge.node - ), - [] - )} - totalGridAttributes={maybe( - () => attributes.data.availableInGrid.totalCount, - 0 - )} - settings={settings} - loading={attributes.loading} - hasMore={maybe( - () => - attributes.data.availableInGrid.pageInfo - .hasNextPage, - false - )} - filtersList={createFilterChips( - params, - { - currencySymbol, - locale - }, - changeFilterField, - intl - )} - onAdd={() => navigate(productAddUrl)} - disabled={loading} - products={maybe(() => - data.products.edges.map(edge => edge.node) - )} - onFetchMore={() => - attributes.loadMore( - (prev, next) => { - if ( - prev.availableInGrid.pageInfo.endCursor === - next.availableInGrid.pageInfo.endCursor - ) { - return prev; - } - return { - ...prev, - availableInGrid: { - ...prev.availableInGrid, - edges: [ - ...prev.availableInGrid.edges, - ...next.availableInGrid.edges - ], - pageInfo: next.availableInGrid.pageInfo - } - }; - }, - { - after: - attributes.data.availableInGrid.pageInfo - .endCursor + {(productBulkPublish, productBulkPublishOpts) => ( + <> + + attributes.data.availableInGrid.edges.map( + edge => edge.node + ), + [] + )} + currencySymbol={currencySymbol} + currentTab={currentTab} + defaultSettings={ + defaultListSettings[ListViews.PRODUCT_LIST] + } + gridAttributes={maybe( + () => + attributes.data.grid.edges.map(edge => edge.node), + [] + )} + totalGridAttributes={maybe( + () => attributes.data.availableInGrid.totalCount, + 0 + )} + settings={settings} + loading={attributes.loading} + hasMore={maybe( + () => + attributes.data.availableInGrid.pageInfo + .hasNextPage, + false + )} + filtersList={createFilterChips( + params, + { + currencySymbol, + locale + }, + changeFilterField, + intl + )} + onAdd={() => navigate(productAddUrl)} + disabled={loading} + products={maybe(() => + data.products.edges.map(edge => edge.node) + )} + onFetchMore={() => + attributes.loadMore( + (prev, next) => { + if ( + prev.availableInGrid.pageInfo.endCursor === + next.availableInGrid.pageInfo.endCursor + ) { + return prev; } - ) - } - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - pageInfo={pageInfo} - onRowClick={id => () => navigate(productUrl(id))} - onAll={() => - changeFilters({ - status: undefined - }) - } - toolbar={ - <> - - - - openModal("delete", listElements) - } - > - - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - onSearchChange={query => - changeFilterField({ query }) - } - onFilterAdd={filter => - changeFilterField(createFilter(filter)) - } - onTabSave={() => openModal("save-search")} - onTabDelete={() => openModal("delete-search")} - onTabChange={handleTabChange} - initialSearch={params.query || ""} - tabs={getFilterTabs().map(tab => tab.name)} - /> - - productBulkDelete({ - variables: { ids: params.ids } - }) - } - title={intl.formatMessage({ - defaultMessage: "Delete Products", - description: "dialog header" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - - productBulkPublish({ - variables: { - ids: params.ids, - isPublished: true + }; + }, + { + after: + attributes.data.availableInGrid.pageInfo + .endCursor + } + ) + } + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + pageInfo={pageInfo} + onRowClick={id => () => navigate(productUrl(id))} + onAll={() => + changeFilters({ + status: undefined + }) + } + toolbar={ + <> + + + + openModal("delete", listElements) } - }) - } - title={intl.formatMessage({ - defaultMessage: "Unpublish Products", - description: "dialog header" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - - tabs[currentTab - 1].name, - "..." - )} - /> - - ); - }} + > + + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + onSearchChange={query => changeFilterField({ query })} + onFilterAdd={filter => + changeFilterField(createFilter(filter)) + } + onTabSave={() => openModal("save-search")} + onTabDelete={() => openModal("delete-search")} + onTabChange={handleTabChange} + initialSearch={params.query || ""} + tabs={getFilterTabs().map(tab => tab.name)} + /> + + productBulkDelete({ + variables: { ids: params.ids } + }) + } + title={intl.formatMessage({ + defaultMessage: "Delete Products", + description: "dialog header" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: ( + + {maybe(() => params.ids.length)} + + ) + }} + /> + + + + productBulkPublish({ + variables: { + ids: params.ids, + isPublished: true + } + }) + } + title={intl.formatMessage({ + defaultMessage: "Publish Products", + description: "dialog header" + })} + > + + params.ids.length), + displayQuantity: ( + + {maybe(() => params.ids.length)} + + ) + }} + /> + + + + productBulkPublish({ + variables: { + ids: params.ids, + isPublished: false + } + }) + } + title={intl.formatMessage({ + defaultMessage: "Unpublish Products", + description: "dialog header" + })} + > + + params.ids.length), + displayQuantity: ( + + {maybe(() => params.ids.length)} + + ) + }} + /> + + + + tabs[currentTab - 1].name, + "..." + )} + /> + + )} )} diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index f9943b63a6f..85004a2365c 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -206,21 +206,6 @@ export const ProductUpdate: React.FC = ({ id, params }) => { 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( () => searchCategoriesOpts.data.search.edges, @@ -308,7 +293,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { navigate(productUrl(id), true)} - confirmButtonState={deleteTransitionState} + confirmButtonState={deleteProduct.opts.status} onConfirm={() => deleteProduct.mutate({ id })} variant="delete" title={intl.formatMessage({ @@ -329,7 +314,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { navigate(productUrl(id), true)} - confirmButtonState={bulkProductVariantDeleteTransitionState} + confirmButtonState={bulkProductVariantDelete.opts.status} onConfirm={() => bulkProductVariantDelete.mutate({ ids: params.ids diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index 5ace13fb282..4456f77d18a 100644 --- a/src/products/views/ProductVariant.tsx +++ b/src/products/views/ProductVariant.tsx @@ -6,7 +6,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; -import { decimal, getMutationState, maybe } from "../../misc"; +import { decimal, maybe } from "../../misc"; import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog"; import ProductVariantPage, { ProductVariantPageSubmitData @@ -77,19 +77,7 @@ export const ProductVariant: React.FC = ({ updateVariant.opts.loading || assignImage.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) => () => { if (variant) { if ( @@ -114,7 +102,7 @@ export const ProductVariant: React.FC = ({ data.productVariant.name)} /> = ({ }} /> navigate(productVariantEditUrl(productId, variantId)) } diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx index 6500c99276a..9bd11624c9a 100644 --- a/src/products/views/ProductVariantCreate.tsx +++ b/src/products/views/ProductVariantCreate.tsx @@ -5,7 +5,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; -import { decimal, getMutationState, maybe } from "../../misc"; +import { decimal, maybe } from "../../misc"; import ProductVariantCreatePage, { ProductVariantCreatePageSubmitData } from "../components/ProductVariantCreatePage"; @@ -77,14 +77,6 @@ export const ProductVariant: React.FC = ({ productId }) => { const disableForm = productLoading || variantCreateResult.loading; - const formTransitionstate = getMutationState( - variantCreateResult.called, - variantCreateResult.loading, - maybe( - () => - variantCreateResult.data.productVariantCreate.productErrors - ) - ); return ( <> = ({ productId }) => { onBack={handleBack} onSubmit={handleSubmit} onVariantClick={handleVariantClick} - saveButtonBarState={formTransitionstate} + saveButtonBarState={variantCreateResult.status} /> ); diff --git a/src/services/views/ServiceCreate/ServiceCreate.tsx b/src/services/views/ServiceCreate/ServiceCreate.tsx index f4a8d631b4a..4af4e264bd3 100644 --- a/src/services/views/ServiceCreate/ServiceCreate.tsx +++ b/src/services/views/ServiceCreate/ServiceCreate.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ServiceCreateMutation } from "@saleor/services/mutations"; import { ServiceCreate as ServiceCreateData } from "@saleor/services/types/ServiceCreate"; import ServiceCreatePage, { @@ -51,12 +51,6 @@ export const ServiceCreate: React.FC = ({ setToken }) => { } }); - const formTransitionState = getMutationState( - serviceCreateOpts.called, - serviceCreateOpts.loading, - maybe(() => serviceCreateOpts.data.serviceAccountCreate.errors) - ); - return ( <> = ({ setToken }) => { onBack={handleBack} onSubmit={handleSubmit} permissions={maybe(() => shop.permissions)} - saveButtonBarState={formTransitionState} + saveButtonBarState={serviceCreateOpts.status} /> ); diff --git a/src/services/views/ServiceDetails/ServiceDetails.tsx b/src/services/views/ServiceDetails/ServiceDetails.tsx index 0228d878c1a..dc94882dffb 100644 --- a/src/services/views/ServiceDetails/ServiceDetails.tsx +++ b/src/services/views/ServiceDetails/ServiceDetails.tsx @@ -7,7 +7,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import ServiceDeleteDialog from "@saleor/services/components/ServiceDeleteDialog"; import ServiceTokenCreateDialog from "@saleor/services/components/ServiceTokenCreateDialog"; import ServiceTokenDeleteDialog from "@saleor/services/components/ServiceTokenDeleteDialog"; @@ -162,46 +162,6 @@ export const ServiceDetails: React.FC = ({ } }); - 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 ( <> = ({ } permissions={maybe(() => shop.permissions)} service={maybe(() => data.serviceAccount)} - saveButtonBarState={formTransitionState} + saveButtonBarState={updateServiceOpts.status} /> data.serviceAccount.name, "..." @@ -236,7 +196,7 @@ export const ServiceDetails: React.FC = ({ open={params.action === "remove"} /> = ({ )} /> { const token = data.serviceAccount.tokens.find( token => token.id === params.id diff --git a/src/services/views/ServiceList/ServiceList.tsx b/src/services/views/ServiceList/ServiceList.tsx index 1c147e230e5..4a8dd2c85d9 100644 --- a/src/services/views/ServiceList/ServiceList.tsx +++ b/src/services/views/ServiceList/ServiceList.tsx @@ -14,7 +14,7 @@ import SaveFilterTabDialog, { } from "@saleor/components/SaveFilterTabDialog"; import { configurationMenuUrl } from "@saleor/configuration"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ServiceDeleteMutation } from "@saleor/services/mutations"; import { ServiceDelete } from "@saleor/services/types/ServiceDelete"; import { ListViews } from "@saleor/types"; @@ -154,12 +154,6 @@ export const ServiceList: React.FC = ({ params }) => { } }); - const removeTransitionState = getMutationState( - deleteServiceOpts.called, - deleteServiceOpts.loading, - maybe(() => deleteServiceOpts.data.serviceAccountDelete.errors) - ); - return ( <> = ({ params }) => { onRemove={handleRemove} /> data.serviceAccounts.edges.find( diff --git a/src/shipping/views/ShippingZoneCreate.tsx b/src/shipping/views/ShippingZoneCreate.tsx index ea3f0b582bb..5373dc47770 100644 --- a/src/shipping/views/ShippingZoneCreate.tsx +++ b/src/shipping/views/ShippingZoneCreate.tsx @@ -5,7 +5,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import ShippingZoneCreatePage from "../components/ShippingZoneCreatePage"; import { TypedCreateShippingZone } from "../mutations"; import { CreateShippingZone } from "../types/CreateShippingZone"; @@ -27,32 +27,24 @@ const ShippingZoneCreate: React.FC<{}> = () => { }; return ( - {(createShippingZone, createShippingZoneOpts) => { - const formTransitionState = getMutationState( - createShippingZoneOpts.called, - createShippingZoneOpts.loading, - maybe(() => createShippingZoneOpts.data.shippingZoneCreate.errors, []) - ); - - return ( - shop.countries, [])} - disabled={createShippingZoneOpts.loading} - errors={maybe( - () => createShippingZoneOpts.data.shippingZoneCreate.errors - )} - onBack={() => navigate(shippingZonesListUrl())} - onSubmit={formData => - createShippingZone({ - variables: { - input: formData - } - }) - } - saveButtonBarState={formTransitionState} - /> - ); - }} + {(createShippingZone, createShippingZoneOpts) => ( + shop.countries, [])} + disabled={createShippingZoneOpts.loading} + errors={maybe( + () => createShippingZoneOpts.data.shippingZoneCreate.errors + )} + onBack={() => navigate(shippingZonesListUrl())} + onSubmit={formData => + createShippingZone({ + variables: { + input: formData + } + }) + } + saveButtonBarState={createShippingZoneOpts.status} + /> + )} ); }; diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx index 599c95bccb9..81fde63b9a6 100644 --- a/src/shipping/views/ShippingZoneDetails/index.tsx +++ b/src/shipping/views/ShippingZoneDetails/index.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../../misc"; +import { maybe } from "../../../misc"; import { ShippingMethodTypeEnum } from "../../../types/globalTypes"; import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage"; import { TypedShippingZone } from "../../queries"; @@ -91,143 +91,106 @@ const ShippingZoneDetails: React.FC = ({ > {ops => ( - {({ 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 ( - <> - - ops.shippingZoneUpdate.opts.data.shippingZoneUpdate.errors - )} - onBack={() => navigate(shippingZonesListUrl())} - onCountryAdd={() => - navigate( - shippingZoneUrl(id, { - action: "assign-country" - }) - ) - } - onCountryRemove={code => - navigate( - shippingZoneUrl(id, { - action: "unassign-country", - id: code - }) - ) - } - onDelete={() => - navigate( - shippingZoneUrl(id, { - action: "remove" - }) - ) - } - onPriceRateAdd={() => - navigate( - shippingZoneUrl(id, { - action: "add-rate", - type: ShippingMethodTypeEnum.PRICE - }) - ) - } - onPriceRateEdit={rateId => - navigate( - shippingZoneUrl(id, { - action: "edit-rate", - id: rateId - }) - ) - } - onRateRemove={rateId => - navigate( - shippingZoneUrl(id, { - action: "remove-rate", - id: rateId - }) - ) - } - onSubmit={formData => - ops.shippingZoneUpdate.mutate({ - id, - input: { - name: formData.name - } + {({ data, loading }) => ( + <> + + ops.shippingZoneUpdate.opts.data.shippingZoneUpdate.errors + )} + onBack={() => navigate(shippingZonesListUrl())} + onCountryAdd={() => + navigate( + shippingZoneUrl(id, { + action: "assign-country" + }) + ) + } + onCountryRemove={code => + navigate( + shippingZoneUrl(id, { + action: "unassign-country", + id: code + }) + ) + } + onDelete={() => + navigate( + shippingZoneUrl(id, { + action: "remove" + }) + ) + } + onPriceRateAdd={() => + navigate( + shippingZoneUrl(id, { + action: "add-rate", + type: ShippingMethodTypeEnum.PRICE + }) + ) + } + onPriceRateEdit={rateId => + navigate( + shippingZoneUrl(id, { + action: "edit-rate", + id: rateId + }) + ) + } + onRateRemove={rateId => + navigate( + shippingZoneUrl(id, { + action: "remove-rate", + id: rateId + }) + ) + } + onSubmit={formData => + ops.shippingZoneUpdate.mutate({ + id, + input: { + name: formData.name + } + }) + } + onWeightRateAdd={() => + navigate( + shippingZoneUrl(id, { + action: "add-rate", + type: ShippingMethodTypeEnum.WEIGHT + }) + ) + } + onWeightRateEdit={rateId => + navigate( + shippingZoneUrl(id, { + action: "edit-rate", + id: rateId }) - } - onWeightRateAdd={() => - navigate( - shippingZoneUrl(id, { - action: "add-rate", - type: ShippingMethodTypeEnum.WEIGHT - }) - ) - } - onWeightRateEdit={rateId => - navigate( - shippingZoneUrl(id, { - action: "edit-rate", - id: rateId - }) - ) - } - saveButtonBarState={formTransitionState} - shippingZone={maybe(() => data.shippingZone)} - /> - data.shippingZone)} - unassignCountryTransitionState={formTransitionState} - updateRateTransitionState={updateRateTransitionState} - /> - - ); - }} + ) + } + saveButtonBarState={ops.shippingZoneUpdate.opts.status} + shippingZone={maybe(() => data.shippingZone)} + /> + data.shippingZone)} + unassignCountryTransitionState={ + ops.shippingZoneUpdate.opts.status + } + updateRateTransitionState={ops.shippingRateUpdate.opts.status} + /> + + )} )} diff --git a/src/shipping/views/ShippingZonesList.tsx b/src/shipping/views/ShippingZonesList.tsx index 6c875152014..da791329fee 100644 --- a/src/shipping/views/ShippingZonesList.tsx +++ b/src/shipping/views/ShippingZonesList.tsx @@ -16,7 +16,7 @@ import usePaginator, { import useShop from "@saleor/hooks/useShop"; import useUser from "@saleor/hooks/useUser"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import ShippingZonesListPage from "../components/ShippingZonesListPage"; import { @@ -111,26 +111,6 @@ export const ShippingZonesList: React.FC = ({ onCompleted={handleBulkDeleteShippingZone} > {(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 { loadNextPage, loadPreviousPage, @@ -202,7 +182,7 @@ export const ShippingZonesList: React.FC = ({ = ({ = ({ params }) => { }); }; - const formTransitionState = getMutationState( - updateShopSettingsOpts.called, - updateShopSettingsOpts.loading, - [ - ...maybe( - () => - updateShopSettingsOpts.data.shopDomainUpdate.errors, - [] - ), - ...maybe( - () => - updateShopSettingsOpts.data.shopSettingsUpdate - .errors, - [] - ) - ] - ); - return ( <> = ({ params }) => { }) } onSubmit={handleUpdateShopSettings} - saveButtonBarState={formTransitionState} + saveButtonBarState={updateShopSettingsOpts.status} /> = ({ id, params }) => { onCompleted: handleChangePassword }); - const changePasswordTransitionState = getMutationState( - changePasswordOpts.called, - changePasswordOpts.loading, - maybe(() => changePasswordOpts.data.passwordChange.errors) - ); - return ( = ({ id, params }) => { onCompleted={handleStaffMemberAvatarDelete} > {(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( () => user.user.id === data.user.id, true @@ -201,7 +177,7 @@ export const StaffDetails: React.FC = ({ id, params }) => { } permissions={maybe(() => shop.permissions)} staffMember={maybe(() => data.user)} - saveButtonBarState={formTransitionState} + saveButtonBarState={updateResult.status} /> = ({ id, params }) => { defaultMessage: "delete Staff User", description: "dialog header" })} - confirmButtonState={deleteTransitionState} + confirmButtonState={deleteResult.status} variant="delete" onClose={closeModal} onConfirm={deleteStaffMember} @@ -229,7 +205,7 @@ export const StaffDetails: React.FC = ({ id, params }) => { defaultMessage: "Delete Staff User Avatar", description: "dialog header" })} - confirmButtonState={deleteAvatarTransitionState} + confirmButtonState={deleteAvatarResult.status} variant="delete" onClose={closeModal} onConfirm={deleteStaffAvatar} @@ -248,9 +224,7 @@ export const StaffDetails: React.FC = ({ id, params }) => { changePasswordOpts.data.passwordChange diff --git a/src/staff/views/StaffList/StaffList.tsx b/src/staff/views/StaffList/StaffList.tsx index b1ae7e328bf..ca8e1d03f92 100644 --- a/src/staff/views/StaffList/StaffList.tsx +++ b/src/staff/views/StaffList/StaffList.tsx @@ -18,7 +18,7 @@ import { APP_MOUNT_URI } from "@saleor/config"; import { configurationMenuUrl } from "@saleor/configuration"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import StaffAddMemberDialog, { FormData as AddStaffMemberForm @@ -158,11 +158,6 @@ export const StaffList: React.FC = ({ params }) => { } } }); - const addTransitionState = getMutationState( - addStaffMemberData.called, - addStaffMemberData.loading, - maybe(() => addStaffMemberData.data.staffCreate.errors) - ); const { loadNextPage, loadPreviousPage, pageInfo } = paginate( maybe(() => data.staffUsers.pageInfo), @@ -201,7 +196,7 @@ export const StaffList: React.FC = ({ params }) => { onRowClick={id => () => navigate(staffMemberDetailsUrl(id))} /> addStaffMemberData.data.staffCreate.errors, [] diff --git a/src/taxes/views/CountryList.tsx b/src/taxes/views/CountryList.tsx index 6868ff1879b..904374d5bed 100644 --- a/src/taxes/views/CountryList.tsx +++ b/src/taxes/views/CountryList.tsx @@ -5,7 +5,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; import { configurationMenuUrl } from "../../configuration"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import CountryListPage from "../components/CountryListPage"; import { TypedFetchTaxes, TypedUpdateTaxSettings } from "../mutations"; import { TypedCountryListQuery } from "../queries"; @@ -42,47 +42,36 @@ export const CountryList: React.FC = () => { {(fetchTaxes, fetchTaxesOpts) => ( - {({ data, loading }) => { - const updateTaxSettingsTransitionState = getMutationState( - updateTaxSettingsOpts.called, - updateTaxSettingsOpts.loading, - maybe( - () => updateTaxSettingsOpts.data.shopSettingsUpdate.errors - ) - ); - - return ( - navigate(configurationMenuUrl)} - onRowClick={code => navigate(countryTaxRatesUrl(code))} - onSubmit={formData => - updateTaxSettings({ - variables: { - input: { - chargeTaxesOnShipping: - formData.chargeTaxesOnShipping, - displayGrossPrices: formData.showGross, - includeTaxesInPrices: formData.includeTax - } + {({ data, loading }) => ( + navigate(configurationMenuUrl)} + onRowClick={code => navigate(countryTaxRatesUrl(code))} + onSubmit={formData => + updateTaxSettings({ + variables: { + input: { + chargeTaxesOnShipping: formData.chargeTaxesOnShipping, + displayGrossPrices: formData.showGross, + includeTaxesInPrices: formData.includeTax } - }) - } - onTaxFetch={fetchTaxes} - saveButtonBarState={updateTaxSettingsTransitionState} - shop={maybe(() => ({ - ...data.shop, - countries: data.shop.countries.filter( - country => country.vat - ) - }))} - /> - ); - }} + } + }) + } + onTaxFetch={fetchTaxes} + saveButtonBarState={updateTaxSettingsOpts.status} + shop={maybe(() => ({ + ...data.shop, + countries: data.shop.countries.filter( + country => country.vat + ) + }))} + /> + )} )} diff --git a/src/translations/views/TranslationsCategories.tsx b/src/translations/views/TranslationsCategories.tsx index 3af3970e076..ab11f748a5b 100644 --- a/src/translations/views/TranslationsCategories.tsx +++ b/src/translations/views/TranslationsCategories.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes"; import TranslationsCategoriesPage, { fieldNames @@ -84,15 +84,6 @@ const TranslationsCategories: React.FC = ({ }); }; - const saveButtonState = getMutationState( - updateTranslationsOpts.called, - updateTranslationsOpts.loading, - maybe( - () => updateTranslationsOpts.data.categoryTranslate.errors, - [] - ) - ); - return ( = ({ } languageCode={languageCode} languages={maybe(() => shop.languages, [])} - saveButtonState={saveButtonState} + saveButtonState={updateTranslationsOpts.status} onBack={() => navigate( languageEntitiesUrl(languageCode, { diff --git a/src/translations/views/TranslationsCollections.tsx b/src/translations/views/TranslationsCollections.tsx index 8ccf8453115..73df7660097 100644 --- a/src/translations/views/TranslationsCollections.tsx +++ b/src/translations/views/TranslationsCollections.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes"; import TranslationsCollectionsPage, { fieldNames @@ -86,15 +86,6 @@ const TranslationsCollections: React.FC = ({ }); }; - const saveButtonState = getMutationState( - updateTranslationsOpts.called, - updateTranslationsOpts.loading, - maybe( - () => updateTranslationsOpts.data.collectionTranslate.errors, - [] - ) - ); - return ( = ({ } languageCode={languageCode} languages={maybe(() => shop.languages, [])} - saveButtonState={saveButtonState} + saveButtonState={updateTranslationsOpts.status} onEdit={onEdit} onDiscard={onDiscard} onBack={() => diff --git a/src/translations/views/TranslationsPages.tsx b/src/translations/views/TranslationsPages.tsx index 301ea8198d5..46270788d73 100644 --- a/src/translations/views/TranslationsPages.tsx +++ b/src/translations/views/TranslationsPages.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { LanguageCodeEnum, PageTranslationInput @@ -87,12 +87,6 @@ const TranslationsPages: React.FC = ({ }); }; - const saveButtonState = getMutationState( - updateTranslationsOpts.called, - updateTranslationsOpts.loading, - maybe(() => updateTranslationsOpts.data.pageTranslate.errors, []) - ); - return ( = ({ } languageCode={languageCode} languages={maybe(() => shop.languages, [])} - saveButtonState={saveButtonState} + saveButtonState={updateTranslationsOpts.status} onBack={() => navigate( languageEntitiesUrl(languageCode, { diff --git a/src/translations/views/TranslationsProductTypes.tsx b/src/translations/views/TranslationsProductTypes.tsx index 3f859ebed9f..eb768d537cf 100644 --- a/src/translations/views/TranslationsProductTypes.tsx +++ b/src/translations/views/TranslationsProductTypes.tsx @@ -114,9 +114,9 @@ const TranslationsProductTypes: React.FC = ({ const saveButtonState = getMutationState( updateAttributeTranslationsOpts.called || - updateAttributeTranslationsOpts.called, + updateAttributeValueTranslationsOpts.called, updateAttributeTranslationsOpts.loading || - updateAttributeTranslationsOpts.loading, + updateAttributeValueTranslationsOpts.loading, maybe( () => updateAttributeTranslationsOpts.data.attributeTranslate diff --git a/src/translations/views/TranslationsProducts.tsx b/src/translations/views/TranslationsProducts.tsx index 2231835e94b..2f436598323 100644 --- a/src/translations/views/TranslationsProducts.tsx +++ b/src/translations/views/TranslationsProducts.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes"; import TranslationsProductsPage, { fieldNames @@ -84,15 +84,6 @@ const TranslationsProducts: React.FC = ({ }); }; - const saveButtonState = getMutationState( - updateTranslationsOpts.called, - updateTranslationsOpts.loading, - maybe( - () => updateTranslationsOpts.data.productTranslate.errors, - [] - ) - ); - return ( = ({ } languageCode={languageCode} languages={maybe(() => shop.languages, [])} - saveButtonState={saveButtonState} + saveButtonState={updateTranslationsOpts.status} onBack={() => navigate( languageEntitiesUrl(languageCode, { diff --git a/src/translations/views/TranslationsSales.tsx b/src/translations/views/TranslationsSales.tsx index d2d003bb325..df213b769df 100644 --- a/src/translations/views/TranslationsSales.tsx +++ b/src/translations/views/TranslationsSales.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { LanguageCodeEnum, NameTranslationInput @@ -81,12 +81,6 @@ const TranslationsSales: React.FC = ({ }); }; - const saveButtonState = getMutationState( - updateTranslationsOpts.called, - updateTranslationsOpts.loading, - maybe(() => updateTranslationsOpts.data.saleTranslate.errors, []) - ); - return ( = ({ } languages={maybe(() => shop.languages, [])} languageCode={languageCode} - saveButtonState={saveButtonState} + saveButtonState={updateTranslationsOpts.status} onBack={() => navigate( languageEntitiesUrl(languageCode, { diff --git a/src/translations/views/TranslationsVouchers.tsx b/src/translations/views/TranslationsVouchers.tsx index 2a0564c9bea..8faa0e47ca7 100644 --- a/src/translations/views/TranslationsVouchers.tsx +++ b/src/translations/views/TranslationsVouchers.tsx @@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import { LanguageCodeEnum, NameTranslationInput @@ -81,15 +81,6 @@ const TranslationsVouchers: React.FC = ({ }); }; - const saveButtonState = getMutationState( - updateTranslationsOpts.called, - updateTranslationsOpts.loading, - maybe( - () => updateTranslationsOpts.data.voucherTranslate.errors, - [] - ) - ); - return ( = ({ } languages={maybe(() => shop.languages, [])} languageCode={languageCode} - saveButtonState={saveButtonState} + saveButtonState={updateTranslationsOpts.status} onBack={() => navigate( languageEntitiesUrl(languageCode, { diff --git a/src/types.ts b/src/types.ts index 5bae6833532..4f091c73229 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,6 +3,7 @@ import { MutationResult } from "react-apollo"; import { User_permissions } from "./auth/types/User"; import { FilterContentSubmitData } from "./components/Filter"; import { Filter } from "./components/TableFilter"; +import { ConfirmButtonTransitionState } from "./components/ConfirmButton"; export interface UserError { field: string; @@ -113,7 +114,7 @@ export interface PartialMutationProviderOutput< TData extends {} = {}, TVariables extends {} = {} > { - opts: MutationResult; + opts: MutationResult & MutationResultAdditionalProps; mutate: (variables: TVariables) => void; } @@ -168,3 +169,7 @@ export type TabActionDialog = "save-search" | "delete-search"; export interface UserPermissionProps { userPermissions: User_permissions[]; } + +export interface MutationResultAdditionalProps { + status: ConfirmButtonTransitionState; +} diff --git a/src/webhooks/views/WebhooksCreate.tsx b/src/webhooks/views/WebhooksCreate.tsx index 6b323ee9c0f..ef75ba5c993 100644 --- a/src/webhooks/views/WebhooksCreate.tsx +++ b/src/webhooks/views/WebhooksCreate.tsx @@ -8,7 +8,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate"; import React from "react"; import { useIntl } from "react-intl"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage"; import { TypedWebhookCreate } from "../mutations"; import { @@ -63,12 +63,6 @@ export const WebhooksCreate: React.FC = () => { } }); - const formTransitionState = getMutationState( - webhookCreateOpts.called, - webhookCreateOpts.loading, - maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors) - ); - return ( <> = () => { )} onBack={handleBack} onSubmit={handleSubmit} - saveButtonBarState={formTransitionState} + saveButtonBarState={webhookCreateOpts.status} /> ); diff --git a/src/webhooks/views/WebhooksDetails.tsx b/src/webhooks/views/WebhooksDetails.tsx index cc8fddbf086..0746bd930a1 100644 --- a/src/webhooks/views/WebhooksDetails.tsx +++ b/src/webhooks/views/WebhooksDetails.tsx @@ -11,7 +11,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate"; -import { getMutationState, maybe } from "../../misc"; +import { maybe } from "../../misc"; import WebhooksDetailsPage from "../components/WebhooksDetailsPage"; import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations"; import { TypedWebhooksDetailsQuery } from "../queries"; @@ -85,14 +85,6 @@ export const WebhooksDetails: React.FC = ({ {(webhookDelete, webhookDeleteOpts) => ( {webhookDetails => { - const formTransitionState = getMutationState( - webhookUpdateOpts.called, - webhookUpdateOpts.loading, - maybe( - () => webhookUpdateOpts.data.webhookUpdate.webhookErrors - ) - ); - const handleRemoveConfirm = () => webhookDelete({ variables: { @@ -105,12 +97,6 @@ export const WebhooksDetails: React.FC = ({ [] ); - const deleteTransitionState = getMutationState( - webhookDeleteOpts.called, - webhookDeleteOpts.loading, - maybe(() => webhookDeleteOpts.data.webhookDelete.errors) - ); - return ( <> = ({ webhookDetails.data.webhook)} fetchServiceAccounts={searchServiceAccount} services={maybe(() => @@ -148,7 +134,7 @@ export const WebhooksDetails: React.FC = ({ }} /> webhookDetails.data.webhook.name, "..." diff --git a/src/webhooks/views/WebhooksList.tsx b/src/webhooks/views/WebhooksList.tsx index beeeb9b5dc9..ad0e5de49c9 100644 --- a/src/webhooks/views/WebhooksList.tsx +++ b/src/webhooks/views/WebhooksList.tsx @@ -10,7 +10,7 @@ import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; import { commonMessages } from "@saleor/intl"; -import { getMutationState, maybe } from "@saleor/misc"; +import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; @@ -150,12 +150,6 @@ export const WebhooksList: React.FC = ({ params }) => { }); }; - const deleteTransitionState = getMutationState( - webhookDeleteOpts.called, - webhookDeleteOpts.loading, - maybe(() => webhookDeleteOpts.data.webhookDelete.errors) - ); - return ( <> = ({ params }) => { onRowClick={id => () => navigate(webhooksUrl(id))} /> data.webhooks.edges.find(