From f04929ed72e867c11ca18a06e9bf2c0837e4da07 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:12:05 -0300
Subject: [PATCH] feat: Display collections by type (#3162)

* feat: Display collections by type

* fix: Correctly show collection items

* fix: Add the collections icon

* fix: Tests
---
 package-lock.json                             |  47 ++++
 package.json                                  |   1 +
 .../CollectionsPage/CollectionsPage.css       |  16 +-
 .../CollectionsPage/CollectionsPage.tsx       | 205 ++++++++-------
 .../CollectionsPage/CollectionsPage.types.ts  |   5 +-
 .../WorldPermissionsAddUserFrom.spec.tsx      |   1 -
 src/icons/collections.svg                     |   6 +
 src/lib/pagination.spec.ts                    | 248 ++++++++++++++++++
 src/lib/pagination.ts                         | 106 ++++++++
 src/modules/translation/languages/en.json     |   1 +
 src/modules/translation/languages/es.json     |   1 +
 src/modules/translation/languages/zh.json     |   1 +
 12 files changed, 544 insertions(+), 94 deletions(-)
 create mode 100644 src/icons/collections.svg
 create mode 100644 src/lib/pagination.spec.ts
 create mode 100644 src/lib/pagination.ts

diff --git a/package-lock.json b/package-lock.json
index e2e1c1a57..941bb7491 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -88,6 +88,7 @@
         "@swc/core": "^1.3.105",
         "@swc/jest": "^0.2.31",
         "@testing-library/react": "^12.1.5",
+        "@testing-library/react-hooks": "^8.0.1",
         "@types/blob-to-buffer": "^1.2.0",
         "@types/file-saver": "^2.0.0",
         "@types/interface-datastore": "^1.0.0",
@@ -6789,6 +6790,36 @@
         "react-dom": "<18.0.0"
       }
     },
+    "node_modules/@testing-library/react-hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+      "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-test-renderer": "^16.9.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-test-renderer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
@@ -20837,6 +20868,22 @@
         "react": ">= 16.8"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
diff --git a/package.json b/package.json
index 9d658baf2..b1ce6445f 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "@swc/core": "^1.3.105",
     "@swc/jest": "^0.2.31",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/blob-to-buffer": "^1.2.0",
     "@types/file-saver": "^2.0.0",
     "@types/interface-datastore": "^1.0.0",
diff --git a/src/components/CollectionsPage/CollectionsPage.css b/src/components/CollectionsPage/CollectionsPage.css
index e67a0cf46..a95f50285 100644
--- a/src/components/CollectionsPage/CollectionsPage.css
+++ b/src/components/CollectionsPage/CollectionsPage.css
@@ -180,8 +180,9 @@
 
 .CollectionsPage .collections-main-actions {
   display: flex;
+  justify-content: end;
   gap: 20px;
-  margin-top: 20px;
+  min-height: 74px;
 }
 
 .CollectionsPage .collections-main-actions > :first-child {
@@ -201,3 +202,16 @@
   justify-self: end;
   flex: none;
 }
+
+.CollectionsPage .collections-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 20px;
+}
+
+.CollectionsPage .action-tabs-container {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+}
diff --git a/src/components/CollectionsPage/CollectionsPage.tsx b/src/components/CollectionsPage/CollectionsPage.tsx
index a15dc239a..92a2db872 100644
--- a/src/components/CollectionsPage/CollectionsPage.tsx
+++ b/src/components/CollectionsPage/CollectionsPage.tsx
@@ -28,6 +28,9 @@ import EventBanner from 'components/EventBanner'
 import { locations } from 'routing/locations'
 import { CollectionPageView } from 'modules/ui/collection/types'
 import { CurationSortOptions } from 'modules/curations/types'
+import { usePagination } from 'lib/pagination'
+import { CollectionType } from 'modules/collection/types'
+import collectionsIcon from 'icons/collections.svg'
 import ItemCard from './ItemCard'
 import ItemRow from './ItemRow'
 import CollectionCard from './CollectionCard'
@@ -59,21 +62,39 @@ export default function CollectionsPage(props: Props) {
     onSetView
   } = props
 
