fix: profile proposals pagination (#1384)

* fix: profile proposals pagination * fix: empty state * feat: add isFetching check in view more button
decentraland · Nov 1, 2023 · c3e8589 · c3e8589
1 parent 9b3a1a9
commit c3e8589
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 187 deletions.
diff --git a/src/components/Common/FullWidthButton.css b/src/components/Common/FullWidthButton.css
@@ -12,3 +12,7 @@ a.ui.fluid.primary.button.FullWidthButton {
   align-items: center;
   justify-content: center;
 }
+
+.FullWidthButton__Loader {
+  position: relative;
+}
diff --git a/src/components/Common/FullWidthButton.tsx b/src/components/Common/FullWidthButton.tsx
@@ -1,28 +1,38 @@
 import classNames from 'classnames'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
 
 import './FullWidthButton.css'
 
 interface Props {
-  onClick?: (param?: unknown) => void
+  onClick?: () => void
   children: React.ReactNode
   className?: string
-  link?: string
+  href?: string
   newWindow?: boolean
+  loading?: boolean
 }
 
-const FullWidthButton = ({ onClick, children, className, link, newWindow = false }: Props) => {
+// TODO: FullWidthButton should render Link when href is provided
+const FullWidthButton = ({ onClick, children, className, href, newWindow = false, loading }: Props) => {
   return (
     <Button
       primary
       fluid
+      disabled={loading}
       className={classNames('FullWidthButton', className)}
       onClick={onClick}
       target={newWindow ? '_blank' : ''}
       rel={newWindow ? 'noopener noreferrer' : ''}
-      href={link}
+      href={href}
     >
-      {children}
+      {loading ? (
+        <div className="FullWidthButton__Loader">
+          <Loader size="tiny" active />
+        </div>
+      ) : (
+        children
+      )}
     </Button>
   )
 }

diff --git a/src/components/Home/ActiveCommunityGrants.tsx b/src/components/Home/ActiveCommunityGrants.tsx
@@ -44,7 +44,7 @@ const ActiveCommunityGrants = () => {
             ))}
         </div>
       )}
-      <FullWidthButton link={locations.projects()}>
+      <FullWidthButton href={locations.projects()}>
         {t('page.home.active_community_grants.view_all_grants')}
       </FullWidthButton>
     </div>

diff --git a/src/components/Home/OpenProposals.tsx b/src/components/Home/OpenProposals.tsx
@@ -93,7 +93,7 @@ const OpenProposals = ({ endingSoonProposals, isLoadingProposals }: Props) => {
           </>
         )}
       </BoxTabsContainer>
-      <FullWidthButton className="OpenProposals__ViewAllButton" link={locations.proposals()}>
+      <FullWidthButton className="OpenProposals__ViewAllButton" href={locations.proposals()}>
         {t('page.home.open_proposals.view_all_proposals')}
       </FullWidthButton>
     </div>

diff --git a/src/components/Profile/CoAuthoringTab.tsx b/src/components/Profile/CoAuthoringTab.tsx
@@ -3,13 +3,8 @@ import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext
 import { CoauthorAttributes } from '../../entities/Coauthor/types'
 import { isSameAddress } from '../../entities/Snapshot/utils'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import usePaginatedProposals from '../../hooks/usePaginatedProposals'
-import Empty from '../Common/Empty'
-import FullWidthButton from '../Common/FullWidthButton'
-import SkeletonBars from '../Common/SkeletonBars'
-import Watermelon from '../Icon/Watermelon'
 
