Create pagination on home page proposals list

src/components/DaoDashboard/Activities/ProposalsHome.tsx

@@ -1,11 +1,12 @@
 import { Box, Flex, Icon, Show, Button } from '@chakra-ui/react';
 import { CaretDown, Funnel } from '@phosphor-icons/react';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useProposalsSortedAndFiltered } from '../../../hooks/DAO/proposal/useProposals';
 import { useCanUserCreateProposal } from '../../../hooks/utils/useCanUserSubmitProposal';
+import { usePagination } from '../../../hooks/utils/usePagination';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
@@ -21,6 +22,7 @@ import { CreateProposalMenu } from '../../ui/menus/CreateProposalMenu';
 import { OptionMenu } from '../../ui/menus/OptionMenu';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
+import { PaginationControls } from '../../ui/utils/PaginationControls';
 import { Sort } from '../../ui/utils/Sort';
 import { ActivityFreeze } from './ActivityFreeze';
 
@@ -36,6 +38,17 @@ export function ProposalsHome() {
 
   const { proposals, getProposalsTotal } = useProposalsSortedAndFiltered({ sortBy, filters });
 
+  const { currentPage, setCurrentPage, pageSize, setPageSize, totalPages, getPaginatedItems } =
+    usePagination({
+      totalItems: proposals.length,
+    });
+
+  // Calculate paginated proposals
+  const paginatedProposals = useMemo(
+    () => getPaginatedItems(proposals),
+    [proposals, getPaginatedItems],
+  );
+
   const { governance, guardContracts } = useFractal();
   const { safe } = useDaoInfoStore();
 
@@ -81,7 +94,6 @@ export function ProposalsHome() {
       FractalProposalState.ACTIVE,
       FractalProposalState.EXECUTABLE,
       FractalProposalState.EXECUTED,
-
       FractalProposalState.REJECTED,
     ];
 
@@ -91,7 +103,6 @@ export function ProposalsHome() {
       FractalProposalState.TIMELOCKED,
       FractalProposalState.EXECUTABLE,
       FractalProposalState.EXECUTED,
-
       FractalProposalState.REJECTED,
       FractalProposalState.EXPIRED,
     ];
@@ -129,6 +140,7 @@ export function ProposalsHome() {
         return [...prevState, filter];
       }
     });
