Merge pull request #119 from ConductionNL/feature/OP-57/pagination

Feature/op 57/pagination
ConductionNL · Oct 16, 2023 · 9e193f3 · 9e193f3
2 parents 167a4ec + fed6a9b
commit 9e193f3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 48 deletions.
diff --git a/pwa/package.json b/pwa/package.json
@@ -4,9 +4,7 @@
   "private": true,
   "description": "Product Website Template",
   "author": "Conduction",
-  "keywords": [
-    "gatsby"
-  ],
+  "keywords": ["gatsby"],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -24,7 +22,7 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.16",
+    "@conduction/components": "2.2.17",
     "@conduction/theme": "1.0.48",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",

diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -15,53 +15,11 @@ import { useTranslation } from "react-i18next";
 export const LandingTemplate: React.FC = () => {
   const { currentPage, setCurrentPage } = usePaginationContext();
   const { filters } = useFiltersContext();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   const queryClient = new QueryClient();
   const getItems = useOpenWoo(queryClient).getAll(filters, currentPage);
 
-  React.useEffect(() => {
-    if (!getItems.data?.results.length) return;
-
-    //Updates aria-label of previous and next pagination buttons to translatable aria-labels
-    document
-      .querySelectorAll('[class*="Pagination-module--previous"]')[0]
-      ?.children[0].setAttribute("aria-label", `${t("Previous page")}`);
-    document
-      .querySelectorAll('[class*="Pagination-module--next"]')[0]
-      ?.children[0].setAttribute("aria-label", `${t("Next page")}`);
-
-    //Adds tabindex of -1 to all disabled and unused pagination buttons
-    document.querySelectorAll('[class*="Pagination-module--disabled"]')[0]?.children[0].setAttribute("tabindex", "-1");
-    document.querySelectorAll('[class*="Pagination-module--disabled"]')[0]?.setAttribute("tabindex", "-1");
-    document
-      .querySelectorAll('[class*="Pagination-module--previous"]')[0]
-      ?.children[0].children[0].setAttribute("tabindex", "-1");
-    document
-      .querySelectorAll('[class*="Pagination-module--next"]')[0]
-      ?.children[0].children[0].setAttribute("tabindex", "-1");
-
-    //Updates aria-label of all page pagination buttons to translatable aria-labels
-    let pageNumbers = Array.from(document.querySelectorAll('[class*="Pagination-module--container"]')[0].children);
-    var removeStr = ["Pagination-module--previous", "Pagination-module--next"];
-    pageNumbers = pageNumbers.filter(function (val) {
-      var found = false;
-      for (var i = 0; i < removeStr.length; i++) {
-        var str = removeStr[i];
-        if (val.className.indexOf(str) > -1) {
-          return false;
-        }
-      }
-      return true;
-    });
-    pageNumbers.map((value: any) => {
-      const label = value.children[0].ariaLabel;
-      const lastSpaceIndex = label.lastIndexOf(" ");
-      const pageNumber = label.substring(lastSpaceIndex + 1);
-      value.children[0].setAttribute("aria-label", `${t("Page")} ${pageNumber}`);
-    });
-  }, [getItems.isSuccess, i18n.language]);
-
   return (
     <>
       <h1 className={styles.header1}></h1>
@@ -76,7 +34,11 @@ export const LandingTemplate: React.FC = () => {
             <div id="mainContent">
               <ResultsDisplayTemplate displayKey="landing-results" requests={getItems.data.results} />
 
-              <Pagination totalPages={getItems.data.pages} {...{ currentPage, setCurrentPage }} />
+              <Pagination
+                ariaLabels={{ previousPage: t("Previous page"), nextPage: t("Next page"), page: t("Page") }}
+                totalPages={getItems.data.pages}
+                {...{ currentPage, setCurrentPage }}
+              />
             </div>
           )}
           {getItems.isLoading && <Skeleton height={"200px"} />}