Fix showing only first 50 warehouses at variant page

.changeset/nervous-pigs-clap.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix showing only first 50 warehouses at variant page

src/hooks/makeFetchAll.ts

@@ -0,0 +1,41 @@
+import { PageInfoFragment } from "@dashboard/graphql";
+import { DocumentNode } from "graphql";
+import { useEffect } from "react";
+
+import makeQuery from "./makeQuery";
+
+export function makeFetchAll<TData, TVariables>(
+  query: DocumentNode,
+  accessKey: keyof TData,
+  mergeFn: (
+    previousQueryResult: TData,
+    options: {
+      fetchMoreResult?: TData;
+    },
+  ) => TData,
+) {
+  return (variables: TVariables) => {
+    const useQuery = makeQuery<TData, TVariables>(query);
+
+    const result = useQuery({
+      displayLoader: true,
+      variables,
+    });
+    useEffect(() => {
+      if (result.data) {
+        const data = result.data[accessKey] as { pageInfo?: PageInfoFragment };
+        const nextPage = data?.pageInfo?.hasNextPage;
+        const after = data?.pageInfo?.endCursor;
+
+        if (nextPage && after !== null) {
+          result.fetchMore({
+            updateQuery: mergeFn,
+            variables: { after },
+          });
+        }
+      }
+    }, [result.data]);
+
+    return result;
+  };
+}

src/products/components/ProductStocks/ProductStocks.tsx

@@ -24,12 +24,14 @@ import {
   Input,
   List,
   PlusIcon,
+  Spinner,
   sprinkles,
   Text,
   TrashBinIcon,
   vars,
 } from "@saleor/macaw-ui/next";
 import React from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ProductCreateData } from "../ProductCreatePage";
@@ -77,6 +79,8 @@ export interface ProductStocksProps {
   onWarehouseStockAdd: (warehouseId: string) => void;
   onWarehouseStockDelete: (warehouseId: string) => void;
   onWarehouseConfigure: () => void;
+  onFetchMoreWarehouses?: () => void;
+  hasNextWarehouses?: boolean;
 }
 
 export const ProductStocks: React.FC<ProductStocksProps> = ({
@@ -96,6 +100,8 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
   onWarehouseStockAdd,
   onWarehouseStockDelete,
   onWarehouseConfigure,
+  onFetchMoreWarehouses,
+  hasNextWarehouses,
 }) => {
   const intl = useIntl();
   const [lastStockRowFocus, setLastStockRowFocus] = React.useState(false);
@@ -321,24 +327,40 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
                         padding={2}
                         borderRadius={4}
                         boxShadow="overlay"
-                        __maxHeight={400}
-                        overflow="auto"
                         backgroundColor="surfaceNeutralPlain"
                       >
-                        {warehousesToAssign.map(warehouse => (
-                          <Dropdown.Item key={warehouse.id}>
+                        <InfiniteScroll
+                          height={400}
+                          dataLength={warehousesToAssign.length}
+                          next={onFetchMoreWarehouses}
+                          hasMore={hasNextWarehouses}
+                          loader={
                             <List.Item
                               paddingX={1.5}
                               paddingY={2}
                               borderRadius={4}
-                              onClick={() =>
-                                handleWarehouseStockAdd(warehouse.id)
-                              }
                             >
-                              <Text>{warehouse.name}</Text>
+                              <Text>
+                                Loading <Spinner />
+                              </Text>
                             </List.Item>
-                          </Dropdown.Item>
-                        ))}
+                          }
+                        >
+                          {warehousesToAssign.map(warehouse => (
+                            <Dropdown.Item key={warehouse.id}>
+                              <List.Item
+                                paddingX={1.5}
+                                paddingY={2}
+                                borderRadius={4}
+                                onClick={() =>
+                                  handleWarehouseStockAdd(warehouse.id)
+                                }
+                              >
+                                <Text>{warehouse.name}</Text>
+                              </List.Item>
+                            </Dropdown.Item>
+                          ))}
+                        </InfiniteScroll>
                       </List>
                     </Box>
                   </Dropdown.Content>

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -122,6 +122,8 @@ interface ProductVariantPageProps {
   onSubmit: (data: ProductVariantUpdateSubmitData) => any;
   onSetDefaultVariant: () => any;
   onWarehouseConfigure: () => any;
+  onFetchMoreWarehouses: () => void;
+  hasNextWarehouses: boolean;
 }
 
 const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
@@ -157,6 +159,8 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   fetchMoreAttributeValues,
   onCloseDialog,
   onAttributeSelectBlur,
+  hasNextWarehouses,
+  onFetchMoreWarehouses,
 }) => {
   const intl = useIntl();
   const navigate = useNavigator();
@@ -355,6 +359,8 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                           ...channel.value,
                         }),
                       )}
