diff --git a/CHANGELOG.md b/CHANGELOG.md index af266c1f6..323b0c987 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ All notable, unreleased changes to this project will be documented in this file. - Add ability to reset own password - #289 by @dominik-zeglen - Move mutation state to mutation - #297 by @dominik-zeglen - Add table sorting - #292 by @dominik-zeglen +- Unify dialog handling - #296 by @dominik-zeglen ## 2.0.0 diff --git a/src/attributes/views/AttributeCreate/AttributeCreate.tsx b/src/attributes/views/AttributeCreate/AttributeCreate.tsx index 05a4abe3d..cf700c858 100644 --- a/src/attributes/views/AttributeCreate/AttributeCreate.tsx +++ b/src/attributes/views/AttributeCreate/AttributeCreate.tsx @@ -13,6 +13,7 @@ import { remove, updateAtIndex } from "@saleor/utils/lists"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import AttributePage from "../../components/AttributePage"; import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog"; import AttributeValueEditDialog, { @@ -22,10 +23,10 @@ import { AttributeCreateMutation } from "../../mutations"; import { AttributeCreate } from "../../types/AttributeCreate"; import { attributeAddUrl, - AttributeAddUrlDialog, AttributeAddUrlQueryParams, attributeListUrl, - attributeUrl + attributeUrl, + AttributeAddUrlDialog } from "../../urls"; interface AttributeDetailsProps { @@ -51,24 +52,10 @@ const AttributeDetails: React.FC = ({ params }) => { const id = params.id ? parseInt(params.id, 0) : undefined; - const closeModal = () => - navigate( - attributeAddUrl({ - ...params, - action: undefined, - id: undefined - }), - true - ); - - const openModal = (action: AttributeAddUrlDialog, valueId?: string) => - navigate( - attributeAddUrl({ - ...params, - action, - id: valueId - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + AttributeAddUrlDialog, + AttributeAddUrlQueryParams + >(navigate, attributeAddUrl, params); const handleValueDelete = () => { setValues(remove(values[params.id], values, areValuesEqual)); @@ -159,9 +146,17 @@ const AttributeDetails: React.FC = ({ params }) => { }) } onValueAdd={() => openModal("add-value")} - onValueDelete={id => openModal("remove-value", id)} + onValueDelete={id => + openModal("remove-value", { + id + }) + } onValueReorder={handleValueReorder} - onValueUpdate={id => openModal("edit-value", id)} + onValueUpdate={id => + openModal("edit-value", { + id + }) + } saveButtonBarState={attributeCreateOpts.status} values={values.map((value, valueIndex) => ({ __typename: "AttributeValue" as "AttributeValue", diff --git a/src/attributes/views/AttributeDetails/AttributeDetails.tsx b/src/attributes/views/AttributeDetails/AttributeDetails.tsx index e9ce1cce3..3dcc9c8a4 100644 --- a/src/attributes/views/AttributeDetails/AttributeDetails.tsx +++ b/src/attributes/views/AttributeDetails/AttributeDetails.tsx @@ -7,6 +7,7 @@ import { commonMessages } from "@saleor/intl"; import { maybe } from "@saleor/misc"; import { ReorderEvent } from "@saleor/types"; import { move } from "@saleor/utils/lists"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import AttributeDeleteDialog from "../../components/AttributeDeleteDialog"; import AttributePage from "../../components/AttributePage"; import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog"; @@ -29,8 +30,8 @@ import { AttributeValueUpdate } from "../../types/AttributeValueUpdate"; import { attributeListUrl, attributeUrl, - AttributeUrlDialog, - AttributeUrlQueryParams + AttributeUrlQueryParams, + AttributeUrlDialog } from "../../urls"; interface AttributeDetailsProps { @@ -43,25 +44,10 @@ const AttributeDetails: React.FC = ({ id, params }) => { const notify = useNotifier(); const intl = useIntl(); - const closeModal = () => - navigate( - attributeUrl(id, { - ...params, - action: undefined, - id: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: AttributeUrlDialog, valueId?: string) => - navigate( - attributeUrl(id, { - ...params, - action, - id: valueId - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + AttributeUrlDialog, + AttributeUrlQueryParams + >(navigate, params => attributeUrl(id, params), params); const handleDelete = (data: AttributeDelete) => { if (data.attributeDelete.errors.length === 0) { @@ -200,11 +186,15 @@ const AttributeDetails: React.FC = ({ id, params }) => { }} onValueAdd={() => openModal("add-value")} onValueDelete={id => - openModal("remove-value", id) + openModal("remove-value", { + id + }) } onValueReorder={handleValueReorder} onValueUpdate={id => - openModal("edit-value", id) + openModal("edit-value", { + id + }) } saveButtonBarState={ attributeUpdateOpts.status diff --git a/src/attributes/views/AttributeList/AttributeList.tsx b/src/attributes/views/AttributeList/AttributeList.tsx index 4f9b1c745..81e49d3f0 100644 --- a/src/attributes/views/AttributeList/AttributeList.tsx +++ b/src/attributes/views/AttributeList/AttributeList.tsx @@ -23,6 +23,7 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { PAGINATE_BY } from "../../../config"; import useBulkActions from "../../../hooks/useBulkActions"; import { maybe } from "../../../misc"; @@ -34,10 +35,10 @@ import { AttributeBulkDelete } from "../../types/AttributeBulkDelete"; import { attributeAddUrl, attributeListUrl, - AttributeListUrlDialog, AttributeListUrlFilters, AttributeListUrlQueryParams, - attributeUrl + attributeUrl, + AttributeListUrlDialog } from "../../urls"; import { getSortQueryVariables } from "./sort"; @@ -76,24 +77,10 @@ const AttributeList: React.FC = ({ params }) => { : 0 : parseInt(params.activeTab, 0); - const closeModal = () => - navigate( - attributeListUrl({ - ...params, - action: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: AttributeListUrlDialog, ids?: string[]) => - navigate( - attributeListUrl({ - ...params, - action, - ids - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + AttributeListUrlDialog, + AttributeListUrlQueryParams + >(navigate, attributeListUrl, params); const changeFilterField = (filter: AttributeListUrlFilters) => { reset(); @@ -181,7 +168,11 @@ const AttributeList: React.FC = ({ params }) => { toolbar={ openModal("remove", listElements)} + onClick={() => + openModal("remove", { + ids: listElements + }) + } > diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 13b585d14..25ebada9b 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -13,6 +13,7 @@ import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; import { commonMessages } from "@saleor/intl"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { PAGINATE_BY } from "../../config"; import { maybe } from "../../misc"; import { TypedProductBulkDeleteMutation } from "../../products/mutations"; @@ -36,8 +37,8 @@ import { categoryAddUrl, categoryListUrl, categoryUrl, - CategoryUrlDialog, - CategoryUrlQueryParams + CategoryUrlQueryParams, + CategoryUrlDialog } from "../urls"; export interface CategoryDetailsProps { @@ -128,24 +129,10 @@ export const CategoryDetails: React.FC = ({ ); }; - const closeModal = () => - navigate( - categoryUrl(id, { - ...params, - action: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: CategoryUrlDialog, ids?: string[]) => - navigate( - categoryUrl(id, { - ...params, - action, - ids - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + CategoryUrlDialog, + CategoryUrlQueryParams + >(navigate, params => categoryUrl(id, params), params); const handleBulkProductDelete = (data: productBulkDelete) => { if (data.productBulkDelete.errors.length === 0) { @@ -240,7 +227,11 @@ export const CategoryDetails: React.FC = ({ subcategoryListToolbar={ openModal("delete-categories", listElements)} + onClick={() => + openModal("delete-categories", { + ids: listElements + }) + } > @@ -248,7 +239,11 @@ export const CategoryDetails: React.FC = ({ productListToolbar={ openModal("delete-products", listElements)} + onClick={() => + openModal("delete-products", { + ids: listElements + }) + } > diff --git a/src/categories/views/CategoryList/CategoryList.tsx b/src/categories/views/CategoryList/CategoryList.tsx index 97f99fa78..9fabc5d82 100644 --- a/src/categories/views/CategoryList/CategoryList.tsx +++ b/src/categories/views/CategoryList/CategoryList.tsx @@ -19,6 +19,7 @@ import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage"; import { useCategoryBulkDeleteMutation } from "../../mutations"; import { useRootCategoriesQuery } from "../../queries"; @@ -26,10 +27,10 @@ import { CategoryBulkDelete } from "../../types/CategoryBulkDelete"; import { categoryAddUrl, categoryListUrl, - CategoryListUrlDialog, CategoryListUrlFilters, CategoryListUrlQueryParams, - categoryUrl + categoryUrl, + CategoryListUrlDialog } from "../../urls"; import { areFiltersApplied, @@ -91,24 +92,10 @@ export const CategoryList: React.FC = ({ params }) => { ); }; - const closeModal = () => - navigate( - categoryListUrl({ - ...params, - action: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: CategoryListUrlDialog, ids?: string[]) => - navigate( - categoryListUrl({ - ...params, - action, - ids - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + CategoryListUrlDialog, + CategoryListUrlQueryParams + >(navigate, categoryListUrl, params); const handleTabChange = (tab: number) => { reset(); @@ -187,13 +174,9 @@ export const CategoryList: React.FC = ({ params }) => { - navigate( - categoryListUrl({ - ...params, - action: "delete", - ids: listElements - }) - ) + openModal("delete", { + ids: listElements + }) } > diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index 6b4828c35..9b3c8ea71 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -15,6 +15,7 @@ import usePaginator, { } from "@saleor/hooks/usePaginator"; import { commonMessages } from "@saleor/intl"; import useProductSearch from "@saleor/searches/useProductSearch"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { getMutationState, maybe } from "../../misc"; import { productUrl } from "../../products/urls"; import { CollectionInput } from "../../types/globalTypes"; @@ -30,8 +31,8 @@ import { UnassignCollectionProduct } from "../types/UnassignCollectionProduct"; import { collectionListUrl, collectionUrl, - CollectionUrlDialog, - CollectionUrlQueryParams + CollectionUrlQueryParams, + CollectionUrlDialog } from "../urls"; interface CollectionDetailsProps { @@ -54,22 +55,10 @@ export const CollectionDetails: React.FC = ({ variables: DEFAULT_INITIAL_SEARCH_DATA }); - const closeModal = () => - navigate( - collectionUrl(id, { - ...params, - action: undefined - }), - true - ); - const openModal = (action: CollectionUrlDialog) => - navigate( - collectionUrl(id, { - ...params, - action - }), - false - ); + const [openModal, closeModal] = createDialogActionHandlers< + CollectionUrlDialog, + CollectionUrlQueryParams + >(navigate, params => collectionUrl(id, params), params); const paginationState = createPaginationState(PAGINATE_BY, params); @@ -243,12 +232,9 @@ export const CollectionDetails: React.FC = ({ openModal("remove", listElements)} + onClick={() => + openModal("remove", { + ids: listElements + }) + } > diff --git a/src/components/Navigator/modes/default/views.ts b/src/components/Navigator/modes/default/views.ts index afcdad69a..c2cea32c5 100644 --- a/src/components/Navigator/modes/default/views.ts +++ b/src/components/Navigator/modes/default/views.ts @@ -20,7 +20,7 @@ import { siteSettingsUrl } from "@saleor/siteSettings/urls"; import { staffListUrl } from "@saleor/staff/urls"; import { countryListUrl } from "@saleor/taxes/urls"; import { languageListUrl } from "@saleor/translations/urls"; -import { webhooksListUrl } from "@saleor/webhooks/urls"; +import { webhookListUrl } from "@saleor/webhooks/urls"; import { QuickSearchActionInput } from "../../types"; interface View { @@ -115,7 +115,7 @@ function searchInViews( }, { label: intl.formatMessage(sectionNames.webhooks), - url: webhooksListUrl() + url: webhookListUrl() } ]; diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx index 710106b40..8390872a3 100644 --- a/src/configuration/index.tsx +++ b/src/configuration/index.tsx @@ -28,7 +28,7 @@ import { siteSettingsUrl } from "@saleor/siteSettings/urls"; import { staffListUrl } from "@saleor/staff/urls"; import { taxSection } from "@saleor/taxes/urls"; import { PermissionEnum } from "@saleor/types/globalTypes"; -import { webhooksListUrl } from "@saleor/webhooks/urls"; +import { webhookListUrl } from "@saleor/webhooks/urls"; import ConfigurationPage, { MenuSection } from "./ConfigurationPage"; export function createConfigurationMenu(intl: IntlShape): MenuSection[] { @@ -171,7 +171,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] { icon: , permission: PermissionEnum.MANAGE_WEBHOOKS, title: intl.formatMessage(sectionNames.webhooks), - url: webhooksListUrl() + url: webhookListUrl() } ] } diff --git a/src/customers/views/CustomerAddresses.tsx b/src/customers/views/CustomerAddresses.tsx index 5e2758deb..f1e8fdc81 100644 --- a/src/customers/views/CustomerAddresses.tsx +++ b/src/customers/views/CustomerAddresses.tsx @@ -8,6 +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 createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { maybe } from "../../misc"; import CustomerAddressDialog from "../components/CustomerAddressDialog"; import CustomerAddressListPage from "../components/CustomerAddressListPage"; @@ -24,9 +25,9 @@ import { SetCustomerDefaultAddress } from "../types/SetCustomerDefaultAddress"; import { UpdateCustomerAddress } from "../types/UpdateCustomerAddress"; import { customerAddressesUrl, - CustomerAddressesUrlDialog, CustomerAddressesUrlQueryParams, - customerUrl + customerUrl, + CustomerAddressesUrlDialog } from "../urls"; interface CustomerAddressesProps { @@ -43,9 +44,10 @@ const CustomerAddresses: React.FC = ({ const shop = useShop(); const intl = useIntl(); - const closeModal = () => navigate(customerAddressesUrl(id), true); - const openModal = (action: CustomerAddressesUrlDialog, addressId?: string) => - navigate(customerAddressesUrl(id, { action, id: addressId })); + const [openModal, closeModal] = createDialogActionHandlers< + CustomerAddressesUrlDialog, + CustomerAddressesUrlQueryParams + >(navigate, params => customerAddressesUrl(id, params), params); const handleSetAddressAsDefault = (data: SetCustomerDefaultAddress) => { if (data.addressSetDefault.errors.length === 0) { @@ -116,9 +118,15 @@ const CustomerAddresses: React.FC = ({ disabled={customerData.loading} onAdd={() => openModal("add")} onBack={() => navigate(customerUrl(id))} - onEdit={addressId => openModal("edit", addressId)} - onRemove={addressId => - openModal("remove", addressId) + onEdit={id => + openModal("edit", { + id + }) + } + onRemove={id => + openModal("remove", { + id + }) } onSetAsDefault={(addressId, type) => setCustomerDefaultAddress({ diff --git a/src/customers/views/CustomerList/CustomerList.tsx b/src/customers/views/CustomerList/CustomerList.tsx index 94d74ad86..92a28a9d0 100644 --- a/src/customers/views/CustomerList/CustomerList.tsx +++ b/src/customers/views/CustomerList/CustomerList.tsx @@ -21,6 +21,7 @@ import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import CustomerListPage from "../../components/CustomerListPage"; import { TypedBulkRemoveCustomers } from "../../mutations"; import { useCustomerListQuery } from "../../queries"; @@ -28,10 +29,10 @@ import { BulkRemoveCustomers } from "../../types/BulkRemoveCustomers"; import { customerAddUrl, customerListUrl, - CustomerListUrlDialog, CustomerListUrlFilters, CustomerListUrlQueryParams, - customerUrl + customerUrl, + CustomerListUrlDialog } from "../../urls"; import { areFiltersApplied, @@ -93,24 +94,10 @@ export const CustomerList: React.FC = ({ params }) => { ); }; - const closeModal = () => - navigate( - customerListUrl({ - ...params, - action: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: CustomerListUrlDialog, ids?: string[]) => - navigate( - customerListUrl({ - ...params, - action, - ids - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + CustomerListUrlDialog, + CustomerListUrlQueryParams + >(navigate, customerListUrl, params); const handleTabChange = (tab: number) => { reset(); @@ -179,12 +166,9 @@ export const CustomerList: React.FC = ({ params }) => { - navigate( - customerListUrl({ - action: "remove", - ids: listElements - }) - ) + openModal("remove", { + ids: listElements + }) } > diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx index a56bb28e4..dd6b2550a 100644 --- a/src/discounts/views/SaleDetails.tsx +++ b/src/discounts/views/SaleDetails.tsx @@ -20,6 +20,7 @@ import { commonMessages, sectionNames } from "@saleor/intl"; import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { categoryUrl } from "../../categories/urls"; import { collectionUrl } from "../../collections/urls"; import { decimal, joinDateTime, maybe } from "../../misc"; @@ -42,8 +43,8 @@ import { SaleUpdate } from "../types/SaleUpdate"; import { saleListUrl, saleUrl, - SaleUrlDialog, - SaleUrlQueryParams + SaleUrlQueryParams, + SaleUrlDialog } from "../urls"; interface SaleDetailsProps { @@ -114,24 +115,10 @@ export const SaleDetails: React.FC = ({ id, params }) => { } }; - const closeModal = () => - navigate( - saleUrl(id, { - ...params, - action: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: SaleUrlDialog, ids?: string[]) => - navigate( - saleUrl(id, { - ...params, - action, - ids - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + SaleUrlDialog, + SaleUrlQueryParams + >(navigate, params => saleUrl(id, params), params); const handleCatalogueAdd = (data: SaleCataloguesAdd) => { if (data.saleCataloguesAdd.errors.length === 0) { @@ -285,7 +272,9 @@ export const SaleDetails: React.FC = ({ id, params }) => { openModal("remove", listElements)} + onClick={() => + openModal("remove", { + ids: listElements + }) + } > diff --git a/src/plugins/urls.ts b/src/plugins/urls.ts index f57e8a55b..11a6b15f8 100644 --- a/src/plugins/urls.ts +++ b/src/plugins/urls.ts @@ -19,8 +19,6 @@ export const pluginListUrl = (params?: PluginListUrlQueryParams) => export const pluginPath = (id: string) => urlJoin(pluginSection, id); export type PluginUrlDialog = "clear" | "edit"; -export type PluginUrlQueryParams = Dialog & { - field?: string; -}; -export const pluginsUrl = (id: string, params?: PluginUrlQueryParams) => +export type PluginUrlQueryParams = Dialog & SingleAction; +export const pluginUrl = (id: string, params?: PluginUrlQueryParams) => pluginPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/plugins/views/PluginList/PluginList.tsx b/src/plugins/views/PluginList/PluginList.tsx index 13eeaccd2..60482660a 100644 --- a/src/plugins/views/PluginList/PluginList.tsx +++ b/src/plugins/views/PluginList/PluginList.tsx @@ -12,11 +12,7 @@ import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; import PluginsListPage from "../../components/PluginsListPage/PluginsListPage"; import { usePluginsListQuery } from "../../queries"; -import { - PluginListUrlQueryParams, - pluginListUrl, - pluginsUrl -} from "../../urls"; +import { PluginListUrlQueryParams, pluginListUrl, pluginUrl } from "../../urls"; import { getSortQueryVariables } from "./sort"; interface PluginsListProps { @@ -65,7 +61,7 @@ export const PluginsList: React.FC = ({ params }) => { onPreviousPage={loadPreviousPage} onSort={handleSort} onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(pluginsUrl(id))} + onRowClick={id => () => navigate(pluginUrl(id))} /> ); diff --git a/src/plugins/views/PluginsDetails.tsx b/src/plugins/views/PluginsDetails.tsx index ef6665ad5..8dcf88b13 100644 --- a/src/plugins/views/PluginsDetails.tsx +++ b/src/plugins/views/PluginsDetails.tsx @@ -8,6 +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 createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { maybe } from "../../misc"; import PluginsDetailsPage from "../components/PluginsDetailsPage"; import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog"; @@ -17,7 +18,7 @@ import { Plugin_plugin_configuration } from "../types/Plugin"; import { PluginUpdate } from "../types/PluginUpdate"; import { pluginListUrl, - pluginsUrl, + pluginUrl, PluginUrlQueryParams, PluginUrlDialog } from "../urls"; @@ -52,24 +53,10 @@ export const PluginsDetails: React.FC = ({ const notify = useNotifier(); const intl = useIntl(); - const closeModal = () => - navigate( - pluginsUrl(id, { - ...params, - action: undefined, - field: undefined - }), - true - ); - - const openModal = (action: PluginUrlDialog, field?: string) => - navigate( - pluginsUrl(id, { - ...params, - action, - field - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + PluginUrlDialog, + PluginUrlQueryParams + >(navigate, params => pluginUrl(id, params), params); const handleUpdate = (data: PluginUpdate) => { if (data.pluginUpdate.errors.length === 0) { @@ -97,7 +84,7 @@ export const PluginsDetails: React.FC = ({ input: { configuration: [ { - name: params.field, + name: params.id, value } ] @@ -118,8 +105,16 @@ export const PluginsDetails: React.FC = ({ } plugin={maybe(() => pluginDetails.data.plugin)} onBack={() => navigate(pluginListUrl())} - onClear={field => openModal("clear", field)} - onEdit={field => openModal("edit", field)} + onClear={id => + openModal("clear", { + id + }) + } + onEdit={id => + openModal("edit", { + id + }) + } onSubmit={formData => pluginUpdate({ variables: { @@ -142,7 +137,7 @@ export const PluginsDetails: React.FC = ({ !!params.action ? pluginUpdateOpts.status : "default" } onClose={closeModal} - open={params.action === "clear" && !!params.field} + open={params.action === "clear" && !!params.id} title={intl.formatMessage({ defaultMessage: "Authorization Field Delete", description: "header" @@ -159,12 +154,12 @@ export const PluginsDetails: React.FC = ({ } field={maybe(() => pluginDetails.data.plugin.configuration.find( - field => field.name === params.field + field => field.name === params.id ) )} onClose={closeModal} onConfirm={formData => handleFieldUpdate(formData.value)} - open={params.action === "edit" && !!params.field} + open={params.action === "edit" && !!params.id} /> )} diff --git a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx index 93c2de910..92c73c7e2 100644 --- a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx +++ b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx @@ -20,6 +20,7 @@ import { commonMessages } from "@saleor/intl"; import { ListViews } from "@saleor/types"; import { getSortParams } from "@saleor/utils/sort"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import { configurationMenuUrl } from "../../../configuration"; import { maybe } from "../../../misc"; import ProductTypeListPage from "../../components/ProductTypeListPage"; @@ -92,24 +93,10 @@ export const ProductTypeList: React.FC = ({ params }) => { ); }; - const closeModal = () => - navigate( - productTypeListUrl({ - ...params, - action: undefined, - ids: undefined - }), - true - ); - - const openModal = (action: ProductTypeListUrlDialog, ids?: string[]) => - navigate( - productTypeListUrl({ - ...params, - action, - ids - }) - ); + const [openModal, closeModal] = createDialogActionHandlers< + ProductTypeListUrlDialog, + ProductTypeListUrlQueryParams + >(navigate, productTypeListUrl, params); const handleTabChange = (tab: number) => { reset(); @@ -200,12 +187,9 @@ export const ProductTypeList: React.FC = ({ params }) => { - navigate( - productTypeListUrl({ - action: "remove", - ids: listElements - }) - ) + openModal("remove", { + ids: listElements + }) } > diff --git a/src/products/urls.ts b/src/products/urls.ts index a24f7e570..003a91c28 100644 --- a/src/products/urls.ts +++ b/src/products/urls.ts @@ -52,9 +52,8 @@ export const productListUrl = (params?: ProductListUrlQueryParams): string => productListPath + "?" + stringifyQs(params); export const productPath = (id: string) => urlJoin(productSection + id); -export type ProductUrlDialog = "remove"; -export type ProductUrlQueryParams = BulkAction & - Dialog<"create-variants" | "remove" | "remove-variants">; +export type ProductUrlDialog = "create-variants" | "remove" | "remove-variants"; +export type ProductUrlQueryParams = BulkAction & Dialog; export const productUrl = (id: string, params?: ProductUrlQueryParams) => productPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index d4ff1c671..5b826e5e2 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -25,6 +25,7 @@ import { maybe } from "@saleor/misc"; import { ProductListVariables } from "@saleor/products/types/ProductList"; import { ListViews } from "@saleor/types"; import { getSortUrlVariables } from "@saleor/utils/sort"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import ProductListPage from "../../components/ProductListPage"; import { TypedProductBulkDeleteMutation, @@ -39,11 +40,11 @@ import { productBulkPublish } from "../../types/productBulkPublish"; import { productAddUrl, productListUrl, - ProductListUrlDialog, ProductListUrlFilters, ProductListUrlQueryParams, ProductListUrlSortField, - productUrl + productUrl, + ProductListUrlDialog } from "../../urls"; import { areFiltersApplied, @@ -97,15 +98,10 @@ export const ProductList: React.FC = ({ params }) => { : 0 : parseInt(params.activeTab, 0); - const closeModal = () => - navigate( - productListUrl({ - ...params, - action: undefined, - ids: undefined - }), - true - ); + const [openModal, closeModal] = createDialogActionHandlers< + ProductListUrlDialog, + ProductListUrlQueryParams + >(navigate, productListUrl, params); const changeFilters = (filters: ProductListUrlFilters) => { reset(); @@ -123,15 +119,6 @@ export const ProductList: React.FC = ({ params }) => { ); }; - const openModal = (action: ProductListUrlDialog, ids?: string[]) => - navigate( - productListUrl({ - ...params, - action, - ids - }) - ); - const handleTabChange = (tab: number) => { reset(); navigate( @@ -311,7 +298,9 @@ export const ProductList: React.FC = ({ params }) => {