From 7ba8020749b961567864f41e9b552ec8ee003547 Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Fri, 11 Oct 2024 15:02:30 +0200 Subject: [PATCH 1/2] Move Pagination to /abstractions + use Pagination abstraction component --- .../plugins/concept/ConceptModalContent.tsx | 64 ++----------------- .../Pagination.tsx | 16 ++--- src/containers/SearchPage/SearchContainer.tsx | 60 ++--------------- .../components/LastUsedConcepts.tsx | 3 +- .../components/LastUsedResources.tsx | 3 +- .../WelcomePage/components/Revisions.tsx | 3 +- .../components/SubjectViewContent.tsx | 3 +- .../worklist/ConceptListTabContent.tsx | 3 +- .../worklist/WorkListTabContent.tsx | 3 +- 9 files changed, 31 insertions(+), 127 deletions(-) rename src/components/{Pagination => abstractions}/Pagination.tsx (84%) diff --git a/src/components/SlateEditor/plugins/concept/ConceptModalContent.tsx b/src/components/SlateEditor/plugins/concept/ConceptModalContent.tsx index 2b69850c4a..137a57e684 100644 --- a/src/components/SlateEditor/plugins/concept/ConceptModalContent.tsx +++ b/src/components/SlateEditor/plugins/concept/ConceptModalContent.tsx @@ -11,25 +11,9 @@ import queryString from "query-string"; import { useCallback, useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { Cross } from "@ndla/icons/action"; -import { ArrowLeftShortLine, ArrowRightShortLine, Search } from "@ndla/icons/common"; +import { Search } from "@ndla/icons/common"; import { ModalHeader, ModalBody } from "@ndla/modal"; -import { - Button, - IconButton, - PaginationContext, - PaginationEllipsis, - PaginationItem, - PaginationNextTrigger, - PaginationPrevTrigger, - PaginationRoot, - TabsContent, - TabsIndicator, - TabsList, - TabsRoot, - TabsTrigger, - Text, -} from "@ndla/primitives"; -import { styled } from "@ndla/styled-system/jsx"; +import { Button, IconButton, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "@ndla/primitives"; import { IConcept, IConceptSearchResult, @@ -47,6 +31,7 @@ import { ConceptType } from "../../../../containers/ConceptPage/conceptInterface import { GlossForm } from "../../../../containers/GlossPage/components/GlossForm"; import { SearchParams, parseSearchParams } from "../../../../containers/SearchPage/components/form/SearchForm"; import { postSearchConcepts } from "../../../../modules/concept/conceptApi"; +import Pagination from "../../../abstractions/Pagination"; interface Props { addConcept: (concept: IConceptSummary | IConcept) => void; @@ -62,12 +47,6 @@ interface Props { conceptType: ConceptType; } -const StyledPaginationRoot = styled(PaginationRoot, { - base: { - flexWrap: "wrap", - }, -}); - const ConceptModalContent = ({ onClose, subjects, @@ -175,44 +154,13 @@ const ConceptModalContent = ({ searching={searching} addConcept={addConcept} /> - searchConcept({ ...searchObject, page: details.page })} count={Math.min(results?.totalCount ?? 0, 1000)} pageSize={results?.pageSize} - translations={paginationTranslations} siblingCount={1} - > - - - - - {(pagination) => - pagination.pages.map((page, index) => - page.type === "page" ? ( - - - - ) : ( - - -
…
- - - ), - ) - } - - - - - + /> {conceptTypeTabs.map((conceptType) => ( diff --git a/src/components/Pagination/Pagination.tsx b/src/components/abstractions/Pagination.tsx similarity index 84% rename from src/components/Pagination/Pagination.tsx rename to src/components/abstractions/Pagination.tsx index e262bf4f46..47bd0cc544 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/abstractions/Pagination.tsx @@ -27,13 +27,9 @@ const StyledPaginationRoot = styled(PaginationRoot, { }, }); -const Pagination = ({ - page = 1, - onPageChange, - count, - pageSize, - ...props -}: Omit) => { +type Props = Omit & { buttonSize?: "small" | "medium" }; + +const Pagination = ({ page = 1, onPageChange, count, pageSize, buttonSize = "medium", ...props }: Props) => { const translations = usePaginationTranslations(); return ( @@ -75,7 +71,7 @@ const Pagination = ({ - - - {(pagination) => - pagination.pages.map((page, index) => - page.type === "page" ? ( - - - - ) : ( - - -
…
- - - ), - ) - } - - - - - + buttonSize="small" + /> ); diff --git a/src/containers/WelcomePage/components/LastUsedConcepts.tsx b/src/containers/WelcomePage/components/LastUsedConcepts.tsx index 8b18efb64a..e829c53fc0 100644 --- a/src/containers/WelcomePage/components/LastUsedConcepts.tsx +++ b/src/containers/WelcomePage/components/LastUsedConcepts.tsx @@ -15,7 +15,7 @@ import { SortOptionLastUsed } from "./LastUsedItems"; import TableComponent, { FieldElement, Prefix, TitleElement } from "./TableComponent"; import TableTitle from "./TableTitle"; import PageSizeSelect from "./worklist/PageSizeSelect"; -import Pagination from "../../../components/Pagination/Pagination"; +import Pagination from "../../../components/abstractions/Pagination"; import formatDate from "../../../util/formatDate"; import { routes } from "../../../util/routeHelpers"; import { StyledTopRowDashboardInfo } from "../styles"; @@ -91,6 +91,7 @@ const LastUsedConcepts = ({ count={totalCount ?? 0} pageSize={Number(pageSize!.value)} aria-label={t("welcomePage.pagination.lastUsed", { resourceType: t("welcomePage.pagination.concepts") })} + buttonSize="small" /> ); diff --git a/src/containers/WelcomePage/components/LastUsedResources.tsx b/src/containers/WelcomePage/components/LastUsedResources.tsx index 59851df686..7161fcf130 100644 --- a/src/containers/WelcomePage/components/LastUsedResources.tsx +++ b/src/containers/WelcomePage/components/LastUsedResources.tsx @@ -15,7 +15,7 @@ import { SortOptionLastUsed } from "./LastUsedItems"; import TableComponent, { FieldElement, Prefix, TitleElement } from "./TableComponent"; import TableTitle from "./TableTitle"; import PageSizeSelect from "./worklist/PageSizeSelect"; -import Pagination from "../../../components/Pagination/Pagination"; +import Pagination from "../../../components/abstractions/Pagination"; import formatDate from "../../../util/formatDate"; import { routes } from "../../../util/routeHelpers"; import { StyledTopRowDashboardInfo } from "../styles"; @@ -92,6 +92,7 @@ const LastUsedResources = ({ count={totalCount ?? 0} pageSize={Number(pageSize!.value)} aria-label={t("welcomePage.pagination.lastUsed", { resourceType: t("welcomePage.pagination.resources") })} + buttonSize="small" /> ); diff --git a/src/containers/WelcomePage/components/Revisions.tsx b/src/containers/WelcomePage/components/Revisions.tsx index f2a802942a..16437be640 100644 --- a/src/containers/WelcomePage/components/Revisions.tsx +++ b/src/containers/WelcomePage/components/Revisions.tsx @@ -31,8 +31,8 @@ import TableTitle from "./TableTitle"; import { WelcomePageTabsContent } from "./WelcomePageTabsContent"; import PageSizeSelect from "./worklist/PageSizeSelect"; import SubjectCombobox from "./worklist/SubjectCombobox"; +import Pagination from "../../../components/abstractions/Pagination"; import { getWarnStatus } from "../../../components/HeaderWithLanguage/HeaderStatusInformation"; -import Pagination from "../../../components/Pagination/Pagination"; import { FAVOURITES_SUBJECT_ID, PUBLISHED, @@ -296,6 +296,7 @@ const Revisions = ({ userData }: Props) => { count={data?.totalCount ?? 0} pageSize={data?.pageSize} aria-label={t("welcomePage.pagination.revision")} + buttonSize="small" /> diff --git a/src/containers/WelcomePage/components/SubjectViewContent.tsx b/src/containers/WelcomePage/components/SubjectViewContent.tsx index 056ca1cadf..350ab459b4 100644 --- a/src/containers/WelcomePage/components/SubjectViewContent.tsx +++ b/src/containers/WelcomePage/components/SubjectViewContent.tsx @@ -15,7 +15,7 @@ import { getCurrentPageData } from "./LastUsedItems"; import TableComponent, { FieldElement, TitleElement } from "./TableComponent"; import TableTitle from "./TableTitle"; import PageSizeSelect from "./worklist/PageSizeSelect"; -import Pagination from "../../../components/Pagination/Pagination"; +import Pagination from "../../../components/abstractions/Pagination"; import { SUBJECT_NODE } from "../../../modules/nodes/nodeApiTypes"; import { useSearchNodes } from "../../../modules/nodes/nodeQueries"; import { useSearchSubjectStats } from "../../../modules/search/searchQueries"; @@ -213,6 +213,7 @@ const SubjectViewContent = ({ count={subjectIds.length} pageSize={Number(pageSize!.value)} aria-label={t("welcomePage.pagination.subjectView", { group: tabTitle.toLocaleLowerCase() })} + buttonSize="small" /> ); diff --git a/src/containers/WelcomePage/components/worklist/ConceptListTabContent.tsx b/src/containers/WelcomePage/components/worklist/ConceptListTabContent.tsx index 9356ca02fa..f12dd7d3ad 100644 --- a/src/containers/WelcomePage/components/worklist/ConceptListTabContent.tsx +++ b/src/containers/WelcomePage/components/worklist/ConceptListTabContent.tsx @@ -15,7 +15,7 @@ import PageSizeSelect from "./PageSizeSelect"; import StatusCell from "./StatusCell"; import SubjectCombobox from "./SubjectCombobox"; import { SortOptionConceptList } from "./WorkList"; -import Pagination from "../../../../components/Pagination/Pagination"; +import Pagination from "../../../../components/abstractions/Pagination"; import { useSearchConcepts } from "../../../../modules/concept/conceptQueries"; import { toEditConcept, toEditGloss } from "../../../../util/routeHelpers"; import { ControlWrapperDashboard, StyledTopRowDashboardInfo, TopRowControls } from "../../styles"; @@ -165,6 +165,7 @@ const ConceptListTabContent = ({ count={data?.totalCount ?? 0} pageSize={data?.pageSize} aria-label={t("welcomePage.pagination.workList", { resourceType: t("welcomePage.pagination.concepts") })} + buttonSize="small" /> ); diff --git a/src/containers/WelcomePage/components/worklist/WorkListTabContent.tsx b/src/containers/WelcomePage/components/worklist/WorkListTabContent.tsx index 57fd752c18..abe261325e 100644 --- a/src/containers/WelcomePage/components/worklist/WorkListTabContent.tsx +++ b/src/containers/WelcomePage/components/worklist/WorkListTabContent.tsx @@ -18,7 +18,7 @@ import PageSizeSelect from "./PageSizeSelect"; import StatusCell from "./StatusCell"; import SubjectCombobox from "./SubjectCombobox"; import { SortOptionWorkList } from "./WorkList"; -import Pagination from "../../../../components/Pagination/Pagination"; +import Pagination from "../../../../components/abstractions/Pagination"; import { useSearch } from "../../../../modules/search/searchQueries"; import formatDate from "../../../../util/formatDate"; import { stripInlineContentHtmlTags } from "../../../../util/formHelper"; @@ -231,6 +231,7 @@ const WorkListTabContent = ({ count={data?.totalCount ?? 0} pageSize={data?.pageSize} aria-label={t("welcomePage.pagination.workList", { resourceType: t("welcomePage.pagination.resources") })} + buttonSize="small" /> ); From db07bf0d3def84b7a21ec3294743fccb9794416a Mon Sep 17 00:00:00 2001 From: Katrine Wist Date: Fri, 11 Oct 2024 15:03:07 +0200 Subject: [PATCH 2/2] Remove @ndla/pager dep --- package.json | 1 - yarn.lock | 1 - 2 files changed, 2 deletions(-) diff --git a/package.json b/package.json index 03ea1d380a..4c15b55a84 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,6 @@ "@ndla/image-search": "^11.0.47-alpha.0", "@ndla/licenses": "^8.0.3-alpha.0", "@ndla/modal": "^8.0.30-alpha.0", - "@ndla/pager": "^5.0.44-alpha.0", "@ndla/primitives": "^1.0.44-alpha.0", "@ndla/safelink": "^7.0.44-alpha.0", "@ndla/select": "^6.0.30-alpha.0", diff --git a/yarn.lock b/yarn.lock index fe428e309c..6b6c94ecf4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7029,7 +7029,6 @@ __metadata: "@ndla/image-search": "npm:^11.0.47-alpha.0" "@ndla/licenses": "npm:^8.0.3-alpha.0" "@ndla/modal": "npm:^8.0.30-alpha.0" - "@ndla/pager": "npm:^5.0.44-alpha.0" "@ndla/preset-panda": "npm:^0.0.39" "@ndla/primitives": "npm:^1.0.44-alpha.0" "@ndla/safelink": "npm:^7.0.44-alpha.0"