Simplify code

src/shipping/queries.ts

@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 import makeQuery from "@saleor/hooks/makeQuery";
-import { pageInfoFragment, TypedQuery } from "../queries";
+import { pageInfoFragment } from "../queries";
 import { ShippingZone, ShippingZoneVariables } from "./types/ShippingZone";
 import { ShippingZones, ShippingZonesVariables } from "./types/ShippingZones";
 
@@ -79,7 +79,7 @@ const shippingZones = gql`
     }
   }
 `;
-export const TypedShippingZones = TypedQuery<
+export const useShippingZoneList = makeQuery<
   ShippingZones,
   ShippingZonesVariables
 >(shippingZones);

src/shipping/views/ShippingZonesList.tsx

@@ -16,23 +16,22 @@ import usePaginator, {
 import useShop from "@saleor/hooks/useShop";
 import useUser from "@saleor/hooks/useUser";
 import { commonMessages } from "@saleor/intl";
-import { maybe } from "@saleor/misc";
+import { maybe, getStringOrPlaceholder } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
+import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import ShippingZonesListPage from "../components/ShippingZonesListPage";
 import {
-  TypedBulkDeleteShippingZone,
+  useShippingZoneBulkDelete,
-  TypedDeleteShippingZone,
+  useShippingZoneDelete,
-  TypedUpdateDefaultWeightUnit
+  useDefaultWeightUnitUpdate
 } from "../mutations";
-import { TypedShippingZones } from "../queries";
+import { useShippingZoneList } from "../queries";
-import { BulkDeleteShippingZone } from "../types/BulkDeleteShippingZone";
-import { DeleteShippingZone } from "../types/DeleteShippingZone";
-import { UpdateDefaultWeightUnit } from "../types/UpdateDefaultWeightUnit";
 import {
   shippingZoneAddUrl,
   shippingZonesListUrl,
   ShippingZonesListUrlQueryParams,
-  shippingZoneUrl
+  shippingZoneUrl,
+  ShippingZonesListUrlDialog
 } from "../urls";
 
 interface ShippingZonesListProps {
@@ -57,30 +56,18 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
 
   const paginationState = createPaginationState(settings.rowNumber, params);
 
-  return (
+  const [openModal, closeModal] = createDialogActionHandlers<
-    <TypedShippingZones displayLoader variables={paginationState}>
+    ShippingZonesListUrlDialog,
-      {({ data, loading, refetch }) => {
+    ShippingZonesListUrlQueryParams
-        const handleUpdateDefaultWeightUnit = (
+  >(navigate, shippingZonesListUrl, params);
-          data: UpdateDefaultWeightUnit
+
-        ) => {
+  const { data, loading, refetch } = useShippingZoneList({
-          if (data.shopSettingsUpdate.errors.length === 0) {
+    displayLoader: true,
-            notify({
+    variables: paginationState
-              text: intl.formatMessage(commonMessages.savedChanges)
   });
-          }
-        };
 
-        const closeModal = () =>
+  const [deleteShippingZone, deleteShippingZoneOpts] = useShippingZoneDelete({
-          navigate(
+    onCompleted: data => {
-            shippingZonesListUrl({
-              ...params,
-              action: undefined,
-              ids: undefined
-            }),
-            true
-          );
-
-        const handleShippingZoneDelete = (data: DeleteShippingZone) => {
       if (data.shippingZoneDelete.errors.length === 0) {
         notify({
           text: intl.formatMessage(commonMessages.savedChanges)
@@ -88,9 +75,27 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
         closeModal();
         refetch();
       }
-        };
+    }
+  });
 
-        const handleBulkDeleteShippingZone = (data: BulkDeleteShippingZone) => {
+  const [
+    updateDefaultWeightUnit,
+    updateDefaultWeightUnitOpts
+  ] = useDefaultWeightUnitUpdate({
+    onCompleted: data => {
+      if (data.shopSettingsUpdate.errors.length === 0) {
+        notify({
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+      }
+    }
+  });
+
+  const [
+    bulkDeleteShippingZone,
+    bulkDeleteShippingZoneOpts
+  ] = useShippingZoneBulkDelete({
+    onCompleted: data => {
       if (data.shippingZoneBulkDelete.errors.length === 0) {
         notify({
           text: intl.formatMessage(commonMessages.savedChanges)
@@ -99,34 +104,18 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
         reset();
         refetch();
       }
-        };
+    }
-        return (
+  });
-          <TypedDeleteShippingZone onCompleted={handleShippingZoneDelete}>
+
-            {(deleteShippingZone, deleteShippingZoneOpts) => (
+  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-              <TypedUpdateDefaultWeightUnit
-                onCompleted={handleUpdateDefaultWeightUnit}
-              >
-                {(updateDefaultWeightUnit, updateDefaultWeightUnitOpts) => (
-                  <TypedBulkDeleteShippingZone
-                    onCompleted={handleBulkDeleteShippingZone}
-                  >
-                    {(bulkDeleteShippingZone, bulkDeleteShippingZoneOpts) => {
-                      const {
-                        loadNextPage,
-                        loadPreviousPage,
-                        pageInfo
-                      } = paginate(
     maybe(() => data.shippingZones.pageInfo),
     paginationState,
     params
   );
-
   return (
     <>
       <ShippingZonesListPage
-                            defaultWeightUnit={maybe(
+        defaultWeightUnit={maybe(() => shop.defaultWeightUnit)}
-                              () => shop.defaultWeightUnit
-                            )}
         settings={settings}
         disabled={
           loading ||
@@ -143,16 +132,11 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
         onRemove={id =>
-                              navigate(
+          openModal("remove", {
-                                shippingZonesListUrl({
-                                  ...params,
-                                  action: "remove",
             id
           })
-                              )
         }
-                            onRowClick={id => () =>
+        onRowClick={id => () => navigate(shippingZoneUrl(id))}
-                              navigate(shippingZoneUrl(id))}
         onSubmit={unit =>
           updateDefaultWeightUnit({
             variables: { unit }
@@ -166,12 +150,9 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
           <IconButton
             color="primary"
             onClick={() =>
-                                  navigate(
+              openModal("remove-many", {
-                                    shippingZonesListUrl({
-                                      action: "remove-many",
                 ids: listElements
               })
-                                  )
             }
           >
             <DeleteIcon />
@@ -216,9 +197,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
       </ActionDialog>
       <ActionDialog
         open={params.action === "remove-many"}
-                            confirmButtonState={
+        confirmButtonState={bulkDeleteShippingZoneOpts.status}
-                              bulkDeleteShippingZoneOpts.status
-                            }
         variant="delete"
         title={intl.formatMessage({
           defaultMessage: "Delete Shipping Zones",
@@ -236,10 +215,10 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
             defaultMessage="{counter,plural,one{Are you sure you want to delete this shipping zone?} other{Are you sure you want to delete {displayQuantity} shipping zones?}}"
             description="dialog content"
             values={{
-                                  counter: maybe(() => params.ids.length),
+              counter: params.ids?.length,
               displayQuantity: (
                 <strong>
-                                      {maybe(() => params.ids.length)}
+                  {getStringOrPlaceholder(params.ids?.length.toString())}
                 </strong>
               )
             }}
@@ -248,16 +227,6 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
       </ActionDialog>
     </>
   );
-                    }}
-                  </TypedBulkDeleteShippingZone>
-                )}
-              </TypedUpdateDefaultWeightUnit>
-            )}
-          </TypedDeleteShippingZone>
-        );
-      }}
-    </TypedShippingZones>
-  );
 };
 ShippingZonesList.displayName = "ShippingZonesList";
 export default ShippingZonesList;