Chore: evaluate `RoomsListView` (#4147)

This commit is contained in:
Gerzon Z 2022-05-16 14:14:04 -04:00 committed by GitHub
parent 5cd4186f64
commit f9394b66e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 41 deletions

View File

@ -61,7 +61,7 @@ import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes } from
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
interface IRoomsListViewProps extends IBaseScreen<ChatsStackParamList, 'RoomsListView'> { interface IRoomsListViewProps extends IBaseScreen<ChatsStackParamList, 'RoomsListView'> {
[key: string]: any; [key: string]: IUser | string | boolean | ISubscription[] | number | object | TEncryptionBanner;
user: IUser; user: IUser;
server: string; server: string;
searchText: string; searchText: string;
@ -76,7 +76,7 @@ interface IRoomsListViewProps extends IBaseScreen<ChatsStackParamList, 'RoomsLis
StoreLastMessage: boolean; StoreLastMessage: boolean;
useRealName: boolean; useRealName: boolean;
isMasterDetail: boolean; isMasterDetail: boolean;
rooms: ISubscription[]; rooms: string[];
width: number; width: number;
insets: { insets: {
left: number; left: number;
@ -95,14 +95,14 @@ interface IRoomsListViewProps extends IBaseScreen<ChatsStackParamList, 'RoomsLis
} }
interface IRoomsListViewState { interface IRoomsListViewState {
searching: boolean; searching?: boolean;
search: ISubscription[]; search?: IRoomItem[];
loading: boolean; loading?: boolean;
chatsUpdate: string[]; chatsUpdate?: string[] | { rid: string; alert?: boolean }[];
omnichannelsUpdate: string[]; omnichannelsUpdate?: string[];
chats: ISubscription[]; chats?: IRoomItem[];
item: ISubscription; item?: ISubscription;
canCreateRoom: boolean; canCreateRoom?: boolean;
} }
interface IRoomItem extends ISubscription { interface IRoomItem extends ISubscription {
@ -183,7 +183,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
searching: false, searching: false,
search: [], search: [],
loading: true, loading: true,
chatsUpdate: [], chatsUpdate: [] as TSubscriptionModel[],
omnichannelsUpdate: [], omnichannelsUpdate: [],
chats: [], chats: [],
item: {} as ISubscription, item: {} as ISubscription,
@ -353,10 +353,8 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
this.getSubscriptions(); this.getSubscriptions();
} }
// Update current item in case of another action triggers an update on rooms reducer // Update current item in case of another action triggers an update on rooms reducer
if (isMasterDetail && rooms[0] && item?.rid !== rooms[0].rid && !dequal(rooms, prevProps.rooms)) { if (isMasterDetail && rooms[0] && item?.rid !== rooms[0] && !dequal(rooms, prevProps.rooms)) {
// eslint-disable-next-line react/no-did-update-set-state this.setState({ item: { rid: rooms[0] } as ISubscription });
// @ts-ignore
this.setState({ item: { rid: rooms[0] } });
} }
if (insets.left !== prevProps.insets.left || insets.right !== prevProps.insets.right) { if (insets.left !== prevProps.insets.left || insets.right !== prevProps.insets.right) {
this.setHeader(); this.setHeader();
@ -460,12 +458,19 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
}; };
// internalSetState = (...args: { chats: TSubscriptionModel; chatsUpdate: TSubscriptionModel; loading: boolean }[]) => { // internalSetState = (...args: { chats: TSubscriptionModel; chatsUpdate: TSubscriptionModel; loading: boolean }[]) => {
internalSetState = (...args: any) => { internalSetState = (
state:
| ((
prevState: Readonly<IRoomsListViewState>,
props: Readonly<IRoomsListViewProps>
) => Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null)
| (Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null),
callback?: () => void
) => {
if (this.animated) { if (this.animated) {
animateNextTransition(); animateNextTransition();
} }
// @ts-ignore this.setState(state, callback);
this.setState(...args);
}; };
addRoomsGroup = (data: TSubscriptionModel[], header: string, allData: TSubscriptionModel[]) => { addRoomsGroup = (data: TSubscriptionModel[], header: string, allData: TSubscriptionModel[]) => {
@ -570,23 +575,12 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
tempChats = chats; tempChats = chats;
} }
if (this.mounted) { this.internalSetState({
this.internalSetState({ chats: tempChats,
chats: tempChats, chatsUpdate,
chatsUpdate, omnichannelsUpdate,
omnichannelsUpdate, loading: false
loading: false });
});
} else {
// @ts-ignore
this.state.chats = tempChats;
// @ts-ignore
this.state.chatsUpdate = chatsUpdate;
// @ts-ignore
this.state.omnichannelsUpdate = omnichannelsUpdate;
// @ts-ignore
this.state.loading = false;
}
}); });
}; };
@ -644,7 +638,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
return; return;
} }
this.internalSetState({ this.internalSetState({
search: result, search: result as IRoomItem[],
searching: true searching: true
}); });
this.scrollToTop(); this.scrollToTop();
@ -790,7 +784,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
goRoomByIndex = (index: number) => { goRoomByIndex = (index: number) => {
const { chats } = this.state; const { chats } = this.state;
const { isMasterDetail } = this.props; const { isMasterDetail } = this.props;
const filteredChats = chats.filter(c => !c.separator); const filteredChats = chats ? chats.filter(c => !c.separator) : [];
const room = filteredChats[index - 1]; const room = filteredChats[index - 1];
if (room) { if (room) {
this.goRoom({ item: room, isMasterDetail }); this.goRoom({ item: room, isMasterDetail });
@ -800,7 +794,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
findOtherRoom = (index: number, sign: number): ISubscription | void => { findOtherRoom = (index: number, sign: number): ISubscription | void => {
const { chats } = this.state; const { chats } = this.state;
const otherIndex = index + sign; const otherIndex = index + sign;
const otherRoom = chats[otherIndex]; const otherRoom = chats?.length ? chats[otherIndex] : ({} as IRoomItem);
if (!otherRoom) { if (!otherRoom) {
return; return;
} }
@ -820,12 +814,17 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
// Don't run during search // Don't run during search
const { search } = this.state; const { search } = this.state;
if (search.length > 0) { if (search && search?.length > 0) {
return; return;
} }
const { chats } = this.state; const { chats } = this.state;
const { isMasterDetail } = this.props; const { isMasterDetail } = this.props;
if (!chats?.length) {
return;
}
const index = chats.findIndex(c => c.rid === item.rid); const index = chats.findIndex(c => c.rid === item.rid);
const otherRoom = this.findOtherRoom(index, sign); const otherRoom = this.findOtherRoom(index, sign);
if (otherRoom) { if (otherRoom) {
@ -908,7 +907,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props; const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
return ( return (
<ListHeader <ListHeader
searching={searching} searching={searching as boolean}
goEncryption={this.goEncryption} goEncryption={this.goEncryption}
goQueue={this.goQueue} goQueue={this.goQueue}
queueSize={queueSize} queueSize={queueSize}
@ -930,7 +929,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
return <Header {...options} />; return <Header {...options} />;
}; };
renderItem = ({ item }: { item: ISubscription }) => { renderItem = ({ item }: { item: IRoomItem }) => {
if (item.separator) { if (item.separator) {
return this.renderSectionHeader(item.rid); return this.renderSectionHeader(item.rid);
} }