Focus mode styles not apply without refresh - reported by @ahmdshrif

[mvtglobally]

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. Add some draft messages to all conversation you have or have new messages on them . To be includ in focus mode .
2. Change the mode to focus mode from setting > preferences > priority mode.
3. Refresh the page

Expected Result:

Describe what you think should've happened

Actual Result:

Focus mode style not apply until you reopen the app or reload the page.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Mobile Web

Version Number: 1.1.39-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20220204-195140_New.Expensify.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ahmdshrif
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643997517536859

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @conorpendergrast (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[conorpendergrast]

Reproduced; the specific problem is that if you have any draft messages in #focus mode, and then switch to Most recent all recent chats are not shown in the sidebar (as you'll see from the recording above!)

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[ctkochan22]

Looks like its a bit of a regression introduced recently.

Relevant files:

• NVP_PRIORITY_MODE

[MelvinBot]

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

[ctkochan22]

Still looking. Was able to reproduce, now it looks like its fixed?

[ahmdshrif]

the platform here is all, not web only.

I still reproduce it on main. and production also.
make sure to add a draft message to all reports you have then change the priority mode

[ctkochan22]

Ah right. As long as you have a draft message. I think I have a lead on where its happeing

[alrt] [alXt] NewExpensify crash caught by error boundary ~~ error: 'Cannot read properties of undefined (reading 'reportID')' errorInfo: '{"componentStack":"\n    at SidebarLinks (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:372757:81)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at withLocalize(Component)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at ScreenWrapper (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:334662:81)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at WrappedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:40221:5)\n    at SidebarScreen (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:373018:81)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at WithWindowDimensions (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:339442:83)\n    at withLocalize(Component)\n    at WrappedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:40221:5)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at AnimatedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:201991:83)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at AnimatedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:201991:83)\n    at Dummy (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:45758:3)\n    at DrawerView (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:45925:5)\n    at DrawerViewBase (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:45508:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at SafeAreaProviderCompat (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:47757:3)\n    at DrawerView (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:45719:3)\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:42513:13\n    at DrawerNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:44834:3)\n    at BaseDrawerNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:345307:45)\n    at WithWindowDimensions (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:339442:83)\n    at MainDrawerNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:345467:58)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at StaticContainer (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:41062:16)\n    at EnsureSingleNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:40715:5)\n    at SceneView (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:40952:5)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at CardSheet (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:53429:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at AnimatedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:269285:37)\n    at AnimatedComponentWrapper\n    at Dummy (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:52113:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at AnimatedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:269285:37)\n    at AnimatedComponentWrapper\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at Card (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:52657:5)\n    at CardContainer (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:53151:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at NativeScreen (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:249770:1)\n    at AnimatedComponent (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:269285:37)\n    at AnimatedComponentWrapper\n    at MaybeScreen (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:52579:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at MaybeScreenContainer (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:52567:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at Background (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:46761:3)\n    at CardStack (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:53669:5)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at SafeAreaProviderCompat (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:47757:3)\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:259811:25\n    at StackView (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:53996:5)\n    at CustomRootStackNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:345933:23)\n    at AuthScreens (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:344976:81)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at WithWindowDimensions (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:339442:83)\n    at AppNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:346008:16)\n    at EnsureSingleNavigator (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:40715:5)\n    at BaseNavigationContainer (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:40369:5)\n    at ThemeProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:48542:5)\n    at NavigationContainerInner (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:48165:5)\n    at NavigationRoot (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:346620:81)\n    at Expensify (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:317648:81)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at withLocalize(Component)\n    at BaseErrorBoundary (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:324444:81)\n    at RenderersPropsProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:225551:44)\n    at ListStyleSpecsProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:225413:3)\n    at SharedPropsProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:225655:48)\n    at RenderRegistryProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:225479:3)\n    at RenderHTMLConfigProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:224201:5)\n    at TRenderEngineProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:225238:3)\n    at BaseHTMLEngineProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:325539:13)\n    at HTMLEngineProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:326026:18)\n    at WithWindowDimensions (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:339442:83)\n    at LocaleContextProvider (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:339153:81)\n    at withOnyx (http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:193097:85)\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle.js:334543:23\n    at div\n    at http:\/\/localhost:8080\/app-b3a49a437ed1201c142f.bundle

[ctkochan22]

Phew! Found it

[ctkochan22]

Part of the issue is our use of map here elaborated in this comment.

The real issue is actually is deciding that we don't need to "reorder" when switching modes if there is a draft: https://github.com/Expensify/App/blame/a87b53c273be288bdc887d618973404ba01ea22b/src/pages/home/sidebar/SidebarLinks.js#L147-L151
Introduced in this PR: #6084

[marcaaron]

Stack trace log for the win! 🙌

[ahmdshrif]

hi, @ctkochan22 how I can apply for reporting reward?

[MelvinBot]

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[ctkochan22]

Adding External label so reporter can be rewarded!

[NicMendonca]

@ahmdshrif sent you an offer here.

[NicMendonca]

paid! thank you!