Move bulk product delete logic to the view level

saleor · Apr 17, 2019 · f9c6fb9 · f9c6fb9
1 parent 055c851
commit f9c6fb9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 74 deletions.
diff --git a/saleor/static/dashboard-next/products/components/ProductListCard/ProductListCard.tsx b/saleor/static/dashboard-next/products/components/ProductListCard/ProductListCard.tsx
@@ -1,23 +1,18 @@
 import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
-import IconButton from "@material-ui/core/IconButton";
 import AddIcon from "@material-ui/icons/Add";
-import DeleteIcon from "@material-ui/icons/Delete";
 import * as React from "react";
 
 import { CategoryDetails_category_products_edges_node } from "../../../categories/types/CategoryDetails";
 import Container from "../../../components/Container";
 import PageHeader from "../../../components/PageHeader";
 import ProductList from "../../../components/ProductList";
 import { Filter } from "../../../components/TableFilter";
-import useBulkActions from "../../../hooks/useBulkActions";
 import i18n from "../../../i18n";
-import { ListActionProps, PageListProps } from "../../../types";
+import { ListActions, PageListProps } from "../../../types";
 import ProductListFilter, { ProductListFilterTabs } from "../ProductListFilter";
 
-interface ProductListCardProps
-  extends PageListProps,
-    ListActionProps<"onBulkDelete" | "onBulkPublish" | "onBulkUnpublish"> {
+interface ProductListCardProps extends PageListProps, ListActions {
   currentTab: ProductListFilterTabs;
   filtersList: Filter[];
   products: CategoryDetails_category_products_edges_node[];
@@ -38,71 +33,45 @@ export const ProductListCard: React.StatelessComponent<
   onAdd,
   onAllProducts,
   onAvailable,
-  onBulkDelete,
-  onBulkPublish,
-  onBulkUnpublish,
   onCustomFilter,
   onNextPage,
   onOfStock,
   onPreviousPage,
-  onRowClick
-}) => {
-  const { isMember: isChecked, listElements, toggle } = useBulkActions(
-    products
-  );
-
-  return (
-    <Container>
-      <PageHeader title={i18n.t("Products")}>
-        <Button onClick={onAdd} color="primary" variant="contained">
-          {i18n.t("Add product")} <AddIcon />
-        </Button>
-      </PageHeader>
-      <Card>
-        <ProductListFilter
-          currentTab={currentTab}
-          filtersList={filtersList}
-          onAvailable={onAvailable}
-          onAllProducts={onAllProducts}
-          onOfStock={onOfStock}
-          onCustomFilter={onCustomFilter}
-        />
-        <ProductList
-          products={products}
-          disabled={disabled}
-          pageInfo={pageInfo}
-          toolbar={
-            <>
-              <Button
-                color="primary"
-                onClick={() => onBulkUnpublish(listElements)}
-              >
-                {i18n.t("Unpublish")}
-              </Button>
-              <Button
-                color="primary"
-                onClick={() => onBulkPublish(listElements)}
-              >
-                {i18n.t("Publish")}
-              </Button>
-              <IconButton
-                color="primary"
-                onClick={() => onBulkDelete(listElements)}
-              >
-                <DeleteIcon />
-              </IconButton>
-            </>
-          }
-          selected={listElements.length}
-          isChecked={isChecked}
-          toggle={toggle}
-          onNextPage={onNextPage}
-          onPreviousPage={onPreviousPage}
-          onRowClick={onRowClick}
-        />
-      </Card>
-    </Container>
-  );
-};
+  onRowClick,
+  isChecked,
+  selected,
+  toggle,
+  toolbar
+}) => (
+  <Container>
+    <PageHeader title={i18n.t("Products")}>
+      <Button onClick={onAdd} color="primary" variant="contained">
+        {i18n.t("Add product")} <AddIcon />
+      </Button>
+    </PageHeader>
+    <Card>
+      <ProductListFilter
+        currentTab={currentTab}
+        filtersList={filtersList}
+        onAvailable={onAvailable}
+        onAllProducts={onAllProducts}
+        onOfStock={onOfStock}
+        onCustomFilter={onCustomFilter}
+      />
+      <ProductList
+        products={products}
+        disabled={disabled}
+        pageInfo={pageInfo}
+        toolbar={toolbar}
+        selected={selected}
+        isChecked={isChecked}
+        toggle={toggle}
+        onNextPage={onNextPage}
+        onPreviousPage={onPreviousPage}
+        onRowClick={onRowClick}
+      />
+    </Card>
+  </Container>
+);
 ProductListCard.displayName = "ProductListCard";
 export default ProductListCard;
diff --git a/saleor/static/dashboard-next/products/views/ProductList.tsx b/saleor/static/dashboard-next/products/views/ProductList.tsx
@@ -1,9 +1,12 @@
+import Button from "@material-ui/core/Button";
 import DialogContentText from "@material-ui/core/DialogContentText";
-import { stringify as stringifyQs } from "qs";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteIcon from "@material-ui/icons/Delete";
 import * as React from "react";
 
 import ActionDialog from "../../components/ActionDialog";
 import { createPaginationState } from "../../components/Paginator";
+import useBulkActions from "../../hooks/useBulkActions";
 import useNavigator from "../../hooks/useNavigator";
 import useNotifier from "../../hooks/useNotifier";
 import usePaginator from "../../hooks/usePaginator";
@@ -36,6 +39,7 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();
+  const { isSelected, listElements, reset, toggle } = useBulkActions();
 
   const closeModal = () =>
     navigate(
@@ -47,8 +51,10 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
       true
     );
 
-  const changeFilters = (filters: ProductListUrlFilters) =>
+  const changeFilters = (filters: ProductListUrlFilters) => {
+    reset();
     navigate(productListUrl(filters));
+  };
 
   const openModal = (action: ProductListUrlDialog, ids: string[]) =>
     navigate(
@@ -83,6 +89,7 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
             notify({
               text: i18n.t("Products removed")
             });
+            reset();
             refetch();
           }
         };
@@ -130,9 +137,31 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
                         status: StockAvailability.OUT_OF_STOCK
                       })
                     }
-                    onBulkDelete={ids => openModal("delete", ids)}
-                    onBulkPublish={ids => openModal("publish", ids)}
-                    onBulkUnpublish={ids => openModal("unpublish", ids)}
+                    toolbar={
+                      <>
+                        <Button
+                          color="primary"
+                          onClick={() => openModal("unpublish", listElements)}
+                        >
+                          {i18n.t("Unpublish")}
+                        </Button>
+                        <Button
+                          color="primary"
+                          onClick={() => openModal("publish", listElements)}
+                        >
+                          {i18n.t("Publish")}
+                        </Button>
+                        <IconButton
+                          color="primary"
+                          onClick={() => openModal("delete", listElements)}
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      </>
+                    }
+                    isChecked={isSelected}
+                    selected={listElements.length}
+                    toggle={toggle}
                   />
                   <ActionDialog
                     open={params.action === "delete"}