From 70ace6e46e997c52d08fa201777d247cccdacdea Mon Sep 17 00:00:00 2001 From: brentguf Date: Mon, 16 Dec 2024 15:13:08 +0100 Subject: [PATCH 1/2] Use Pagination component without semantic-ui --- .../admin/Email/RecipientsTable.tsx | 26 +++++++++++-------- .../components/PostTable/index.tsx | 2 +- .../Admin/invitations/all/index.tsx | 2 +- .../messaging/CustomEmails/All/index.tsx | 2 +- .../projects/project/messaging/All/index.tsx | 2 +- 5 files changed, 19 insertions(+), 15 deletions(-) diff --git a/front/app/components/admin/Email/RecipientsTable.tsx b/front/app/components/admin/Email/RecipientsTable.tsx index 2853954553d4..c4c2c8e5704a 100644 --- a/front/app/components/admin/Email/RecipientsTable.tsx +++ b/front/app/components/admin/Email/RecipientsTable.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { StatusLabel, colors } from '@citizenlab/cl2-component-library'; +import { Box, StatusLabel, colors } from '@citizenlab/cl2-component-library'; import { IDeliveryData } from 'api/campaign_deliveries/types'; import useUserById from 'api/users/useUserById'; -import Pagination from 'components/admin/Pagination'; import { List, Row, TextCell } from 'components/admin/ResourceList'; import Avatar from 'components/Avatar'; +import Pagination from 'components/Pagination'; import { FormattedMessage } from 'utils/cl-intl'; import { isNilOrError } from 'utils/helperUtils'; @@ -80,20 +80,24 @@ const RecipientsTable = ({ } return ( - d.id).join()}> - {deliveries.map((recipient) => ( - - ))} + <> + + d.id).join()}> + {deliveries.map((recipient) => ( + + ))} + + - + ); }; diff --git a/front/app/components/admin/PostManager/components/PostTable/index.tsx b/front/app/components/admin/PostManager/components/PostTable/index.tsx index 57f82131cd73..20a906efb051 100644 --- a/front/app/components/admin/PostManager/components/PostTable/index.tsx +++ b/front/app/components/admin/PostManager/components/PostTable/index.tsx @@ -17,7 +17,7 @@ import { IIdeaStatusData } from 'api/idea_statuses/types'; import { Sort as IdeasSort, IIdeaData } from 'api/ideas/types'; import { IPhaseData } from 'api/phases/types'; -import Pagination from 'components/admin/Pagination'; +import Pagination from 'components/Pagination'; import { SortDirection } from 'utils/paginationUtils'; diff --git a/front/app/containers/Admin/invitations/all/index.tsx b/front/app/containers/Admin/invitations/all/index.tsx index 1ab4d1828d04..e744ac87577c 100644 --- a/front/app/containers/Admin/invitations/all/index.tsx +++ b/front/app/containers/Admin/invitations/all/index.tsx @@ -18,7 +18,7 @@ import useInvites from 'api/invites/useInvites'; import { API_PATH } from 'containers/App/constants'; -import Pagination from 'components/admin/Pagination'; +import Pagination from 'components/Pagination'; import Button from 'components/UI/Button'; import SearchInput from 'components/UI/SearchInput'; diff --git a/front/app/containers/Admin/messaging/CustomEmails/All/index.tsx b/front/app/containers/Admin/messaging/CustomEmails/All/index.tsx index 9add3150c5a8..9ddc18d57a30 100644 --- a/front/app/containers/Admin/messaging/CustomEmails/All/index.tsx +++ b/front/app/containers/Admin/messaging/CustomEmails/All/index.tsx @@ -14,7 +14,7 @@ import { isDraft } from 'api/campaigns/util'; import DraftCampaignRow from 'components/admin/Email/DraftCampaignRow'; import SentCampaignRow from 'components/admin/Email/SentCampaignRow'; import { ButtonWrapper } from 'components/admin/PageWrapper'; -import Pagination from 'components/admin/Pagination'; +import Pagination from 'components/Pagination'; import { List } from 'components/admin/ResourceList'; import { FormattedMessage } from 'utils/cl-intl'; diff --git a/front/app/containers/Admin/projects/project/messaging/All/index.tsx b/front/app/containers/Admin/projects/project/messaging/All/index.tsx index d5842d4840f1..1ab76f90a497 100644 --- a/front/app/containers/Admin/projects/project/messaging/All/index.tsx +++ b/front/app/containers/Admin/projects/project/messaging/All/index.tsx @@ -15,7 +15,7 @@ import { isDraft } from 'api/campaigns/util'; import DraftCampaignRow from 'components/admin/Email/DraftCampaignRow'; import SentCampaignRow from 'components/admin/Email/SentCampaignRow'; import { ButtonWrapper } from 'components/admin/PageWrapper'; -import Pagination from 'components/admin/Pagination'; +import Pagination from 'components/Pagination'; import { List } from 'components/admin/ResourceList'; import { FormattedMessage } from 'utils/cl-intl'; From 302d99918955c83cae9b06691e187d1a111ce899 Mon Sep 17 00:00:00 2001 From: brentguf Date: Mon, 16 Dec 2024 15:13:43 +0100 Subject: [PATCH 2/2] Remove dead code --- .../app/components/admin/Pagination/index.tsx | 69 ------------------- 1 file changed, 69 deletions(-) delete mode 100644 front/app/components/admin/Pagination/index.tsx diff --git a/front/app/components/admin/Pagination/index.tsx b/front/app/components/admin/Pagination/index.tsx deleted file mode 100644 index eed4616f047c..000000000000 --- a/front/app/components/admin/Pagination/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; - -import { Menu } from 'semantic-ui-react'; - -// Typing -interface Props { - currentPage: number; - totalPages: number; - loadPage: (arg: number) => void; -} - -const Pagination = ({ currentPage, totalPages, loadPage }: Props) => { - const calculateMenuItems = (c, m) => { - const current = c; - const last = m; - const delta = 2; - const left = current - delta; - const right = current + delta + 1; - const range: number[] = []; - const rangeWithDots: number[] = []; - let l; - - for (let i = 1; i <= last; i += 1) { - if (i === 1 || i === last || (i >= left && i < right)) { - range.push(i); - } - } - - range.forEach((i) => { - if (l) { - if (i - l === 2) { - rangeWithDots.push(l + 1); - } else if (i - l !== 1) { - rangeWithDots.push(-i); - } - } - rangeWithDots.push(i); - l = i; - }); - - return rangeWithDots; - }; - - const handleItemClick = (_event, data) => { - loadPage(parseInt(data.name, 10)); - }; - - const pageItems = calculateMenuItems(currentPage, totalPages); - - if (totalPages > 1) { - return ( - - {pageItems.map((item) => ( - - ))} - - ); - } - - return null; -}; - -export default Pagination;