feat: Use pagination hook on list view

webapp/src/components/AssetBrowse/AssetBrowse.tsx

@@ -9,8 +9,7 @@ import { Sections } from '../../modules/vendor/routing/types'
 import { BrowseOptions } from '../../modules/routing/types'
 import {
   getPersistedIsMapProperty,
-  isAccountView,
-  isListsSection
+  isAccountView
 } from '../../modules/ui/utils'
 import { locations } from '../../modules/routing/locations'
 import { AccountSidebar } from '../AccountSidebar'
@@ -154,7 +153,7 @@ const AssetBrowse = (props: Props) => {
     visitedLocations
   ])
 
-  const left = isListsSection(section) ? null : (
+  const left = (
     <>
       <NotMobile>
         {isAccountOrCurrentAccount ? (

webapp/src/components/AssetList/AssetList.container.ts

@@ -15,28 +15,25 @@ import {
 } from '../../modules/routing/selectors'
 import { getLoading as getLoadingNFTs } from '../../modules/nft/selectors'
 import { getLoading as getLoadingItems } from '../../modules/item/selectors'
-import { isLoadingFavoritedItems } from '../../modules/favorites/selectors'
 import { FETCH_ITEMS_REQUEST } from '../../modules/item/actions'
 import { AssetType } from '../../modules/asset/types'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './AssetList.types'
 import AssetList from './AssetList'
 
 const mapState = (state: RootState): MapStateProps => {
-  const section = getSection(state)
   const page = getPageNumber(state)
   const assetType = getAssetType(state)
   return {
     vendor: getVendor(state),
     assetType,
     section: getSection(state),
-    assets: getBrowseAssets(state, section, assetType),
+    assets: getBrowseAssets(state, assetType),
     page,
     count: getCount(state),
     search: getSearch(state),
     isLoading:
       assetType === AssetType.ITEM
-        ? isLoadingType(getLoadingItems(state), FETCH_ITEMS_REQUEST) ||
-          isLoadingFavoritedItems(state)
+        ? isLoadingType(getLoadingItems(state), FETCH_ITEMS_REQUEST)
         : isLoadingType(getLoadingNFTs(state), FETCH_NFTS_REQUEST),
     hasFiltersEnabled: hasFiltersEnabled(state),
     visitedLocations: getVisitedLocations(state)

webapp/src/components/AssetTopbar/AssetTopbar.tsx

@@ -20,7 +20,6 @@ import {
 import {
   isAccountView,
   isLandSection,
-  isListsSection,
   persistIsMapProperty
 } from '../../modules/ui/utils'
 import trash from '../../images/trash.png'
@@ -114,7 +113,7 @@ export const AssetTopbar = ({
           [styles.searchMap]: isMap
         })}
       >
-        {!isMap && !isListsSection(section) && (
+        {!isMap && (
           <Field
             className={styles.searchField}
             placeholder={t('nft_filters.search')}
@@ -148,44 +147,40 @@ export const AssetTopbar = ({
       {!isMap && (
         <div className={styles.infoRow}>
           {!isLoading ? (
-            isListsSection(section) && !count ? null : (
-              <div className={styles.countContainer}>
-                <p className={styles.countText}>
-                  {count && isCatalogView(view)
-                    ? t(
+            <div className={styles.countContainer}>
+              <p className={styles.countText}>
+                {count && isCatalogView(view)
+                  ? t(
+                      search
+                        ? 'nft_filters.query_results'
+                        : 'nft_filters.results',
+                      {
+                        count: count.toLocaleString(),
                         search
-                          ? 'nft_filters.query_results'
-                          : 'nft_filters.results',
-                        {
-                          count: count.toLocaleString(),
-                          search
-                        }
-                      )
-                    : getCountText(count, search)}
-                </p>
-              </div>
-            )
-          ) : null}
-          {!isListsSection(section) ? (
-            <div className={styles.rightOptionsContainer}>
-              <Dropdown
-                direction="left"
-                value={sortByValue}
-                options={sortByOptions}
-                onChange={handleOrderByDropdownChange}
-              />
-              {isMobile ? (
-                <i
-                  className={classNames(
-                    styles.openFilters,
-                    styles.openFiltersWrapper,
-                    hasFiltersEnabled && styles.active
-                  )}
-                  onClick={onOpenFiltersModal}
-                />
-              ) : null}
+                      }
+                    )
+                  : getCountText(count, search)}
+              </p>
             </div>
           ) : null}
+          <div className={styles.rightOptionsContainer}>
+            <Dropdown
+              direction="left"
+              value={sortByValue}
+              options={sortByOptions}
+              onChange={handleOrderByDropdownChange}
+            />
+            {isMobile ? (
+              <i
+                className={classNames(
+                  styles.openFilters,
+                  styles.openFiltersWrapper,
+                  hasFiltersEnabled && styles.active
+                )}
+                onClick={onOpenFiltersModal}
+              />
+            ) : null}
+          </div>
         </div>
       )}
       {!isMap && hasFiltersEnabled ? (

webapp/src/components/ListPage/ListPage.container.ts

@@ -10,12 +10,15 @@ import {
 import {
   GET_LIST_REQUEST,
   deleteListStart,
+  fetchFavoritedItemsRequest,
   getListRequest
 } from '../../modules/favorites/actions'
 import { RootState } from '../../modules/reducer'
 import { getWallet, isConnecting } from '../../modules/wallet/selectors'
 import { openModal } from '../../modules/modal/actions'
 import { locations } from '../../modules/routing/locations'
+import { isLoadingFavoritedItems } from '../../modules/favorites/selectors'
+import { getItemsPickedByUserOrCreator } from '../../modules/ui/browse/selectors'
 import {
   MapStateProps,
   MapDispatch,
@@ -32,7 +35,9 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     wallet: getWallet(state),
     listId,
     list: listId ? getList(state, listId) : null,
-    isLoading: isLoadingType(getLoading(state), GET_LIST_REQUEST),
+    isLoadingList: isLoadingType(getLoading(state), GET_LIST_REQUEST),
+    isLoadingItems: isLoadingFavoritedItems(state),
+    items: getItemsPickedByUserOrCreator(state),
     error: getError(state),
     isListV1Enabled: getIsListsV1Enabled(state)
   }
@@ -43,7 +48,9 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onFetchList: listId => dispatch(getListRequest(listId)),
   onEditList: list => dispatch(openModal('CreateOrEditListModal', { list })),
   onShareList: list => dispatch(openModal('ShareListModal', { list })),
-  onDeleteList: list => dispatch(deleteListStart(list))
+  onDeleteList: list => dispatch(deleteListStart(list)),
+  onFetchFavoritedItems: (options: any, force?) =>
+    dispatch(fetchFavoritedItemsRequest(options, force))
 })
 
 export default connect(mapState, mapDispatch)(ListPage)

webapp/src/components/ListPage/ListPage.module.css

@@ -5,7 +5,7 @@
 }
 
 .header:global(.ui.header) {
-  margin: 0 24px;
+  margin: 0;
   display: flex;
   align-items: center;
   column-gap: 19px;
@@ -166,6 +166,7 @@
 
 .assetBrowseContainer {
   flex-grow: 1;
+  margin-top: 30px;
 }
 
 .empty {
@@ -193,6 +194,31 @@
   margin-top: 20px;
 }
 
+.count {
+  font-size: 17px;
+  margin-bottom: 20px
+}
+
+.emptyState {
+  flex-grow: 1;
+}
+
+.cardsGroup {
+  display: grid;
+  grid-gap: 12px;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, 290px);
+}
+
+.overlay {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background: var(--background);
+  opacity: 0.6;
+  z-index: 3;
+}
+
 @media (max-width: 768px) {
   .header:global(.ui.header) {
     margin-left: 16px;
@@ -206,6 +232,10 @@
   }
 }
 
-.emptyState {
-  flex-grow: 1;
+@media (min-width: 768px) {
+  .transparentOverlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
 }

webapp/src/components/ListPage/ListPage.tsx

@@ -15,14 +15,16 @@ import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { formatDistanceToNow } from '../../lib/date'
 import { locations } from '../../modules/routing/locations'
 import { Section } from '../../modules/vendor/decentraland'
-import { VendorName } from '../../modules/vendor'
-import { View } from '../../modules/ui/types'
 import { DEFAULT_FAVORITES_LIST_ID } from '../../modules/vendor/decentraland/favorites'
 import * as events from '../../utils/events'
+import { usePagination } from '../../lib/pagination'
+import { Sections } from '../../modules/routing/types'
+import { MAX_PAGE, PAGE_SIZE } from '../../modules/vendor/api'
 import { NavigationTab } from '../Navigation/Navigation.types'
-import { AssetBrowse } from '../AssetBrowse'
 import { PageLayout } from '../PageLayout'
 import { LinkedProfile } from '../LinkedProfile'
+import { InfiniteScroll } from '../InfiniteScroll'
+import { AssetCard } from '../AssetCard'
 import { PrivateTag } from '../PrivateTag'
 import { Props } from './ListPage.types'
 import styles from './ListPage.module.css'
@@ -45,24 +47,29 @@ import {
 
 const LIST_NOT_FOUND = 'list was not found'
 
-const ListPage = (props: Props) => {
-  const {
-    isConnecting,
-    wallet,
-    listId,
-    list,
-    isLoading,
-    error,
-    onFetchList,
-    onBack,
-    onEditList,
-    onDeleteList,
-    onShareList,
-    isListV1Enabled
-  } = props
+const ListPage = ({
+  isConnecting,
+  wallet,
+  listId,
+  items,
+  list,
+  isLoadingList,
+  isLoadingItems,
+  error,
+  onFetchList,
+  onBack,
+  onEditList,
+  onDeleteList,
+  onShareList,
+  onFetchFavoritedItems,
+  isListV1Enabled
+}: Props) => {
   const hasFetchedOnce = useRef(false)
   const { pathname, search } = useLocation()
+  const { page, first, offset, goToNextPage } = usePagination()
+  const isLoading = isLoadingList || isLoadingItems
 
+  // Fetching list
   const fetchList = useCallback(() => {
     if (listId && !isLoading && !hasFetchedOnce.current) {
       onFetchList(listId)
@@ -142,16 +149,42 @@ const ListPage = (props: Props) => {
     if (!isConnecting) fetchList()
   }, [fetchList, isConnecting])
 
+  useEffect(() => {
+    if (list) {
+      onFetchFavoritedItems({
+        view: Section.LISTS,
+        section: Sections.decentraland.LISTS,
+        page,
+        filters: { first, skip: offset }
+      })
+    }
+  }, [first, list, offset, onFetchFavoritedItems, page])
+
+  const hasMorePages =
+    Boolean(list) &&
+    (items.length !== list?.itemsCount || list?.itemsCount === PAGE_SIZE) &&
+    page <= MAX_PAGE
+
   if (!isConnecting && !wallet && list?.isPrivate) {
     return <Redirect to={locations.signIn(`${pathname}${search}`)} />
   }
 
   return (
     <PageLayout activeTab={isPublicView ? undefined : NavigationTab.MY_LISTS}>
       {isLoading || isConnecting ? (
-        <Loader active size="massive" data-testid={LOADER_TEST_ID} />
+        <>
+          <div className={styles.overlay} />
+          <div className={styles.transparentOverlay}>
+            <Loader
+              active
+              className={styles.loader}
+              data-testid={LOADER_TEST_ID}
+              size="massive"
+            />
+          </div>
+        </>
       ) : null}
-      {!isLoading && !isConnecting && listId && list && !error ? (
+      {!isConnecting && listId && list && !error ? (
         <div data-testid={LIST_CONTAINER_TEST_ID} className={styles.container}>
           <Header className={styles.header} size="large">
             {(!isPublicView || list.id === DEFAULT_FAVORITES_LIST_ID) &&
@@ -257,12 +290,28 @@ const ListPage = (props: Props) => {
             data-testid={ASSET_BROWSE_TEST_ID}
             className={styles.assetBrowseContainer}
           >
+            <div className={styles.count}>
+              {list.itemsCount
+                ? t('lists_page.subtitle', { count: list.itemsCount })
+                : null}
+            </div>
             {list.itemsCount ? (
-              <AssetBrowse
-                view={View.LISTS}
-                section={Section.LISTS}
-                vendor={VendorName.DECENTRALAND}
-              />
+              <>
+                <div className={styles.cardsGroup}>
+                  {items.map((item, index) => (
+                    <AssetCard key={item.id + '-' + index} asset={item} />
+                  ))}
+                </div>
+                <InfiniteScroll
+                  page={page}
+                  hasMorePages={hasMorePages}
+                  onLoadMore={goToNextPage}
+                  isLoading={isLoading}
+                  maxScrollPages={3}
+                >
+                  {null}
+                </InfiniteScroll>
+              </>
             ) : (
               <div className={styles.empty} data-testid={EMPTY_LIST_TEST_ID}>
                 <div className={styles.emptyLogo}></div>