Skip to content

[FIX] Modal freezing app after return from the background #4788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
reinaldonetof wants to merge 3 commits into from
Closed

[FIX] Modal freezing app after return from the background #4788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f66503
[FIX] Modal freezing app after return from the background
reinaldonetof Dec 30, 2022
2d3cc2c
minor tweak
reinaldonetof Dec 30, 2022
383df7d
refactor with this.listObservableQuery
reinaldonetof Dec 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 38 additions & 41 deletions app/views/RoomView/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import { Text, View } from 'react-native';
import { BorderlessButton, ScrollView } from 'react-native-gesture-handler';
import Modal from 'react-native-modal';
Expand All @@ -14,50 +14,47 @@ interface IBannerProps {
title?: string;
bannerClosed?: boolean;
closeBanner: () => void;
showAnnouncementModal?: boolean;
toggleAnnouncementModal: () => void;
}

const Banner = React.memo(
({ text, title, bannerClosed, closeBanner }: IBannerProps) => {
const [showModal, openModal] = useState(false);
const { theme } = useTheme();
const Banner = ({ text, title, bannerClosed, closeBanner, showAnnouncementModal, toggleAnnouncementModal }: IBannerProps) => {
const { theme } = useTheme();

const toggleModal = () => openModal(prevState => !prevState);

if (text && !bannerClosed) {
return (
<>
<BorderlessButton
style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
testID='room-view-banner'
onPress={toggleModal}
>
<MarkdownPreview msg={text} style={[styles.bannerText]} />
<BorderlessButton onPress={closeBanner}>
<CustomIcon color={themes[theme].auxiliaryText} name='close' size={20} />
</BorderlessButton>
if (text && !bannerClosed) {
return (
<>
<BorderlessButton
style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
testID='room-view-banner'
onPress={toggleAnnouncementModal}
>
<MarkdownPreview msg={text} style={[styles.bannerText]} />
<BorderlessButton onPress={closeBanner}>
<CustomIcon color={themes[theme].auxiliaryText} name='close' size={20} />
</BorderlessButton>
<Modal
onBackdropPress={toggleModal}
onBackButtonPress={toggleModal}
useNativeDriver
isVisible={showModal}
animationIn='fadeIn'
animationOut='fadeOut'
>
<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
<ScrollView style={styles.modalScrollView}>
<Markdown msg={text} theme={theme} />
</ScrollView>
</View>
</Modal>
</>
);
}
</BorderlessButton>
<Modal
onBackdropPress={toggleAnnouncementModal}
onBackButtonPress={toggleAnnouncementModal}
useNativeDriver
isVisible={showAnnouncementModal}
animationIn='fadeIn'
animationOut='fadeOut'
presentationStyle='overFullScreen'
>
<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
<ScrollView style={styles.modalScrollView}>
<Markdown msg={text} theme={theme} />
</ScrollView>
</View>
</Modal>
</>
);
}

return null;
},
(prevProps, nextProps) => prevProps.text === nextProps.text && prevProps.bannerClosed === nextProps.bannerClosed
);
return null;
};

export default Banner;
64 changes: 45 additions & 19 deletions app/views/RoomView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,8 @@ const stateAttrsUpdate = [
'member',
'canForwardGuest',
'canReturnQueue',
'canViewCannedResponse'
'canViewCannedResponse',
'showAnnouncementModal'
] as TStateAttrsUpdate[];

type TRoomUpdate = keyof TSubscriptionModel;
Expand Down Expand Up @@ -174,18 +175,18 @@ interface IRoomViewState {
[key: string]: any;
joined: boolean;
room:
| TSubscriptionModel
| {
rid: string;
t: string;
name?: string;
fname?: string;
prid?: string;
joinCodeRequired?: boolean;
status?: string;
lastMessage?: ILastMessage;
sysMes?: boolean;
onHold?: boolean;
| TSubscriptionModel
| {
rid: string;
t: string;
name?: string;
fname?: string;
prid?: string;
joinCodeRequired?: boolean;
status?: string;
lastMessage?: ILastMessage;
sysMes?: boolean;
onHold?: boolean;
};
roomUpdate: {
[K in TRoomUpdate]?: any;
Expand All @@ -202,6 +203,7 @@ interface IRoomViewState {
readOnly: boolean;
unreadsCount: number | null;
roomUserId?: string | null;
showAnnouncementModal?: boolean;
}

class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
Expand Down Expand Up @@ -233,6 +235,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
cancel: () => void;
};
private sub?: RoomClass;
private listObservableQuery = false;

constructor(props: IRoomViewProps) {
super(props);
Expand Down Expand Up @@ -281,7 +284,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
canForwardGuest: false,
canReturnQueue: false,
canPlaceLivechatOnHold: false,
isOnHold: false
isOnHold: false,
showAnnouncementModal: false
};

this.setHeader();
Expand Down Expand Up @@ -347,12 +351,19 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {

shouldComponentUpdate(nextProps: IRoomViewProps, nextState: IRoomViewState) {
const { state } = this;
const { roomUpdate, member, isOnHold } = state;
const { roomUpdate, member, isOnHold, showAnnouncementModal } = state;
const { appState, theme, insets, route } = this.props;
if (theme !== nextProps.theme) {
return true;
}
if (appState !== nextProps.appState) {
if (appState === 'background' && showAnnouncementModal) {
Copy link
Member

@diegolmello diegolmello Jan 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't do this.
It's going to be a mess to remove it later.

What if you just hide the modal before going background?

// Prevent app freezing while announcement's modal is open and then the user click on a link from announcement
// or minimize the app then resume it
this.listObservableQuery = true;
this.setState({ showAnnouncementModal: false });
return false;
}
return true;
}
if (member.statusText !== nextState.member.statusText) {
Expand Down Expand Up @@ -386,11 +397,17 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
this.navToThread({ tmid: route?.params?.jumpToThreadId });
}

if (appState === 'foreground' && appState !== prevProps.appState && this.rid) {
if (this.listObservableQuery || (appState === 'foreground' && appState !== prevProps.appState && this.rid)) {
// Fire List.query() just to keep observables working
if (this.list && this.list.current) {
this.list.current?.query();
setTimeout(
() => {
this.list.current?.query();
},
this.listObservableQuery ? 500 : null
);
}
this.listObservableQuery = false;
}
// If it's a livechat room
if (this.t === 'l') {
Expand Down Expand Up @@ -1517,9 +1534,11 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
);
};

toggleAnnouncementModal = () => this.setState(prevState => ({ showAnnouncementModal: !prevState.showAnnouncementModal }));

render() {
console.count(`${this.constructor.name}.render calls`);
const { room, loading } = this.state;
const { room, loading, showAnnouncementModal } = this.state;
const { user, baseUrl, theme, navigation, Hide_System_Messages, width, serverVersion } = this.props;
const { rid, t } = room;
let sysMes;
Expand All @@ -1534,7 +1553,14 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-view'>
<StatusBar />
<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
<Banner
title={I18n.t('Announcement')}
text={announcement}
bannerClosed={bannerClosed}
closeBanner={this.closeBanner}
showAnnouncementModal={showAnnouncementModal}
toggleAnnouncementModal={this.toggleAnnouncementModal}
/>
<List
ref={this.list}
listRef={this.flatList}
Expand Down