Use query hooks in product list

src/products/queries.ts

@@ -150,10 +150,9 @@ const productListQuery = gql`
     }
   }
 `;
-export const TypedProductListQuery = TypedQuery<
+export const useProductListQuery = makeQuery<ProductList, ProductListVariables>(
-  ProductList,
+  productListQuery
-  ProductListVariables
+);
->(productListQuery);
 
 const countAllProductsQuery = gql`
   query CountAllProducts {
@@ -288,7 +287,7 @@ const availableInGridAttributes = gql`
     }
   }
 `;
-export const AvailableInGridAttributesQuery = TypedQuery<
+export const useAvailableInGridAttributesQuery = makeQuery<
   GridAttributes,
   GridAttributesVariables
 >(availableInGridAttributes);

src/products/views/ProductList/ProductList.tsx

@@ -45,18 +45,16 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import ProductListPage from "../../components/ProductListPage";
 import {
-  TypedProductBulkDeleteMutation,
+  useProductBulkDeleteMutation,
-  TypedProductBulkPublishMutation,
+  useProductBulkPublishMutation,
   useProductExport
 } from "../../mutations";
 import {
-  AvailableInGridAttributesQuery,
+  useAvailableInGridAttributesQuery,
-  TypedProductListQuery,
   useCountAllProducts,
-  useInitialProductFilterDataQuery
+  useInitialProductFilterDataQuery,
+  useProductListQuery
 } from "../../queries";
-import { productBulkDelete } from "../../types/productBulkDelete";
-import { productBulkPublish } from "../../types/productBulkPublish";
 import {
   productAddUrl,
   productListUrl,
@@ -235,6 +233,53 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     }),
     [params, settings.rowNumber]
   );
+  const { data, loading, refetch } = useProductListQuery({
+    displayLoader: true,
+    variables: queryVariables
+  });
+
+  function filterColumnIds(columns: ProductListColumns[]) {
+    return columns
+      .filter(isAttributeColumnValue)
+      .map(getAttributeIdFromColumnValue);
+  }
+  const attributes = useAvailableInGridAttributesQuery({
+    variables: { first: 6, ids: filterColumnIds(settings.columns) }
+  });
+
+  const [
+    productBulkDelete,
+    productBulkDeleteOpts
+  ] = useProductBulkDeleteMutation({
+    onCompleted: data => {
+      if (data.productBulkDelete.errors.length === 0) {
+        closeModal();
+        notify({
+          status: "success",
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        reset();
+        refetch();
+      }
+    }
+  });
+
+  const [
+    productBulkPublish,
+    productBulkPublishOpts
+  ] = useProductBulkPublishMutation({
+    onCompleted: data => {
+      if (data.productBulkPublish.errors.length === 0) {
+        closeModal();
+        notify({
+          status: "success",
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+        reset();
+        refetch();
+      }
+    }
+  });
 
   const filterOpts = getFilterOpts(
     params,
@@ -262,56 +307,13 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
     }
   );
 
-  function filterColumnIds(columns: ProductListColumns[]) {
-    return columns
-      .filter(isAttributeColumnValue)
-      .map(getAttributeIdFromColumnValue);
-  }
-
-  return (
-    <AvailableInGridAttributesQuery
-      variables={{ first: 6, ids: filterColumnIds(settings.columns) }}
-    >
-      {attributes => (
-        <TypedProductListQuery displayLoader variables={queryVariables}>
-          {({ data, loading, refetch }) => {
   const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
     maybe(() => data.products.pageInfo),
     paginationState,
     params
   );
 
-            const handleBulkDelete = (data: productBulkDelete) => {
-              if (data.productBulkDelete.errors.length === 0) {
-                closeModal();
-                notify({
-                  status: "success",
-                  text: intl.formatMessage(commonMessages.savedChanges)
-                });
-                reset();
-                refetch();
-              }
-            };
-
-            const handleBulkPublish = (data: productBulkPublish) => {
-              if (data.productBulkPublish.errors.length === 0) {
-                closeModal();
-                notify({
-                  status: "success",
-                  text: intl.formatMessage(commonMessages.savedChanges)
-                });
-                reset();
-                refetch();
-              }
-            };
-
   return (
-              <TypedProductBulkDeleteMutation onCompleted={handleBulkDelete}>
-                {(productBulkDelete, productBulkDeleteOpts) => (
-                  <TypedProductBulkPublishMutation
-                    onCompleted={handleBulkPublish}
-                  >
-                    {(productBulkPublish, productBulkPublishOpts) => (
     <>
       <ProductListPage
         activeAttributeSortId={params.attributeId}
@@ -321,21 +323,15 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         }}
         onSort={handleSort}
         availableInGridAttributes={maybe(
-                            () =>
+          () => attributes.data.availableInGrid.edges.map(edge => edge.node),
-                              attributes.data.availableInGrid.edges.map(
-                                edge => edge.node
-                              ),
           []
         )}
         currencySymbol={currencySymbol}
         currentTab={currentTab}
-                          defaultSettings={
+        defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]}
-                            defaultListSettings[ListViews.PRODUCT_LIST]
-                          }
         filterOpts={filterOpts}
         gridAttributes={maybe(
-                            () =>
+          () => attributes.data.grid.edges.map(edge => edge.node),
-                              attributes.data.grid.edges.map(edge => edge.node),
           []
         )}
         totalGridAttributes={maybe(
@@ -345,16 +341,12 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         settings={settings}
         loading={attributes.loading}
         hasMore={maybe(
-                            () =>
+          () => attributes.data.availableInGrid.pageInfo.hasNextPage,
-                              attributes.data.availableInGrid.pageInfo
-                                .hasNextPage,
           false
         )}
         onAdd={() => navigate(productAddUrl)}
         disabled={loading}
-                          products={maybe(() =>
+        products={maybe(() => data.products.edges.map(edge => edge.node))}
-                            data.products.edges.map(edge => edge.node)
-                          )}
         onFetchMore={() =>
           attributes.loadMore(
             (prev, next) => {
@@ -377,9 +369,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
               };
             },
             {
-                                after:
+              after: attributes.data.availableInGrid.pageInfo.endCursor
-                                  attributes.data.availableInGrid.pageInfo
-                                    .endCursor
             }
           )
         }
@@ -463,11 +453,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
             description="dialog content"
             values={{
               counter: maybe(() => params.ids.length),
-                                displayQuantity: (
+              displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
-                                  <strong>
-                                    {maybe(() => params.ids.length)}
-                                  </strong>
-                                )
             }}
           />
         </DialogContentText>
@@ -495,11 +481,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
             description="dialog content"
             values={{
               counter: maybe(() => params.ids.length),
-                                displayQuantity: (
+              displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
-                                  <strong>
-                                    {maybe(() => params.ids.length)}
-                                  </strong>
-                                )
             }}
           />
         </DialogContentText>
@@ -527,40 +509,29 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
             description="dialog content"
             values={{
               counter: maybe(() => params.ids.length),
-                                displayQuantity: (
+              displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
-                                  <strong>
-                                    {maybe(() => params.ids.length)}
-                                  </strong>
-                                )
             }}
           />
         </DialogContentText>
       </ActionDialog>
       <ProductExportDialog
-                          attributes={(
+        attributes={(searchAttributes.result.data?.search.edges || []).map(
-                            searchAttributes.result.data?.search.edges || []
+          edge => edge.node
-                          ).map(edge => edge.node)}
+        )}
-                          hasMore={
+        hasMore={searchAttributes.result.data?.search.pageInfo.hasNextPage}
-                            searchAttributes.result.data?.search.pageInfo
-                              .hasNextPage
-                          }
         loading={searchAttributes.result.loading}
         onFetch={searchAttributes.search}
         onFetchMore={searchAttributes.loadMore}
         open={params.action === "export"}
         confirmButtonState={exportProductsOpts.status}
-                          errors={
+        errors={exportProductsOpts.data?.exportProducts.errors || []}
-                            exportProductsOpts.data?.exportProducts.errors || []
-                          }
         productQuantity={{
           all: countAllProducts.data?.products.totalCount,
           filter: data?.products.totalCount
         }}
         selectedProducts={listElements.length}
         warehouses={
-                            warehouses.data?.warehouses.edges.map(
+          warehouses.data?.warehouses.edges.map(edge => edge.node) || []
-                              edge => edge.node
-                            ) || []
         }
         onClose={closeModal}
         onSubmit={data =>
@@ -586,21 +557,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         confirmButtonState="default"
         onClose={closeModal}
         onSubmit={handleFilterTabDelete}
-                          tabName={maybe(
+        tabName={maybe(() => tabs[currentTab - 1].name, "...")}
-                            () => tabs[currentTab - 1].name,
-                            "..."
-                          )}
       />
     </>
-                    )}
-                  </TypedProductBulkPublishMutation>
-                )}
-              </TypedProductBulkDeleteMutation>
-            );
-          }}
-        </TypedProductListQuery>
-      )}
-    </AvailableInGridAttributesQuery>
   );
 };
 export default ProductList;