VACMS-17526 Fix pagination issues with story listings (#1963)

* VACMS-17526 Fix pagination issues with story listings * Simplifying pagination
department-of-veterans-affairs · Mar 18, 2024 · b337f83 · b337f83
1 parent a4009ea
commit b337f83
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 186 deletions.
diff --git a/src/site/filters/liquid.js b/src/site/filters/liquid.js
@@ -4,7 +4,6 @@ const converter = require('number-to-words');
 const he = require('he');
 const liquid = require('tinyliquid');
 const moment = require('moment-timezone');
-const set = require('lodash/fp/set');
 // Relative imports.
 const phoneNumberArrayToObject = require('./phoneNumberArrayToObject');
 const renameKey = require('../../platform/utilities/data/renameKey');
@@ -1295,94 +1294,6 @@ module.exports = function registerFilters() {
     );
   };
 
-  //* paginatePages has limitations, it is not yet fully operational.
-  liquid.filters.paginatePages = (page, items, aria) => {
-    const perPage = 10;
-    const ariaLabel = aria ? ` of ${aria}` : '';
-
-    const paginationPath = pageNum => {
-      return pageNum === 0 ? '' : `/page-${pageNum + 1}`;
-    };
-
-    const pageReturn = [];
-
-    if (items.length > 0) {
-      const pagedEntities = _.chunk(items, perPage);
-
-      for (let pageNum = 0; pageNum < pagedEntities.length; pageNum++) {
-        let pagedPage = { ...page };
-
-        if (pageNum > 0) {
-          pagedPage = set(
-            'entityUrl.path',
-            `${page.entityUrl.path}${paginationPath(pageNum)}`,
-            page,
-          );
-        }
-
-        pagedPage.pagedItems = pagedEntities[pageNum];
-        const innerPages = [];
-
-        if (pagedEntities.length > 0) {
-          // add page numbers
-          const numPageLinks = 3;
-          let start;
-          let length;
-          if (pagedEntities.length <= numPageLinks) {
-            start = 0;
-            length = pagedEntities.length;
-          } else {
-            length = numPageLinks;
-
-            if (pageNum + numPageLinks > pagedEntities.length) {
-              start = pagedEntities.length - numPageLinks;
-            } else {
-              start = pageNum;
-            }
-          }
-
-          for (let num = start; num < start + length; num++) {
-            innerPages.push({
-              href:
-                num === pageNum
-                  ? null
-                  : `${page.entityUrl.path}${paginationPath(num)}`,
-              label: num + 1,
-              class: num === pageNum ? 'va-pagination-active' : '',
-            });
-          }
-
-          pagedPage.paginator = {
-            ariaLabel,
-            prev:
-              pageNum > 0
-                ? `${page.entityUrl.path}${paginationPath(pageNum - 1)}`
-                : null,
-            inner: innerPages,
-            next:
-              pageNum < pagedEntities.length - 1
-                ? `${page.entityUrl.path}${paginationPath(pageNum + 1)}`
-                : null,
-          };
-          pageReturn.push(pagedPage);
-        }
-      }
-    }
-
-    if (!pageReturn[0]) {
-      return {};
-    }
-
-    return {
-      pagedItems: pageReturn[0].pagedItems,
-      paginator: pageReturn[0].paginator,
-    };
-  };
-
-  liquid.filters.isFirstPage = paginator => {
-    return !paginator || paginator.prev === null;
-  };
-
   liquid.filters.hasContentAtPath = (rootArray, path) => {
     const hasContent = e => _.get(e, path)?.length > 0;
     return rootArray.some(hasContent);

diff --git a/src/site/filters/liquid.unit.spec.js b/src/site/filters/liquid.unit.spec.js
@@ -1,8 +1,6 @@
 /* eslint-disable @department-of-veterans-affairs/axe-check-required */
-import _ from 'lodash';
 import liquid from 'tinyliquid';
 import { expect, assert } from 'chai';
-import eventListingMockData from '../layouts/tests/vamc/fixtures/eventListingMockData.json';
 import featuredContentData from '../layouts/tests/vet_center/template/fixtures/featuredContentData.json';
 import pressReleasesMockData from '../layouts/tests/vamc/fixtures/pressReleasesMockData.json';
 import registerFilters from './liquid';
@@ -310,54 +308,6 @@ describe('sortByDateKey', () => {
   });
 });
 
