Merge pull request #2505 from NDLANO/pagination-abstracted-componnt

Pagination abstraction
NDLANO · Oct 11, 2024 · 854123e · 854123e
2 parents 62a69bb + db07bf0
commit 854123e
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 129 deletions.
diff --git 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/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}
               />
-              <StyledPaginationRoot
-                page={results.page ?? 1}
+              <Pagination
+                page={results.page}
                 onPageChange={(details) => searchConcept({ ...searchObject, page: details.page })}
                 count={Math.min(results?.totalCount ?? 0, 1000)}
                 pageSize={results?.pageSize}
-                translations={paginationTranslations}
                 siblingCount={1}
-              >
-                <PaginationPrevTrigger asChild>
-                  <Button variant="tertiary" aria-label={t("pagination.prev")} title={t("pagination.prev")}>
-                    <ArrowLeftShortLine />
-                  </Button>
-                </PaginationPrevTrigger>
-                <PaginationContext>
-                  {(pagination) =>
-                    pagination.pages.map((page, index) =>
-                      page.type === "page" ? (
-                        <PaginationItem key={index} {...page} asChild>
-                          <Button variant={page.value === pagination.page ? "primary" : "tertiary"}>
-                            {page.value}
-                          </Button>
-                        </PaginationItem>
-                      ) : (
-                        <PaginationEllipsis key={index} index={index} asChild>
-                          <Text asChild consumeCss>
-                            <div>&#8230;</div>
-                          </Text>
-                        </PaginationEllipsis>
-                      ),
-                    )
-                  }
-                </PaginationContext>
-                <PaginationNextTrigger asChild>
-                  <Button variant="tertiary" aria-label={t("pagination.next")} title={t("pagination.next")}>
-                    <ArrowRightShortLine />
-                  </Button>
-                </PaginationNextTrigger>
-              </StyledPaginationRoot>
+              />
             </div>
           </TabsContent>
           {conceptTypeTabs.map((conceptType) => (

diff --git a/src/components/Pagination/Pagination.tsx → src/components/abstractions/Pagination.tsx b/src/components/Pagination/Pagination.tsx → src/components/abstractions/Pagination.tsx
@@ -27,13 +27,9 @@ const StyledPaginationRoot = styled(PaginationRoot, {
   },
 });
 
-const Pagination = ({
-  page = 1,
-  onPageChange,
-  count,
-  pageSize,
-  ...props
-}: Omit<PaginationRootProps, "translations">) => {
+type Props = Omit<PaginationRootProps, "translations"> & { buttonSize?: "small" | "medium" };
+
+const Pagination = ({ page = 1, onPageChange, count, pageSize, buttonSize = "medium", ...props }: Props) => {
   const translations = usePaginationTranslations();
   return (
     <StyledPaginationRoot
@@ -46,7 +42,7 @@ const Pagination = ({
     >
       <PaginationPrevTrigger asChild>
         <Button
-          size="small"
+          size={buttonSize}
           variant="tertiary"
           aria-label={translations?.prevTriggerLabel}
           title={translations?.prevTriggerLabel}
@@ -59,7 +55,7 @@ const Pagination = ({
           pagination.pages.map((page, index) =>
             page.type === "page" ? (
               <PaginationItem key={index} {...page} asChild>
-                <Button size="small" variant={page.value === pagination.page ? "primary" : "tertiary"}>
+                <Button size={buttonSize} variant={page.value === pagination.page ? "primary" : "tertiary"}>
                   {page.value}
                 </Button>
               </PaginationItem>
@@ -75,7 +71,7 @@ const Pagination = ({
       </PaginationContext>
       <PaginationNextTrigger asChild>
         <Button
-          size="small"
+          size={buttonSize}
           variant="tertiary"
           aria-label={translations?.nextTriggerLabel}
           title={translations?.nextTriggerLabel}

diff --git a/src/containers/SearchPage/SearchContainer.tsx b/src/containers/SearchPage/SearchContainer.tsx
@@ -10,28 +10,17 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { UseQueryResult } from "@tanstack/react-query";
-import { ArrowLeftShortLine, ArrowRightShortLine } from "@ndla/icons/common";
-import {
-  Button,
-  PaginationContext,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationNextTrigger,
-  PaginationPrevTrigger,
-  PaginationRoot,
-  Text,
-} from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
 import { HelmetWithTracker } from "@ndla/tracker";
 import { IAudioSummarySearchResult, ISeriesSummarySearchResult } from "@ndla/types-backend/audio-api";
 import { IConceptSearchResult } from "@ndla/types-backend/concept-api";
 import { ISearchResultV3 } from "@ndla/types-backend/image-api";
 import { IMultiSearchResult } from "@ndla/types-backend/search-api";
-import { OneColumn, usePaginationTranslations } from "@ndla/ui";
+import { OneColumn } from "@ndla/ui";
 import SearchForm, { parseSearchParams, SearchParams } from "./components/form/SearchForm";
 import SearchList from "./components/results/SearchList";
 import SearchListOptions from "./components/results/SearchListOptions";
 import SearchSort from "./components/sort/SearchSort";
+import Pagination from "../../components/abstractions/Pagination";
 import { SearchType } from "../../interfaces";
 import { useUserData } from "../../modules/draft/draftQueries";
 import { useNodes } from "../../modules/nodes/nodeQueries";
@@ -52,17 +41,10 @@ interface Props {
   searchHook: (query: SearchParams) => UseQueryResult<ResultType>;
 }
 
-const StyledPaginationRoot = styled(PaginationRoot, {
-  base: {
-    flexWrap: "wrap",
-  },
-});
-
 const SearchContainer = ({ searchHook, type }: Props) => {
   const { t, i18n } = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
-  const paginationTranslations = usePaginationTranslations();
   const locale = i18n.language;
   const { taxonomyVersion } = useTaxonomyVersion();
   const { data: subjectData } = useNodes({
@@ -133,42 +115,14 @@ const SearchContainer = ({ searchHook, type }: Props) => {
           subjects={subjects}
           error={!!searchError}
         />
-        <StyledPaginationRoot
-          page={searchObject.page ?? 1}
+        <Pagination
+          page={searchObject.page}
           onPageChange={(details) => onQueryPush({ ...searchObject, page: details.page })}
-          count={Math.min(results?.totalCount ?? 0, 1000)}
           pageSize={results?.pageSize}
-          translations={paginationTranslations}
+          count={Math.min(results?.totalCount ?? 0, 1000)}
           siblingCount={1}
-        >
-          <PaginationPrevTrigger asChild>
-            <Button variant="tertiary" aria-label={t("pagination.prev")} title={t("pagination.prev")}>
-              <ArrowLeftShortLine />
-            </Button>
-          </PaginationPrevTrigger>
-          <PaginationContext>
-            {(pagination) =>
-              pagination.pages.map((page, index) =>
-                page.type === "page" ? (
-                  <PaginationItem key={index} {...page} asChild>
-                    <Button variant={page.value === pagination.page ? "primary" : "tertiary"}>{page.value}</Button>
-                  </PaginationItem>
-                ) : (
-                  <PaginationEllipsis key={index} index={index} asChild>
-                    <Text asChild consumeCss>
-                      <div>&#8230;</div>
-                    </Text>
-                  </PaginationEllipsis>
-                ),
-              )
-            }
-          </PaginationContext>
-          <PaginationNextTrigger asChild>
-            <Button variant="tertiary" aria-label={t("pagination.next")} title={t("pagination.next")}>
-              <ArrowRightShortLine />
-            </Button>
-          </PaginationNextTrigger>
-        </StyledPaginationRoot>
+          buttonSize="small"
+        />
       </OneColumn>
     </>
   );

diff --git 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
@@ -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
@@ -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"
         />
       </WelcomePageTabsContent>
     </TabsRoot>

diff --git 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
@@ -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
@@ -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"
       />
     </>
   );

diff --git 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"