fix: feed screen after page refresh #538
Conversation
davidgamez
changed the title
|
Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-538-z25zp98c.web.app |
| @@ -93,6 +93,7 @@ export const userProfileSlice = createSlice({ | |||
| state.status = 'unauthenticated'; | |||
| state.isSignedInWithProvider = false; | |||
| state.isAppRefreshing = false; | |||
| state.user = undefined; | |||
There was a problem hiding this comment.
This is not related to the fix. However, I noticed the user information stayed in the store after logout. This might lead to unexpected behavior after completing the logout and before the anonymous login succeeds.
| yield app.auth().signOut(); | ||
| yield put(logoutSuccess()); | ||
| yield put(anonymousLogin()); // Use anonymous login to keep the user signed in |
There was a problem hiding this comment.
Anonymous login is not needed anymore here. Now anonymous login is being centralized in the root component.
| @@ -80,10 +79,9 @@ function* logoutSaga({ | |||
| navigateTo: NavigateFunction; | |||
| }>): Generator { | |||
| try { | |||
| navigateTo(redirectScreen); | |||
There was a problem hiding this comment.
We are navigating out of the current screen before logging out to avoid race conditions.
|
Login and logout flow with multiple tabs open. Screen.Recording.2024-07-09.at.2.44.27.PM.mov |
web-app/src/app/router/Router.tsx
Outdated
| }; | ||
|
|
||
| const loginUser = (): void => { | ||
| // Refresh the page to ensure the user is authenticated |
There was a problem hiding this comment.
I would update Refresh the page to ensure the user is authenticated on this session and other sessions (tabs)
There was a problem hiding this comment.
The refresh will only affect the current window/session
web-app/src/app/router/Router.tsx
Outdated
| createDispatchChannel(LOGOUT_CHANNEL, logoutUser); | ||
| createDispatchChannel(LOGIN_CHANNEL, loginUser); |
There was a problem hiding this comment.
[question] how come we created a custom subscribe / dispatch system instead of using Redux reducer dispatch directly?
There was a problem hiding this comment.
The redux dispatch doesn't dispatch events across tabs; it's scoped to the current session. We are using redux-persist, but the loading of the state from the local storage is only applicable on redux state rehydration(when the app loads the first time or refreshes). I was looking into other redux libraries that sync states across tabs. However, those libraries make the tabs entirely in sync, making it tricky to have different "states" reflected on each tab. Examples open different search results or feeds.
There was a problem hiding this comment.
I added documentation and renamed variable and function names to improve readability.
Summary:
The feed screen is not rendering after hitting refresh on the page.
Fixes: #537
How to reproduce the issue(error loading feeds):
Root cause
The issue was present due to redux store rehydrating the store information with user anonymous before Firebase SDK had a valid anonymous user set. The fix delays the loading of the screens until a valid user information is set on the Firebase SDK.
User session is not shared across tabs.
Fixes: #516 , #443
Root cause
We were using session storage instead of local storage in the redux-persist reducer. In addition, we needed to add a mechanism to send an event to the open tabs when the user authentication changes.
Expected behavior:
The feed screen is rendered after the page is refreshed.
Testing tips:
Please make sure these boxes are checked before submitting your pull request - thanks!
./scripts/api-tests.shto make sure you didn't break anything