-describe('paginatePages', () => {
-  it('passing in less than 10 events', () => {
-    const slicedEventListingMockData = _.cloneDeep(eventListingMockData);
-
-    slicedEventListingMockData.reverseFieldListingNode.entities = slicedEventListingMockData.reverseFieldListingNode.entities.slice(
-      0,
-      -6,
-    );
-
-    const result = liquid.filters.paginatePages(
-      slicedEventListingMockData,
-      slicedEventListingMockData.reverseFieldListingNode.entities,
-    );
-
-    expect(result.pagedItems.length).to.be.below(11);
-    expect(result.paginator.next).to.be.null;
-  });
-
-  it('passing in more than 10 events', () => {
-    const result = liquid.filters.paginatePages(
-      eventListingMockData,
-      eventListingMockData.reverseFieldListingNode.entities,
-      'event',
-    );
-
-    const expected = {
-      ariaLabel: ' of event',
-      prev: null,
-      inner: [
-        {
-          href: null,
-          label: 1,
-          class: 'va-pagination-active',
-        },
-        {
-          href: '/pittsburgh-health-care/events/page-2',
-          label: 2,
-          class: '',
-        },
-      ],
-      next: '/pittsburgh-health-care/events/page-2',
-    };
-
-    expect(result.pagedItems.length).to.be.below(11);
-    expect(result.paginator).to.deep.equal(expected);
-  });
-});
-
 describe('benefitTerms', () => {
   it('returns null when null is passed', () => {
     expect(liquid.filters.benefitTerms(null)).to.eq(null);

diff --git a/src/site/includes/README-pagination.md b/src/site/includes/README-pagination.md
@@ -10,7 +10,7 @@ There are two types of pagination methods that we know of. For Resources & Suppo
 
 ## Code implementation summary
 
-Before the `updateCurrentPage` event handler is fired, we first select the `<va-pagination>` parent element, and set its `page` attribute based on the landing URL. `<va-pagination>`'s `page` attribute sets the active page number on the component.
+Before the `updateCurrentPage` event handler is fired, we first take the total number of pages passed in by the template and set the `pages` on the `<va-pagination>` parent element. Then we set its `page` attribute based on the landing URL. `<va-pagination>`'s `page` attribute sets the active page number on the component.
 
 When the `updateCurrentPage` event handler is fired, we grab the page number that was clicked (`newPage`) and couple that with the landing URL to form the next page to display.
 

diff --git a/src/site/includes/pagination.drupal.liquid b/src/site/includes/pagination.drupal.liquid
@@ -1,30 +1,29 @@
 {% comment %}
   See README-pagination.md for details about this template
-  
-  paginator {
-    prev: url or null
-    page {
-      href: url or null
-      class:
-      href:
-      label
-    }
-    prev: url or null
-  }
 {% endcomment %}
 
-{% assign paginatorCount = paginator.inner | size %}
-{% assign totalItems = paginatorCount %}
-
-{% if paginator != empty and totalItems <= paginatorCount %}
+
+{% if totalPages %}
   <va-pagination
     max-page-list-length="7"
     page="1"
-    pages="{{ totalItems }}"
+    pages="1"
     uswds
   >
   </va-pagination>
+{% endif %}
+
+<script>
+  if (Number('{{ totalPages }}')) {
+    const pages = Math.ceil(Number('{{ totalPages }}')  / 10);
+
+    const pagination = document.querySelector('va-pagination');
+
+    pagination.setAttribute('pages', pages);
+  }
+</script>
 
+{% if totalPages %}
   <script>
     // See README-pagination.md for a detailed walkthrough of this code
 

diff --git a/src/site/layouts/press_releases_listing.drupal.liquid b/src/site/layouts/press_releases_listing.drupal.liquid
@@ -75,9 +75,6 @@ larger space in the Fayette Plaza at 627 Pittsburgh Road, Suite 2, Uniontown,
             {% if isPreview %}
               {% assign pressReleases = reverseFieldListingNode.entities %}
               {% assign sortedReleases = pressReleases | sortByDateKey: 'fieldReleaseDate', true %}
-              {% assign pagingResult = debug | paginatePages: sortedReleases, 'press_release' %}
-              {% assign pagedItems = pagingResult.pagedItems %}
-              {% assign paginator = pagingResult.paginator %}
             {% endif %}
 
             {% for pr in pagedItems %}
@@ -90,13 +87,13 @@ larger space in the Fayette Plaza at 627 Pittsburgh Road, Suite 2, Uniontown,
                   {{ pr.fieldIntroText | truncatewords: 60, "..." }}</p>
               </section>
             {% endfor %}
-
-            {% if pagedItems.length < 1 %}
+            {% if allPressReleaseTeasers.entities.length < 1 %}
               <div class="clearfix-text">No news releases at this time.</div>
             {% endif %}
             {% include "src/site/includes/pagination.drupal.liquid" with 
               entityUrl = entityUrl.path
-              pagePrefix = true 
+              pagePrefix = true
+              totalPages = allPressReleaseTeasers.entities.length
             %}
         </article>
         <!--Last updated & feedback button-->

diff --git a/src/site/layouts/story_listing.drupal.liquid b/src/site/layouts/story_listing.drupal.liquid
@@ -30,6 +30,7 @@
           {% include "src/site/includes/pagination.drupal.liquid" with 
             entityUrl = entityUrl.path
             pagePrefix = true
+            totalPages = allNewsStoryTeasers.entities.length
           %}
         </article>
         <!--Last updated & feedback button-->

diff --git a/src/site/layouts/support_resources_article_listing.drupal.liquid b/src/site/layouts/support_resources_article_listing.drupal.liquid
@@ -49,7 +49,10 @@
           {% endfor %}
           </ul>
         </div>
-        {% include "src/site/includes/pagination.drupal.liquid" with entityUrl = path %}
+        {% include "src/site/includes/pagination.drupal.liquid" with
+          entityUrl = path
+          totalPages = totalArticles
+        %}
         <div class="usa-content">
           <va-back-to-top></va-back-to-top>
         <!-- Last updated & feedback button-->

diff --git a/src/site/stages/build/plugins/create-resources-and-support-section.js b/src/site/stages/build/plugins/create-resources-and-support-section.js
@@ -182,24 +182,6 @@ function createPaginatedArticleListings({
 
       const pagesForCategory = paginatedArticles.map(
         (pageOfArticles, index) => {
-          const paginatorInner = paginatedArticles.map(
-            (nextPage, pageIndex) => {
-              return {
-                label: pageIndex + 1,
-                href: `/${nextPage.uri}`,
-                class: pageIndex === index ? 'va-pagination-active' : '',
-              };
-            },
-          );
-
-          let paginatorPrev = null;
-          let paginatorNext = null;
-
-          if (index > 0) paginatorPrev = paginatorInner[index - 1].href;
-
-          if (index + 1 < paginatedArticles.length)
-            paginatorNext = paginatorInner[index + 1].href;
-
           const pageStart = index * PAGE_SIZE + 1;
           const pageEnd = Math.min(
             (index + 1) * PAGE_SIZE,
@@ -223,12 +205,8 @@ function createPaginatedArticleListings({
             layout: 'support_resources_article_listing.drupal.liquid',
             title: sectionTitle,
             articles: pageOfArticles,
+            totalArticles: allArticlesForGroup.length,
             paginationTitle,
-            paginator: {
-              prev: paginatorPrev,
-              inner: paginatorInner,
-              next: paginatorNext,
-            },
           };
 
           page.debug = JSON.stringify(page);