[issue-2790] Correct pb with news pagination (change in API) (#2928)

* [issue-2790] Correct pb with news pagination (change in API) * Retrieve 20 news & events / add a link to view all * Use given count of pages
adoptium · Jul 1, 2024 · 06401db · 06401db
1 parent 42b51d3
commit 06401db
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/src/__fixtures__/hooks.tsx b/src/__fixtures__/hooks.tsx
@@ -327,13 +327,11 @@ export const createRandomNewsAndEventsData = (): News => ({
         link: new URL('https://link_mock'),
       },
     ],
-    pagination: {
-      page: 1,
-      pagesize: 5,
-      result_start: 1,
-      result_end: 5,
-      result_size: 5,
-      total_result_size: 16,
+    pager: {     
+      current_page: 0,
+      items_per_page: 5,
+      total_items: 54,
+      total_pages: 11,
     }
   },
   events: [

diff --git a/src/hooks/fetchNews.tsx b/src/hooks/fetchNews.tsx
@@ -32,7 +32,7 @@ async function fetchLatestNews(page) {
     const url = new URL(`${baseUrl}/news`);
     url.searchParams.append('parameters[publish_to]', 'adoptium');
     url.searchParams.append('page', page);
-    url.searchParams.append('pagesize', '5');
+    url.searchParams.append('pagesize', '20');
 
     return axios.get(url.toString())
         .then(function (response) {
@@ -46,6 +46,7 @@ async function fetchLatestNews(page) {
 async function fetchLatestEvents() {
     const url = new URL(`${baseUrl}/events`);
     url.searchParams.append('parameters[publish_to]', 'adoptium');
+    url.searchParams.append('pagesize', '20');
 
     return axios.get(url.toString())
         .then(function (response) {
@@ -63,13 +64,11 @@ export interface News {
 
 export interface NewsResponse {
     news: NewsItem[];
-    pagination: {
-        page: number;
-        pagesize: number;
-        result_start: number;
-        result_end: number;
-        result_size: number;
-        total_result_size: number;
+    pager: {
+        current_page: number;
+        items_per_page: number;
+        total_items: number;
+        total_pages: number;
     } | null;
 }
 

diff --git a/src/pages/__tests__/__snapshots__/news.test.tsx.snap b/src/pages/__tests__/__snapshots__/news.test.tsx.snap
@@ -161,6 +161,39 @@ exports[`News page > renders correctly 1`] = `
                   />
                 </button>
               </li>
+              <li>
+                <button
+                  aria-label="Go to page 5"
+                  class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-sizeMedium MuiPaginationItem-text MuiPaginationItem-circular MuiPaginationItem-page css-yuzg60-MuiButtonBase-root-MuiPaginationItem-root"
+                  tabindex="0"
+                  type="button"
+                >
+                  5
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </li>
+              <li>
+                <div
+                  class="MuiPaginationItem-root MuiPaginationItem-sizeMedium MuiPaginationItem-text MuiPaginationItem-circular MuiPaginationItem-ellipsis css-1v2lvtn-MuiPaginationItem-root"
+                >
+                  …
+                </div>
+              </li>
+              <li>
+                <button
+                  aria-label="Go to page 11"
+                  class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-sizeMedium MuiPaginationItem-text MuiPaginationItem-circular MuiPaginationItem-page css-yuzg60-MuiButtonBase-root-MuiPaginationItem-root"
+                  tabindex="0"
+                  type="button"
+                >
+                  11
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </li>
               <li>
                 <button
                   aria-label="Go to next page"
@@ -209,6 +242,14 @@ exports[`News page > renders correctly 1`] = `
               </li>
             </ul>
           </nav>
+          <a
+            class="px-2"
+            href="https://newsroom.eclipse.org/eclipse/community-news"
+            rel="noreferrer"
+            target="_blank"
+          >
+            View all
+          </a>
         </div>
         <div
           class="col-md-1"
@@ -341,6 +382,14 @@ exports[`News page > renders spinner when news not loaded 1`] = `
               />
             </svg>
           </span>
+          <a
+            class="px-2"
+            href="https://newsroom.eclipse.org/eclipse/community-news"
+            rel="noreferrer"
+            target="_blank"
+          >
+            View all
+          </a>
         </div>
         <div
           class="col-md-1"

diff --git a/src/pages/news.tsx b/src/pages/news.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useRef, useState, useEffect } from 'react';
+import React, { MutableRefObject, useRef, useState } from 'react';
 import Timeline from '@mui/lab/Timeline'
 import TimelineItem from '@mui/lab/TimelineItem'
 import TimelineSeparator from '@mui/lab/TimelineSeparator'
@@ -43,15 +43,16 @@ const NewsPage = (): JSX.Element => {
                     </div>
                   )
               ) : <CircularProgress aria-label='loading spinner' />}
-              {news && news.pagination ? 
+              {news && news.pager ? 
                 <Pagination
                   className='pt-3 d-flex justify-content-center'
-                  count={Math.ceil(news.pagination.total_result_size / news.pagination.pagesize)}
+                  count={news.pager.total_pages}
                   onChange={handlePageClick}
                   showFirstButton
                   showLastButton
                 />
               : null}           
+              <a href="https://newsroom.eclipse.org/eclipse/community-news" target='_blank' rel='noreferrer' className='px-2'>View all</a>
             </div>
             <div className='col-md-1' />
             <div className='col-md-6'>