-  const [currentTab, setCurrentTab] = useState<TABS>(TABS.COLLECTIONS)
-  const [sort, setSort] = useState<CurationSortOptions>(CurationSortOptions.CREATED_AT_DESC)
-  const [page, setPage] = useState<number>(1)
-  const [search, setSearch] = useState<string>('')
-  const timeout = useRef<NodeJS.Timeout | null>(null)
   const history = useHistory()
+  const { page, pages, goToPage, filters, changeFilter, sortBy, changeSorting } = usePagination<'search' | 'section', CurationSortOptions>({
+    pageSize: PAGE_SIZE,
+    count: collectionsPaginationData?.total
+  })
+  const currentTab = filters.section ?? TABS.STANDARD_COLLECTIONS
+  const isViewingCollections = currentTab === TABS.STANDARD_COLLECTIONS || currentTab === TABS.THIRD_PARTY_COLLECTIONS
+  const [search, setSearch] = useState<string>(filters.search ?? '')
+  const timeout = useRef<NodeJS.Timeout | null>(null)
+
+  // Fetch user orphan items
+  useEffect(() => {
+    if (hasUserOrphanItems === undefined && address) {
+      onFetchOrphanItem(address)
+    }
+  }, [address, hasUserOrphanItems])
 
+  // Fetch collections or orphan items
   useEffect(() => {
     if (address) {
-      onFetchCollections(address, { page: 1, limit: PAGE_SIZE, sort })
-      if (hasUserOrphanItems === undefined) {
-        onFetchOrphanItem(address)
+      if (currentTab === TABS.ITEMS) {
+        onFetchOrphanItems(address, { page, limit: PAGE_SIZE })
+      } else {
+        onFetchCollections(address, {
+          page,
+          limit: PAGE_SIZE,
+          q: filters.search ?? undefined,
+          type: currentTab === TABS.STANDARD_COLLECTIONS ? CollectionType.STANDARD : CollectionType.THIRD_PARTY,
+          sort: sortBy
+        })
       }
     }
-  }, [address, sort])
+  }, [address, page, currentTab, filters.search, sortBy, onFetchOrphanItems, onFetchCollections])
 
   const handleNewThirdPartyCollection = useCallback(() => {
     onOpenModal('CreateThirdPartyCollectionModal')
@@ -87,17 +108,20 @@ export default function CollectionsPage(props: Props) {
     }
   }, [onOpenModal, isLinkedWearablesPaymentsEnabled])
 
