fix: worlds section pagination

decentraland · Jan 28, 2025 · 3247cea · 3247cea
1 parent f8194db
commit 3247cea
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 26 deletions.
diff --git a/src/components/WorldListPage/WorldListPage.container.ts b/src/components/WorldListPage/WorldListPage.container.ts
@@ -4,7 +4,7 @@ import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { isConnected } from 'decentraland-dapps/dist/modules/wallet'
 import { RootState } from 'modules/common/types'
 import { getIsWorldContributorEnabled } from 'modules/features/selectors'
-import { FETCH_ENS_LIST_REQUEST, FETCH_EXTERNAL_NAMES_REQUEST, fetchContributableNamesRequest } from 'modules/ens/actions'
+import { FETCH_ENS_LIST_REQUEST, FETCH_EXTERNAL_NAMES_REQUEST, fetchContributableNamesRequest, fetchENSListRequest } from 'modules/ens/actions'
 import {
   getENSByWallet,
   getError as getENSError,
@@ -49,7 +49,8 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
     dispatch(openModal('WorldPermissionsModal', { worldName: name, isCollaboratorsTabShown })),
   onOpenWorldsForENSOwnersAnnouncementModal: () => dispatch(openModal('WorldsForENSOwnersAnnouncementModal')),
   onUnpublishWorld: deploymentId => dispatch(clearDeploymentRequest(deploymentId)),
-  onFetchContributableNames: () => dispatch(fetchContributableNamesRequest())
+  onFetchContributableNames: () => dispatch(fetchContributableNamesRequest()),
+  onFetchENSList: (first, skip) => dispatch(fetchENSListRequest(first, skip))
 })
 
 export default connect(mapState, mapDispatch)(WorldListPage)
diff --git a/src/components/WorldListPage/WorldListPage.tsx b/src/components/WorldListPage/WorldListPage.tsx
@@ -45,7 +45,8 @@ const WorldListPage: React.FC<Props> = props => {
     onOpenWorldsForENSOwnersAnnouncementModal,
     onUnpublishWorld,
     onOpenPermissionsModal,
-    onFetchContributableNames
+    onFetchContributableNames,
+    onFetchENSList
   } = props
   const [sortBy, setSortBy] = useState(SortBy.DESC)
   const [page, setPage] = useState(1)
@@ -58,6 +59,10 @@ const WorldListPage: React.FC<Props> = props => {
     }
   }, [isConnected, isWorldContributorEnabled])
 
+  useEffect(() => {
+    onFetchENSList(PAGE_SIZE, (page - 1) * PAGE_SIZE)
+  }, [onFetchENSList, page])
+
   const handleClaimENS = useCallback(() => {
     if (tab === TabType.DCL) {
       track(PAGE_ACTION_EVENT, { action: 'Click Claim NAME' })
@@ -90,6 +95,10 @@ const WorldListPage: React.FC<Props> = props => {
     [deploymentsByWorlds, onUnpublishWorld]
   )
 
+  const handlePageChange = useCallback((_event: any, props: any) => {
+    setPage(+props.activePage)
+  }, [])
+
   const renderSortDropdown = useCallback(() => {
     return (
       <Dropdown
@@ -107,22 +116,20 @@ const WorldListPage: React.FC<Props> = props => {
   const paginate = useCallback((): ENS[] => {
     const list = tab === TabType.DCL ? ensList : externalNames
 
-    return list
-      .sort((a: ENS, b: ENS) => {
-        switch (sortBy) {
-          case SortBy.ASC: {
-            return a.subdomain.toLowerCase() > b.subdomain.toLowerCase() ? 1 : -1
-          }
-          case SortBy.DESC: {
-            return a.subdomain.toLowerCase() < b.subdomain.toLowerCase() ? 1 : -1
-          }
-          default: {
-            return 0
-          }
+    return list.sort((a: ENS, b: ENS) => {
+      switch (sortBy) {
+        case SortBy.ASC: {
+          return a.subdomain.toLowerCase() > b.subdomain.toLowerCase() ? 1 : -1
         }
-      })
-      .slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
-  }, [ensList, externalNames, page, sortBy, tab])
+        case SortBy.DESC: {
+          return a.subdomain.toLowerCase() < b.subdomain.toLowerCase() ? 1 : -1
+        }
+        default: {
+          return 0
+        }
+      }
+    })
+  }, [ensList, externalNames, sortBy, tab])
 
   const renderWorldStatus = useCallback(
     (ens: ENS) => {
@@ -249,19 +256,24 @@ const WorldListPage: React.FC<Props> = props => {
             </Table>
 
             {totalPages > 1 && (
-              <Pagination
-                firstItem={null}
-                lastItem={null}
-                totalPages={totalPages}
-                activePage={page}
-                onPageChange={(_event, props) => setPage(+props.activePage!)}
-              />
+              <Pagination firstItem={null} lastItem={null} totalPages={totalPages} activePage={page} onPageChange={handlePageChange} />
             )}
           </Section>
         </Container>
       </>
     )
-  }, [tab, ensList, externalNames, handleClaimENS, paginate, renderSortDropdown, renderWorldSize, renderWorldStatus, setPage, ensTotal])
+  }, [
+    tab,
+    ensList,
+    externalNames,
+    handleClaimENS,
+    paginate,
+    renderSortDropdown,
+    renderWorldSize,
+    renderWorldStatus,
+    handlePageChange,
+    ensTotal
+  ])
 
   const renderEmptyPage = useCallback(() => {
     return (

diff --git a/src/components/WorldListPage/WorldListPage.types.ts b/src/components/WorldListPage/WorldListPage.types.ts
@@ -29,6 +29,7 @@ export type Props = {
   getProfiles: (worldName: string) => void
   onUnpublishWorld: typeof clearDeploymentRequest
   onFetchContributableNames: () => void
+  onFetchENSList: (first: number, skip: number) => void
   ensTotal: number
 }
 
@@ -59,5 +60,6 @@ export type MapDispatchProps = Pick<
   | 'onOpenWorldsForENSOwnersAnnouncementModal'
   | 'onUnpublishWorld'
   | 'onFetchContributableNames'
+  | 'onFetchENSList'
 >
 export type MapDispatch = Dispatch