Support for dynamic pagination

dashboard/src/actions/datasetListActions.js

@@ -38,10 +38,7 @@ export const fetchPublicDatasets = (page) => async (dispatch, getState) => {
     if (response.status === 200 && response.data) {
       const startIdx = (page - 1) * perPage;
 
-      if (
-        publicData.length === 0 ||
-        publicData.length !== response.data.total
-      ) {
+      if (publicData.length !== response.data.total) {
         publicData = new Array(response.data.total);
       }
       publicData.splice(
@@ -60,9 +57,14 @@ export const fetchPublicDatasets = (page) => async (dispatch, getState) => {
         const offset = urlSearchParams.get("offset");
 
         dispatch({
-          type: TYPES.SET_PAGE_OFFSET,
+          type: TYPES.SET_RESULT_OFFSET,
           payload: Number(offset),
         });
+      } else {
+        dispatch({
+          type: TYPES.SET_RESULT_OFFSET,
+          payload: Number(response.data.total),
+        });
       }
     }
   } catch (error) {
@@ -107,8 +109,8 @@ export const applyFilter = () => (dispatch) => {
     payload: [],
   });
   dispatch({
-    type: TYPES.SET_PAGE_OFFSET,
-    payload: 0,
+    type: TYPES.SET_RESULT_OFFSET,
+    payload: CONSTANTS.INITIAL_RESULT_OFFSET,
   });
   dispatch(fetchPublicDatasets(CONSTANTS.START_PAGE_NUMBER));
 };

dashboard/src/actions/types.js

@@ -24,7 +24,7 @@ export const NAVBAR_CLOSE = "NAVBAR_CLOSE";
 /* PUBLIC DATASETS */
 export const UPDATE_PUBLIC_DATASETS = "UPDATE_PUBLIC_DATASETS";
 export const FAVORITED_DATASETS = "GET_FAVORITE_DATASETS";
-export const SET_PAGE_OFFSET = "SET_PAGE_OFFSET";
+export const SET_RESULT_OFFSET = "SET_RESULT_OFFSET";
 export const SET_PAGE_LIMIT = "SET_PAGE_LIMIT";
 export const SET_DATE_RANGE = "SET_DATE_RANGE";
 export const SET_SEARCH_KEY = "SET_SEARCH_KEY";

dashboard/src/assets/constants/browsingPageConstants.js

@@ -1,10 +1,10 @@
 export const DEFAULT_PER_PAGE = 20;
 export const INITIAL_PAGE_LIMIT = 60;
-export const START_PAGE_NUMBER = 1;
+export const INITIAL_RESULT_OFFSET = 0;
 export const OVERFETCH_FACTOR = 3;
 export const PER_PAGE_OPTIONS = [
   { title: "10", value: 10 },
   { title: "20", value: 20 },
   { title: "50", value: 50 },
 ];
-export const START_OFFSET = 0;
+export const START_PAGE_NUMBER = 1;

dashboard/src/modules/components/DatePickerComponent/index.jsx

@@ -31,24 +31,26 @@ const DatePickerWidget = (props) => {
       ? ""
       : 'The "to" date must be after the "from" date';
 
-  const onFromChange = (_str, date) => {
-    dispatch(setFilterKeys(new Date(date), filter.endDate));
+  const onFromChange = (_event, _str, date) => {
+    dispatch(setFilterKeys(date, filter.endDate));
     if (filter.endDate) {
       checkEndDate(date, filter.endDate);
+    } else {
+      setIsEndDateError(true);
     }
   };
 
-  const onToChange = (_str, date) => {
-    if (isValidDate(new Date(date))) {
-      dispatch(setFilterKeys(filter.startDate, new Date(date)));
+  const onToChange = (_event, _str, date) => {
+    if (isValidDate(date)) {
+      dispatch(setFilterKeys(filter.startDate, date));
     }
     checkEndDate(filter.startDate, date);
   };
-  const checkEndDate = (fromDate, toDate) => {
+  const checkEndDate = (fromDate, toDate) =>
     new Date(fromDate) >= new Date(toDate)
       ? setIsEndDateError(true)
       : setIsEndDateError(false);
-  };
+
   const filterByDate = () => {
     if (filter.startDate) {
       dispatch(applyFilter());

dashboard/src/modules/components/PaginationComponent/index.jsx

@@ -46,7 +46,7 @@ const TablePagination = ({ page, setPage }) => {
     }
     if (left !== right) {
       dispatch({
-        type: TYPES.SET_PAGE_OFFSET,
+        type: TYPES.SET_RESULT_OFFSET,
         payload: startIdx,
       });
       dispatch(fetchPublicDatasets(newPage));

dashboard/src/reducers/datasetListReducer.js

@@ -5,7 +5,7 @@ const initialState = {
   publicData: [],
   favoriteRepoNames: [],
   tableData: [],
-  offset: CONSTANTS.START_OFFSET,
+  offset: CONSTANTS.INITIAL_RESULT_OFFSET,
   limit: CONSTANTS.INITIAL_PAGE_LIMIT,
   perPage: CONSTANTS.DEFAULT_PER_PAGE,
   searchKey: "",
@@ -28,7 +28,7 @@ const DatasetListReducer = (state = initialState, action = {}) => {
         ...state,
         favoriteRepoNames: [...payload],
       };
-    case TYPES.SET_PAGE_OFFSET:
+    case TYPES.SET_RESULT_OFFSET:
       return {
         ...state,
         offset: payload,