Skip to content

Commit

Permalink
Merge pull request #2302 from airqo-platform/ft-table-listing
Browse files Browse the repository at this point in the history
  • Loading branch information
@Baalmart
Baalmart authored Dec 5, 2024
2 parents d105038 + 85c68c6 commit b267c07
Show file tree
Hide file tree
Showing 6 changed files with 672 additions and 449 deletions.
7 changes: 6 additions & 1 deletion netmanager/src/redux/AccessControl/operations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -114,6 +117,8 @@ export const fetchAvailableNetworkUsers = (networkId, params) => async (dispatch
payload: err
});
throw err;
} finally {
dispatch({ type: 'SET_AVAILABLE_USERS_LOADING', payload: false });
}
};

Expand Down
22 changes: 20 additions & 2 deletions netmanager/src/redux/AccessControl/reducers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down Expand Up @@ -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;
}
Expand Down
83 changes: 37 additions & 46 deletions netmanager/src/views/pages/UserList/AvailableUserList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -22,66 +23,56 @@ 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 [limit, setLimit] = useState(10);
const [skip, setSkip] = useState(0);
const activeNetwork = useSelector((state) => state.accessControl.activeNetwork);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(100);

const fetchUsers = async (skipCount, limitCount) => {
if (!activeNetwork) return;
setLoading(true);
try {
const res = await getAvailableNetworkUsersListApi(activeNetwork._id, {
skip: skipCount,
limit: limitCount
});
setUsers(res.available_users);
setTotalCount(res.total || 0);
} catch (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(skip, limit);
if (!activeNetwork) return;
dispatch(
fetchAvailableNetworkUsers(activeNetwork._id, {
skip: page * pageSize,
limit: pageSize
})
);
}, [activeNetwork]);

const handlePageChange = (page, pageSize) => {
const newSkip = page * pageSize;
setSkip(newSkip);
setLimit(pageSize);
fetchUsers(newSkip, pageSize);
const handlePageChange = (event, newPage) => {
setPage(newPage);
dispatch(
fetchAvailableNetworkUsers(activeNetwork._id, {
skip: newPage * pageSize,
limit: pageSize
})
);
};

const handleRowsPerPageChange = (newPageSize) => {
setPageSize(newPageSize);
setPage(0);
dispatch(
fetchAvailableNetworkUsers(activeNetwork._id, {
skip: 0,
limit: newPageSize
})
);
};

return (
<ErrorBoundary>
<div className={classes.root}>
<div className={classes.content}>
<AvailableUsersTable
users={users}
users={users || []}
loadData={loading}
totalCount={totalCount}
pageSize={limit}
currentPage={skip / limit}
totalCount={total || 0}
pageSize={pageSize || 100}
currentPage={page || 0}
onPageChange={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
/>
</div>
</div>
Expand Down
88 changes: 43 additions & 45 deletions netmanager/src/views/pages/UserList/UserList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -25,60 +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 [limit, setLimit] = useState(10);
const [skip, setSkip] = useState(0);
const [page, setPage] = useState(0);
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) => {
if (!activeNetwork) return;
setLoading(true);
try {
const res = await getNetworkUsersListApi(activeNetwork._id, {
skip: skipCount,
limit: limitCount
});
setUsers(res.assigned_users);
setTotalCount(res.total || 0);
dispatch(loadRolesSummary(activeNetwork._id));
dispatch(
fetchNetworkUsers(activeNetwork._id, {
skip: page * pageSize,
limit: pageSize
})
);
} catch (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;
}
console.error('Error fetching network users:', error);
}
}, [activeNetwork]);

const handlePageChange = (event, newPage) => {
setPage(newPage);
try {
dispatch(
updateMainAlert({
message: errorMessage,
show: true,
severity: 'error'
fetchNetworkUsers(activeNetwork._id, {
skip: newPage * pageSize,
limit: pageSize
})
);
} finally {
setLoading(false);
} catch (error) {
console.error('Error fetching network users:', error);
}
};

// Initial load
useEffect(() => {
fetchUsers(skip, limit);
}, [activeNetwork]);

const handlePageChange = (page, pageSize) => {
const newSkip = page * pageSize;
setSkip(newSkip);
setLimit(pageSize);
fetchUsers(newSkip, pageSize);
const handleRowsPerPageChange = (newPageSize) => {
setPageSize(newPageSize);
setPage(0);
try {
dispatch(
fetchNetworkUsers(activeNetwork._id, {
skip: 0,
limit: newPageSize
})
);
} catch (error) {
console.error('Error fetching network users:', error);
}
};

return (
Expand All @@ -88,12 +85,13 @@ const UserList = (props) => {
<div className={classes.content}>
<UsersTable
roles={roles}
users={users}
users={users || []}
loadData={loading}
totalCount={totalCount}
pageSize={limit}
currentPage={skip / limit}
totalCount={total || 0}
pageSize={pageSize || 100}
currentPage={page || 0}
onPageChange={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit b267c07

Please sign in to comment.