TP-48565 | migration to store

src/Pages/JiraDashboard/index.tsx

@@ -6,6 +6,9 @@ import FallbackComponent from '@src/components/Fallback';
 import {
   setJiraDashboardData,
   setPageDetails,
+  setIsLoading,
+  setCurrentPageNumber,
+  setCurrentPageSize,
 } from '@src/slices/jiraDashboardSlice';
 import { ApiService } from '@src/services/api';
 import { JiraDashboardData, JiraDashboardState } from '@src/types';
@@ -19,28 +22,23 @@ const JiraDashboard: FC = () => {
     (state: { jiraDashboard: { data: JiraDashboardData[] } }) =>
       state.jiraDashboard.data,
   );
-  const pageDetails = useSelector(
-    (state: { jiraDashboard: JiraDashboardState }) =>
-      state.jiraDashboard.pageDetails,
-  );
+  const { pageDetails, isLoading, currentPageNumber, currentPageSize } =
+    useSelector(
+      (state: { jiraDashboard: JiraDashboardState }) => state.jiraDashboard,
+    );
 
   const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [currentPageNumber, setPageNumber] = useState<number>(0);
-  const [currentPageSize, setPageSize] = useState<number>(10);
   const [searchParams, setSearchParams] = useSearchParams();
-  const pageNumberRef = useRef(
-    `page_number=${currentPageNumber}&page_size=${currentPageSize}`,
-  );
+
   const searchParamRef = useRef('');
   const navigate = useNavigate();
 
   const startJiraSearch = (param: string): void => {
     const endPoint = FETCH_JIRA_DATA(param);
-    setIsLoading(true);
+    dispatch(setIsLoading(true));
     ApiService.get(endPoint)
       .then(response => {
-        setIsLoading(false);
+        dispatch(setIsLoading(false));
         dispatch(setJiraDashboardData(response?.data?.data));
         dispatch(setPageDetails(response?.data?.page));
       })
@@ -50,7 +48,7 @@ const JiraDashboard: FC = () => {
             ? `${error?.response?.data?.error?.message},`
             : ''
         }`;
-        setIsLoading(false);
+        dispatch(setIsLoading(true));
         toast.error(toastMessage);
         dispatch(setJiraDashboardData([]));
       });
@@ -60,16 +58,16 @@ const JiraDashboard: FC = () => {
     const pageNumberParam = searchParams.get('page_number');
     const pageSizeParam = searchParams.get('page_size');
     if (pageNumberParam) {
-      setPageNumber(Number(pageNumberParam));
+      dispatch(setCurrentPageNumber(Number(pageNumberParam)));
     } else {
       searchParams.set('page_number', '0');
-      setPageNumber(0);
+      dispatch(setCurrentPageNumber(0));
     }
     if (pageSizeParam) {
-      setPageSize(Number(pageSizeParam));
+      dispatch(setCurrentPageSize(Number(pageSizeParam)));
     } else {
       searchParams.set('page_size', '10');
-      setPageSize(10);
+      dispatch(setCurrentPageSize(10));
     }
     const searchParam = searchParams.toString();
     updateURLAndFetchData(searchParam);
@@ -90,11 +88,7 @@ const JiraDashboard: FC = () => {
   const fetchJiraData = (props: any): void => {
     const { filterQuery = '', isDrawer = false } = props;
     const finalParams = filterQuery ? `${filterQuery}` : '';
-    setPageNumber(0);
-    searchParamRef.current = finalParams;
-    pageNumberRef.current = `page_number=${
-      isDrawer ? currentPageNumber : '0'
-    }&page_size=${currentPageSize}`;
+    dispatch(setCurrentPageNumber(0));
     startJiraSearch(`${finalParams}`);
   };
 

src/slices/jiraDashboardSlice.tsx

@@ -8,6 +8,9 @@ const initialState: JiraDashboardState = {
     pageSize: 10,
     totalElements: 0,
   },
+  isLoading: false,
+  currentPageNumber: 0,
+  currentPageSize: 10,
 };
 
 const jiraDashboardSlice = createSlice({
@@ -20,10 +23,24 @@ const jiraDashboardSlice = createSlice({
     setPageDetails: (state, action) => {
       state.pageDetails = action.payload;
     },
+    setIsLoading: (state, action) => {
+      state.isLoading = action.payload;
+    },
+    setCurrentPageNumber: (state, action) => {
+      state.currentPageNumber = action.payload;
+    },
+    setCurrentPageSize: (state, action) => {
+      state.currentPageSize = action.payload;
+    },
   },
 });
 
-export const { setJiraDashboardData, setPageDetails } =
-  jiraDashboardSlice.actions;
+export const {
+  setJiraDashboardData,
+  setPageDetails,
+  setIsLoading,
+  setCurrentPageNumber,
+  setCurrentPageSize,
+} = jiraDashboardSlice.actions;
 
 export default jiraDashboardSlice.reducer;

src/types/index.d.ts

@@ -35,3 +35,15 @@ export interface JiraDashboardData {
   teamsInvolved: string[];
   jiraCreateAt: string;
 }
+
+export interface JiraDashboardState {
+  data: JiraDashboardData[];
+  pageDetails: {
+    pageNumber: number;
+    pageSize: number;
+    totalElements: number;
+  };
+  isLoading: boolean;
+  currentPageNumber: number;
+  currentPageSize: number;
+}