-import ProposalCreatedItem from './ProposalCreatedItem'
+import { ProposalCreatedList } from './ProposalCreatedList'
 
 interface Props {
   address?: string
@@ -23,43 +18,21 @@ const CoAuthoringTab = ({ address, pendingCoauthorRequests }: Props) => {
   const isLoggedUserProfile = isSameAddress(account, address || '')
   const user = isLoggedUserProfile ? account : address
 
-  const { proposals, hasMoreProposals, loadMore, isLoadingProposals } = usePaginatedProposals({
-    load: !!user,
-    ...(!!user && { user: user?.toLowerCase() }),
-    coauthor: true,
-  })
-
   return (
-    <>
-      {isLoadingProposals && <SkeletonBars amount={proposals.length || 5} height={89} />}
-      {!isLoadingProposals && (
-        <>
-          {proposals.length > 0 ? (
-            proposals.map((proposal) => (
-              <ProposalCreatedItem
-                key={proposal.id}
-                proposal={proposal}
-                showCoauthoring
-                hasCoauthorRequests={!!pendingCoauthorRequests?.find((req) => req.proposal_id === proposal.id)}
-              />
-            ))
-          ) : (
-            <Empty
-              className="ActivityBox__Empty"
-              icon={<Watermelon />}
-              description={
-                isLoggedUserProfile
-                  ? t('page.profile.activity.coauthoring.empty_logged_user')
-                  : t('page.profile.activity.coauthoring.empty')
-              }
-            />
-          )}
-        </>
-      )}
-      {!isLoadingProposals && hasMoreProposals && (
-        <FullWidthButton onClick={loadMore}>{t('page.profile.activity.button')}</FullWidthButton>
-      )}
-    </>
+    <ProposalCreatedList
+      proposalsFilter={{
+        load: !!user,
+        ...(!!user && { user: user?.toLowerCase() }),
+        coauthor: true,
+      }}
+      emptyDescriptionText={
+        isLoggedUserProfile
+          ? t('page.profile.activity.coauthoring.empty_logged_user')
+          : t('page.profile.activity.coauthoring.empty')
+      }
+      showCoauthoring
+      pendingCoauthorRequests={pendingCoauthorRequests}
+    />
   )
 }
 

diff --git a/src/components/Profile/ProposalCreatedList.tsx b/src/components/Profile/ProposalCreatedList.tsx
@@ -0,0 +1,58 @@
+import { CoauthorAttributes } from '../../entities/Coauthor/types'
+import useFormatMessage from '../../hooks/useFormatMessage'
+import useInfiniteProposals from '../../hooks/useInfiniteProposals'
+import { UseProposalsFilter } from '../../hooks/useProposals'
+import Empty from '../Common/Empty'
+import FullWidthButton from '../Common/FullWidthButton'
+import SkeletonBars from '../Common/SkeletonBars'
+import Watermelon from '../Icon/Watermelon'
+
+import ProposalCreatedItem from './ProposalCreatedItem'
+
+interface Props {
+  proposalsFilter: Partial<UseProposalsFilter>
+  pendingCoauthorRequests?: CoauthorAttributes[]
+  emptyDescriptionText: string
+  showCoauthoring?: boolean
+}
+
+export function ProposalCreatedList({
+  proposalsFilter,
+  pendingCoauthorRequests,
+  emptyDescriptionText,
+  showCoauthoring = false,
+}: Props) {
+  const t = useFormatMessage()
+  const { proposals, isLoadingProposals, isFetchingNextPage, isFetchingProposals, hasMoreProposals, loadMore } =
+    useInfiniteProposals(proposalsFilter)
+  const hasProposals = proposals && proposals?.[0]?.total > 0
+
+  return (
+    <>
+      {isLoadingProposals && <SkeletonBars amount={3} height={89} />}
+      {!isLoadingProposals && (
+        <>
+          {hasProposals ? (
+            proposals.map((page) =>
+              page.data.map((proposal) => (
+                <ProposalCreatedItem
+                  key={proposal.id}
+                  proposal={proposal}
+                  showCoauthoring={showCoauthoring}
+                  hasCoauthorRequests={!!pendingCoauthorRequests?.find((req) => req.proposal_id === proposal.id)}
+                />
+              ))
+            )
+          ) : (
+            <Empty className="ActivityBox__Empty" icon={<Watermelon />} description={emptyDescriptionText} />
+          )}
+          {hasMoreProposals && (
+            <FullWidthButton loading={isFetchingNextPage || isFetchingProposals} onClick={loadMore}>
+              {t('page.profile.activity.button')}
+            </FullWidthButton>
+          )}
+        </>
+      )}
+    </>
+  )
+}
diff --git a/src/components/Profile/ProposalsCreatedTab.tsx b/src/components/Profile/ProposalsCreatedTab.tsx
@@ -2,13 +2,8 @@ import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext
 
 import { isSameAddress } from '../../entities/Snapshot/utils'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import usePaginatedProposals from '../../hooks/usePaginatedProposals'
-import Empty from '../Common/Empty'
-import FullWidthButton from '../Common/FullWidthButton'
-import SkeletonBars from '../Common/SkeletonBars'
-import Watermelon from '../Icon/Watermelon'
 
-import ProposalCreatedItem from './ProposalCreatedItem'
+import { ProposalCreatedList } from './ProposalCreatedList'
 
 interface Props {
   address?: string
@@ -21,33 +16,18 @@ const ProposalsCreatedTab = ({ address }: Props) => {
   const isLoggedUserAddress = isSameAddress(account, address || '')
   const user = isLoggedUserAddress ? account : address
 
-  const { proposals, hasMoreProposals, loadMore, isLoadingProposals } = usePaginatedProposals({
-    load: !!user,
-    ...(!!user && { user: user?.toLowerCase() }),
-  })
-
   const emptyDescriptionKey = isLoggedUserAddress
     ? 'page.profile.activity.my_proposals.empty'
     : 'page.profile.created_proposals.empty'
 
   return (
-    <>
-      {isLoadingProposals && <SkeletonBars amount={proposals.length || 5} height={89} />}
-      {!isLoadingProposals && (
-        <>
-          {proposals.length > 0 ? (
-            proposals.map((proposal) => (
-              <ProposalCreatedItem key={`${proposal.id}#${Math.random()}`} proposal={proposal} />
-            ))
-          ) : (
-            <Empty className="ActivityBox__Empty" icon={<Watermelon />} description={t(emptyDescriptionKey)} />
-          )}
-        </>
-      )}
-      {!isLoadingProposals && hasMoreProposals && (
-        <FullWidthButton onClick={loadMore}>{t('page.profile.activity.button')}</FullWidthButton>
-      )}
-    </>
+    <ProposalCreatedList
+      proposalsFilter={{
+        load: !!user,
+        ...(!!user && { user: user?.toLowerCase() }),
+      }}
+      emptyDescriptionText={t(emptyDescriptionKey)}
+    />
   )
 }
 

diff --git a/src/components/Profile/WatchlistTab.tsx b/src/components/Profile/WatchlistTab.tsx
@@ -1,43 +1,21 @@
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 
 import useFormatMessage from '../../hooks/useFormatMessage'
-import usePaginatedProposals from '../../hooks/usePaginatedProposals'
-import Empty from '../Common/Empty'
-import FullWidthButton from '../Common/FullWidthButton'
-import SkeletonBars from '../Common/SkeletonBars'
-import Watermelon from '../Icon/Watermelon'
 
-import ProposalCreatedItem from './ProposalCreatedItem'
+import { ProposalCreatedList } from './ProposalCreatedList'
 
 const WatchlistTab = () => {
   const [account] = useAuthContext()
   const t = useFormatMessage()
 
-  const { proposals, hasMoreProposals, loadMore, isLoadingProposals } = usePaginatedProposals({
-    load: !!account,
-    ...(!!account && { subscribed: account }),
-  })
-
   return (
-    <>
-      {isLoadingProposals && <SkeletonBars amount={proposals.length || 5} height={89} />}
-      {!isLoadingProposals && (
-        <>
-          {proposals.length > 0 ? (
-            proposals.map((proposal) => <ProposalCreatedItem key={proposal.id} proposal={proposal} />)
-          ) : (
-            <Empty
-              className="ActivityBox__Empty"
-              icon={<Watermelon />}
-              description={t('page.profile.activity.watchlist.empty')}
-            />
-          )}
-        </>
-      )}
-      {!isLoadingProposals && hasMoreProposals && (
-        <FullWidthButton onClick={loadMore}>{t('page.profile.activity.button')}</FullWidthButton>
-      )}
-    </>
+    <ProposalCreatedList
+      proposalsFilter={{
+        load: !!account,
+        ...(!!account && { subscribed: account }),
+      }}
+      emptyDescriptionText={t('page.profile.activity.watchlist.empty')}
+    />
   )
 }
 

diff --git a/src/hooks/useInfiniteProposals.ts b/src/hooks/useInfiniteProposals.ts
@@ -0,0 +1,34 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { DEFAULT_QUERY_STALE_TIME } from './constants'
+import { UseProposalsFilter, getProposalsQueryFn } from './useProposals'
+
+const DEFAULT_ITEMS_PER_PAGE = 5
+
+export default function useInfiniteProposals(filter: Partial<UseProposalsFilter> = {}) {
+  const {
+    data: proposals,
+    isLoading: isLoadingProposals,
+    isFetching: isFetchingProposals,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: [`infinite-proposals#${JSON.stringify(filter)}`],
+    queryFn: getProposalsQueryFn(filter, DEFAULT_ITEMS_PER_PAGE),
+    staleTime: DEFAULT_QUERY_STALE_TIME,
+    getNextPageParam: (lastPage, pages) => {
+      const fetchedTotal = pages.reduce((acc, currentValue) => acc + currentValue.data.length, 0)
+      return lastPage.total > fetchedTotal ? pages.length : undefined
+    },
+  })
+
+  return {
+    proposals: proposals?.pages,
+    isLoadingProposals,
+    isFetchingProposals,
+    isFetchingNextPage,
+    hasMoreProposals: !!hasNextPage,
+    loadMore: fetchNextPage,
+  }
+}
diff --git a/src/hooks/usePaginatedProposals.ts b/src/hooks/usePaginatedProposals.ts