FWF-4400 [added] added persist Task list data (#561)

* FWF-4400 [added] added persist tasklist data

* code optimized based on sonar qube [modified] replace || with ?? operator

* Fixed [modified] typo fixed of resetTaskListParams

* replace || with ?? in filterService fetchServiceTaskList function

Author: shuhaib-aot

forms-flow-nav/src/sidenav/Sidebar.jsx

@@ -206,7 +206,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
     },
     REVIEW: {
       value: "review",
-      supportedRoutes: ["task"],
+      supportedRoutes: ["task","review"],
     },
     ANALYZE: {
       value: "analyze",
@@ -364,6 +364,10 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
                     name: "Tasks",
                     path: "task",
                   },
+                  {
+                    name: "Review",
+                    path: "review",
+                  },
                 ]}
                 subscribe={props.subscribe}
               />

forms-flow-review/src/actions/actionConstants.ts

@@ -27,6 +27,7 @@ export default {
     UPDATE_FILTER_LIST_SORT_PARAMS: "UPDATE_FILTER_LIST_SORT_PARAMS",
     IS_BPM_TASK_DETAIL_LOADING: "IS_BPM_TASK_DETAIL_LOADING",
     LIST_APPLICATION_HISTORY: "LIST_APPLICATION_HISTORY",
+    RESET_TASK_LIST_PARAMS: "RESET_TASK_LIST_PARAMS",
     ATTRIBUTE_FILTER_LIST: "ATTRIBUTE_FILTER_LIST",
     BPM_SELECTED_ATTRIBUTE_FILTER: "BPM_SELECTED_ATTRIBUTE_FILTER",
 };

forms-flow-review/src/actions/taskActions.ts

@@ -174,3 +174,8 @@ export const setBPMFilterSearchParams = (data) => (dispatch) => {
       payload: data,
     });
   };
+
+export const resetTaskListParams = (data) =>({
+  type: ACTION_CONSTANTS.RESET_TASK_LIST_PARAMS,
+  payload: data,
+})

forms-flow-review/src/api/services/filterServices.ts

@@ -40,10 +40,22 @@ export const fetchUserList = (...rest) => {
   };
 
 