+    setCurrentPage(1);
   };
 
   const filterOptions = allOptions.map(state => ({
@@ -138,12 +150,35 @@ export function ProposalsHome() {
     isSelected: filters.includes(state),
   }));
 
+  const handleSortChange: Dispatch<SetStateAction<SortBy>> = value => {
+    if (typeof value === 'function') {
+      setSortBy(prev => {
+        const newValue = value(prev);
+        setCurrentPage(1);
+        return newValue;
+      });
+    } else {
+      setSortBy(value);
+      setCurrentPage(1);
+    }
+  };
+
+  const handleSelectAll = () => {
+    setFilters(allOptions);
+    setCurrentPage(1);
+  };
+
+  const handleClearFilters = () => {
+    setFilters([]);
+    setCurrentPage(1);
+  };
+
   const filterTitle =
     filters.length === 1
       ? t(filters[0])
       : filters.length === allOptions.length
         ? t('filterProposalsAllSelected')
-        : filters.length === 0 // No filters selected means no filtering applied
+        : filters.length === 0
           ? t('filterProposalsNoneSelected')
           : t('filterProposalsNSelected', { count: filters.length });
 
@@ -234,15 +269,15 @@ export function ProposalsHome() {
                     variant="tertiary"
                     size="sm"
                     mt="0.5rem"
-                    onClick={() => setFilters(allOptions)}
+                    onClick={handleSelectAll}
                   >
                     {t('selectAll', { ns: 'common' })}
                   </Button>
                   <Button
                     variant="tertiary"
                     size="sm"
                     mt="0.5rem"
-                    onClick={() => setFilters([])}
+                    onClick={handleClearFilters}
                   >
                     {t('clear', { ns: 'common' })}
                   </Button>
@@ -252,7 +287,7 @@ export function ProposalsHome() {
 
             <Sort
               sortBy={sortBy}
-              setSortBy={setSortBy}
+              setSortBy={handleSortChange}
               buttonProps={{ disabled: !proposals.length }}
             />
           </Flex>
@@ -277,7 +312,27 @@ export function ProposalsHome() {
           </Show>
         </Flex>
 
-        <ProposalsList proposals={proposals} />
+        <ProposalsList
+          proposals={paginatedProposals}
+          currentPage={currentPage}
+          totalPages={totalPages}
+        />
+
+        {/* PAGINATION CONTROLS */}
+        {proposals.length > 0 && (
+          <Flex
+            justify="flex-end"
+            mx="0.5rem"
+          >
+            <PaginationControls
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              pageSize={pageSize}
+              onPageSizeChange={setPageSize}
+            />
+          </Flex>
+        )}
       </Flex>
     </Box>
   );

src/components/Proposals/ProposalsList.tsx

@@ -6,11 +6,19 @@ import NoDataCard from '../ui/containers/NoDataCard';
 import { InfoBoxLoader } from '../ui/loaders/InfoBoxLoader';
 import ProposalCard from './ProposalCard/ProposalCard';
 
-export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
+interface ProposalsListProps {
+  proposals: FractalProposal[];
+  currentPage: number;
+  totalPages: number;
+}
+
+export function ProposalsList({ proposals, currentPage, totalPages }: ProposalsListProps) {
   const {
     governance: { type, loadingProposals, allProposalsLoaded },
   } = useFractal();
 
+  const showLoadingMore = currentPage === totalPages && !allProposalsLoaded;
+
   return (
     <Flex
       flexDirection="column"
@@ -22,15 +30,15 @@ export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
           <InfoBoxLoader />
         </Box>
       ) : proposals.length > 0 ? (
-        [
-          ...proposals.map(proposal => (
+        <>
+          {proposals.map(proposal => (
             <ProposalCard
               key={proposal.proposalId}
               proposal={proposal}
             />
-          )),
-          !allProposalsLoaded && <InfoBoxLoader />,
-        ]
+          ))}
+          {showLoadingMore && <InfoBoxLoader />}
+        </>
       ) : (
         <NoDataCard
           emptyText="emptyProposals"

src/components/ui/utils/PaginationControls.tsx

@@ -0,0 +1,142 @@
+import {
+  Button,
+  Flex,
+  HStack,
+  Icon,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react';
+import {
+  CaretDoubleLeft,
+  CaretDoubleRight,
+  CaretDown,
+  CaretLeft,
+  CaretRight,
+} from '@phosphor-icons/react';
+import { ComponentType } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NEUTRAL_2_82_TRANSPARENT } from '../../../constants/common';
+import { PAGE_SIZE_OPTIONS } from '../../../hooks/utils/usePagination';
+import { EaseOutComponent } from './EaseOutComponent';
+
+interface NavButtonProps {
+  onClick: () => void;
+  isDisabled: boolean;
+  iconComponent: ComponentType;
+}
+
+function NavButton({ onClick, isDisabled, iconComponent: IconComponent }: NavButtonProps) {
+  return (
+    <Button
+      onClick={onClick}
+      isDisabled={isDisabled}
+      variant="tertiary"
+      size="sm"
+    >
+      <IconComponent />
+    </Button>
+  );
+}
+
+interface PaginationControlsProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  pageSize: number;
+  onPageSizeChange: (size: number) => void;
+}
+
+export function PaginationControls({
+  currentPage,
+  totalPages,
+  onPageChange,
+  pageSize,
+  onPageSizeChange,
+}: PaginationControlsProps) {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <Flex
+      align="center"
+      gap={2}
+    >
+      <Menu isLazy>
+        <MenuButton
+          as={Button}
+          variant="tertiary"
+          size="sm"
+        >
+          <Flex alignItems="center">
+            <Text fontSize="sm">{pageSize}</Text>
+            <Icon
+              ml="0.25rem"
+              as={CaretDown}
+            />
+          </Flex>
+        </MenuButton>
+        <MenuList
+          borderWidth="1px"
+          borderColor="neutral-3"
+          borderRadius="0.75rem"
+          bg={NEUTRAL_2_82_TRANSPARENT}
+          backdropFilter="auto"
+          backdropBlur="10px"
+          minWidth="min-content"
+          zIndex={5}
+          p="0.25rem"
+        >
+          <EaseOutComponent>
+            {PAGE_SIZE_OPTIONS.map(size => (
+              <MenuItem
+                key={size}
+                borderRadius="0.75rem"
+                p="0.5rem 0.5rem"
+                sx={{
+                  '&:hover': { bg: 'neutral-3' },
+                }}
+                onClick={() => onPageSizeChange(size)}
+              >
+                <Text fontSize="sm">{size}</Text>
+              </MenuItem>
+            ))}
+          </EaseOutComponent>
+        </MenuList>
+      </Menu>
+
+      <HStack spacing={1}>
+        <NavButton
+          onClick={() => onPageChange(1)}
+          isDisabled={currentPage === 1}
+          iconComponent={CaretDoubleLeft}
+        />
+        <NavButton
+          onClick={() => onPageChange(currentPage - 1)}
+          isDisabled={currentPage === 1 || currentPage > totalPages}
+          iconComponent={CaretLeft}
+        />
+
+        <Text
+          fontSize="sm"
+          px={2}
+          color="lilac-0"
+        >
+          {t('pageXofY', { current: currentPage, total: totalPages })}
+        </Text>
+
+        <NavButton
+          onClick={() => onPageChange(currentPage + 1)}
+          isDisabled={currentPage >= totalPages}
+          iconComponent={CaretRight}
+        />
+        <NavButton
+          onClick={() => onPageChange(totalPages)}
+          isDisabled={currentPage >= totalPages}
+          iconComponent={CaretDoubleRight}
+        />
+      </HStack>
+    </Flex>
+  );
+}