feature: pagination

Author: alaca

src/Campaigns/Blocks/CampaignList/app/index.tsx

@@ -1,6 +1,7 @@
 import {__} from '@wordpress/i18n';
 import {useState} from '@wordpress/element';
 import useCampaigns from '../../shared/hooks/useCampaigns';
+import Pagination from '../../shared/components/Pagination';
 import {CampaignListType} from '../types';
 import {getGoalDescription, getGoalFormattedValue} from '../../CampaignGoal/utils';
 
@@ -20,7 +21,7 @@ const getGridSettings = (layout: string) => {
 export default ({attributes}: { attributes: CampaignListType }) => {
     const [page, setPage] = useState(1);
 
-    const {campaigns, hasResolved} = useCampaigns({
+    const {campaigns, hasResolved, totalPages} = useCampaigns({
         ids: attributes?.filterBy?.map((item: { value: string }) => Number(item.value)),
         per_page: attributes?.perPage,
         page,
@@ -87,9 +88,9 @@ export default ({attributes}: { attributes: CampaignListType }) => {
                 ))}
             </div>
 
-            {campaigns.length > 0 && attributes.showPagination && (
-                <div>
-                    Pagination
+            {attributes.showPagination && totalPages >= page && (
+                <div className="give-campaigns-campaignListBlock-grid__pagination">
+                    <Pagination currentPage={page} totalPages={totalPages} setPage={(number) => setPage(number)} />
                 </div>
             )}
         </>

src/Campaigns/Blocks/CampaignList/app/styles.scss

@@ -92,4 +92,8 @@
             }
         }
     }
+
+    &__pagination {
+        margin-top: 16px;
+    }
 }

src/Campaigns/Blocks/shared/components/Pagination/index.tsx

@@ -0,0 +1,67 @@
+import {__} from '@wordpress/i18n';
+
+import './styles.scss';
+
+export default ({currentPage, totalPages, setPage, disabled = false}: PaginationProps) => {
+    if (1 >= totalPages) {
+        return null;
+    }
+
+    const nextPage = currentPage + 1;
+    const previousPage = currentPage - 1;
+
+    return (
+        <div className="give-campaign-components-pagination">
+            <div className="give-campaign-components-pagination__pages">
+                <div className="give-campaign-components-pagination__pages-links">
+                    {previousPage > 0 ? (
+                        <>
+                            <a
+                                href="#"
+                                title={__('Previous page', 'give')}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    setPage(previousPage);
+                                }}
+                            >
+                                ‹
+                            </a>
+                        </>
+                    ) : (
+                        <span className="give-campaign-components-pagination__pages-links-disabled">‹</span>
+                    )}
+
+                    <span className="give-campaign-components-pagination__pages-links-info">
+                        <span>{currentPage}</span>
+                        {__('of', 'give')}
+                        <span>{totalPages}</span>
+                    </span>
+
+                    {nextPage <= totalPages ? (
+                        <>
+                            <a
+                                href="#"
+                                title={__('Next page', 'give')}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    setPage(nextPage);
+                                }}
+                            >
+                                ›
+                            </a>
+                        </>
+                    ) : (
+                        <span className="give-campaign-components-pagination__pages-links-disabled">›</span>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+interface PaginationProps {
+    currentPage: number,
+    totalPages: number,
+    setPage: (page: number) => void,
+    disabled?: boolean
+}

src/Campaigns/Blocks/shared/components/Pagination/styles.scss

@@ -0,0 +1,34 @@
+.give-campaign-components-pagination {
+    display: flex;
+    padding: 8px 0;
+    flex-direction: row;
+
+    &__pages {
+        display: flex;
+
+        &-links {
+            display: flex;
+            flex-direction: row;
+            gap: 4px;
+
+            a,
+            span,
+            &-info {
+                padding: 6px 12px;
+                text-decoration: none !important;
+                background-color: #f6f6f6;
+                color: #363636;
+                border-radius: 4px;
+
+                span {
+                    padding: 0 4px;
+                }
+            }
+
+            &-disabled {
+                opacity: 0.7;
+                cursor: not-allowed;
+            }
+        }
+    }
+}

src/Campaigns/Blocks/shared/hooks/useCampaigns.ts

@@ -13,6 +13,10 @@ export default function useCampaigns({ids = [], page = 1, per_page = 30, status
 
     return {
         campaigns: data?.records as Campaign[],
+        //@ts-ignore
+        totalItems: data.totalItems,
+        //@ts-ignore
+        totalPages: data.totalPages,
         hasResolved: data?.hasResolved,
     };
 }