From 85c68c6133dc8323e50bdacf73ca38913e898a70 Mon Sep 17 00:00:00 2001 From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:06:07 +0300 Subject: [PATCH] utilise redux --- .../src/redux/AccessControl/operations.js | 7 +- .../src/redux/AccessControl/reducers.js | 22 ++++- .../views/pages/UserList/AvailableUserList.js | 80 ++++++---------- .../src/views/pages/UserList/UserList.js | 91 +++++++------------ 4 files changed, 88 insertions(+), 112 deletions(-) diff --git a/netmanager/src/redux/AccessControl/operations.js b/netmanager/src/redux/AccessControl/operations.js index 5ad144250b..6d167b452d 100644 --- a/netmanager/src/redux/AccessControl/operations.js +++ b/netmanager/src/redux/AccessControl/operations.js @@ -14,7 +14,6 @@ import { LOAD_CURRENT_USER_ROLE_SUCCESS, LOAD_NETWORK_USERS_FAILURE, LOAD_NETWORK_USERS_SUCCESS, - LOAD_ROLES_SUMMARY_FAILURE, LOAD_ROLES_SUMMARY_SUCCESS, LOAD_GROUPS_SUMMARY_SUCCESS } from './actions'; @@ -79,6 +78,7 @@ export const addActiveNetwork = (data) => (dispatch) => { export const fetchNetworkUsers = (networkId, params) => async (dispatch) => { try { + dispatch({ type: 'SET_NETWORK_USERS_LOADING', payload: true }); const resData = await getNetworkUsersListApi(networkId, params); dispatch({ type: LOAD_NETWORK_USERS_SUCCESS, @@ -94,11 +94,14 @@ export const fetchNetworkUsers = (networkId, params) => async (dispatch) => { payload: err }); throw err; + } finally { + dispatch({ type: 'SET_NETWORK_USERS_LOADING', payload: false }); } }; export const fetchAvailableNetworkUsers = (networkId, params) => async (dispatch) => { try { + dispatch({ type: 'SET_AVAILABLE_USERS_LOADING', payload: true }); const resData = await getAvailableNetworkUsersListApi(networkId, params); dispatch({ type: LOAD_AVAILABLE_USERS_SUCCESS, @@ -114,6 +117,8 @@ export const fetchAvailableNetworkUsers = (networkId, params) => async (dispatch payload: err }); throw err; + } finally { + dispatch({ type: 'SET_AVAILABLE_USERS_LOADING', payload: false }); } }; diff --git a/netmanager/src/redux/AccessControl/reducers.js b/netmanager/src/redux/AccessControl/reducers.js index f0986304f5..8207632a03 100644 --- a/netmanager/src/redux/AccessControl/reducers.js +++ b/netmanager/src/redux/AccessControl/reducers.js @@ -17,12 +17,14 @@ const initialState = { activeNetwork: {}, networkUsers: { users: null, - total: 0 + total: 0, + loading: false }, rolesSummary: null, availableUsers: { users: null, - total: 0 + total: 0, + loading: false }, groupsSummary: null }; @@ -57,6 +59,22 @@ export default function accessControlReducer(state = initialState, action) { }; case LOAD_GROUPS_SUMMARY_SUCCESS: return { ...state, groupsSummary: action.payload }; + case 'SET_NETWORK_USERS_LOADING': + return { + ...state, + networkUsers: { + ...state.networkUsers, + loading: action.payload + } + }; + case 'SET_AVAILABLE_USERS_LOADING': + return { + ...state, + availableUsers: { + ...state.availableUsers, + loading: action.payload + } + }; default: return state; } diff --git a/netmanager/src/views/pages/UserList/AvailableUserList.js b/netmanager/src/views/pages/UserList/AvailableUserList.js index 72b18a06db..961426d2b0 100644 --- a/netmanager/src/views/pages/UserList/AvailableUserList.js +++ b/netmanager/src/views/pages/UserList/AvailableUserList.js @@ -9,6 +9,7 @@ import { withPermission } from '../../containers/PageAccess'; import AvailableUsersTable from './components/UsersTable/AvailableUsersTable'; import { getAvailableNetworkUsersListApi } from 'views/apis/accessControl'; import { updateMainAlert } from '../../../redux/MainAlert/operations'; +import { fetchAvailableNetworkUsers } from '../../../redux/AccessControl/operations'; const useStyles = makeStyles((theme) => ({ root: { @@ -22,69 +23,42 @@ const useStyles = makeStyles((theme) => ({ const AvailableUserList = (props) => { const classes = useStyles(); const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); - const [users, setUsers] = useState([]); - const [totalCount, setTotalCount] = useState(0); const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(100); - const activeNetwork = useSelector((state) => state.accessControl.activeNetwork); - const fetchUsers = async (skipCount, limitCount) => { - console.log('fetchUsers called with:', { skipCount, limitCount }); - if (!activeNetwork) return; - setLoading(true); - try { - const res = await getAvailableNetworkUsersListApi(activeNetwork._id, { - skip: skipCount, - limit: limitCount - }); - console.log('API Response:', { - users: res.available_users.length, - total: res.total_available_users, - skip: skipCount, - limit: limitCount - }); - setUsers(res.available_users); - setTotalCount(res.total_available_users || 0); - } catch (error) { - console.error('Error fetching users:', error); - let errorMessage = 'An error occurred'; - if (error.response && error.response.status >= 500) { - errorMessage = 'An error occurred. Please try again later'; - } else if (error.response && error.response.data && error.response.data.message) { - errorMessage = error.response.data.message; - } else if (error.message) { - errorMessage = error.message; - } - dispatch( - updateMainAlert({ - message: errorMessage, - show: true, - severity: 'error' - }) - ); - } finally { - setLoading(false); - } - }; + // Use Redux state instead of local state + const { users, total, loading } = useSelector((state) => state.accessControl.availableUsers); + const activeNetwork = useSelector((state) => state.accessControl.activeNetwork); useEffect(() => { - fetchUsers(page * pageSize, pageSize); + if (!activeNetwork) return; + dispatch( + fetchAvailableNetworkUsers(activeNetwork._id, { + skip: page * pageSize, + limit: pageSize + }) + ); }, [activeNetwork]); const handlePageChange = (event, newPage) => { - console.log('AvailableUserList handlePageChange:', { currentPage: page, newPage }); setPage(newPage); - - const skipCount = newPage * pageSize; - console.log('Fetching users with:', { skipCount, pageSize }); - fetchUsers(skipCount, pageSize); + dispatch( + fetchAvailableNetworkUsers(activeNetwork._id, { + skip: newPage * pageSize, + limit: pageSize + }) + ); }; const handleRowsPerPageChange = (newPageSize) => { setPageSize(newPageSize); setPage(0); - fetchUsers(0, newPageSize); + dispatch( + fetchAvailableNetworkUsers(activeNetwork._id, { + skip: 0, + limit: newPageSize + }) + ); }; return ( @@ -92,11 +66,11 @@ const AvailableUserList = (props) => {
diff --git a/netmanager/src/views/pages/UserList/UserList.js b/netmanager/src/views/pages/UserList/UserList.js index 1cfe710bd2..9999517e49 100644 --- a/netmanager/src/views/pages/UserList/UserList.js +++ b/netmanager/src/views/pages/UserList/UserList.js @@ -12,6 +12,7 @@ import { loadRolesSummary } from 'redux/AccessControl/operations'; import { withPermission } from '../../containers/PageAccess'; import { getNetworkUsersListApi } from 'views/apis/accessControl'; import { updateMainAlert } from 'redux/MainAlert/operations'; +import { fetchNetworkUsers } from '../../../redux/AccessControl/operations'; const useStyles = makeStyles((theme) => ({ root: { @@ -25,78 +26,56 @@ const useStyles = makeStyles((theme) => ({ const UserList = (props) => { const classes = useStyles(); const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); - const [users, setUsers] = useState([]); - const [totalCount, setTotalCount] = useState(0); const [page, setPage] = useState(0); - const [pageSize, setPageSize] = useState(10); + const [pageSize, setPageSize] = useState(100); + + // Use Redux state instead of local state + const { users, total, loading } = useSelector((state) => state.accessControl.networkUsers); const roles = useSelector((state) => state.accessControl.rolesSummary); const activeNetwork = useSelector((state) => state.accessControl.activeNetwork); useEffect(() => { if (!activeNetwork) return; - dispatch(loadRolesSummary(activeNetwork._id)); - }, []); - - const fetchUsers = async (skipCount, limitCount) => { - console.log('fetchUsers called with:', { skipCount, limitCount }); - if (!activeNetwork) return; - setLoading(true); try { - const res = await getNetworkUsersListApi(activeNetwork._id, { - skip: skipCount, - limit: limitCount - }); - console.log('API Response:', { - users: res.assigned_users.length, - total: res.total_assigned_users, - skip: skipCount, - limit: limitCount - }); - setUsers(res.assigned_users); - setTotalCount(res.total_assigned_users || 0); - } catch (error) { - console.error('Error fetching users:', error); - let errorMessage = 'An error occurred'; - if (error.response && error.response.status >= 500) { - errorMessage = 'An error occurred. Please try again later'; - } else if (error.response && error.response.data && error.response.data.message) { - errorMessage = error.response.data.message; - } else if (error.message) { - errorMessage = error.message; - } + dispatch(loadRolesSummary(activeNetwork._id)); dispatch( - updateMainAlert({ - message: errorMessage, - show: true, - severity: 'error' + fetchNetworkUsers(activeNetwork._id, { + skip: page * pageSize, + limit: pageSize }) ); - } finally { - setLoading(false); + } catch (error) { + console.error('Error fetching network users:', error); } - }; - - // Initial load - useEffect(() => { - if (!activeNetwork) return; - dispatch(loadRolesSummary(activeNetwork._id)); - fetchUsers(page * pageSize, pageSize); }, [activeNetwork]); const handlePageChange = (event, newPage) => { - console.log('UserList handlePageChange:', { currentPage: page, newPage }); setPage(newPage); - - const skipCount = newPage * pageSize; - console.log('Fetching users with:', { skipCount, pageSize }); - fetchUsers(skipCount, pageSize); + try { + dispatch( + fetchNetworkUsers(activeNetwork._id, { + skip: newPage * pageSize, + limit: pageSize + }) + ); + } catch (error) { + console.error('Error fetching network users:', error); + } }; const handleRowsPerPageChange = (newPageSize) => { setPageSize(newPageSize); setPage(0); - fetchUsers(0, newPageSize); + try { + dispatch( + fetchNetworkUsers(activeNetwork._id, { + skip: 0, + limit: newPageSize + }) + ); + } catch (error) { + console.error('Error fetching network users:', error); + } }; return ( @@ -106,11 +85,11 @@ const UserList = (props) => {