diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx index adb0d0d17..44cd8c396 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from "react"; +import React, { useCallback, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; // @ts-ignore import memoize from "memoize-one"; @@ -46,6 +46,12 @@ interface IRootState { }; } +interface IFetchParams { + pageIndex?: number; + pageSize?: number; + searchQuery?: string; +} + const getTeams = (data: { [id: string]: ITeam }) => { return Object.keys(data).map((teamId) => { return data[teamId]; @@ -54,6 +60,11 @@ const getTeams = (data: { [id: string]: ITeam }) => { const memoizedGetTeams = memoize(getTeams); +// This is used to cache the table query data and make a request for the +// members data at a future time. Practically, this allows us to re-fetch the users +// with the same table query params after we have made an edit to a user. +let tableQueryData = {}; + const MembersPage = (props: IMembersPageProps): JSX.Element => { const { params: { team_id }, @@ -141,6 +152,21 @@ const MembersPage = (props: IMembersPageProps): JSX.Element => { [dispatch, teamId, toggleAddUserModal, team.name] ); + const fetchUsers = useCallback( + (fetchParams: IFetchParams) => { + const { pageIndex, pageSize, searchQuery } = fetchParams; + dispatch( + userActions.loadAll({ + page: pageIndex, + perPage: pageSize, + globalFilter: searchQuery, + teamId, + }) + ); + }, + [dispatch, teamId] + ); + const onEditMemberSubmit = useCallback( (formData: IFormData) => { const updatedAttrs = userManagementHelpers.generateUpdateData( @@ -152,6 +178,7 @@ const MembersPage = (props: IMembersPageProps): JSX.Element => { dispatch(userActions.update(userEditing, updatedAttrs)) .then(() => { dispatch(renderFlash("success", `Successfully edited ${userName}.`)); + fetchUsers(tableQueryData); }) .catch(() => { dispatch( @@ -163,7 +190,7 @@ const MembersPage = (props: IMembersPageProps): JSX.Element => { }); toggleEditMemberModal(); }, - [dispatch, toggleEditMemberModal, userEditing] + [dispatch, toggleEditMemberModal, userEditing, fetchUsers] ); // NOTE: this will fire on initial render, so we use this to get the list of @@ -171,17 +198,10 @@ const MembersPage = (props: IMembersPageProps): JSX.Element => { // changes. const onQueryChange = useCallback( (queryData) => { - const { pageIndex, pageSize, searchQuery } = queryData; - dispatch( - userActions.loadAll({ - page: pageIndex, - perPage: pageSize, - globalFilter: searchQuery, - teamId, - }) - ); + tableQueryData = { ...queryData, teamId }; + fetchUsers(queryData); }, - [dispatch, teamId] + [fetchUsers] ); const onActionSelection = (action: string, user: IUser): void => { diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx index f87605aa5..842f44452 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx @@ -257,12 +257,12 @@ export class ManageHostsPage extends PureComponent { const teamId = team.id === "no-team" ? null : team.id; dispatch(hostActions.transferToTeam(teamId, selectedHostIds)) .then(() => { - dispatch( - renderFlash( - "success", - `Hosts successfully transferred to ${team.name}.` - ) - ); + const successMessage = + teamId === null + ? `Hosts successfully removed from teams.` + : `Hosts successfully transferred to ${team.name}.`; + dispatch(renderFlash("success", successMessage)); + dispatch(getHosts()); }) .catch(() => { dispatch(