Unify dialog handling

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
 

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<AttributeDetailsProps> = ({ 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<AttributeDetailsProps> = ({ 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",

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<AttributeDetailsProps> = ({ 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<AttributeDetailsProps> = ({ 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

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<AttributeListProps> = ({ 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<AttributeListProps> = ({ params }) => {
             toolbar={
               <IconButton
                 color="primary"
-                onClick={() => openModal("remove", listElements)}
+                onClick={() =>
+                  openModal("remove", {
+                    ids: listElements
+                  })
+                }
               >
                 <DeleteIcon />
               </IconButton>

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<CategoryDetailsProps> = ({
     );
   };
 
-  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,15 +227,23 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
               subcategoryListToolbar={
                 <IconButton
                   color="primary"
-                  onClick={() => openModal("delete-categories", listElements)}
+                  onClick={() =>
+                    openModal("delete-categories", {
+                      ids: listElements
+                    })
+                  }
                 >
                   <DeleteIcon />
                 </IconButton>
               }
               productListToolbar={
                 <IconButton
                   color="primary"
-                  onClick={() => openModal("delete-products", listElements)}
+                  onClick={() =>
+                    openModal("delete-products", {
+                      ids: listElements
+                    })
+                  }
                 >
                   <DeleteIcon />
                 </IconButton>

src/categories/views/CategoryList/CategoryList.tsx

@@ -19,17 +19,18 @@ 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";
 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<CategoryListProps> = ({ 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<CategoryListProps> = ({ params }) => {
           <IconButton
             color="primary"
             onClick={() =>
-              navigate(
-                categoryListUrl({
-                  ...params,
-                  action: "delete",
-                  ids: listElements
-                })
-              )
+              openModal("delete", {
+                ids: listElements
+              })
             }
           >
             <DeleteIcon />