diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index 9ca6d0798..1ff2e1862 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -60,8 +60,11 @@ export const CollectionDetails: React.FC = ({ ); const paginate = usePaginator(); const intl = useIntl(); - const { search, result } = useProductSearch({ - variables: DEFAULT_INITIAL_SEARCH_DATA + const { search, loadMore, result } = useProductSearch({ + variables: { + ...DEFAULT_INITIAL_SEARCH_DATA, + first: 100 + } }); const [updateMetadata] = useMetadataUpdate({}); const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); @@ -296,8 +299,10 @@ export const CollectionDetails: React.FC = ({ /> diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx index 92a2a9a0c..0f0409c25 100644 --- a/src/components/AssignProductDialog/AssignProductDialog.tsx +++ b/src/components/AssignProductDialog/AssignProductDialog.tsx @@ -19,7 +19,9 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { buttonMessages } from "@saleor/intl"; import { maybe } from "@saleor/misc"; import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts"; +import { FetchMoreProps } from "@saleor/types"; import React from "react"; +import InfiniteScroll from "react-infinite-scroller"; import { FormattedMessage, useIntl } from "react-intl"; import Checkbox from "../Checkbox"; @@ -30,7 +32,7 @@ export interface FormData { } const useStyles = makeStyles( - { + theme => ({ avatar: { "&&:first-child": { paddingLeft: 0 @@ -44,17 +46,25 @@ const useStyles = makeStyles( colName: { paddingLeft: 0 }, + loadMoreLoaderContainer: { + alignItems: "center", + display: "flex", + height: theme.spacing(3), + justifyContent: "center", + marginTop: theme.spacing(3) + }, overflow: { overflowY: "visible" }, scrollArea: { + height: 500, overflowY: "scroll" } - }, + }), { name: "AssignProductDialog" } ); -export interface AssignProductDialogProps { +export interface AssignProductDialogProps extends FetchMoreProps { confirmButtonState: ConfirmButtonTransitionState; open: boolean; products: SearchProducts_search_edges_node[]; @@ -84,11 +94,13 @@ function handleProductAssign( const AssignProductDialog: React.FC = props => { const { confirmButtonState, + hasMore, open, loading, products, onClose, onFetch, + onFetchMore, onSubmit } = props; const classes = useStyles(props); @@ -135,44 +147,57 @@ const AssignProductDialog: React.FC = props => { />
- - - {products && - products.map(product => { - const isSelected = selectedProducts.some( - selectedProduct => selectedProduct.id === product.id - ); + + +
+ } + threshold={10} + > + + + {products && + products.map(product => { + const isSelected = selectedProducts.some( + selectedProduct => selectedProduct.id === product.id + ); - return ( - - product.thumbnail.url)} - /> - - {product.name} - - - - handleProductAssign( - product, - isSelected, - selectedProducts, - setSelectedProducts - ) - } + return ( + + product.thumbnail.url)} /> - - - ); - })} - - + + {product.name} + + + + handleProductAssign( + product, + isSelected, + selectedProducts, + setSelectedProducts + ) + } + /> + + + ); + })} + + + diff --git a/src/discounts/views/SaleDetails.tsx b/src/discounts/views/SaleDetails.tsx index b7b5bbde6..a63c33418 100644 --- a/src/discounts/views/SaleDetails.tsx +++ b/src/discounts/views/SaleDetails.tsx @@ -68,18 +68,21 @@ export const SaleDetails: React.FC = ({ id, params }) => { ); const intl = useIntl(); const { + // loadMore: loadMoreCategories, search: searchCategories, result: searchCategoriesOpts } = useCategorySearch({ variables: DEFAULT_INITIAL_SEARCH_DATA }); const { + // loadMore: loadMoreCollections, search: searchCollections, result: searchCollectionsOpts } = useCollectionSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA }); const { + loadMore: loadMoreProducts, search: searchProducts, result: searchProductsOpts } = useProductSearch({ @@ -325,8 +328,13 @@ export const SaleDetails: React.FC = ({ id, params }) => { /> diff --git a/src/discounts/views/VoucherDetails.tsx b/src/discounts/views/VoucherDetails.tsx index 866073fde..4c714b29b 100644 --- a/src/discounts/views/VoucherDetails.tsx +++ b/src/discounts/views/VoucherDetails.tsx @@ -82,6 +82,7 @@ export const VoucherDetails: React.FC = ({ variables: DEFAULT_INITIAL_SEARCH_DATA }); const { + loadMore: loadMoreProducts, search: searchProducts, result: searchProductsOpts } = useProductSearch({ @@ -484,8 +485,13 @@ export const VoucherDetails: React.FC = ({ confirmButtonState={ voucherCataloguesAddOpts.status } + hasMore={ + searchProductsOpts.data?.search.pageInfo + .hasNextPage + } open={params.action === "assign-product"} onFetch={searchProducts} + onFetchMore={loadMoreProducts} loading={searchProductsOpts.loading} onClose={closeModal} onSubmit={products =>