+                      onFetchMoreWarehouses={onFetchMoreWarehouses}
+                      hasNextWarehouses={hasNextWarehouses}
                       onVariantChannelListingChange={handlers.changeChannels}
                       data={data}
                       disabled={loading}

src/products/components/ProductVariantPage/ProductVarinatPage.stories.tsx

@@ -18,6 +18,8 @@ export default {
 export const WhenLoadedData = () => (
   <ProductVariantPage
     productId=""
+    hasNextWarehouses={false}
+    onFetchMoreWarehouses={() => undefined}
     defaultWeightUnit="kg"
     header={variant.name || variant.sku}
     errors={[]}
@@ -46,6 +48,8 @@ export const WhenLoadedData = () => (
 export const WhenLoadingData = () => (
   <ProductVariantPage
     productId=""
+    hasNextWarehouses={false}
+    onFetchMoreWarehouses={() => undefined}
     defaultWeightUnit="kg"
     header={undefined}
     errors={[]}
@@ -75,6 +79,8 @@ export const WhenLoadingData = () => (
 export const NoWarehouses = () => (
   <ProductVariantPage
     productId=""
+    hasNextWarehouses={false}
+    onFetchMoreWarehouses={() => undefined}
     defaultWeightUnit="kg"
     header={variant.name || variant.sku}
     errors={[]}
@@ -103,6 +109,8 @@ export const NoWarehouses = () => (
 export const AttributeErrors = () => (
   <ProductVariantPage
     productId=""
+    hasNextWarehouses={false}
+    onFetchMoreWarehouses={() => undefined}
     defaultWeightUnit="kg"
     header={variant.name || variant.sku}
     channels={channels}

src/products/views/ProductVariant/ProductVariant.tsx

@@ -60,6 +60,7 @@ import {
 import { mapFormsetStockToStockInput } from "../../utils/data";
 import { createVariantReorderHandler } from "./../ProductUpdate/handlers";
 import { useSubmitChannels } from "./useSubmitChannels";
+import { mergeWarehousesQuery } from "./utils";
 
 interface ProductUpdateProps {
   variantId: string;
@@ -258,6 +259,15 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
       }),
     );
 
+  const handleFetchMoreWarehouses = () => {
+    warehouses?.fetchMore({
+      updateQuery: mergeWarehousesQuery,
+      variables: {
+        after: warehouses?.data?.warehouses?.pageInfo?.endCursor,
+      },
+    });
+  };
+
   const {
     loadMore: loadMorePages,
     search: searchPages,
@@ -325,6 +335,10 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         variant={variant}
         header={variant?.name || variant?.sku}
         warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
+        onFetchMoreWarehouses={handleFetchMoreWarehouses}
+        hasNextWarehouses={
+          warehouses?.data?.warehouses?.pageInfo?.hasNextPage ?? false
+        }
         onDelete={() => openModal("remove")}
         onSubmit={handleSubmit}
         onWarehouseConfigure={() => navigate(warehouseAddPath)}

src/products/views/ProductVariant/utils.ts

@@ -0,0 +1,25 @@
+import { WarehouseListQuery } from "@dashboard/graphql";
+
+export const mergeWarehousesQuery = (
+  previousResult: WarehouseListQuery,
+  {
+    fetchMoreResult,
+  }: {
+    fetchMoreResult?: WarehouseListQuery;
+  },
+): WarehouseListQuery => {
+  if (!fetchMoreResult) {
+    return previousResult;
+  }
+
+  const previousEdges = previousResult?.warehouses?.edges ?? [];
+  const fetchMoreEdges = fetchMoreResult?.warehouses?.edges ?? [];
+
+  if (fetchMoreResult?.warehouses?.edges) {
+    fetchMoreResult.warehouses.edges = [...previousEdges, ...fetchMoreEdges];
+
+    return { ...fetchMoreResult };
+  }
+
+  return previousResult;
+};