diff --git a/dashboard/src/actions/datasetListActions.js b/dashboard/src/actions/datasetListActions.js index cc4733c705..e4320613c1 100644 --- a/dashboard/src/actions/datasetListActions.js +++ b/dashboard/src/actions/datasetListActions.js @@ -1,7 +1,9 @@ +import * as CONSTANTS from "assets/constants/browsingPageConstants"; import * as TYPES from "./types"; +import { DANGER, ERROR_MSG } from "assets/constants/toastConstants"; + import API from "../utils/axiosInstance"; -import { DANGER } from "assets/constants/toastConstants"; import { showToast } from "./toastActions"; import { uriTemplate } from "utils/helper"; @@ -46,8 +48,8 @@ export const fetchPublicDatasets = (page) => async (dispatch, getState) => { ); dispatch({ - type: TYPES.GET_PUBLIC_DATASETS, - payload: [...publicData], + type: TYPES.UPDATE_PUBLIC_DATASETS, + payload: publicData, }); // in case of last page, next_url is empty if (response.data.next_url) { @@ -65,7 +67,7 @@ export const fetchPublicDatasets = (page) => async (dispatch, getState) => { }); } } catch (error) { - dispatch(showToast(DANGER, "Error")); + dispatch(showToast(DANGER, ERROR_MSG)); dispatch({ type: TYPES.NETWORK_ERROR }); } dispatch({ type: TYPES.COMPLETED }); @@ -80,49 +82,39 @@ export const getFavoritedDatasets = () => async (dispatch) => { }); }; -export const updateFavoriteRepoNames = (favorites) => async (dispatch) => { - dispatch({ - type: TYPES.FAVORITED_DATASETS, - payload: [...favorites], - }); -}; +export const updateFavoriteRepoNames = (favorites) => ({ + type: TYPES.FAVORITED_DATASETS, + payload: [...favorites], +}); -export const setPageLimit = (newPerPage) => async (dispatch) => { - dispatch({ - type: TYPES.SET_PAGE_LIMIT, - payload: newPerPage, - }); -}; +export const setPageLimit = (newPerPage) => ({ + type: TYPES.SET_PAGE_LIMIT, + payload: newPerPage, +}); -export const setFilterKeys = (startDate, endDate) => async (dispatch) => { - dispatch({ - type: TYPES.SET_DATE_RANGE, - payload: { startDate, endDate }, - }); -}; +export const setFilterKeys = (startDate, endDate) => ({ + type: TYPES.SET_DATE_RANGE, + payload: { startDate, endDate }, +}); -export const nameFilter = (value) => async (dispatch) => { - dispatch({ - type: TYPES.SET_SEARCH_KEY, - payload: value, - }); -}; +export const nameFilter = (value) => ({ + type: TYPES.SET_SEARCH_KEY, + payload: value, +}); export const applyFilter = () => (dispatch) => { dispatch({ - type: TYPES.GET_PUBLIC_DATASETS, + type: TYPES.UPDATE_PUBLIC_DATASETS, payload: [], }); dispatch({ type: TYPES.SET_PAGE_OFFSET, payload: 0, }); - dispatch(fetchPublicDatasets(1)); + dispatch(fetchPublicDatasets(CONSTANTS.START_PAGE_NUMBER)); }; -export const setPerPage = (value) => (dispatch) => { - dispatch({ - type: TYPES.SET_PER_PAGE, - payload: value, - }); -}; +export const setPerPage = (value) => ({ + type: TYPES.SET_PER_PAGE, + payload: value, +}); diff --git a/dashboard/src/actions/types.js b/dashboard/src/actions/types.js index 61924fb927..8157b0abf9 100644 --- a/dashboard/src/actions/types.js +++ b/dashboard/src/actions/types.js @@ -22,7 +22,7 @@ export const NAVBAR_OPEN = "NAVBAR_OPEN"; export const NAVBAR_CLOSE = "NAVBAR_CLOSE"; /* PUBLIC DATASETS */ -export const GET_PUBLIC_DATASETS = "GET_PUBLIC_DATASETS"; +export const UPDATE_PUBLIC_DATASETS = "UPDATE_PUBLIC_DATASETS"; export const FAVORITED_DATASETS = "GET_FAVORITE_DATASETS"; export const SET_LOGIN_DETAILS = "SET_LOGIN_DETAILS"; export const SET_PAGE_OFFSET = "SET_PAGE_OFFSET"; @@ -32,12 +32,6 @@ export const SET_DATE_RANGE = "SET_DATE_RANGE"; export const SET_SEARCH_KEY = "SET_SEARCH_KEY"; export const SET_PER_PAGE = "SET_PER_PAGE"; -/* USER DETAILS */ -export const GET_USER_DETAILS = "GET_USER_DETAILS"; -export const UPDATE_USER_DETAILS = "UPDATE_USER_DETAILS"; -export const RESET_DATA = "RESET_DATA"; -export const SET_USER_DETAILS = "SET_USER_DETAILS"; - /* DASHBOARD OVERVIEW */ export const USER_RUNS = "USER_RUNS"; export const SAVED_RUNS = "SAVED_RUNS"; diff --git a/dashboard/src/assets/constants/browsingPageConstants.js b/dashboard/src/assets/constants/browsingPageConstants.js index 45d6f9de19..2f0459e177 100644 --- a/dashboard/src/assets/constants/browsingPageConstants.js +++ b/dashboard/src/assets/constants/browsingPageConstants.js @@ -1,4 +1,9 @@ export const DEFAULT_PER_PAGE = 20; -export const LIMIT = 60; +export const INITIAL_PAGE_LIMIT = 60; export const START_PAGE_NUMBER = 1; -export const LIMIT_MULTIPLIER = 3; +export const OVERFETCH_FACTOR = 3; +export const PER_PAGE_OPTIONS = [ + { title: "10", value: 10 }, + { title: "20", value: 20 }, + { title: "50", value: 50 }, +]; diff --git a/dashboard/src/modules/components/DatePickerComponent/index.jsx b/dashboard/src/modules/components/DatePickerComponent/index.jsx index 9ea1525666..fd85aae4fa 100644 --- a/dashboard/src/modules/components/DatePickerComponent/index.jsx +++ b/dashboard/src/modules/components/DatePickerComponent/index.jsx @@ -1,5 +1,7 @@ import "./index.less"; +import * as CONSTANTS from "assets/constants/browsingPageConstants"; + import { Button, DatePicker, @@ -43,7 +45,7 @@ const DatePickerWidget = (props) => { if (from) { dispatch(setFilterKeys(from, new Date(to))); dispatch(applyFilter()); - props.setPage(1); + props.setPage(CONSTANTS.START_PAGE_NUMBER); } }; diff --git a/dashboard/src/modules/components/PaginationComponent/index.jsx b/dashboard/src/modules/components/PaginationComponent/index.jsx index 6752af1bb5..bf9d91fff2 100644 --- a/dashboard/src/modules/components/PaginationComponent/index.jsx +++ b/dashboard/src/modules/components/PaginationComponent/index.jsx @@ -8,7 +8,7 @@ import { } from "actions/datasetListActions"; import { useDispatch, useSelector } from "react-redux"; -import { LIMIT_MULTIPLIER } from "assets/constants/browsingPageConstants"; +import { OVERFETCH_FACTOR } from "assets/constants/browsingPageConstants"; import React from "react"; const TablePagination = ({ page, setPage }) => { @@ -23,7 +23,7 @@ const TablePagination = ({ page, setPage }) => { fetchData(_event, pageNumber, perPage); }; const onPerPageSelect = (_event, newPerPage, newPage) => { - dispatch(setPageLimit(newPerPage * LIMIT_MULTIPLIER)); + dispatch(setPageLimit(newPerPage * OVERFETCH_FACTOR)); dispatch(setPerPage(newPerPage)); setPage(newPage); @@ -48,11 +48,9 @@ const TablePagination = ({ page, setPage }) => { } } if (left !== right) { - const offset = (newPage - 1) * newPerPage; - dispatch({ type: TYPES.SET_PAGE_OFFSET, - payload: Number(offset), + payload: startIdx, }); dispatch(fetchPublicDatasets(newPage)); } diff --git a/dashboard/src/modules/components/TableComponent/common-components.jsx b/dashboard/src/modules/components/TableComponent/common-components.jsx index 6f9d077708..2e6c6b2f6b 100644 --- a/dashboard/src/modules/components/TableComponent/common-components.jsx +++ b/dashboard/src/modules/components/TableComponent/common-components.jsx @@ -1,5 +1,7 @@ import "./index.less"; +import * as CONSTANTS from "assets/constants/browsingPageConstants"; + import { Alert, AlertActionCloseButton, @@ -73,7 +75,7 @@ export const SearchBox = (props) => { const search = () => { dispatch(nameFilter(searchKey)); dispatch(applyFilter()); - props.setPage(1); + props.setPage(CONSTANTS.START_PAGE_NUMBER); }; const handleKeyPress = (e) => { const key = e.key; diff --git a/dashboard/src/modules/components/TableComponent/index.jsx b/dashboard/src/modules/components/TableComponent/index.jsx index 5d856f9aac..6dcb0cce2d 100644 --- a/dashboard/src/modules/components/TableComponent/index.jsx +++ b/dashboard/src/modules/components/TableComponent/index.jsx @@ -140,11 +140,7 @@ const TableWithFavorite = () => { setFavPage(newPage); selectedArray = favoriteRepoNames?.slice(startIdx, endIdx); }; - const perPageOptions = [ - { title: "10", value: 10 }, - { title: "20", value: 20 }, - { title: "50", value: 50 }, - ]; + const onPerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => { setfavTblPerPage(newPerPage); setFavPage(newPage); @@ -251,7 +247,7 @@ const TableWithFavorite = () => { perPage={favTblperPage} setPerPage={setfavTblPerPage} onSetPage={onSetPage} - perPageOptions={perPageOptions} + perPageOptions={CONSTANTS.PER_PAGE_OPTIONS} onPerPageSelect={onPerPageSelect} /> )} diff --git a/dashboard/src/reducers/datasetListReducer.js b/dashboard/src/reducers/datasetListReducer.js index 112dd36839..2e3a11883c 100644 --- a/dashboard/src/reducers/datasetListReducer.js +++ b/dashboard/src/reducers/datasetListReducer.js @@ -6,7 +6,7 @@ const initialState = { favoriteRepoNames: [], tableData: [], offset: 0, - limit: CONSTANTS.LIMIT, + limit: CONSTANTS.INITIAL_PAGE_LIMIT, perPage: CONSTANTS.DEFAULT_PER_PAGE, totalDatasets: 0, searchKey: "", @@ -19,7 +19,7 @@ const initialState = { const DatasetListReducer = (state = initialState, action = {}) => { const { type, payload } = action; switch (type) { - case TYPES.GET_PUBLIC_DATASETS: + case TYPES.UPDATE_PUBLIC_DATASETS: return { ...state, publicData: [...payload],