[1611] Use modal action query params

src/orders/urls.ts

@@ -15,6 +15,8 @@ import {
 
 const orderSectionUrl = "/orders";
 
+type CreateOrderDialog = "create-order";
+
 export const orderListPath = orderSectionUrl;
 export enum OrderListUrlFiltersEnum {
   createdFrom = "createdFrom",
@@ -28,7 +30,7 @@ export enum OrderListUrlFiltersWithMultipleValuesEnum {
 }
 export type OrderListUrlFilters = Filters<OrderListUrlFiltersEnum> &
   FiltersWithMultipleValues<OrderListUrlFiltersWithMultipleValuesEnum>;
-export type OrderListUrlDialog = "cancel" | TabActionDialog;
+export type OrderListUrlDialog = "cancel" | CreateOrderDialog | TabActionDialog;
 export enum OrderListUrlSortField {
   number = "number",
   customer = "customer",
@@ -61,7 +63,10 @@ export enum OrderDraftListUrlFiltersEnum {
   query = "query"
 }
 export type OrderDraftListUrlFilters = Filters<OrderDraftListUrlFiltersEnum>;
-export type OrderDraftListUrlDialog = "remove" | TabActionDialog;
+export type OrderDraftListUrlDialog =
+  | "remove"
+  | CreateOrderDialog
+  | TabActionDialog;
 export enum OrderDraftListUrlSortField {
   number = "number",
   customer = "customer",

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -81,9 +81,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
   });
 
   const { channel, availableChannels } = useAppChannel();
-  const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState(
-    false
-  );
 
   const tabs = getFilterTabs();
 
@@ -200,7 +197,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
                   data.draftOrders.edges.map(edge => edge.node)
                 )}
                 pageInfo={pageInfo}
-                onAdd={() => setChannelPickerDialogOpen(true)}
+                onAdd={() => openModal("create-order")}
                 onNextPage={loadNextPage}
                 onPreviousPage={loadPreviousPage}
                 onRowClick={id => () => navigate(orderUrl(id))}
@@ -268,8 +265,8 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
                 }))}
                 confirmButtonState="success"
                 defaultChoice={channel.id}
-                open={channelPickerDialogOpen}
+                open={params.action === "create-order"}
-                onClose={() => setChannelPickerDialogOpen(false)}
+                onClose={closeModal}
                 onConfirm={channel =>
                   createOrder({
                     variables: {

src/orders/views/OrderList/OrderList.tsx

@@ -69,9 +69,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
   });
 
   const { channel, availableChannels } = useAppChannel();
-  const [channelPickerDialogOpen, setChannelPickerDialogOpen] = React.useState(
-    false
-  );
 
   const tabs = getFilterTabs();
 
@@ -149,7 +146,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         orders={maybe(() => data.orders.edges.map(edge => edge.node))}
         pageInfo={pageInfo}
         sort={getSortParams(params)}
-        onAdd={() => setChannelPickerDialogOpen(true)}
+        onAdd={() => openModal("create-order")}
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
@@ -184,8 +181,8 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
         }))}
         confirmButtonState="success"
         defaultChoice={channel.id}
-        open={channelPickerDialogOpen}
+        open={params.action === "create-order"}
-        onClose={() => setChannelPickerDialogOpen(false)}
+        onClose={closeModal}
         onConfirm={channel =>
           createOrder({
             variables: {