BA-2081: chat rooms refetch issue #182
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/components/modules/messages/ChatRoomsList/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
WalkthroughThe pull request introduces a new state variable Changes
Possibly related PRs
Suggested reviewers
Poem
Tip 🌐 Web search-backed reviews and chat
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/components/modules/messages/ChatRoomsList/index.tsx (1)
Reset cursor when switching tabs to ensure proper pagination
The cursor should be reset when switching tabs because each tab (unread/archived) represents a distinct dataset. Using a cursor from one tab's context for another tab's query could lead to incorrect pagination results.
The suggested implementation is correct:
const handleChange = (event: React.SyntheticEvent, newTab: string) => { setTab(newTab as ChatTabValues) + cursor.current = null startRefetchTransition(() => { refetch( { unreadMessages: newTab === CHAT_TAB_VALUES.unread, archived: newTab === CHAT_TAB_VALUES.archived, - cursor: cursor.current, }, { fetchPolicy: 'store-and-network' }, ) }) }🔗 Analysis chain
Line range hint
70-80: Verify cursor handling during tab switches.While the cursor is correctly passed to refetch, consider if the cursor should be reset when switching tabs to ensure fresh data fetching.
Consider this implementation:
const handleChange = (event: React.SyntheticEvent, newTab: string) => { setTab(newTab as ChatTabValues) + cursor.current = null startRefetchTransition(() => { refetch( { unreadMessages: newTab === CHAT_TAB_VALUES.unread, archived: newTab === CHAT_TAB_VALUES.archived, - cursor: cursor.current, }, { fetchPolicy: 'store-and-network' }, ) }) }Let's verify the current behavior:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for similar pagination implementations in the codebase ast-grep --pattern 'refetch($_, { fetchPolicy: $_ })'Length of output: 937
Script:
#!/bin/bash # Search for cursor usage in state and refs ast-grep --pattern 'const cursor = useRef' # Search for pagination-related patterns ast-grep --pattern 'const [$_] = usePagination' # Look for cursor reset patterns rg "cursor.*null" -A 2Length of output: 7142
🧹 Nitpick comments (1)
packages/components/modules/messages/ChatRoomsList/index.tsx (1)
48-48: Consider maintaining separate cursors per tab.To improve the pagination state management, consider maintaining separate cursors for each tab. This would prevent pagination state interference between tabs and provide a better user experience.
Example implementation:
const cursors = useRef<Record<ChatTabValues, string | null>>({ [CHAT_TAB_VALUES.active]: null, [CHAT_TAB_VALUES.unread]: null, [CHAT_TAB_VALUES.archived]: null })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 2692120 and 44e22f6a90330527cc0b2766dd7314b0b4c23b8e.
📒 Files selected for processing (1)
packages/components/modules/messages/ChatRoomsList/index.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
packages/components/modules/messages/ChatRoomsList/index.tsx (2)
3-11: LGTM! Clean import organization.The addition of
useRefis properly grouped with other React hooks.
48-48: LGTM! Well-typed cursor reference.The cursor ref is properly typed to handle all possible states and appropriately initialized.
|
I am slightly confused, can you explain how this works? It looks to me like |
pt-tsl
force-pushed
the
BA-2081-dissapearing-chats
branch
2 times, most recently
from
cf402b1 to
ec67947
Compare
pt-tsl
force-pushed
the
BA-2081-dissapearing-chats
branch
from
ec67947 to
a96ed0f
Compare
pt-tsl
requested review from
deboracosilveira and
priscilladeroode
as code owners
pt-tsl
force-pushed
the
BA-2081-dissapearing-chats
branch
from
a96ed0f to
3635abb
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/components/modules/messages/ChatRoomsList/index.tsx (1)
215-219: Consider memoizing the endReached callback.The endReached callback is recreated on every render. Consider memoizing it with useCallback to optimize performance.
+ const handleEndReached = useCallback(() => { + if (hasNext) { + loadNext(5) + } + }, [hasNext, loadNext]) return ( <ChatRoomListContainer> {/* ... */} {renderList && ( <Virtuoso {/* ... */} - endReached={() => { - if (hasNext) { - loadNext(5) - } - }} + endReached={handleEndReached} {...VirtuosoProps} /> )} </ChatRoomListContainer> )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/components/modules/messages/ChatRoomsList/index.tsx(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Lint
- GitHub Check: Component Test Applications and Packages
🔇 Additional comments (2)
packages/components/modules/messages/ChatRoomsList/index.tsx (2)
3-41: LGTM! Clean state management addition.The new
renderListstate is well-integrated and follows React conventions.
97-102: Consider tracking the Virtuoso bug.The workaround is well-documented, but it would be beneficial to track the upstream Virtuoso issue for a proper fix in the future.
Could you share the Virtuoso issue number? If not, consider creating one to track this workaround.
| const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => { | ||
| const value = e.target.value || '' | ||
| startTransition(() => { | ||
| refetch({ | ||
| q: value, | ||
| unreadMessages: isInUnreadTab, | ||
| archived: isInArchivedTab, | ||
| }) | ||
| refetch( | ||
| { | ||
| q: value, | ||
| unreadMessages: isInUnreadTab, | ||
| archived: isInArchivedTab, | ||
| }, | ||
| { fetchPolicy: 'network-only' }, | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
| const handleSearchClear = () => { | ||
| startTransition(() => { | ||
| reset() | ||
| refetch({ | ||
| q: '', | ||
| unreadMessages: isInUnreadTab, | ||
| archived: isInArchivedTab, | ||
| }) | ||
| refetch( | ||
| { | ||
| q: '', | ||
| unreadMessages: isInUnreadTab, | ||
| archived: isInArchivedTab, | ||
| }, | ||
| { fetchPolicy: 'network-only' }, | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
| const handleChange = (event: React.SyntheticEvent, newTab: string) => { | ||
| setTab(newTab as ChatTabValues) | ||
| startRefetchTransition(() => { | ||
| setRenderList(false) | ||
| refetch( | ||
| { | ||
| q: searchValue, | ||
| unreadMessages: newTab === CHAT_TAB_VALUES.unread, | ||
| archived: newTab === CHAT_TAB_VALUES.archived, | ||
| }, | ||
| { fetchPolicy: 'store-and-network' }, | ||
| { fetchPolicy: 'network-only' }, | ||
| ) | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider consistent renderList handling across all refetch scenarios.
While handleChange sets renderList to false before refetch, the search handlers don't. This could lead to inconsistent behavior when the Virtuoso component needs to be remounted.
Apply this diff to maintain consistency:
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => {
const value = e.target.value || ''
startTransition(() => {
+ setRenderList(false)
refetch(
{
q: value,
unreadMessages: isInUnreadTab,
archived: isInArchivedTab,
},
{ fetchPolicy: 'network-only' },
)
})
}
const handleSearchClear = () => {
startTransition(() => {
reset()
+ setRenderList(false)
refetch(
{
q: '',
unreadMessages: isInUnreadTab,
archived: isInArchivedTab,
},
{ fetchPolicy: 'network-only' },
)
})
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => { | |
| const value = e.target.value || '' | |
| startTransition(() => { | |
| refetch({ | |
| q: value, | |
| unreadMessages: isInUnreadTab, | |
| archived: isInArchivedTab, | |
| }) | |
| refetch( | |
| { | |
| q: value, | |
| unreadMessages: isInUnreadTab, | |
| archived: isInArchivedTab, | |
| }, | |
| { fetchPolicy: 'network-only' }, | |
| ) | |
| }) | |
| } | |
| const handleSearchClear = () => { | |
| startTransition(() => { | |
| reset() | |
| refetch({ | |
| q: '', | |
| unreadMessages: isInUnreadTab, | |
| archived: isInArchivedTab, | |
| }) | |
| refetch( | |
| { | |
| q: '', | |
| unreadMessages: isInUnreadTab, | |
| archived: isInArchivedTab, | |
| }, | |
| { fetchPolicy: 'network-only' }, | |
| ) | |
| }) | |
| } | |
| const handleChange = (event: React.SyntheticEvent, newTab: string) => { | |
| setTab(newTab as ChatTabValues) | |
| startRefetchTransition(() => { | |
| setRenderList(false) | |
| refetch( | |
| { | |
| q: searchValue, | |
| unreadMessages: newTab === CHAT_TAB_VALUES.unread, | |
| archived: newTab === CHAT_TAB_VALUES.archived, | |
| }, | |
| { fetchPolicy: 'store-and-network' }, | |
| { fetchPolicy: 'network-only' }, | |
| ) | |
| }) | |
| } | |
| const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => { | |
| const value = e.target.value || '' | |
| startTransition(() => { | |
| setRenderList(false) | |
| refetch( | |
| { | |
| q: value, | |
| unreadMessages: isInUnreadTab, | |
| archived: isInArchivedTab, | |
| }, | |
| { fetchPolicy: 'network-only' }, | |
| ) | |
| }) | |
| } | |
| const handleSearchClear = () => { | |
| startTransition(() => { | |
| reset() | |
| setRenderList(false) | |
| refetch( | |
| { | |
| q: '', | |
| unreadMessages: isInUnreadTab, | |
| archived: isInArchivedTab, | |
| }, | |
| { fetchPolicy: 'network-only' }, | |
| ) | |
| }) | |
| } | |
| const handleChange = (event: React.SyntheticEvent, newTab: string) => { | |
| setTab(newTab as ChatTabValues) | |
| startRefetchTransition(() => { | |
| setRenderList(false) | |
| refetch( | |
| { | |
| q: searchValue, | |
| unreadMessages: newTab === CHAT_TAB_VALUES.unread, | |
| archived: newTab === CHAT_TAB_VALUES.archived, | |
| }, | |
| { fetchPolicy: 'network-only' }, | |
| ) | |
| }) | |
| } |
Acceptance Criteria
Given I have 10 chats in my active chat list, when I switch to another Chat List Tab and come back to the Active Chat list. I should still be able to see and access the 10 original chat rooms
https://www.loom.com/share/8714eef222ea48b193593d9f36b0496d?sid=a162b289-d22f-49c7-8dec-efd9240b755e
Approvd
https://app.approvd.io/silverlogic/BA/stories/38025
Summary by CodeRabbit