-  export const fetchServiceTaskList = (reqData, taskIdToRemove, firstResult, maxResults, ...rest) => {
+  /**
+   * Fetches the task list from the server and updates the redux store with the task list and count.
+   * @param {Object} reqData - The request data to be sent to the server.
+   * @param {string} taskIdToRemove - The task ID to be removed from the task list.
+   * @param {number} pageNo - The current page number.
+   * @param {number} maxResults - The maximum number of results to be fetched.
+   * @param {function} done - A callback function to be called after the request is completed.
+   */
+  export const fetchServiceTaskList = (reqData, taskIdToRemove, pageNo, maxResults, ...rest) => {
     const done = rest.length ? rest[0] : () => {};
+    // create the firstResult value based on the page number and maxResults
+    // firstResult = (pageNo - 1) * maxResults
+    const firstResultIndex = getFirstResultIndex(pageNo,maxResults);
+
     const apiUrlgetTaskList =
-     `${API.GET_BPM_TASK_FILTERS}?firstResult=${firstResult}&maxResults=${maxResults ?? MAX_RESULTS}`
+        `${API.GET_BPM_TASK_FILTERS}?firstResult=${firstResultIndex}&maxResults=${maxResults ?? MAX_RESULTS}`;
     return (dispatch) => {
       RequestService.httpPOSTRequestWithHAL(
         apiUrlgetTaskList,
@@ -100,8 +112,9 @@ export const fetchUserList = (...rest) => {
     );
   };
 
-  export const getFirstResultIndex = (activePage) => {
-    return (activePage * MAX_RESULTS) - MAX_RESULTS;
+  export const getFirstResultIndex = (activePage,limit) => {
+    const limits = limit ?? MAX_RESULTS;
+    return (activePage * limits) - limits;
   };
 
 

forms-flow-review/src/components/AttributeFilterModal.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { useState, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { MAX_RESULTS, PRIVATE_ONLY_YOU } from "../constants/index";
+import {  PRIVATE_ONLY_YOU } from "../constants/index";
 import { StorageService, StyleServices } from "@formsflow/service";
 import { Filter, FilterCriteria } from "../types/taskFilter";
 import {
@@ -38,7 +38,8 @@ export const AttributeFilterModal = ({
   const [filterNameError, setFilterNameError] = useState("");
   const [filterName, setFilterName] = useState("");
   const [shareAttrFilter, setShareAttrFilter] = useState(PRIVATE_ONLY_YOU);
-  const firstResult = useSelector((state: any) => state.task.firstResult);
+  const activePage = useSelector((state: any) => state.task.activePage);
+  const limit = useSelector((state: any) => state.task.limit);
   const userRoles = StorageService.getParsedData(StorageService.User.USER_ROLE);
   const isCreateFilters = userRoles?.includes("create_filters");
   const filterNameLength = 50;
@@ -213,8 +214,8 @@ export const AttributeFilterModal = ({
       fetchServiceTaskList(
         getFilterData(updatedParams),
         null,
-        firstResult,
-        MAX_RESULTS
+        activePage,
+        limit,
       )
     );
 

forms-flow-review/src/components/ResizableTable/ResizableTable.tsx

@@ -26,7 +26,8 @@ import {
   setFilterListParams,
   setFilterListSortParams,
   setTaskListLimit,
-  setDefaultFilter,
+  setDefaultFilter, 
+  resetTaskListParams,
   setSelectedBpmAttributeFilter,
 } from "../../actions/taskActions";
 
@@ -287,7 +288,6 @@ export function ResizableTable(): JSX.Element {
     selectedFilter = null,
     selectedAttributeFilter = null,
     taskId: bpmTaskId = null,
-    firstResult = 0,
     limit,
     tasksList: taskList = [],
     defaultFilter = null,
@@ -298,6 +298,7 @@ export function ResizableTable(): JSX.Element {
     activePage,
     tasksCount,
     isTaskListLoading,
+    filterCached,
   } = useSelector((state: any) => state.task ?? {});
   const selectedFilterId = selectedFilter?.id ?? null;
   const selectedAttributeFilterId = selectedAttributeFilter?.id ?? null;
@@ -412,7 +413,7 @@ export function ResizableTable(): JSX.Element {
         },
       };
       dispatch(setBPMTaskLoader(true));
-      dispatch(fetchServiceTaskList(updatedFilter, null, firstResult, limit));
+      dispatch(fetchServiceTaskList(updatedFilter, null, activePage, limit));
     }
   }, [isAssigned]);
 
@@ -728,8 +729,13 @@ const extraItems = isFilterCreator ? [
       dispatch(setBPMTaskLoader(true));
       dispatch(setBPMTaskListActivePage(1));
       dispatch(
-        fetchServiceTaskList(cloneDeep(updatedParams), null, firstResult, limit)
+        fetchServiceTaskList(cloneDeep(updatedParams), null, activePage, limit)
       );
+    }else if(filterCached){ 
+        dispatch(resetTaskListParams({filterCached:false}));
+        dispatch(
+          fetchServiceTaskList(cloneDeep(updatedParams), null, activePage, limit)
+        );
     }
   }, [
     selectedAttributeFilterId,
@@ -740,8 +746,6 @@ const extraItems = isFilterCreator ? [
     bpmattributeFilterList,
     selectedFilter,
     sortParams,
-    firstResult,
-    limit,
     reqData,
   ]);
 
@@ -800,14 +804,14 @@ const extraItems = isFilterCreator ? [
       dispatch(setBPMTaskLoader(true));
       dispatch(setBPMTaskListActivePage(1));
       dispatch(
-        fetchServiceTaskList(formattedReqData, null, firstResult, limit)
+        fetchServiceTaskList(formattedReqData, null, activePage, limit)
       );
     }
   }, [
     dispatch,
     reqData,
     selectedFilter,
-    firstResult,
+    activePage,
     limit,
     searchParams,
     bpmFiltersList,
@@ -885,17 +889,17 @@ const extraItems = isFilterCreator ? [
     (newLimit) => {
       dispatch(setBPMTaskLoader(true));
       dispatch(setTaskListLimit(newLimit));
-      dispatch(fetchServiceTaskList(reqData, null, firstResult, newLimit));
+      dispatch(setBPMTaskListActivePage(1));
+      dispatch(fetchServiceTaskList(reqData, null, 1, newLimit));
     },
-    [dispatch, reqData, firstResult]
+    [dispatch, reqData, activePage]
   );
 
   const handlePageChange = useCallback(
     (pageNumber) => {
       dispatch(setBPMTaskListActivePage(pageNumber));
       dispatch(setBPMTaskLoader(true));
-      const firstResultIndex = limit * pageNumber - limit;
-      dispatch(fetchServiceTaskList(reqData, null, firstResultIndex, limit));
+      dispatch(fetchServiceTaskList(reqData, null, pageNumber, limit));
     },
     [dispatch, limit, reqData]
   );

forms-flow-review/src/components/TaskFilterModal.tsx

@@ -20,7 +20,6 @@ import {
 import { removeTenantKey, trimFirstSlash } from "../helper/helper.js";
 import {
   ACCESSIBLE_FOR_ALL_GROUPS,
-  MAX_RESULTS,
   MULTITENANCY_ENABLED,
   PRIVATE_ONLY_YOU,
   SPECIFIC_USER_OR_GROUP,
@@ -74,8 +73,9 @@ export function TaskFilterModal({ show, onClose, filter, canEdit }) {
   const {
     userList = { data: [] },
     userGroups: candidateGroups = { data: [] },
-    firstResult,
+    activePage,
     defaultFilter,
+    limit
   } = useSelector((state: any) => state.task);
   const { successState, startSuccessCountdown } = useSuccessCountdown();
   const userListData = userList.data ?? [];
@@ -522,7 +522,7 @@ export function TaskFilterModal({ show, onClose, filter, canEdit }) {
     const selectedFilter =
     filters.find((i) => defaultFilterId === i.id) ?? filters[0];
 
-    dispatch(fetchServiceTaskList(selectedFilter, null, firstResult, 15));
+    dispatch(fetchServiceTaskList(selectedFilter, null, activePage, limit));
   };
 
 
@@ -548,7 +548,7 @@ export function TaskFilterModal({ show, onClose, filter, canEdit }) {
 
 
   const filterResults = () => {
-    dispatch(fetchServiceTaskList(getData(), null, firstResult, MAX_RESULTS, (error) => {
+    dispatch(fetchServiceTaskList(getData(), null, activePage, limit, (error) => {
       if (error) {
         console.error("Error fetching tasks:", error);
         return;

forms-flow-review/src/reducers/taskReducer.ts

@@ -15,8 +15,8 @@ const initialState = {
     name: { sortOrder: "asc" },
     assignee: { sortOrder: "asc" },
   },
-  firstResult: 0,
   limit: 5,
+  activePage: 1,
   selectedFilter: {},
   selectedAttributeFilter: {},
   taskId: null,
@@ -94,6 +94,8 @@ const TaskHandler = (state = initialState, action: TaskAction) => {
       return { ...state, limit: action.payload };
     case ACTION_CONSTANTS.UPDATE_FILTER_SEARCH_PARAMS:
       return { ...state, filterListSearchParams: action.payload };
+    case ACTION_CONSTANTS.RESET_TASK_LIST_PARAMS:
+      return {...state, ...action.payload}
     default:
       return state;
   }

forms-flow-review/src/root.component.tsx

@@ -4,10 +4,29 @@ import { BASE_ROUTE } from "./constants";
 import { Provider } from "react-redux";
 import StoreService from "./services/StoreService";
 import { ConnectedRouter } from "connected-react-router";
-
+import { useEffect } from "react";
+import { StorageService} from "@formsflow/service";
+ import { resetTaskListParams } from "./actions/taskActions";
 export default function Root(props: any) {
+  const REVIEW_APP_KEY = "TASK_APP_DATA";
   const store = StoreService.configureStore();
   const history = StoreService.history;
+
+  useEffect(()=>{
+    /**
+     * * This is to check if the user has come from the review app and if so, we need to set the task list params in the redux store.
+     * * This is done to avoid the user from going back to the review app and losing the data in the redux store.
+     */
+    const existingTaskData = StorageService.getParsedData(REVIEW_APP_KEY);
+    if(existingTaskData){
+      store.dispatch(resetTaskListParams({...existingTaskData,filterCached:true}));
+    }
+    StorageService.delete(REVIEW_APP_KEY);
+    return()=>{
+       StorageService.saveDataToSessionStorage(REVIEW_APP_KEY,store.getState().task);
+    }
+  },[])
+
   return (
     <Provider store={store}>
       <ConnectedRouter history={history}>

forms-flow-service/src/storage/storageService.ts

@@ -36,13 +36,23 @@ class StorageService {
     sessionStorage.setItem(key, value);
     localStorage.setItem(key,value);
   }
+  /**
+   * sets a new value for the key if present in the session storage
+   * new key/value pair is created if the key is not present
+   * @param key - key to be set in the session storage
+   * @param value - value to be set in the session storage don't need to be stringified
+   */
+  public static saveDataToSessionStorage(key: string, value: Object): void {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  }
   /**
    * removes the key value pair from the session storage if
    * the key is present.
    * @param key
    */
   public static delete(key: string): void {
     sessionStorage.removeItem(key);
+    localStorage.removeItem(key);
   }
   /**
    * Removes all key/value pairs present in the session storage