TP-48565 | url based pagination

src/Pages/JiraDashboard/Dashboard.module.scss

@@ -20,7 +20,7 @@
   gap: 8px;
 
   .hyperlink {
-    color: #585757;
+    color: var(--navi-color-gray-c2);
     text-decoration: none;
     transition: color 0.3s;
   }
@@ -32,7 +32,7 @@
 
   &:hover {
     .hyperlink {
-      color: #0276fe;
+      color: var(--navi-color-blue-base);
     }
 
     .go-to-link-icon {

src/Pages/JiraDashboard/SearchResultsTable.module.scss

@@ -55,5 +55,5 @@
 }
 
 :export {
-  sessionId: rgb(88, 87, 87);
+  sessionId: var(--navi-color-gray-c2);
 }

src/Pages/JiraDashboard/constants.ts

@@ -1,6 +1,5 @@
 export const DashboardHeaderConstants = {
   title: 'JIRA tickets',
-  searchTitle: 'Select date range: ',
 };
 
 //TO DO: Need to change the API URL

src/Pages/JiraDashboard/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useState, useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from '@navi/web-ui/lib/primitives/Toast/index';
 import FallbackComponent from '@src/components/Fallback';
@@ -26,8 +26,10 @@ const JiraDashboard: FC = () => {
     `page_number=${currentPageNumber}&page_size=${currentPageSize}`,
   );
   const searchParamRef = useRef('');
+  const navigate = useNavigate();
 
   const startJiraSearch = (param = pageNumberRef.current): void => {
+    console.log('param', param);
     const endPoint = FETCH_JIRA_DATA(param);
     setIsLoading(true);
     ApiService.get(endPoint)
@@ -49,10 +51,25 @@ const JiraDashboard: FC = () => {
   };
 
   useEffect(() => {
+    const pageNumberParam = searchParams.get('page_number');
+    const pageSizeParam = searchParams.get('page_size');
+    if (pageNumberParam) {
+      setPageNumber(Number(pageNumberParam));
+    } else {
+      searchParams.set('page_number', '0');
+      setPageNumber(0);
+    }
+    if (pageSizeParam) {
+      setPageSize(Number(pageSizeParam));
+    } else {
+      searchParams.set('page_size', '10');
+      setPageSize(10);
+    }
     const searchParam = searchParams.toString();
+    updateURLAndFetchData(searchParam);
+    console.log('searchParam', searchParam);
     if (searchParam) {
-      searchParamRef.current = `${searchParam}&`;
-      startJiraSearch(`${searchParam}&${pageNumberRef.current}`);
+      startJiraSearch(`${searchParam}`);
     } else {
       startJiraSearch();
     }
@@ -66,14 +83,17 @@ const JiraDashboard: FC = () => {
     pageNumberRef.current = `page_number=${
       pageNumber - 1
     }&page_size=${currentPageSize}`;
-    startJiraSearch(`${searchParamRef.current}${finalParams}`);
+    searchParams.set('page_number', (pageNumber - 1).toString());
+    const updatedQuery = searchParams.toString();
+    updateURLAndFetchData(updatedQuery);
+    //startJiraSearch(`${searchParamRef.current}`);
   };
 
   const handlePageSize = (pageSize: number): void => {
-    const finalParams = `page_number=0&page_size=${pageSize}`;
-    setPageSize(pageSize);
-    pageNumberRef.current = `page_number=0&page_size=${pageSize}`;
-    startJiraSearch(`${searchParamRef.current}${finalParams}`);
+    searchParams.set('page_size', pageSize.toString());
+    const updatedQuery = searchParams.toString();
+    updateURLAndFetchData(updatedQuery);
+    //startJiraSearch(`${searchParamRef.current}`);
   };
 
   const fetchJiraData = (props: any): void => {
@@ -87,6 +107,15 @@ const JiraDashboard: FC = () => {
     startJiraSearch(`${finalParams}${pageNumberRef.current}`);
   };
 
+  const updateURLAndFetchData = (updatedQuery: string) => {
+    navigate({
+      search: updatedQuery,
+    });
+    fetchJiraData({
+      filterQuery: updatedQuery,
+    });
+  };
+
   const returnTable = (): JSX.Element => {
     if (isLoading) {
       return <FallbackComponent />;
@@ -114,71 +143,3 @@ const JiraDashboard: FC = () => {
 };
 
 export default JiraDashboard;
-/*
-{
-    "data": [
-        {
-            "id": 532,
-            "incidentName": "#_houston-7789”,
-            "ticketType": "Epic",
-            "ticketName": "TP-54234",
-            "JiraStatus": "To Do",
-            "JiraDescription": "Jira Integration on Houston Dashboard. Jira Integration on Houston Dashboard",
-            "JiraAssignedTo": "Houston",
-            "JiraLink": "https://jira.com/TP-54234",
-            "Date": "oct 12, 2021"
-        },
-        {
-            "id": 531,
-            "incidentName": "#_houston-7798,
-            "ticketType": “SubTask”,
-            "ticketName": "TP-54243",
-            "JiraStatus": "In progress",
-            "JiraDescription": "ira Integration on Houston Dashboard",
-            "JiraAssignedTo": "CRM",
-            "JiraLink": "https://jira.com/TP-54345",
-            "Date": "oct 12, 2021"
-        },
-        {
-            "id": 530,
-            "incidentName": "#_houston-7767",
-            "ticketType": “Task”,
-            "ticketName": "TP-54234",
-            "JiraStatus": "In progress",
-            "JiraDescription": "ira Integration on Houston Dashboard",
-            "JiraAssignedTo": "Houston",
-            "JiraLink": "https://jira.com/TP-54234",
-            "Date": "oct 12, 2021"
-        },
-        {
-            "id": 529,
-            "incidentName": "#_houston-7727",
-            "ticketType": “Bug”,
-            "ticketName": "TP-54234",
-            "JiraStatus": "In progress",
-            "JiraDescription": "ira Integration on Houston Dashboard",
-            "JiraAssignedTo": "Alfred",
-            "JiraLink": "https://jira.com/TP-54234",
-            "Date": "oct 12, 2021"
-        },
-        {
-            "id": 528,
-            "incidentName": "#_houston-7707",
-            "ticketType": “Story”,
-            "ticketName": "TP-54234",
-            "JiraStatus": "In progress",
-            "JiraDescription": "ira Integration on Houston Dashboard",
-            "JiraAssignedTo": "Payment",
-            "JiraLink": "https://jira.com/TP-54234",
-            "Date": "oct 12, 2021"
-        }
-    ],
-    "pages": {
-        "totalElements": 5,
-        "totalPages": 1,
-        "pageSize": 10,
-        "pageNumber": 0
-    },
-    "status": 200
-}
-*/

src/Pages/JiraDashboard/partials/ticketNameCell.tsx

@@ -29,7 +29,6 @@ const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => {
   const handleClick = () => {
     window.open(ticketLink, '_blank');
   };
-  console.log('ticketType', ticketType);
   return (
     <div className={styles['houston-id-wrapper']}>
       {getTicketIcon(ticketType)}