-  const handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-    setSearch(data.value)
-    if (timeout.current) {
-      clearTimeout(timeout.current)
-      timeout.current = null
-    }
+  const handleSearchChange = useCallback(
+    (_evt: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+      setSearch(data.value)
+      if (timeout.current) {
+        clearTimeout(timeout.current)
+        timeout.current = null
+      }
 
-    timeout.current = setTimeout(() => {
-      onFetchCollections(address, { page: 1, limit: PAGE_SIZE, q: data.value })
-    }, 500)
-  }
+      timeout.current = setTimeout(() => {
+        changeFilter('search', data.value)
+      }, 500)
+    },
+    [changeFilter]
+  )
 
   const handleOpenEditor = useCallback(() => {
     history.push(locations.itemEditor())
@@ -106,30 +130,24 @@ export default function CollectionsPage(props: Props) {
   const handleSortChange = useCallback(
     (_event: React.SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
       const sort = value as CurationSortOptions
-      setSort(sort)
-      setPage(1)
-      onFetchCollections(address, { page: 1, limit: PAGE_SIZE, sort })
+      changeSorting(sort)
     },
-    [address]
+    [changeSorting]
   )
 
   const handleTabChange = useCallback(
     (tab: TABS) => {
-      setCurrentTab(tab)
-      setPage(1)
-      const fetchFn = tab === TABS.ITEMS ? onFetchOrphanItems : onFetchCollections
-      const params = tab === TABS.ITEMS ? { page: 1, limit: PAGE_SIZE } : { page: 1, limit: PAGE_SIZE, sort }
-      if (address) {
-        fetchFn(address, params)
+      if (currentTab !== tab) {
+        changeFilter('section', tab)
       }
     },
-    [address]
+    [address, currentTab, changeFilter]
   )
 
   const renderGrid = useCallback(() => {
     return (
       <Card.Group>
-        {currentTab === TABS.COLLECTIONS ? (
+        {isViewingCollections ? (
           collections.map((collection, index) => <CollectionCard key={index} collection={collection} />)
         ) : isLoadingItems ? (
           <Loader size="large" active />
@@ -138,10 +156,10 @@ export default function CollectionsPage(props: Props) {
         )}
       </Card.Group>
     )
-  }, [items, collections, isLoadingItems, currentTab])
+  }, [items, collections, isLoadingItems, isViewingCollections, currentTab])
 
   const renderList = useCallback(() => {
-    if (currentTab === TABS.COLLECTIONS) {
+    if (isViewingCollections) {
       return (
         <Section>
           <Table basic="very">
@@ -183,43 +201,32 @@ export default function CollectionsPage(props: Props) {
         </Table>
       </Section>
     )
-  }, [currentTab, items, collections])
-
-  const fetchCollections = useCallback(() => {
-    onFetchCollections(address, { page, limit: PAGE_SIZE, sort })
-  }, [onFetchCollections, page, address, sort])
-
-  const fetchItems = useCallback(() => {
-    if (address) {
-      onFetchOrphanItems(address, { page, limit: PAGE_SIZE })
-    }
-  }, [onFetchOrphanItems, address, page])
+  }, [items, collections, isViewingCollections])
 
   const handlePageChange = useCallback(
     (_event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, props: PaginationProps) => {
-      setPage(+props.activePage!)
-      if (currentTab === TABS.COLLECTIONS) {
-        fetchCollections()
-      } else {
-        fetchItems()
+      if (page !== props.activePage) {
+        goToPage(Number(props.activePage))
       }
     },
-    [currentTab, fetchCollections, fetchItems]
+    [page, goToPage]
   )
 
   const renderMainActions = useCallback(() => {
     return (
       <div className="collections-main-actions">
-        <Field
-          placeholder={t('itemdrawer.search_items')}
-          className="collections-search-field"
-          input={{ icon: 'search' }}
-          onChange={handleSearchChange}
-          icon={<UIIcon name="search" className="searchIcon" />}
-          iconPosition="left"
-          value={search}
-          isClearable
-        />
+        {currentTab !== TABS.ITEMS && (
+          <Field
+            placeholder={t('itemdrawer.search_items')}
+            className="collections-search-field"
+            input={{ icon: 'search' }}
+            onChange={handleSearchChange}
+            icon={<UIIcon name="search" className="searchIcon" />}
+            iconPosition="left"
+            value={search}
+            isClearable
+          />
+        )}
         <Row className="actions" grow={false}>
           {isThirdPartyManager && !isLinkedWearablesPaymentsEnabled && (
             <Button className="action-button" size="small" basic onClick={handleNewThirdPartyCollection}>
@@ -242,22 +249,23 @@ export default function CollectionsPage(props: Props) {
     return (
       <Column align="right">
         <Row className="actions">
-          {currentTab === TABS.COLLECTIONS && (
-            <Dropdown
-              direction="left"
-              value={sort}
-              options={[
-                { value: CurationSortOptions.MOST_RELEVANT, text: t('curation_page.order.most_relevant') },
-                { value: CurationSortOptions.CREATED_AT_DESC, text: t('global.order.newest') },
-                { value: CurationSortOptions.CREATED_AT_ASC, text: t('global.order.oldest') },
-                { value: CurationSortOptions.UPDATED_AT_DESC, text: t('global.order.updated_at_desc') },
-                { value: CurationSortOptions.UPDATED_AT_ASC, text: t('global.order.updated_at_asc') },
-                { value: CurationSortOptions.NAME_DESC, text: t('global.order.name_desc') },
-                { value: CurationSortOptions.NAME_ASC, text: t('global.order.name_asc') }
-              ]}
-              onChange={handleSortChange}
-            />
-          )}
+          {currentTab === TABS.STANDARD_COLLECTIONS ||
+            (TABS.THIRD_PARTY_COLLECTIONS && (
+              <Dropdown
+                direction="left"
+                value={sortBy}
+                options={[
+                  { value: CurationSortOptions.MOST_RELEVANT, text: t('curation_page.order.most_relevant') },
+                  { value: CurationSortOptions.CREATED_AT_DESC, text: t('global.order.newest') },
+                  { value: CurationSortOptions.CREATED_AT_ASC, text: t('global.order.oldest') },
+                  { value: CurationSortOptions.UPDATED_AT_DESC, text: t('global.order.updated_at_desc') },
+                  { value: CurationSortOptions.UPDATED_AT_ASC, text: t('global.order.updated_at_asc') },
+                  { value: CurationSortOptions.NAME_DESC, text: t('global.order.name_desc') },
+                  { value: CurationSortOptions.NAME_ASC, text: t('global.order.name_asc') }
+                ]}
+                onChange={handleSortChange}
+              />
+            ))}
           <Chip
             className="grid"
             icon="grid"
@@ -273,13 +281,14 @@ export default function CollectionsPage(props: Props) {
         </Row>
       </Column>
     )
-  }, [view, onSetView, sort, handleSortChange])
+  }, [view, onSetView, sortBy, handleSortChange])
 
   const renderPage = useCallback(() => {
     const totalCollections = collectionsPaginationData?.total
     const totalItems = itemsPaginationData?.total
-    const count = currentTab === TABS.COLLECTIONS ? totalCollections : totalItems
-    const totalPages = currentTab === TABS.COLLECTIONS ? collectionsPaginationData?.totalPages : itemsPaginationData?.totalPages
+    const count = currentTab === TABS.STANDARD_COLLECTIONS || currentTab === TABS.THIRD_PARTY_COLLECTIONS ? totalCollections : totalItems
+    const totalPages =
+      currentTab === TABS.STANDARD_COLLECTIONS || currentTab === TABS.THIRD_PARTY_COLLECTIONS ? pages : itemsPaginationData?.totalPages
 
     if (isLoadingOrphanItem) {
       return <Loader active size="large" />
@@ -290,21 +299,36 @@ export default function CollectionsPage(props: Props) {
         <EventBanner />
         <div className="filters">
           <Container>
-            {hasUserOrphanItems && (
-              // TODO: Remove tabs when there are no users with orphan items
-              <Tabs isFullscreen>
-                <Tabs.Tab active={currentTab === TABS.COLLECTIONS} onClick={() => handleTabChange(TABS.COLLECTIONS)}>
-                  {t('collections_page.collections')}
-                </Tabs.Tab>
-                <Tabs.Tab active={currentTab !== TABS.COLLECTIONS} onClick={() => handleTabChange(TABS.ITEMS)}>
-                  {t('collections_page.single_items')}
-                </Tabs.Tab>
-              </Tabs>
+            {(hasUserOrphanItems || isThirdPartyManager) && (
+              <div className="action-tabs-container">
+                <img src={collectionsIcon} className="collections-icon" />
+                <Tabs isFullscreen>
+                  <Tabs.Tab active={currentTab === TABS.STANDARD_COLLECTIONS} onClick={() => handleTabChange(TABS.STANDARD_COLLECTIONS)}>
+                    {t('collections_page.collections')}
+                  </Tabs.Tab>
+                  <Tabs.Tab
+                    active={currentTab === TABS.THIRD_PARTY_COLLECTIONS}
+                    onClick={() => handleTabChange(TABS.THIRD_PARTY_COLLECTIONS)}
+                  >
+                    {t('collections_page.third_party_collections')}
+                  </Tabs.Tab>
+                  {hasUserOrphanItems && (
+                    // TODO: Remove tabs when there are no users with orphan items
+                    <Tabs.Tab active={currentTab === TABS.ITEMS} onClick={() => handleTabChange(TABS.ITEMS)}>
+                      {t('collections_page.single_items')}
+                    </Tabs.Tab>
+                  )}
+                </Tabs>
+              </div>
             )}
             {renderMainActions()}
             <Row height={30}>
               <Column>
-                <Row>{!isLoadingItems && !!count && count > 0 && <Header sub>{t('collections_page.results', { count })}</Header>}</Row>
+                <Row>
+                  {!isLoadingItems && !isLoadingCollections && !!count && count > 0 && (
+                    <Header sub>{t('collections_page.results', { count })}</Header>
+                  )}
+                </Row>
               </Column>
               {renderViewActions()}
             </Row>
@@ -344,6 +368,7 @@ export default function CollectionsPage(props: Props) {
     )
   }, [
     page,
+    pages,
     collectionsPaginationData,
     itemsPaginationData,
     view,
diff --git a/src/components/CollectionsPage/CollectionsPage.types.ts b/src/components/CollectionsPage/CollectionsPage.types.ts
index ff54e8e22..93c5a18a1 100644
--- a/src/components/CollectionsPage/CollectionsPage.types.ts
+++ b/src/components/CollectionsPage/CollectionsPage.types.ts
@@ -10,8 +10,9 @@ import { CollectionPaginationData } from 'modules/collection/reducer'
 import { ItemPaginationData } from 'modules/item/reducer'
 
 export enum TABS {
-  COLLECTIONS,
-  ITEMS
+  STANDARD_COLLECTIONS = 'standard_collections',
+  THIRD_PARTY_COLLECTIONS = 'third_party_collections',
+  ITEMS = 'orphan_items'
 }
 
 export type Props = {
diff --git a/src/components/Modals/WorldPermissionsModal/ModelTabs/Layouts/WorldPermissionsAddUserForm/WorldPermissionsAddUserFrom.spec.tsx b/src/components/Modals/WorldPermissionsModal/ModelTabs/Layouts/WorldPermissionsAddUserForm/WorldPermissionsAddUserFrom.spec.tsx
index b22d105b4..96992d017 100644
--- a/src/components/Modals/WorldPermissionsModal/ModelTabs/Layouts/WorldPermissionsAddUserForm/WorldPermissionsAddUserFrom.spec.tsx
+++ b/src/components/Modals/WorldPermissionsModal/ModelTabs/Layouts/WorldPermissionsAddUserForm/WorldPermissionsAddUserFrom.spec.tsx
@@ -28,7 +28,6 @@ describe("when rendering the Worlds Permissions Add User Form it's loading", ()
   it('should not render the description', () => {
     const { queryByTestId } = renderWorldPermissionsAddUserForm({ isLoading: true })
     expect(queryByTestId(WORLD_PERMISSIONS_ADD_USER_FORM_SHOW_FORM_BUTTON_DATA_TEST_ID)).toBeInTheDocument()
-    console.log(queryByTestId(WORLD_PERMISSIONS_ADD_USER_FORM_SHOW_FORM_BUTTON_DATA_TEST_ID))
     expect(queryByTestId(WORLD_PERMISSIONS_ADD_USER_FORM_SHOW_FORM_BUTTON_DATA_TEST_ID)).toHaveClass('loading')
   })
 })
diff --git a/src/icons/collections.svg b/src/icons/collections.svg
new file mode 100644
index 000000000..9260d6e45
--- /dev/null
+++ b/src/icons/collections.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 18H28V28H18V18Z" fill="#A09BA8"/>
+<path d="M4 4H14V14H4V4Z" fill="#A09BA8"/>
+<path d="M18 4H28V14H18V4Z" fill="#A09BA8"/>
+<path d="M4 18H14V28H4V18Z" fill="#A09BA8"/>
+</svg>
diff --git a/src/lib/pagination.spec.ts b/src/lib/pagination.spec.ts
new file mode 100644
index 000000000..953f01c1b
--- /dev/null
+++ b/src/lib/pagination.spec.ts
@@ -0,0 +1,248 @@
+import { useHistory, useLocation } from 'react-router-dom'
+import { renderHook, act } from '@testing-library/react-hooks'
+import { PAGE_SIZE } from './pagination'
+import { UsePaginationResult, usePagination } from './pagination'
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+  useLocation: jest.fn()
+}))
+
+let historyPushMock: jest.Mock
+let useLocationMock: { search: string; pathname: string }
+
+beforeEach(() => {
+  historyPushMock = jest.fn()
+  useLocationMock = {
+    search: '',
+    pathname: '/v1/lists'
+  }
+  ;(useHistory as jest.Mock).mockReturnValue({ push: historyPushMock })
+  ;(useLocation as jest.Mock).mockReturnValue(useLocationMock)
+})
+
+describe('when getting the pagination hook', () => {
+  let renderedHook: ReturnType<typeof renderHook>
+  let currentResult: UsePaginationResult<string, string>
+
+  describe('and the page size hook prop is not set', () => {
+    describe('and there\'s no "first" parameter', () => {
+      beforeEach(() => {
+        renderedHook = renderHook(() => usePagination())
+        currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      })
+
+      it('should return the default page size in the "first" property', () => {
+        expect(currentResult.first).toEqual(PAGE_SIZE)
+      })
+    })
+
+    describe('and there\'s a "first" parameter', () => {
+      beforeEach(() => {
+        useLocationMock.search = 'first=10'
+        renderedHook = renderHook(() => usePagination())
+        currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      })
+
+      it('should return the value of the "first" parameter in the "first" property', () => {
+        expect(currentResult.first).toEqual(10)
+      })
+    })
+  })
+
+  describe('and the page size is set', () => {
+    let pageSize: number
+    beforeEach(() => {
+      pageSize = 10
+    })
+
+    describe('and there\'s no "first" parameter', () => {
+      beforeEach(() => {
+        renderedHook = renderHook(() => usePagination({ pageSize }))
+        currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      })
+
+      it('should return the page size as the "first" property', () => {
+        expect(currentResult.first).toEqual(pageSize)
+      })
+    })
+
+    describe('and there\'s a "first" parameter', () => {
+      beforeEach(() => {
+        useLocationMock.search = 'first=10'
+        renderedHook = renderHook(() => usePagination())
+        currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      })
+
+      it('should return the value of the "first" parameter in the "first" property', () => {
+        expect(currentResult.first).toEqual(10)
+      })
+    })
+  })
+
+  describe('and there are no filters', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'page=1&first=10&offset=0&sortBy=createdAt'
+    })
+
+    it('should return an empty object for the filters', () => {
+      expect(currentResult.filters).toEqual({})
+    })
+  })
+
+  describe('and there are some filters', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'page=1&first=10&offset=0&sortBy=createdAt&filter1=value1&filter2=value2'
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    it('should return the filters', () => {
+      expect(currentResult.filters).toEqual({
+        filter1: 'value1',
+        filter2: 'value2'
+      })
+    })
+  })
+
+  describe('and the sorting parameter is set', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'sortBy=createdAt'
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    it('should return sortBy with the value of the parameter', () => {
+      expect(currentResult.sortBy).toEqual('createdAt')
+    })
+  })
+
+  describe('and the sorting parameter is not set', () => {
+    beforeEach(() => {
+      useLocationMock.search = ''
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    it('should return sortBy as undefined', () => {
+      expect(currentResult.sortBy).toBeUndefined()
+    })
+  })
+
+  describe('and using the goToNextPage function', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'filter=value&sortBy=createdAt'
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      act(() => {
+        currentResult.goToNextPage()
+      })
+    })
+
+    it('should push the next page into the history with the current parameters', () => {
+      expect(historyPushMock).toHaveBeenCalledWith('/v1/lists?filter=value&sortBy=createdAt&page=2')
+    })
+  })
+
+  describe('and using the goToPage function', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'filter=value&sortBy=createdAt'
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      act(() => {
+        currentResult.goToPage(4)
+      })
+    })
+
+    it('should push the desired page into the history with the current parameters', () => {
+      expect(historyPushMock).toHaveBeenCalledWith('/v1/lists?filter=value&sortBy=createdAt&page=4')
+    })
+  })
+
+  describe('and using the changeSorting function', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'filter=value&sortBy=createdAt'
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+      act(() => {
+        currentResult.changeSorting('someSortProperty')
+      })
+    })
+
+    it('should push the first page into the history with the changed sorting parameter and the current filters', () => {
+      expect(historyPushMock).toHaveBeenCalledWith('/v1/lists?filter=value&sortBy=someSortProperty&page=1')
+    })
+  })
+
+  describe('and using the changeFilter function', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'filter=value&anotherFilter=someValue&sortBy=createdAt'
+      renderedHook = renderHook(() => usePagination())
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    describe('and the flag to remove all the old filters is set', () => {
+      beforeEach(() => {
+        act(() => {
+          currentResult.changeFilter('filter', 'newValue', {
+            clearOldFilters: true
+          })
+        })
+      })
+
+      it('should push the first page into the history only with the new filter and the current sorting', () => {
+        expect(historyPushMock).toHaveBeenCalledWith('/v1/lists?page=1&sortBy=createdAt&filter=newValue')
+      })
+    })
+
+    describe('and the flag to remove all the old filters is not set', () => {
+      beforeEach(() => {
+        act(() => {
+          currentResult.changeFilter('filter', 'newValue', {
+            clearOldFilters: false
+          })
+        })
+      })
+
+      it('should push the first page into the history with the changed filter and the current sorting', () => {
+        expect(historyPushMock).toHaveBeenCalledWith('/v1/lists?filter=newValue&anotherFilter=someValue&sortBy=createdAt&page=1')
+      })
+    })
+  })
+
+  describe('and the count option is set', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'page=1'
+      renderedHook = renderHook(() => usePagination({ pageSize: 50, count: 101 }))
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    it('should compute the number of pages', () => {
+      expect(currentResult.pages).toEqual(3)
+    })
+  })
+
+  describe("and there's no more pages left", () => {
+    beforeEach(() => {
+      useLocationMock.search = 'page=3'
+      renderedHook = renderHook(() => usePagination({ pageSize: 50, count: 101 }))
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    it('should return hasMorePages as false', () => {
+      expect(currentResult.hasMorePages).toBe(false)
+    })
+  })
+
+  describe('and there are more pages left', () => {
+    beforeEach(() => {
+      useLocationMock.search = 'page=1'
+      renderedHook = renderHook(() => usePagination({ pageSize: 50, count: 101 }))
+      currentResult = renderedHook.result.current as UsePaginationResult<string, string>
+    })
+
+    it('should return hasMorePages as true', () => {
+      expect(currentResult.hasMorePages).toBe(true)
+    })
+  })
+})
diff --git a/src/lib/pagination.ts b/src/lib/pagination.ts
new file mode 100644
index 000000000..2c8d51d1e
--- /dev/null
+++ b/src/lib/pagination.ts
@@ -0,0 +1,106 @@
+import { useCallback, useMemo } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+
+export const PAGE_SIZE = 20
+
+export type UsePaginationResult<T extends string, S extends string> = {
+  page: number
+  pages?: number
+  hasMorePages?: boolean
+  first: number
+  offset: number
+  sortBy?: S
+  filters: Record<T, string | null>
+  goToNextPage: () => void
+  goToPage: (newPage: number) => void
+  changeSorting: (sort: S) => void
+  changeFilter: (filter: T, value: string, options?: { clearOldFilters: boolean }) => void
+}
+
+export type PaginationOptions = {
+  pageSize?: number
+  count?: number
+}
+
+export function usePagination<T extends string = string, S extends string = string>(
+  options?: PaginationOptions
+): UsePaginationResult<T, S> {
+  const { search, pathname } = useLocation()
+  const history = useHistory()
+  const push = history.push.bind(history)
+  const pageSize = useMemo(() => options?.pageSize?.toString() ?? PAGE_SIZE.toString(), [options?.pageSize])
+  const filters: Record<T, string | null> = useMemo(() => {
+    const params = new URLSearchParams(search)
+    params.delete('page')
+    params.delete('first')
+    params.delete('offset')
+    params.delete('sortBy')
+    return Object.fromEntries(params.entries()) as Record<T, string | null>
+  }, [search])
+  const sortBy = (useMemo(() => new URLSearchParams(search).get('sortBy'), [search]) as S) ?? undefined
+
+  const [page, first, offset] = useMemo(() => {
+    const params = new URLSearchParams(search)
+    const page = parseInt(params.get('page') ?? '1')
+    const first = parseInt(params.get('first') ?? pageSize)
+    const offset = (page - 1) * first
+    return [page, first, offset]
+  }, [pageSize, search])
+
+  const goToNextPage = useCallback(() => {
+    const params = new URLSearchParams(search)
+    params.set('page', (page + 1).toString())
+    push(`${pathname}?${params.toString()}`)
+  }, [search, page, push, pathname])
+
+  const goToPage = useCallback(
+    (newPage: number) => {
+      const params = new URLSearchParams(search)
+      params.set('page', newPage.toString())
+      push(`${pathname}?${params.toString()}`)
+    },
+    [search, push, pathname]
+  )
+
+  const changeSorting = useCallback(
+    (sort: S) => {
+      const params = new URLSearchParams(search)
+      // Reset the page when changing the sorting
+      params.set('page', '1')
+      params.set('sortBy', sort)
+      push(`${pathname}?${params.toString()}`)
+    },
+    [pathname, push, search]
+  )
+
+  const changeFilter = useCallback(
+    (filter: string, value: string, options: { clearOldFilters: boolean } = { clearOldFilters: false }) => {
+      const params = new URLSearchParams(options.clearOldFilters ? {} : search)
+      // Reset the page when changing the filter
+      params.set('page', '1')
+      if (options.clearOldFilters && sortBy) {
+        params.set('sortBy', sortBy)
+      }
+      params.set(filter, value)
+      push(`${pathname}?${params.toString()}`)
+    },
+    [pathname, push, search, sortBy]
+  )
+
+  const pages = options?.count ? Math.ceil(options?.count / (options?.pageSize ?? PAGE_SIZE)) : undefined
+  const hasMorePages = pages ? page < pages : undefined
+
+  return {
+    page,
+    pages,
+    hasMorePages,
+    first,
+    offset,
+    sortBy,
+    filters,
+    goToNextPage,
+    goToPage,
+    changeSorting,
+    changeFilter
+  }
+}
diff --git a/src/modules/translation/languages/en.json b/src/modules/translation/languages/en.json
index 46e9a072b..a060f6910 100644
--- a/src/modules/translation/languages/en.json
+++ b/src/modules/translation/languages/en.json
@@ -1507,6 +1507,7 @@
     "type": "Type",
     "items": "Items",
     "collections": "Collections",
+    "third_party_collections": "Linked Wearables",
     "collection": "Collection",
     "single_items": "Single items",
     "empty_description": "You have no collections yet. Create a new collection, and dress the metaverse in style!",
diff --git a/src/modules/translation/languages/es.json b/src/modules/translation/languages/es.json
index 9fb673d68..9a02da12a 100644
--- a/src/modules/translation/languages/es.json
+++ b/src/modules/translation/languages/es.json
@@ -1516,6 +1516,7 @@
     "type": "Tipo",
     "items": "Items",
     "collections": "Colecciones",
+    "third_party_collections": "Colecciones Externas",
     "collection": "Colección",
     "single_items": "Items individuales",
     "empty_description": "Aún no tienes colecciones, comienza creándo una de ellas y entra al metaverso con estilo",
diff --git a/src/modules/translation/languages/zh.json b/src/modules/translation/languages/zh.json
index 2feacde4e..5438554d9 100644
--- a/src/modules/translation/languages/zh.json
+++ b/src/modules/translation/languages/zh.json
@@ -1495,6 +1495,7 @@
     "type": "类型",
     "items": "模型",
     "collections": "收藏品",
+    "third_party_collections": "第三方收藏",
     "collection": "收藏",
     "single_items": "单品",
     "empty_description": "您还没有收藏。创建一个新系列，并以时尚的方式装扮虚拟宇宙！",