Merge pull request #793 from mirumee/lush-collection-load-more

Add missing infinite scroll to searches

CHANGELOG.md

@@ -55,6 +55,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add manage product types and attributes permission - #768 by @orzechdev
 - Fix isPublished and isAvailable behaviour for products, collections and pages - #780 by @mmarkusik
 - Add metadata editor to page views - #782 by @dominik-zeglen
+- Add missing infinite scroll to searches - #793 by @dominik-zeglen
 
 ## 2.10.1
 

locale/defaultMessages.json

@@ -1400,23 +1400,15 @@
     "context": "section header",
     "string": "App Status"
   },
-  "src_dot_components_dot_AssignCategoryDialog_dot_1305061437": {
+  "src_dot_components_dot_AssignCategoryDialog_dot_3125506097": {
-    "string": "Search Categories"
-  },
-  "src_dot_components_dot_AssignCategoryDialog_dot_190977792": {
     "context": "dialog header",
-    "string": "Assign Categories"
+    "string": "Assign Category"
   },
   "src_dot_components_dot_AssignCategoryDialog_dot_3690273268": {
     "string": "Search by category name, etc..."
   },
-  "src_dot_components_dot_AssignCategoryDialog_dot_3973677075": {
+  "src_dot_components_dot_AssignCategoryDialog_dot_3841025483": {
-    "context": "button",
+    "string": "Search Category"
-    "string": "Assign categories"
-  },
-  "src_dot_components_dot_AssignCollectionDialog_dot_1035511604": {
-    "context": "button",
-    "string": "Assign collections"
   },
   "src_dot_components_dot_AssignCollectionDialog_dot_2605414502": {
     "string": "Search by collection name, etc..."
@@ -1428,6 +1420,10 @@
   "src_dot_components_dot_AssignCollectionDialog_dot_4057224233": {
     "string": "Search Collection"
   },
+  "src_dot_components_dot_AssignContainerDialog_dot_1731102929": {
+    "context": "button",
+    "string": "Assign"
+  },
   "src_dot_components_dot_AssignProductDialog_dot_2100305525": {
     "context": "button",
     "string": "Assign products"

src/collections/views/CollectionDetails.tsx

@@ -60,7 +60,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   );
   const paginate = usePaginator();
   const intl = useIntl();
-  const { search, result } = useProductSearch({
+  const { search, loadMore, result } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
   const [updateMetadata] = useMetadataUpdate({});
@@ -296,8 +296,10 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
             />
             <AssignProductDialog
               confirmButtonState={assignProductOpts.status}
+              hasMore={result.data?.search?.pageInfo.hasNextPage}
               open={params.action === "assign"}
               onFetch={search}
+              onFetchMore={loadMore}
               loading={result.loading}
               onClose={closeModal}
               onSubmit={products =>

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -1,185 +1,41 @@
-import Button from "@material-ui/core/Button";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import { makeStyles } from "@material-ui/core/styles";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
-import ConfirmButton, {
-  ConfirmButtonTransitionState
-} from "@saleor/components/ConfirmButton";
-import FormSpacer from "@saleor/components/FormSpacer";
-import ResponsiveTable from "@saleor/components/ResponsiveTable";
-import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
-import Checkbox from "../Checkbox";
+import AssignContainerDialog, {
+  AssignContainerDialogProps
+} from "../AssignContainerDialog";
 
-export interface FormData {
+interface AssignCategoryDialogProps
+  extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
   categories: SearchCategories_search_edges_node[];
-  query: string;
 }
 
-const useStyles = makeStyles(
+const AssignCategoryDialog: React.FC<AssignCategoryDialogProps> = ({
-  {
+  categories,
-    avatar: {
+  ...rest
-      "&:first-child": {
+}) => {
-        paddingLeft: 0
-      }
-    },
-    checkboxCell: {
-      paddingLeft: 0
-    },
-    overflow: {
-      overflowY: "visible"
-    },
-    wideCell: {
-      width: "100%"
-    }
-  },
-  { name: "AssignCategoryDialog" }
-);
-
-interface AssignCategoriesDialogProps {
-  categories: SearchCategories_search_edges_node[];
-  confirmButtonState: ConfirmButtonTransitionState;
-  open: boolean;
-  loading: boolean;
-  onClose: () => void;
-  onFetch: (value: string) => void;
-  onSubmit: (data: SearchCategories_search_edges_node[]) => void;
-}
-
-function handleCategoryAssign(
-  product: SearchCategories_search_edges_node,
-  isSelected: boolean,
-  selectedCategories: SearchCategories_search_edges_node[],
-  setSelectedCategories: (data: SearchCategories_search_edges_node[]) => void
-) {
-  if (isSelected) {
-    setSelectedCategories(
-      selectedCategories.filter(
-        selectedProduct => selectedProduct.id !== product.id
-      )
-    );
-  } else {
-    setSelectedCategories([...selectedCategories, product]);
-  }
-}
-
-const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
-  const {
-    confirmButtonState,
-    open,
-    loading,
-    categories: categories,
-    onClose,
-    onFetch,
-    onSubmit
-  } = props;
-  const classes = useStyles(props);
-
   const intl = useIntl();
-  const [query, onQueryChange] = useSearchQuery(onFetch);
-  const [selectedCategories, setSelectedCategories] = React.useState<
-    SearchCategories_search_edges_node[]
-  >([]);
-
-  const handleSubmit = () => onSubmit(selectedCategories);
 
   return (
-    <Dialog
+    <AssignContainerDialog
-      open={open}
+      containers={categories}
-      onClose={onClose}
+      search={{
-      classes={{ paper: classes.overflow }}
+        label: intl.formatMessage({
-      fullWidth
+          defaultMessage: "Search Category"
-      maxWidth="sm"
+        }),
-    >
+        placeholder: intl.formatMessage({
-      <DialogTitle>
-        <FormattedMessage
-          defaultMessage="Assign Categories"
-          description="dialog header"
-        />
-      </DialogTitle>
-      <DialogContent className={classes.overflow}>
-        <TextField
-          name="query"
-          value={query}
-          onChange={onQueryChange}
-          label={intl.formatMessage({
-            defaultMessage: "Search Categories"
-          })}
-          placeholder={intl.formatMessage({
           defaultMessage: "Search by category name, etc..."
-          })}
+        })
-          fullWidth
-          InputProps={{
-            autoComplete: "off",
-            endAdornment: loading && <CircularProgress size={16} />
       }}
-        />
+      title={intl.formatMessage({
-        <FormSpacer />
+        defaultMessage: "Assign Category",
-        <ResponsiveTable>
+        description: "dialog header"
-          <TableBody>
-            {categories &&
-              categories.map(category => {
-                const isSelected = !!selectedCategories.find(
-                  selectedCategories => selectedCategories.id === category.id
-                );
-
-                return (
-                  <TableRow key={category.id}>
-                    <TableCell
-                      padding="checkbox"
-                      className={classes.checkboxCell}
-                    >
-                      <Checkbox
-                        checked={isSelected}
-                        onChange={() =>
-                          handleCategoryAssign(
-                            category,
-                            isSelected,
-                            selectedCategories,
-                            setSelectedCategories
-                          )
-                        }
-                      />
-                    </TableCell>
-                    <TableCell className={classes.wideCell}>
-                      {category.name}
-                    </TableCell>
-                  </TableRow>
-                );
       })}
-          </TableBody>
+      {...rest}
-        </ResponsiveTable>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
-        <ConfirmButton
-          transitionState={confirmButtonState}
-          color="primary"
-          variant="contained"
-          type="submit"
-          onClick={handleSubmit}
-        >
-          <FormattedMessage
-            defaultMessage="Assign categories"
-            description="button"
     />
-        </ConfirmButton>
-      </DialogActions>
-    </Dialog>
   );
 };
-AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
+
-export default AssignCategoriesDialog;
+AssignCategoryDialog.displayName = "AssignCategoryDialog";
+export default AssignCategoryDialog;

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -1,185 +1,41 @@
-import Button from "@material-ui/core/Button";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import { makeStyles } from "@material-ui/core/styles";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
-import ResponsiveTable from "@saleor/components/ResponsiveTable";
-import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
 import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
-import Checkbox from "../Checkbox";
+import AssignContainerDialog, {
-import ConfirmButton, {
+  AssignContainerDialogProps
-  ConfirmButtonTransitionState
+} from "../AssignContainerDialog";
-} from "../ConfirmButton/ConfirmButton";
-import FormSpacer from "../FormSpacer";
 
-export interface FormData {
+interface AssignCollectionDialogProps
+  extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
   collections: SearchCollections_search_edges_node[];
-  query: string;
 }
 
-const useStyles = makeStyles(
+const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = ({
-  {
-    avatar: {
-      "&:first-child": {
-        paddingLeft: 0
-      }
-    },
-    checkboxCell: {
-      paddingLeft: 0
-    },
-    overflow: {
-      overflowY: "visible"
-    },
-    wideCell: {
-      width: "100%"
-    }
-  },
-  { name: "AssignCollectionDialog" }
-);
-
-interface AssignCollectionDialogProps {
-  collections: SearchCollections_search_edges_node[];
-  confirmButtonState: ConfirmButtonTransitionState;
-  open: boolean;
-  loading: boolean;
-  onClose: () => void;
-  onFetch: (value: string) => void;
-  onSubmit: (data: SearchCollections_search_edges_node[]) => void;
-}
-
-function handleCollectionAssign(
-  product: SearchCollections_search_edges_node,
-  isSelected: boolean,
-  selectedCollections: SearchCollections_search_edges_node[],
-  setSelectedCollections: (data: SearchCollections_search_edges_node[]) => void
-) {
-  if (isSelected) {
-    setSelectedCollections(
-      selectedCollections.filter(
-        selectedProduct => selectedProduct.id !== product.id
-      )
-    );
-  } else {
-    setSelectedCollections([...selectedCollections, product]);
-  }
-}
-
-const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
-  const {
-    confirmButtonState,
-    open,
-    loading,
   collections,
-    onClose,
+  ...rest
-    onFetch,
+}) => {
-    onSubmit
-  } = props;
-  const classes = useStyles(props);
-
   const intl = useIntl();
-  const [query, onQueryChange] = useSearchQuery(onFetch);
-  const [selectedCollections, setSelectedCollections] = React.useState<
-    SearchCollections_search_edges_node[]
-  >([]);
-
-  const handleSubmit = () => onSubmit(selectedCollections);
 
   return (
-    <Dialog
+    <AssignContainerDialog
-      onClose={onClose}
+      containers={collections}
-      open={open}
+      search={{
-      classes={{ paper: classes.overflow }}
+        label: intl.formatMessage({
-      fullWidth
-      maxWidth="sm"
-    >
-      <DialogTitle>
-        <FormattedMessage
-          defaultMessage="Assign Collection"
-          description="dialog header"
-        />
-      </DialogTitle>
-      <DialogContent className={classes.overflow}>
-        <TextField
-          name="query"
-          value={query}
-          onChange={onQueryChange}
-          label={intl.formatMessage({
           defaultMessage: "Search Collection"
-          })}
+        }),
-          placeholder={intl.formatMessage({
+        placeholder: intl.formatMessage({
           defaultMessage: "Search by collection name, etc..."
-          })}
+        })
-          fullWidth
-          InputProps={{
-            autoComplete: "off",
-            endAdornment: loading && <CircularProgress size={16} />
       }}
-        />
+      title={intl.formatMessage({
-        <FormSpacer />
+        defaultMessage: "Assign Collection",
-        <ResponsiveTable>
+        description: "dialog header"
-          <TableBody>
-            {collections &&
-              collections.map(collection => {
-                const isSelected = !!selectedCollections.find(
-                  selectedCollection => selectedCollection.id === collection.id
-                );
-
-                return (
-                  <TableRow key={collection.id}>
-                    <TableCell
-                      padding="checkbox"
-                      className={classes.checkboxCell}
-                    >
-                      <Checkbox
-                        checked={isSelected}
-                        onChange={() =>
-                          handleCollectionAssign(
-                            collection,
-                            isSelected,
-                            selectedCollections,
-                            setSelectedCollections
-                          )
-                        }
-                      />
-                    </TableCell>
-                    <TableCell className={classes.wideCell}>
-                      {collection.name}
-                    </TableCell>
-                  </TableRow>
-                );
       })}
-          </TableBody>
+      {...rest}
-        </ResponsiveTable>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
-        <ConfirmButton
-          transitionState={confirmButtonState}
-          color="primary"
-          variant="contained"
-          type="submit"
-          onClick={handleSubmit}
-        >
-          <FormattedMessage
-            defaultMessage="Assign collections"
-            description="button"
     />
-        </ConfirmButton>
-      </DialogActions>
-    </Dialog>
   );
 };
+
 AssignCollectionDialog.displayName = "AssignCollectionDialog";
 export default AssignCollectionDialog;

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -0,0 +1,204 @@
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { makeStyles } from "@material-ui/core/styles";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import TextField from "@material-ui/core/TextField";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
+import useSearchQuery from "@saleor/hooks/useSearchQuery";
+import { buttonMessages } from "@saleor/intl";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+import { FetchMoreProps, Node } from "@saleor/types";
+import React from "react";
+import InfiniteScroll from "react-infinite-scroller";
+import { FormattedMessage } from "react-intl";
+
+import Checkbox from "../Checkbox";
+import ConfirmButton, {
+  ConfirmButtonTransitionState
+} from "../ConfirmButton/ConfirmButton";
+import FormSpacer from "../FormSpacer";
+
+export interface FormData {
+  containers: string[];
+  query: string;
+}
+
+const useStyles = makeStyles(
+  {
+    avatar: {
+      "&:first-child": {
+        paddingLeft: 0
+      }
+    },
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    wideCell: {
+      width: "100%"
+    }
+  },
+  { name: "AssignContainerDialog" }
+);
+
+interface Container extends Node {
+  name: string;
+}
+export interface AssignContainerDialogProps extends FetchMoreProps {
+  confirmButtonState: ConfirmButtonTransitionState;
+  containers: Container[];
+  loading: boolean;
+  open: boolean;
+  search: Record<"label" | "placeholder", string>;
+  title: string;
+  onClose: () => void;
+  onFetch: (value: string) => void;
+  onSubmit: (data: string[]) => void;
+}
+
+function handleContainerAssign(
+  containerId: string,
+  isSelected: boolean,
+  selectedContainers: string[],
+  setSelectedContainers: (data: string[]) => void
+) {
+  if (isSelected) {
+    setSelectedContainers(
+      selectedContainers.filter(
+        selectedContainer => selectedContainer !== containerId
+      )
+    );
+  } else {
+    setSelectedContainers([...selectedContainers, containerId]);
+  }
+}
+
+const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
+  const {
+    confirmButtonState,
+    containers,
+    hasMore,
+    loading,
+    open,
+    search,
+    title,
+    onClose,
+    onFetch,
+    onFetchMore,
+    onSubmit
+  } = props;
+  const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle({});
+
+  const [query, onQueryChange] = useSearchQuery(onFetch);
+  const [selectedContainers, setSelectedContainers] = React.useState<string[]>(
+    []
+  );
+  const container = React.useRef<HTMLDivElement>();
+
+  const handleSubmit = () => onSubmit(selectedContainers);
+
+  const containerHeight = container.current?.scrollHeight - 130;
+
+  return (
+    <Dialog
+      onClose={onClose}
+      open={open}
+      classes={{ paper: scrollableDialogClasses.dialog }}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent
+        className={scrollableDialogClasses.content}
+        ref={container}
+      >
+        <TextField
+          name="query"
+          value={query}
+          onChange={onQueryChange}
+          label={search.label}
+          placeholder={search.placeholder}
+          fullWidth
+          InputProps={{
+            autoComplete: "off",
+            endAdornment: loading && <CircularProgress size={16} />
+          }}
+        />
+        <FormSpacer />
+        <div
+          className={scrollableDialogClasses.scrollArea}
+          style={{ height: containerHeight }}
+        >
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={onFetchMore}
+            hasMore={hasMore}
+            useWindow={false}
+            loader={
+              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+                <CircularProgress size={16} />
+              </div>
+            }
+            threshold={10}
+          >
+            <ResponsiveTable>
+              <TableBody>
+                {containers?.map(container => {
+                  const isSelected = !!selectedContainers.find(
+                    selectedContainer => selectedContainer === container.id
+                  );
+
+                  return (
+                    <TableRow key={container.id}>
+                      <TableCell
+                        padding="checkbox"
+                        className={classes.checkboxCell}
+                      >
+                        <Checkbox
+                          checked={isSelected}
+                          onChange={() =>
+                            handleContainerAssign(
+                              container.id,
+                              isSelected,
+                              selectedContainers,
+                              setSelectedContainers
+                            )
+                          }
+                        />
+                      </TableCell>
+                      <TableCell className={classes.wideCell}>
+                        {container.name}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </ResponsiveTable>
+          </InfiniteScroll>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>
+          <FormattedMessage {...buttonMessages.back} />
+        </Button>
+        <ConfirmButton
+          transitionState={confirmButtonState}
+          color="primary"
+          variant="contained"
+          type="submit"
+          onClick={handleSubmit}
+        >
+          <FormattedMessage defaultMessage="Assign" description="button" />
+        </ConfirmButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+AssignContainerDialog.displayName = "AssignContainerDialog";
+export default AssignContainerDialog;

src/components/AssignContainerDialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./AssignContainerDialog";
+export { default } from "./AssignContainerDialog";

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -19,7 +19,10 @@ 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 useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
+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";
@@ -43,18 +46,12 @@ const useStyles = makeStyles(
     },
     colName: {
       paddingLeft: 0
-    },
-    overflow: {
-      overflowY: "visible"
-    },
-    scrollArea: {
-      overflowY: "scroll"
     }
   },
   { name: "AssignProductDialog" }
 );
 
-export interface AssignProductDialogProps {
+export interface AssignProductDialogProps extends FetchMoreProps {
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
   products: SearchProducts_search_edges_node[];
@@ -84,28 +81,34 @@ function handleProductAssign(
 const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   const {
     confirmButtonState,
+    hasMore,
     open,
     loading,
     products,
     onClose,
     onFetch,
+    onFetchMore,
     onSubmit
   } = props;
   const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle({});
 
   const intl = useIntl();
   const [query, onQueryChange] = useSearchQuery(onFetch);
   const [selectedProducts, setSelectedProducts] = React.useState<
     SearchProducts_search_edges_node[]
   >([]);
+  const container = React.useRef<HTMLDivElement>();
 
   const handleSubmit = () => onSubmit(selectedProducts);
 
+  const containerHeight = container.current?.scrollHeight - 130;
+
   return (
     <Dialog
       onClose={onClose}
       open={open}
-      classes={{ paper: classes.overflow }}
+      classes={{ paper: scrollableDialogClasses.dialog }}
       fullWidth
       maxWidth="sm"
     >
@@ -115,7 +118,10 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent>
+      <DialogContent
+        className={scrollableDialogClasses.content}
+        ref={container}
+      >
         <TextField
           name="query"
           value={query}
@@ -134,8 +140,23 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
           }}
         />
         <FormSpacer />
-        <div className={classes.scrollArea}>
+        <div
-          <ResponsiveTable>
+          className={scrollableDialogClasses.scrollArea}
+          style={{ height: containerHeight }}
+        >
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={onFetchMore}
+            hasMore={hasMore}
+            useWindow={false}
+            loader={
+              <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+                <CircularProgress size={16} />
+              </div>
+            }
+            threshold={10}
+          >
+            <ResponsiveTable key="table">
               <TableBody>
                 {products &&
                   products.map(product => {
@@ -173,6 +194,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                   })}
               </TableBody>
             </ResponsiveTable>
+          </InfiniteScroll>
         </div>
       </DialogContent>
       <DialogActions>

src/discounts/views/SaleDetails.tsx

@@ -69,18 +69,21 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ 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({
@@ -327,8 +330,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                             />
                             <AssignProductDialog
                               confirmButtonState={saleCataloguesAddOpts.status}
+                              hasMore={
+                                searchProductsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-product"}
                               onFetch={searchProducts}
+                              onFetchMore={loadMoreProducts}
                               loading={searchProductsOpts.loading}
                               onClose={closeModal}
                               onSubmit={products =>
@@ -361,8 +369,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                   )
                               )}
                               confirmButtonState={saleCataloguesAddOpts.status}
+                              hasMore={
+                                searchCategoriesOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-category"}
                               onFetch={searchCategories}
+                              onFetchMore={loadMoreCategories}
                               loading={searchCategoriesOpts.loading}
                               onClose={closeModal}
                               onSubmit={categories =>
@@ -371,9 +384,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                     ...paginationState,
                                     id,
                                     input: {
-                                      categories: categories.map(
+                                      categories
-                                        product => product.id
-                                      )
                                     }
                                   }
                                 })
@@ -388,8 +399,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                   )
                               )}
                               confirmButtonState={saleCataloguesAddOpts.status}
+                              hasMore={
+                                searchCollectionsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-collection"}
                               onFetch={searchCollections}
+                              onFetchMore={loadMoreCollections}
                               loading={searchCollectionsOpts.loading}
                               onClose={closeModal}
                               onSubmit={collections =>
@@ -398,9 +414,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                                     ...paginationState,
                                     id,
                                     input: {
-                                      collections: collections.map(
+                                      collections
-                                        product => product.id
-                                      )
                                     }
                                   }
                                 })

src/discounts/views/VoucherDetails.tsx

@@ -71,18 +71,21 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   );
   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({
@@ -407,8 +410,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               confirmButtonState={
                                 voucherCataloguesAddOpts.status
                               }
+                              hasMore={
+                                searchCategoriesOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-category"}
                               onFetch={searchCategories}
+                              onFetchMore={loadMoreCategories}
                               loading={searchCategoriesOpts.loading}
                               onClose={closeModal}
                               onSubmit={categories =>
@@ -417,9 +425,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                     ...paginationState,
                                     id,
                                     input: {
-                                      categories: categories.map(
+                                      categories
-                                        product => product.id
-                                      )
                                     }
                                   }
                                 })
@@ -436,8 +442,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               confirmButtonState={
                                 voucherCataloguesAddOpts.status
                               }
+                              hasMore={
+                                searchCollectionsOpts.data?.search.pageInfo
+                                  .hasNextPage
+                              }
                               open={params.action === "assign-collection"}
                               onFetch={searchCollections}
+                              onFetchMore={loadMoreCollections}
                               loading={searchCollectionsOpts.loading}
                               onClose={closeModal}
                               onSubmit={collections =>
@@ -446,9 +457,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                                     ...paginationState,
                                     id,
                                     input: {
-                                      collections: collections.map(
+                                      collections
-                                        product => product.id
-                                      )
                                     }
                                   }
                                 })
@@ -481,8 +490,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                               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 =>

src/storybook/stories/components/AssignProductDialog.tsx

@@ -2,6 +2,7 @@ import placeholderImage from "@assets/images/placeholder60x60.png";
 import AssignProductDialog, {
   AssignProductDialogProps
 } from "@saleor/components/AssignProductDialog";
+import { fetchMoreProps } from "@saleor/fixtures";
 import { products } from "@saleor/products/fixtures";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -9,6 +10,7 @@ import React from "react";
 import Decorator from "../../Decorator";
 
 const props: AssignProductDialogProps = {
+  ...fetchMoreProps,
   confirmButtonState: "default",
   loading: false,
   onClose: () => undefined,

src/styles/useScrollableDialogStyle.ts

@@ -0,0 +1,28 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useScrollableDialogStyle = makeStyles(
+  theme => ({
+    content: {
+      overflowY: "hidden"
+    },
+    dialog: {
+      height: "calc(100% - 64px)",
+      maxHeight: 700
+    },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: theme.spacing(3),
+      justifyContent: "center",
+      marginTop: theme.spacing(3)
+    },
+    scrollArea: {
+      overflowY: "scroll"
+    }
+  }),
+  {
+    name: "ScrollableDialog"
+  }
+);
+
+export default useScrollableDialogStyle;