Offline indicator doesn’t show for archived rooms

[neil-marcellini]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Create a workspace by clicking the green plus, New workspace (if needed)
2. Open the settings by clicking the avatar in the header, workspace name, 3 dots in the header, delete workspace
3. Click the search bar in the header, enter announce and click on the archived announce room
4. Go offline

Expected Result:

The offline indicator should appear

Actual Result:

The offline indicator does not appear

Workaround:

Use the app without knowing that you are offline when on that page

Platform:

The issue occurs on large screens.

• Web
• Desktop App

Version Number: v1.1.98-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

archived-no-offline.mov

Expensify/Expensify Issue URL:
Issue reported by: @neil-marcellini
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1662634084940259

View all open jobs on GitHub

[neil-marcellini]

This bug occurs because on large screens the OfflineIndicator is displayed in the ReportActionCompose component on the ReportScreen.

App/src/pages/home/report/ReportActionCompose.js

Lines 678 to 682 in 85172f7

	<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, !this.props.isSmallScreenWidth && styles.chatItemComposeSecondaryRow]}>
	{!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
	<ReportTypingIndicator reportID={this.props.reportID} />
	<ExceededCommentLength commentLength={this.comment.length} />
	</View>

When we have an archivedRoom we don't render the composer, and therefore we don't render the offline indicator on large screens.

App/src/pages/home/ReportScreen.js

Lines 255 to 277 in afd2cee

	{(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
	<View style={[this.setChatFooterStyles(this.props.network.isOffline), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
	{
	isArchivedRoom
	? (
	<ArchivedReportFooter
	reportClosedAction={reportClosedAction}
	report={this.props.report}
	/>
	) : (
	<SwipeableView onSwipeDown={Keyboard.dismiss}>
	<ReportActionCompose
	onSubmit={this.onSubmitComment}
	reportID={reportID}
	reportActions={this.props.reportActions}
	report={this.props.report}
	isComposerFullSize={this.props.isComposerFullSize}
	/>
	</SwipeableView>
	)
	}
	</View>
	)}

[neil-marcellini]

Here's the solution I added today. I added an offline indicator outside of the composer if we are rendering something else instead.

App/src/pages/home/ReportScreen.js

Lines 260 to 286 in 6aee812

	{(hideComposer || this.props.session.shouldShowComposeInput) && (
	<View style={[this.setChatFooterStyles(this.props.network.isOffline), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
	{isArchivedRoom && (
	<ArchivedReportFooter
	reportClosedAction={reportClosedAction}
	report={this.props.report}
	/>
	)}
	{hideComposer
	? (
	!this.props.isSmallScreenWidth && (
	<OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />
	)
	)
	: (
	<SwipeableView onSwipeDown={Keyboard.dismiss}>
	<ReportActionCompose
	onSubmit={this.onSubmitComment}
	reportID={reportID}
	reportActions={this.props.reportActions}
	report={this.props.report}
	isComposerFullSize={this.props.isComposerFullSize}
	/>
	</SwipeableView>
	)}
	</View>
	)}

[melvin-bot]

@neil-marcellini Whoops! This issue is 2 days overdue. Let's get this updated quick!

[neil-marcellini]

On track to be updated with CreatePolicyRoom.

[neil-marcellini]

Yep, see the latest update https://github.com/Expensify/Expensify/issues/215186#issuecomment-1246032765.