From 2f9eddd9ee932f582007356dc62c1a6614afd437 Mon Sep 17 00:00:00 2001 From: AlicjaSzu Date: Fri, 4 Dec 2020 18:09:28 +0100 Subject: [PATCH] Saleor 1659 use query params in channels picker (#886) * use Query params in channels picker * update urls --- src/categories/views/CategoryDetails.tsx | 2 +- src/channels/urls.ts | 2 ++ src/collections/index.tsx | 9 ++++++- src/collections/urls.ts | 8 ++++-- src/collections/views/CollectionCreate.tsx | 24 ++++++++++++++--- src/collections/views/CollectionDetails.tsx | 15 ++++++----- .../views/CollectionList/CollectionList.tsx | 2 +- .../Navigator/modes/commands/actions.ts | 6 ++--- src/discounts/index.tsx | 20 ++++++++++++-- src/discounts/urls.ts | 15 ++++++++--- src/discounts/views/SaleCreate/SaleCreate.tsx | 24 ++++++++++++++--- .../views/SaleDetails/SaleDetails.tsx | 15 ++++++----- src/discounts/views/SaleList/SaleList.tsx | 2 +- .../views/VoucherCreate/VoucherCreate.tsx | 24 ++++++++++++++--- .../views/VoucherDetails/VoucherDetails.tsx | 16 +++++++----- .../views/VoucherList/VoucherList.tsx | 2 +- src/hooks/useChannels.ts | 21 ++++++++++----- src/products/index.tsx | 10 ++++++- src/products/urls.ts | 7 +++-- .../views/ProductCreate/ProductCreate.tsx | 26 ++++++++++++++++--- .../views/ProductList/ProductList.tsx | 2 +- .../views/ProductUpdate/ProductUpdate.tsx | 15 ++++++----- src/shipping/urls.ts | 6 +++-- .../PriceRatesCreate/PriceRatesCreate.tsx | 2 +- .../PriceRatesUpdate/PriceRatesUpdate.tsx | 2 +- .../WeightRatesCreate/WeightRatesCreate.tsx | 2 +- .../WeightRatesUpdate/WeightRatesUpdate.tsx | 2 +- 27 files changed, 210 insertions(+), 71 deletions(-) diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 847422848..bf002ae9a 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -219,7 +219,7 @@ export const CategoryDetails: React.FC = ({ disabled={loading} errors={updateResult.data?.categoryUpdate.errors || []} onAddCategory={() => navigate(categoryAddUrl(id))} - onAddProduct={() => navigate(productAddUrl)} + onAddProduct={() => navigate(productAddUrl())} onBack={() => navigate( maybe(() => categoryUrl(data.category.parent.id), categoryListUrl()) diff --git a/src/channels/urls.ts b/src/channels/urls.ts index 9dab6f4ce..735d00333 100644 --- a/src/channels/urls.ts +++ b/src/channels/urls.ts @@ -17,6 +17,8 @@ export type ChannelsListUrlQueryParams = Dialog & ChannelsListUrlSort & SingleAction; +export type ChannelsAction = "open-channels-picker"; + export const channelsSection = "/channels/"; export const channelsListPath = channelsSection; diff --git a/src/collections/index.tsx b/src/collections/index.tsx index 9f9e5bf2e..3ff268e6d 100644 --- a/src/collections/index.tsx +++ b/src/collections/index.tsx @@ -8,13 +8,14 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom"; import { WindowTitle } from "../components/WindowTitle"; import { collectionAddPath, + CollectionCreateUrlQueryParams, collectionListPath, CollectionListUrlQueryParams, CollectionListUrlSortField, collectionPath, CollectionUrlQueryParams } from "./urls"; -import CollectionCreate from "./views/CollectionCreate"; +import CollectionCreateView from "./views/CollectionCreate"; import CollectionDetailsView from "./views/CollectionDetails"; import CollectionListView from "./views/CollectionList"; @@ -43,6 +44,12 @@ const CollectionDetails: React.FC = ({ location }) => { + const qs = parseQs(location.search.substr(1)); + const params: CollectionCreateUrlQueryParams = qs; + return ; +}; + const Component = () => { const intl = useIntl(); diff --git a/src/collections/urls.ts b/src/collections/urls.ts index 9d22fb9ff..22b78f6e2 100644 --- a/src/collections/urls.ts +++ b/src/collections/urls.ts @@ -1,3 +1,4 @@ +import { ChannelsAction } from "@saleor/channels/urls"; import { stringify as stringifyQs } from "qs"; import urlJoin from "url-join"; @@ -40,12 +41,15 @@ export type CollectionUrlDialog = | "remove" | "removeImage" | "assign" - | "unassign"; + | "unassign" + | ChannelsAction; export type CollectionUrlQueryParams = BulkAction & Pagination & Dialog; +export type CollectionCreateUrlQueryParams = Dialog; export const collectionUrl = (id: string, params?: CollectionUrlQueryParams) => collectionPath(encodeURIComponent(id)) + "?" + stringifyQs(params); export const collectionAddPath = urlJoin(collectionSectionUrl, "add"); -export const collectionAddUrl = collectionAddPath; +export const collectionAddUrl = (params?: CollectionCreateUrlQueryParams) => + collectionAddPath + "?" + stringifyQs(params); diff --git a/src/collections/views/CollectionCreate.tsx b/src/collections/views/CollectionCreate.tsx index 949ce9e69..c87bdcf52 100644 --- a/src/collections/views/CollectionCreate.tsx +++ b/src/collections/views/CollectionCreate.tsx @@ -1,4 +1,5 @@ import { useChannelsList } from "@saleor/channels/queries"; +import { ChannelsAction } from "@saleor/channels/urls"; import { createCollectionChannels } from "@saleor/channels/utils"; import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog"; import { WindowTitle } from "@saleor/components/WindowTitle"; @@ -6,6 +7,7 @@ import useChannels from "@saleor/hooks/useChannels"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; import { useMetadataUpdate, @@ -21,15 +23,31 @@ import { useCollectionChannelListingUpdate, useCollectionCreateMutation } from "../mutations"; -import { collectionListUrl, collectionUrl } from "../urls"; +import { + collectionAddUrl, + CollectionCreateUrlQueryParams, + collectionListUrl, + collectionUrl +} from "../urls"; -export const CollectionCreate: React.FC = () => { +interface CollectionCreateProps { + params: CollectionCreateUrlQueryParams; +} + +export const CollectionCreate: React.FC = ({ + params +}) => { const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); const [updateMetadata] = useMetadataUpdate({}); const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); + const [openModal, closeModal] = createDialogActionHandlers< + ChannelsAction, + CollectionCreateUrlQueryParams + >(navigate, params => collectionAddUrl(params), params); + const [ updateChannels, updateChannelsOpts @@ -53,7 +71,7 @@ export const CollectionCreate: React.FC = () => { isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(allChannels); + } = useChannels(allChannels, params?.action, { closeModal, openModal }); const [createCollection, createCollectionOpts] = useCollectionCreateMutation({ onCompleted: data => { diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index 49f48e613..9c7425d6e 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -71,6 +71,11 @@ export const CollectionDetails: React.FC = ({ const { search, loadMore, result } = useProductSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA }); + const [openModal, closeModal] = createDialogActionHandlers< + CollectionUrlDialog, + CollectionUrlQueryParams + >(navigate, params => collectionUrl(id, params), params); + const [updateMetadata] = useMetadataUpdate({}); const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); @@ -151,11 +156,6 @@ export const CollectionDetails: React.FC = ({ } }); - const [openModal, closeModal] = createDialogActionHandlers< - CollectionUrlDialog, - CollectionUrlQueryParams - >(navigate, params => collectionUrl(id, params), params); - const paginationState = createPaginationState(PAGINATE_BY, params); const handleBack = () => navigate(collectionListUrl()); @@ -190,7 +190,10 @@ export const CollectionDetails: React.FC = ({ isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(collectionChannelsChoices); + } = useChannels(collectionChannelsChoices, params?.action, { + closeModal, + openModal + }); const handleUpdate = async (formData: CollectionUpdateData) => { const input: CollectionInput = { diff --git a/src/collections/views/CollectionList/CollectionList.tsx b/src/collections/views/CollectionList/CollectionList.tsx index 9a144e5df..c91004e5d 100644 --- a/src/collections/views/CollectionList/CollectionList.tsx +++ b/src/collections/views/CollectionList/CollectionList.tsx @@ -151,7 +151,7 @@ export const CollectionList: React.FC = ({ params }) => { currentTab={currentTab} initialSearch={params.query || ""} onSearchChange={handleSearchChange} - onAdd={() => navigate(collectionAddUrl)} + onAdd={() => navigate(collectionAddUrl())} onAll={() => navigate(collectionListUrl())} onTabChange={handleTabChange} onTabDelete={() => openModal("delete-search")} diff --git a/src/components/Navigator/modes/commands/actions.ts b/src/components/Navigator/modes/commands/actions.ts index a10c60c5d..873d3620a 100644 --- a/src/components/Navigator/modes/commands/actions.ts +++ b/src/components/Navigator/modes/commands/actions.ts @@ -39,14 +39,14 @@ export function searchInCommands( { label: intl.formatMessage(messages.createCollection), onClick: () => { - navigate(collectionAddUrl); + navigate(collectionAddUrl()); return false; } }, { label: intl.formatMessage(messages.createProduct), onClick: () => { - navigate(productAddUrl); + navigate(productAddUrl()); return false; } }, @@ -67,7 +67,7 @@ export function searchInCommands( { label: intl.formatMessage(messages.createVoucher), onClick: () => { - navigate(voucherAddUrl); + navigate(voucherAddUrl()); return false; } }, diff --git a/src/discounts/index.tsx b/src/discounts/index.tsx index 933023321..98f7e5960 100644 --- a/src/discounts/index.tsx +++ b/src/discounts/index.tsx @@ -10,22 +10,24 @@ import { saleDetailsPageTab } from "./components/SaleDetailsPage"; import { voucherDetailsPageTab } from "./components/VoucherDetailsPage"; import { saleAddPath, + SaleCreateUrlQueryParams, saleListPath, SaleListUrlQueryParams, SaleListUrlSortField, salePath, SaleUrlQueryParams, voucherAddPath, + VoucherCreateUrlQueryParams, voucherListPath, VoucherListUrlQueryParams, VoucherListUrlSortField, voucherPath, VoucherUrlQueryParams } from "./urls"; -import SaleCreateView from "./views/SaleCreate/SaleCreate"; +import SaleCreateViewComponent from "./views/SaleCreate/SaleCreate"; import SaleDetailsViewComponent from "./views/SaleDetails"; import SaleListViewComponent from "./views/SaleList"; -import VoucherCreateView from "./views/VoucherCreate"; +import VoucherCreateViewComponent from "./views/VoucherCreate"; import VoucherDetailsViewComponent from "./views/VoucherDetails"; import VoucherListViewComponent from "./views/VoucherList"; @@ -53,6 +55,13 @@ const SaleDetailsView: React.FC> = ({ ); }; +const SaleCreateView: React.FC = ({ location }) => { + const qs = parseQs(location.search.substr(1)); + const params: SaleCreateUrlQueryParams = qs; + + return ; +}; + const VoucherListView: React.FC> = ({ location }) => { const qs = parseQs(location.search.substr(1)); const params: VoucherListUrlQueryParams = asSortParams( @@ -80,6 +89,13 @@ const VoucherDetailsView: React.FC> = ({ ); }; +const VoucherCreateView: React.FC = ({ location }) => { + const qs = parseQs(location.search.substr(1)); + const params: VoucherCreateUrlQueryParams = qs; + + return ; +}; + export const DiscountSection: React.FC<{}> = () => { const intl = useIntl(); diff --git a/src/discounts/urls.ts b/src/discounts/urls.ts index c3a8f7f41..5d555e4ad 100644 --- a/src/discounts/urls.ts +++ b/src/discounts/urls.ts @@ -1,3 +1,4 @@ +import { ChannelsAction } from "@saleor/channels/urls"; import { stringify as stringifyQs } from "qs"; import urlJoin from "url-join"; @@ -54,15 +55,18 @@ export type SaleUrlDialog = | "unassign-category" | "unassign-collection" | "unassign-product" - | "remove"; + | "remove" + | ChannelsAction; export type SaleUrlQueryParams = Pagination & BulkAction & Dialog & ActiveTab; +export type SaleCreateUrlQueryParams = Dialog; export const saleUrl = (id: string, params?: SaleUrlQueryParams) => salePath(encodeURIComponent(id)) + "?" + stringifyQs(params); export const saleAddPath = urlJoin(saleSection, "add"); -export const saleAddUrl = saleAddPath; +export const saleAddUrl = (params?: SaleCreateUrlQueryParams) => + saleAddPath + "?" + stringifyQs(params); export const voucherSection = urlJoin(discountSection, "vouchers"); export const voucherListPath = voucherSection; @@ -107,12 +111,15 @@ export type VoucherUrlDialog = | "unassign-category" | "unassign-collection" | "unassign-product" - | "remove"; + | "remove" + | ChannelsAction; export type VoucherUrlQueryParams = Pagination & BulkAction & Dialog & ActiveTab; +export type VoucherCreateUrlQueryParams = Dialog; export const voucherUrl = (id: string, params?: VoucherUrlQueryParams) => voucherPath(encodeURIComponent(id)) + "?" + stringifyQs(params); export const voucherAddPath = urlJoin(voucherSection, "add"); -export const voucherAddUrl = voucherAddPath; +export const voucherAddUrl = (params?: VoucherCreateUrlQueryParams) => + voucherAddPath + "?" + stringifyQs(params); diff --git a/src/discounts/views/SaleCreate/SaleCreate.tsx b/src/discounts/views/SaleCreate/SaleCreate.tsx index 4f237a430..6427f1b2d 100644 --- a/src/discounts/views/SaleCreate/SaleCreate.tsx +++ b/src/discounts/views/SaleCreate/SaleCreate.tsx @@ -1,4 +1,5 @@ import { useChannelsList } from "@saleor/channels/queries"; +import { ChannelsAction } from "@saleor/channels/urls"; import { ChannelSaleData, createSortedSaleData } from "@saleor/channels/utils"; import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog"; import { WindowTitle } from "@saleor/components/WindowTitle"; @@ -8,21 +9,36 @@ import { useSaleChannelListingUpdate } from "@saleor/discounts/mutations"; import { SaleCreate } from "@saleor/discounts/types/SaleCreate"; -import { saleListUrl, saleUrl } from "@saleor/discounts/urls"; +import { + saleAddUrl, + SaleCreateUrlQueryParams, + saleListUrl, + saleUrl +} from "@saleor/discounts/urls"; import useChannels from "@saleor/hooks/useChannels"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { sectionNames } from "@saleor/intl"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import React from "react"; import { useIntl } from "react-intl"; import { createHandler } from "./handlers"; -export const SaleDetails: React.FC = () => { +interface SaleCreateProps { + params: SaleCreateUrlQueryParams; +} + +export const SaleCreateView: React.FC = ({ params }) => { const navigate = useNavigator(); const pushMessage = useNotifier(); const intl = useIntl(); + const [openModal, closeModal] = createDialogActionHandlers< + ChannelsAction, + SaleCreateUrlQueryParams + >(navigate, params => saleAddUrl(params), params); + const { data: channelsData } = useChannelsList({}); const allChannels: ChannelSaleData[] = createSortedSaleData( channelsData?.channels @@ -39,7 +55,7 @@ export const SaleDetails: React.FC = () => { isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(allChannels); + } = useChannels(allChannels, params?.action, { closeModal, openModal }); const [updateChannels, updateChannelsOpts] = useSaleChannelListingUpdate({}); @@ -105,4 +121,4 @@ export const SaleDetails: React.FC = () => { ); }; -export default SaleDetails; +export default SaleCreateView; diff --git a/src/discounts/views/SaleDetails/SaleDetails.tsx b/src/discounts/views/SaleDetails/SaleDetails.tsx index 09f289235..a8ab497c1 100644 --- a/src/discounts/views/SaleDetails/SaleDetails.tsx +++ b/src/discounts/views/SaleDetails/SaleDetails.tsx @@ -111,6 +111,11 @@ export const SaleDetails: React.FC = ({ id, params }) => { } }); + const [openModal, closeModal] = createDialogActionHandlers< + SaleUrlDialog, + SaleUrlQueryParams + >(navigate, params => saleUrl(id, params), params); + const allChannels: ChannelSaleData[] = createChannelsDataWithSaleDiscountPrice( data?.sale, channelsData?.channels @@ -130,7 +135,10 @@ export const SaleDetails: React.FC = ({ id, params }) => { isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(saleChannelsChoices); + } = useChannels(saleChannelsChoices, params?.action, { + closeModal, + openModal + }); const [updateChannels, updateChannelsOpts] = useSaleChannelListingUpdate({}); @@ -157,11 +165,6 @@ export const SaleDetails: React.FC = ({ id, params }) => { } }; - const [openModal, closeModal] = createDialogActionHandlers< - SaleUrlDialog, - SaleUrlQueryParams - >(navigate, params => saleUrl(id, params), params); - const handleCatalogueAdd = (data: SaleCataloguesAdd) => { if (data.saleCataloguesAdd.errors.length === 0) { closeModal(); diff --git a/src/discounts/views/SaleList/SaleList.tsx b/src/discounts/views/SaleList/SaleList.tsx index 4cee4d080..f32a42714 100644 --- a/src/discounts/views/SaleList/SaleList.tsx +++ b/src/discounts/views/SaleList/SaleList.tsx @@ -176,7 +176,7 @@ export const SaleList: React.FC = ({ params }) => { settings={settings} disabled={loading} pageInfo={pageInfo} - onAdd={() => navigate(saleAddUrl)} + onAdd={() => navigate(saleAddUrl())} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onSort={handleSort} diff --git a/src/discounts/views/VoucherCreate/VoucherCreate.tsx b/src/discounts/views/VoucherCreate/VoucherCreate.tsx index ca420e00d..8a3a3bc10 100644 --- a/src/discounts/views/VoucherCreate/VoucherCreate.tsx +++ b/src/discounts/views/VoucherCreate/VoucherCreate.tsx @@ -1,4 +1,5 @@ import { useChannelsList } from "@saleor/channels/queries"; +import { ChannelsAction } from "@saleor/channels/urls"; import { ChannelVoucherData, createSortedVoucherData @@ -9,6 +10,7 @@ import useChannels from "@saleor/hooks/useChannels"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { sectionNames } from "@saleor/intl"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import React from "react"; import { useIntl } from "react-intl"; @@ -18,14 +20,28 @@ import { useVoucherChannelListingUpdate } from "../../mutations"; import { VoucherCreate } from "../../types/VoucherCreate"; -import { voucherListUrl, voucherUrl } from "../../urls"; +import { + voucherAddUrl, + VoucherCreateUrlQueryParams, + voucherListUrl, + voucherUrl +} from "../../urls"; import { createHandler } from "./handlers"; -export const VoucherDetails: React.FC = () => { +interface VoucherCreateProps { + params: VoucherCreateUrlQueryParams; +} + +export const VoucherCreateView: React.FC = ({ params }) => { const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); + const [openModal, closeModal] = createDialogActionHandlers< + ChannelsAction, + VoucherCreateUrlQueryParams + >(navigate, params => voucherAddUrl(params), params); + const { data: channelsData } = useChannelsList({}); const allChannels: ChannelVoucherData[] = createSortedVoucherData( channelsData?.channels @@ -42,7 +58,7 @@ export const VoucherDetails: React.FC = () => { isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(allChannels); + } = useChannels(allChannels, params?.action, { closeModal, openModal }); const [updateChannels, updateChannelsOpts] = useVoucherChannelListingUpdate( {} @@ -111,4 +127,4 @@ export const VoucherDetails: React.FC = () => { ); }; -export default VoucherDetails; +export default VoucherCreateView; diff --git a/src/discounts/views/VoucherDetails/VoucherDetails.tsx b/src/discounts/views/VoucherDetails/VoucherDetails.tsx index cfac9ccfc..e55ec5d78 100644 --- a/src/discounts/views/VoucherDetails/VoucherDetails.tsx +++ b/src/discounts/views/VoucherDetails/VoucherDetails.tsx @@ -114,6 +114,12 @@ export const VoucherDetails: React.FC = ({ ...paginationState } }); + + const [openModal, closeModal] = createDialogActionHandlers< + VoucherUrlDialog, + VoucherUrlQueryParams + >(navigate, params => voucherUrl(id, params), params); + const { data: channelsData } = useChannelsList({}); const allChannels: ChannelVoucherData[] = createChannelsDataWithDiscountPrice( @@ -134,7 +140,10 @@ export const VoucherDetails: React.FC = ({ isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(voucherChannelsChoices); + } = useChannels(voucherChannelsChoices, params?.action, { + closeModal, + openModal + }); React.useEffect(() => { if (!currentChannels.length && voucherChannelsChoices.length) { @@ -169,11 +178,6 @@ export const VoucherDetails: React.FC = ({ } }; - const [openModal, closeModal] = createDialogActionHandlers< - VoucherUrlDialog, - VoucherUrlQueryParams - >(navigate, params => voucherUrl(id, params), params); - const handleCatalogueAdd = (data: VoucherCataloguesAdd) => { if (data.voucherCataloguesAdd.errors.length === 0) { closeModal(); diff --git a/src/discounts/views/VoucherList/VoucherList.tsx b/src/discounts/views/VoucherList/VoucherList.tsx index 496004360..d4e72cdeb 100644 --- a/src/discounts/views/VoucherList/VoucherList.tsx +++ b/src/discounts/views/VoucherList/VoucherList.tsx @@ -177,7 +177,7 @@ export const VoucherList: React.FC = ({ params }) => { vouchers={maybe(() => data.vouchers.edges.map(edge => edge.node))} disabled={loading} pageInfo={pageInfo} - onAdd={() => navigate(voucherAddUrl)} + onAdd={() => navigate(voucherAddUrl())} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} diff --git a/src/hooks/useChannels.ts b/src/hooks/useChannels.ts index 1f02e8ff5..90b539d21 100644 --- a/src/hooks/useChannels.ts +++ b/src/hooks/useChannels.ts @@ -1,11 +1,18 @@ +import { ChannelsAction } from "@saleor/channels/urls"; import { Channel } from "@saleor/channels/utils"; import useListActions from "@saleor/hooks/useListActions"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; -import { useState } from "react"; -function useChannels(channels: T[]) { - const [isChannelsModalOpen, setChannelsModalOpen] = useState(false); +interface Modal { + openModal: (action: ChannelsAction) => void; + closeModal: () => void; +} +function useChannels( + channels: T[], + action: A | ChannelsAction, + { closeModal, openModal }: Modal +) { const [currentChannels, setCurrentChannels] = useStateFromProps(channels); const { @@ -16,18 +23,18 @@ function useChannels(channels: T[]) { } = useListActions(currentChannels, (a, b) => a.id === b.id); const handleChannelsModalClose = () => { - setChannelsModalOpen(false); + closeModal(); setChannels(currentChannels); }; - const handleChannelsModalOpen = () => setChannelsModalOpen(true); + const handleChannelsModalOpen = () => openModal("open-channels-picker"); const handleChannelsConfirm = () => { const sortedChannelListElements = channelListElements.sort( (channel, nextChannel) => channel.name.localeCompare(nextChannel.name) ); setCurrentChannels(sortedChannelListElements); - setChannelsModalOpen(false); + closeModal(); }; const toggleAllChannels = (items: T[], selected: number) => { @@ -46,7 +53,7 @@ function useChannels(channels: T[]) { handleChannelsModalClose, handleChannelsModalOpen, isChannelSelected, - isChannelsModalOpen, + isChannelsModalOpen: action === "open-channels-picker", setCurrentChannels, toggleAllChannels }; diff --git a/src/products/index.tsx b/src/products/index.tsx index 46b4df70d..8663604c3 100644 --- a/src/products/index.tsx +++ b/src/products/index.tsx @@ -9,6 +9,7 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom"; import { WindowTitle } from "../components/WindowTitle"; import { productAddPath, + ProductCreateUrlQueryParams, productImagePath, ProductImageUrlQueryParams, productListPath, @@ -21,7 +22,7 @@ import { productVariantEditPath, ProductVariantEditUrlQueryParams } from "./urls"; -import ProductCreate from "./views/ProductCreate"; +import ProductCreateComponent from "./views/ProductCreate"; import ProductImageComponent from "./views/ProductImage"; import ProductListComponent from "./views/ProductList"; import ProductUpdateComponent from "./views/ProductUpdate"; @@ -60,6 +61,13 @@ const ProductUpdate: React.FC> = ({ match }) => { ); }; +const ProductCreate: React.FC> = () => { + const qs = parseQs(location.search.substr(1)); + const params: ProductCreateUrlQueryParams = qs; + + return ; +}; + const ProductVariant: React.FC> = ({ match }) => { const qs = parseQs(location.search.substr(1)); const params: ProductVariantEditUrlQueryParams = qs; diff --git a/src/products/urls.ts b/src/products/urls.ts index 9b8288952..4462585b1 100644 --- a/src/products/urls.ts +++ b/src/products/urls.ts @@ -1,3 +1,4 @@ +import { ChannelsAction } from "@saleor/channels/urls"; import urlJoin from "url-join"; import { @@ -16,7 +17,8 @@ import { stringifyQs } from "../utils/urls"; const productSection = "/products/"; export const productAddPath = urlJoin(productSection, "add"); -export const productAddUrl = productAddPath; +export const productAddUrl = (params?: ProductCreateUrlQueryParams) => + productAddPath + "?" + stringifyQs(params); export const productListPath = productSection; export type ProductListUrlDialog = "delete" | "export" | TabActionDialog; @@ -61,8 +63,9 @@ export const productListUrl = (params?: ProductListUrlQueryParams): string => productListPath + "?" + stringifyQs(params); export const productPath = (id: string) => urlJoin(productSection + id); -export type ProductUrlDialog = "remove" | "remove-variants"; +export type ProductUrlDialog = "remove" | "remove-variants" | ChannelsAction; export type ProductUrlQueryParams = BulkAction & Dialog; +export type ProductCreateUrlQueryParams = Dialog; export const productUrl = (id: string, params?: ProductUrlQueryParams) => productPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx index ce9893b02..c19b87e70 100644 --- a/src/products/views/ProductCreate/ProductCreate.tsx +++ b/src/products/views/ProductCreate/ProductCreate.tsx @@ -1,4 +1,5 @@ import { useChannelsList } from "@saleor/channels/queries"; +import { ChannelsAction } from "@saleor/channels/urls"; import { ChannelData, createSortedChannelsData } from "@saleor/channels/utils"; import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog"; import { WindowTitle } from "@saleor/components/WindowTitle"; @@ -15,12 +16,18 @@ import { useVariantCreateMutation } from "@saleor/products/mutations"; import { useProductCreateMutation } from "@saleor/products/mutations"; -import { productListUrl, productUrl } from "@saleor/products/urls"; +import { + productAddUrl, + ProductCreateUrlQueryParams, + productListUrl, + productUrl +} from "@saleor/products/urls"; import useCategorySearch from "@saleor/searches/useCategorySearch"; import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import useProductTypeSearch from "@saleor/searches/useProductTypeSearch"; import { useTaxTypeList } from "@saleor/taxes/queries"; import { getProductErrorMessage } from "@saleor/utils/errors"; +import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; import { useMetadataUpdate, @@ -33,7 +40,11 @@ import { useIntl } from "react-intl"; import { createHandler } from "./handlers"; -export const ProductCreateView: React.FC = () => { +interface ProductCreateProps { + params: ProductCreateUrlQueryParams; +} + +export const ProductCreateView: React.FC = ({ params }) => { const navigate = useNavigator(); const notify = useNotifier(); const shop = useShop(); @@ -41,6 +52,12 @@ export const ProductCreateView: React.FC = () => { const [productCreateComplete, setProductCreateComplete] = React.useState( false ); + + const [openModal, closeModal] = createDialogActionHandlers< + ChannelsAction, + ProductCreateUrlQueryParams + >(navigate, params => productAddUrl(params), params); + const { loadMore: loadMoreCategories, search: searchCategory, @@ -92,7 +109,10 @@ export const ProductCreateView: React.FC = () => { isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(allChannels); + } = useChannels(allChannels, params?.action, { + closeModal, + openModal + }); const handleSuccess = (productId: string) => { notify({ diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index 8a165e06a..f47c86ccc 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -320,7 +320,7 @@ export const ProductList: React.FC = ({ params }) => { () => attributes.data.availableInGrid.pageInfo.hasNextPage, false )} - onAdd={() => navigate(productAddUrl)} + onAdd={() => navigate(productAddUrl())} disabled={loading} products={maybe(() => data.products.edges.map(edge => edge.node))} onFetchMore={() => diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index e20785087..0b50ab426 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -190,6 +190,11 @@ export const ProductUpdate: React.FC = ({ id, params }) => { } }); + const [openModal, closeModal] = createDialogActionHandlers< + ProductUrlDialog, + ProductUrlQueryParams + >(navigate, params => productUrl(id, params), params); + const product = data?.product; const allChannels: ChannelData[] = createChannelsDataWithPrice( @@ -213,7 +218,10 @@ export const ProductUpdate: React.FC = ({ id, params }) => { isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(productChannelsChoices); + } = useChannels(productChannelsChoices, params?.action, { + closeModal, + openModal + }); const [updateChannels, updateChannelsOpts] = useProductChannelListingUpdate({ onCompleted: data => { @@ -235,11 +243,6 @@ export const ProductUpdate: React.FC = ({ id, params }) => { value: listing.channel.id })); - const [openModal, closeModal] = createDialogActionHandlers< - ProductUrlDialog, - ProductUrlQueryParams - >(navigate, params => productUrl(id, params), params); - const handleBack = () => navigate(productListUrl()); if (product === null) { diff --git a/src/shipping/urls.ts b/src/shipping/urls.ts index 2f0fda05a..8b779de98 100644 --- a/src/shipping/urls.ts +++ b/src/shipping/urls.ts @@ -1,3 +1,4 @@ +import { ChannelsAction } from "@saleor/channels/urls"; import { stringify as stringifyQs } from "qs"; import urlJoin from "url-join"; @@ -44,13 +45,14 @@ type ZipCodeRangeActions = "add-range" | "remove-range"; export type ShippingRateUrlDialog = | ZipCodeRangeActions | "remove" - | ShippingMethodActions; + | ShippingMethodActions + | ChannelsAction; export type ShippingRateUrlQueryParams = Dialog & SingleAction & BulkAction & Pagination; -export type ShippingRateCreateUrlDialog = ZipCodeRangeActions; +export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction; export type ShippingRateCreateUrlQueryParams = Dialog< ShippingRateCreateUrlDialog > & diff --git a/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx b/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx index 05a481de8..7df7c265b 100644 --- a/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx +++ b/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx @@ -59,7 +59,7 @@ export const PriceRatesCreate: React.FC = ({ isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(allChannels); + } = useChannels(allChannels, params?.action, { closeModal, openModal }); const { channelErrors, diff --git a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx index deeb4f552..4ca2ee791 100644 --- a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx +++ b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx @@ -180,7 +180,7 @@ export const PriceRatesUpdate: React.FC = ({ isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(shippingChannels); + } = useChannels(shippingChannels, params?.action, { closeModal, openModal }); const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate( {} diff --git a/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx b/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx index fc16a78e3..da233ae65 100644 --- a/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx +++ b/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx @@ -63,7 +63,7 @@ export const WeightRatesCreate: React.FC = ({ isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(shippingChannels); + } = useChannels(shippingChannels, params?.action, { closeModal, openModal }); const { channelErrors, diff --git a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx index 7216582b4..f6fb71e0f 100644 --- a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx +++ b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx @@ -144,7 +144,7 @@ export const WeightRatesUpdate: React.FC = ({ isChannelsModalOpen, setCurrentChannels, toggleAllChannels - } = useChannels(shippingChannels); + } = useChannels(shippingChannels, params?.action, { closeModal, openModal }); const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate( {}