From 6d3ba0eb95cf1ea6ba53b268f67b6a12f5a6fa26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 8 Nov 2021 10:57:14 +0100 Subject: [PATCH] Forget member-list query when switching out of the room (#7093) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/RightPanel.tsx | 16 ++++++++++- src/components/views/rooms/MemberList.tsx | 33 ++++++----------------- 2 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 144f17ad1f..16ef891850 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -77,6 +77,7 @@ interface IState { event: MatrixEvent; initialEvent?: MatrixEvent; initialEventHighlighted?: boolean; + searchQuery: string; } @replaceableComponent("structures.RightPanel") @@ -92,6 +93,7 @@ export default class RightPanel extends React.Component { phase: this.getPhaseFromProps(), isUserPrivilegedInGroup: null, member: this.getUserForPanel(), + searchQuery: "", }; } @@ -248,6 +250,10 @@ export default class RightPanel extends React.Component { } }; + private onSearchQueryChanged = (searchQuery: string): void => { + this.setState({ searchQuery }); + }; + public render(): JSX.Element { let panel =
; const roomId = this.props.room ? this.props.room.roomId : undefined; @@ -255,7 +261,13 @@ export default class RightPanel extends React.Component { switch (this.state.phase) { case RightPanelPhases.RoomMemberList: if (roomId) { - panel = ; + panel = ; } break; case RightPanelPhases.SpaceMemberList: @@ -263,6 +275,8 @@ export default class RightPanel extends React.Component { roomId={this.state.space ? this.state.space.roomId : roomId} key={this.state.space ? this.state.space.roomId : roomId} onClose={this.onClose} + searchQuery={this.state.searchQuery} + onSearchQueryChanged={this.onSearchQueryChanged} />; break; diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index bf5411b0da..80214ca890 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -48,10 +48,6 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent import { UIComponent } from "../../../settings/UIFeature"; import { JoinRule } from "matrix-js-sdk/src/@types/partials"; -import { logger } from "matrix-js-sdk/src/logger"; - -const getSearchQueryLSKey = (roomId: string) => `mx_MemberList_searchQuarry_${roomId}`; - const INITIAL_LOAD_NUM_MEMBERS = 30; const INITIAL_LOAD_NUM_INVITED = 5; const SHOW_MORE_INCREMENT = 100; @@ -62,7 +58,9 @@ const SORT_REGEX = /[\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]+/g; interface IProps { roomId: string; + searchQuery: string; onClose(): void; + onSearchQueryChanged: (query: string) => void; } interface IState { @@ -73,7 +71,6 @@ interface IState { canInvite: boolean; truncateAtJoined: number; truncateAtInvited: number; - searchQuery: string; } @replaceableComponent("views.rooms.MemberList") @@ -182,27 +179,19 @@ export default class MemberList extends React.Component { } private getMembersState(members: Array): IState { - let searchQuery; - try { - searchQuery = window.localStorage.getItem(getSearchQueryLSKey(this.props.roomId)); - } catch (error) { - logger.warn("Failed to get last the MemberList search query", error); - } - // set the state after determining showPresence to make sure it's // taken into account while rendering return { loading: false, members: members, - filteredJoinedMembers: this.filterMembers(members, 'join', searchQuery), - filteredInvitedMembers: this.filterMembers(members, 'invite', searchQuery), + filteredJoinedMembers: this.filterMembers(members, 'join', this.props.searchQuery), + filteredInvitedMembers: this.filterMembers(members, 'invite', this.props.searchQuery), canInvite: this.canInvite, // ideally we'd size this to the page height, but // in practice I find that a little constraining truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS, truncateAtInvited: INITIAL_LOAD_NUM_INVITED, - searchQuery: searchQuery ?? "", }; } @@ -266,8 +255,8 @@ export default class MemberList extends React.Component { this.setState({ loading: false, members: members, - filteredJoinedMembers: this.filterMembers(members, 'join', this.state.searchQuery), - filteredInvitedMembers: this.filterMembers(members, 'invite', this.state.searchQuery), + filteredJoinedMembers: this.filterMembers(members, 'join', this.props.searchQuery), + filteredInvitedMembers: this.filterMembers(members, 'invite', this.props.searchQuery), }); } @@ -432,14 +421,8 @@ export default class MemberList extends React.Component { }; private onSearchQueryChanged = (searchQuery: string): void => { - try { - window.localStorage.setItem(getSearchQueryLSKey(this.props.roomId), searchQuery); - } catch (error) { - logger.warn("Failed to set the last MemberList search query", error); - } - + this.props.onSearchQueryChanged(searchQuery); this.setState({ - searchQuery, filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery), filteredInvitedMembers: this.filterMembers(this.state.members, 'invite', searchQuery), }); @@ -579,7 +562,7 @@ export default class MemberList extends React.Component { className="mx_MemberList_query mx_textinput_icon mx_textinput_search" placeholder={_t('Filter room members')} onSearch={this.onSearchQueryChanged} - initialValue={this.state.searchQuery} + initialValue={this.props.searchQuery} /> );