index.tsx
63 lines
| 1 | import {useState} from '@wordpress/element'; |
| 2 | import useCampaigns from '../../shared/hooks/useCampaigns'; |
| 3 | import Pagination from '../../shared/components/Pagination'; |
| 4 | import CampaignCard from '../../shared/components/CampaignCard'; |
| 5 | import {CampaignGridType} from '../types'; |
| 6 | |
| 7 | import './styles.scss'; |
| 8 | import {Spinner as GiveSpinner} from '@givewp/components'; |
| 9 | |
| 10 | const getGridSettings = (layout: string) => { |
| 11 | switch (layout) { |
| 12 | case 'double': |
| 13 | return 2; |
| 14 | case 'triple': |
| 15 | return 3; |
| 16 | default: |
| 17 | return 1; |
| 18 | } |
| 19 | } |
| 20 | |
| 21 | export default ({attributes}: { attributes: CampaignGridType }) => { |
| 22 | const [page, setPage] = useState(1); |
| 23 | |
| 24 | const {campaigns, hasResolved, totalPages} = useCampaigns({ |
| 25 | ids: attributes?.filterBy?.map((item: { value: string }) => Number(item.value)), |
| 26 | per_page: attributes?.perPage, |
| 27 | sortBy: attributes?.sortBy, |
| 28 | orderBy: attributes?.orderBy, |
| 29 | page, |
| 30 | }); |
| 31 | |
| 32 | if (!hasResolved) { |
| 33 | return <div className="givewp-campaign-grid__loading"> |
| 34 | <GiveSpinner /> |
| 35 | </div>; |
| 36 | } |
| 37 | |
| 38 | return ( |
| 39 | <> |
| 40 | <div |
| 41 | className="givewp-campaign-grid" |
| 42 | style={{gridTemplateColumns: `repeat(${getGridSettings(attributes.layout)}, 1fr)`}} |
| 43 | > |
| 44 | {campaigns?.map((campaign) => ( |
| 45 | <CampaignCard |
| 46 | key={campaign.id} |
| 47 | campaign={campaign} |
| 48 | showImage={attributes.showImage} |
| 49 | showDescription={attributes.showDescription} |
| 50 | showGoal={attributes.showGoal} |
| 51 | /> |
| 52 | ))} |
| 53 | </div> |
| 54 | |
| 55 | {attributes.showPagination && totalPages >= page && ( |
| 56 | <div className="givewp-campaign-grid__pagination"> |
| 57 | <Pagination currentPage={page} totalPages={totalPages} setPage={(number) => setPage(number)} /> |
| 58 | </div> |
| 59 | )} |
| 60 | </> |
| 61 | ) |
| 62 | } |
| 63 |