From 7074deb96f0344f41ef6f537d31a274425e35f73 Mon Sep 17 00:00:00 2001
From: Caetan Tojeiro Carpente <caetan.tojeiro.carpente@cern.ch>
Date: Tue, 28 Mar 2023 17:12:28 +0200
Subject: [PATCH] [#215] reset state on unmount: get channels members and
groups components
---
src/channels/actions/GetChannelGroups.js | 7 +++
src/channels/actions/GetChannelMembers.js | 7 +++
.../ChannelMembers/ChannelGroupsComponent.js | 17 +++++--
.../ChannelMembers/ChannelUsersComponent.js | 20 ++++++---
src/channels/reducers/Channel.js | 44 +++++++++++++------
5 files changed, 72 insertions(+), 23 deletions(-)
diff --git a/src/channels/actions/GetChannelGroups.js b/src/channels/actions/GetChannelGroups.js
index eed13e9f..3246d781 100644
--- a/src/channels/actions/GetChannelGroups.js
+++ b/src/channels/actions/GetChannelGroups.js
@@ -8,6 +8,7 @@ export const GET_CHANNELS_GROUPS_SUCCESS = 'GET_CHANNELS_GROUPS_SUCCESS';
export const GET_CHANNELS_GROUPS_FAILURE = 'GET_CHANNELS_GROUPS_FAILURE';
export const SET_GET_CHANNEL_GROUPS_QUERY = 'SET_GET_CHANNEL_GROUPS_QUERY';
+export const RESET_GET_CHANNEL_GROUPS_QUERY = 'RESET_GET_CHANNEL_GROUPS_QUERY';
export const getChannelGroups = (channelId, query) => ({
[RSAA]: {
@@ -27,3 +28,9 @@ export const setGetChannelGroupsQuery = query => {
payload: query,
};
};
+
+export const resetChannelGroupsQuery = () => {
+ return {
+ type: RESET_GET_CHANNEL_GROUPS_QUERY,
+ };
+};
diff --git a/src/channels/actions/GetChannelMembers.js b/src/channels/actions/GetChannelMembers.js
index 3e0a5fc2..2e8df8ee 100644
--- a/src/channels/actions/GetChannelMembers.js
+++ b/src/channels/actions/GetChannelMembers.js
@@ -8,6 +8,7 @@ export const GET_CHANNELS_MEMBERS_SUCCESS = 'GET_CHANNELS_MEMBERS_SUCCESS';
export const GET_CHANNELS_MEMBERS_FAILURE = 'GET_CHANNELS_MEMBERS_FAILURE';
export const SET_GET_CHANNEL_MEMBERS_QUERY = 'SET_GET_CHANNEL_MEMBERS_QUERY';
+export const RESET_GET_CHANNEL_MEMBERS_QUERY = 'RESET_GET_CHANNEL_MEMBERS_QUERY';
export const getChannelMembers = (channelId, query) => ({
[RSAA]: {
@@ -27,3 +28,9 @@ export const setGetChannelMembersQuery = query => {
payload: query,
};
};
+
+export const resetChannelMembersQuery = () => {
+ return {
+ type: RESET_GET_CHANNEL_MEMBERS_QUERY,
+ };
+};
diff --git a/src/channels/components/ChannelMembers/ChannelGroupsComponent.js b/src/channels/components/ChannelMembers/ChannelGroupsComponent.js
index 1b2d1170..b7983b06 100644
--- a/src/channels/components/ChannelMembers/ChannelGroupsComponent.js
+++ b/src/channels/components/ChannelMembers/ChannelGroupsComponent.js
@@ -40,6 +40,7 @@ const ChannelGroupsComponent = ({
removeGroupFromChannel,
updateRemoveGroup,
setGetChannelGroupsQuery,
+ resetChannelGroupsQuery,
getChannelGroupsQuery,
totalNumberOfGroups,
loadingGroups,
@@ -47,11 +48,17 @@ const ChannelGroupsComponent = ({
showSnackbar,
}) => {
const {channelId} = useParams();
- const [searchGroupsValue, setSearchGroupsValue] = useState(null);
+ const [searchGroupsValue, setSearchGroupsValue] = useState('');
const [deleteId, setDeleteId] = useState(null);
const [deleteName, setDeleteName] = useState('');
const [channelGroupDeletionModalVisible, setChannelGroupDeletionModalVisible] = useState(false);
+ useEffect(() => {
+ return () => {
+ resetChannelGroupsQuery();
+ };
+ }, [resetChannelGroupsQuery]);
+
async function handleConfirm() {
setChannelGroupDeletionModalVisible(false);
const response = await removeGroupFromChannel(deleteId, channelId);
@@ -106,7 +113,7 @@ const ChannelGroupsComponent = ({
<Table.Header>
<Table.Row>
{groupsColumns.map(c => (
- <Table.HeaderCell>{c.label}</Table.HeaderCell>
+ <Table.HeaderCell key={c.label}>{c.label}</Table.HeaderCell>
))}
<Table.HeaderCell collapsing />
</Table.Row>
@@ -115,10 +122,12 @@ const ChannelGroupsComponent = ({
<Table.Body>
{groups.map(group => {
return (
- <Table.Row>
+ <Table.Row key={group.id}>
{groupsColumns.map(column => {
return (
- <Table.Cell>{group[column.id] ? group[column.id].toString() : ''}</Table.Cell>
+ <Table.Cell key={column.id}>
+ {group[column.id] ? group[column.id].toString() : ''}
+ </Table.Cell>
);
})}
<Table.Cell>
diff --git a/src/channels/components/ChannelMembers/ChannelUsersComponent.js b/src/channels/components/ChannelMembers/ChannelUsersComponent.js
index eb99e24e..877f21a9 100644
--- a/src/channels/components/ChannelMembers/ChannelUsersComponent.js
+++ b/src/channels/components/ChannelMembers/ChannelUsersComponent.js
@@ -39,8 +39,8 @@ const ChannelUsersComponent = ({
members,
getChannelMembers,
removeUserFromChannel,
- updateRemoveUser,
setGetChannelMembersQuery,
+ resetChannelMembersQuery,
getChannelMembersQuery,
totalNumberOfMembers,
loadingMembers,
@@ -53,6 +53,12 @@ const ChannelUsersComponent = ({
const [deleteName, setDeleteName] = useState('');
const [channelUserDeletionModalVisible, setChannelUserDeletionModalVisible] = useState(false);
+ useEffect(() => {
+ return () => {
+ resetChannelMembersQuery();
+ };
+ }, [resetChannelMembersQuery]);
+
async function handleConfirm() {
setChannelUserDeletionModalVisible(false);
const response = await removeUserFromChannel(deleteId, channelId);
@@ -85,14 +91,18 @@ const ChannelUsersComponent = ({
const renderColumn = (member, column) => {
if (column.id === 'username' && !member[column.id])
return (
- <Table.Cell>
+ <Table.Cell key={column.id}>
<Label basic color="orange">
Unconfirmed Email
</Label>
</Table.Cell>
);
- return <Table.Cell>{member[column.id] ? member[column.id].toString() : ''}</Table.Cell>;
+ return (
+ <Table.Cell key={column.id}>
+ {member[column.id] ? member[column.id].toString() : ''}
+ </Table.Cell>
+ );
};
return (
@@ -120,7 +130,7 @@ const ChannelUsersComponent = ({
<Table.Header>
<Table.Row>
{membersColumns.map(c => (
- <Table.HeaderCell>{c.label}</Table.HeaderCell>
+ <Table.HeaderCell key={c.label}>{c.label}</Table.HeaderCell>
))}
<Table.HeaderCell collapsing />
</Table.Row>
@@ -129,7 +139,7 @@ const ChannelUsersComponent = ({
<Table.Body>
{members.map(member => {
return (
- <Table.Row>
+ <Table.Row key={member.id}>
{membersColumns.map(column => {
return renderColumn(member, column);
})}
diff --git a/src/channels/reducers/Channel.js b/src/channels/reducers/Channel.js
index db19b1fd..ccf48d69 100644
--- a/src/channels/reducers/Channel.js
+++ b/src/channels/reducers/Channel.js
@@ -8,6 +8,7 @@ import {
GET_CHANNELS_MEMBERS_SUCCESS,
GET_CHANNELS_MEMBERS_FAILURE,
SET_GET_CHANNEL_MEMBERS_QUERY,
+ RESET_GET_CHANNEL_MEMBERS_QUERY,
} from 'channels/actions/GetChannelMembers';
import {
GET_CHANNEL_BY_ID_SUCCESS,
@@ -25,6 +26,7 @@ import {
GET_CHANNELS_GROUPS_SUCCESS,
GET_CHANNELS_GROUPS_FAILURE,
SET_GET_CHANNEL_GROUPS_QUERY,
+ RESET_GET_CHANNEL_GROUPS_QUERY,
} from 'channels/actions/GetChannelGroups';
import {
REMOVE_USER_FROM_CHANNEL,
@@ -77,6 +79,12 @@ import {
SUBSCRIBE_TO_CHANNEL_UPDATE_SUCCESS,
} from 'channels/actions/NoContentActionsUpdate';
+const DEFAULT_GET_QUERY_PARAMS = {
+ searchText: '',
+ skip: 0,
+ take: 10,
+};
+
const INITIAL_STATE = {
channel: {},
error: null,
@@ -94,18 +102,10 @@ const INITIAL_STATE = {
loadingUpdateTags: false,
loadingGenerate: false,
members: [],
- getChannelMembersQuery: {
- searchText: '',
- skip: 0,
- take: Number(localStorage.getItem('take')) || 10,
- },
+ getChannelMembersQuery: DEFAULT_GET_QUERY_PARAMS,
totalNumberOfMembers: 0,
groups: [],
- getChannelGroupsQuery: {
- searchText: '',
- skip: 0,
- take: Number(localStorage.getItem('take')) || 10,
- },
+ getChannelGroupsQuery: DEFAULT_GET_QUERY_PARAMS,
totalNumberOfGroups: 0,
};
@@ -395,18 +395,30 @@ function processRemoveGroupFromChannelFailure(state, error) {
}
function processSetGetChannelMembersQuery(state, getChannelMembersQuery) {
- localStorage.setItem('take', getChannelMembersQuery.take);
return {
...state,
- getChannelMembersQuery,
+ getChannelMembersQuery: {...getChannelMembersQuery},
+ };
+}
+
+function processResetGetChannelMembersQuery(state) {
+ return {
+ ...state,
+ getChannelMembersQuery: {...DEFAULT_GET_QUERY_PARAMS},
};
}
function processSetGetChannelGroupsQuery(state, getChannelGroupsQuery) {
- localStorage.setItem('take', getChannelGroupsQuery.take);
return {
...state,
- getChannelGroupsQuery,
+ getChannelGroupsQuery: {...getChannelGroupsQuery},
+ };
+}
+
+function processResetGetChannelGroupsQuery(state) {
+ return {
+ ...state,
+ getChannelGroupsQuery: {...DEFAULT_GET_QUERY_PARAMS},
};
}
@@ -595,8 +607,12 @@ export default function (state = INITIAL_STATE, action) {
case SET_GET_CHANNEL_MEMBERS_QUERY:
return processSetGetChannelMembersQuery(state, action.payload);
+ case RESET_GET_CHANNEL_MEMBERS_QUERY:
+ return processResetGetChannelMembersQuery(state);
case SET_GET_CHANNEL_GROUPS_QUERY:
return processSetGetChannelGroupsQuery(state, action.payload);
+ case RESET_GET_CHANNEL_GROUPS_QUERY:
+ return processResetGetChannelGroupsQuery(state);
case ADD_USER_TO_CHANNEL:
return processAddUserToChannel(state);
--
GitLab