Fix team switching not refreshing data across views#33
Conversation
BoardPage and CyclesPage maintained their own team key state initialized from localStorage on mount, but never listened for the `involute:active-team-key` event dispatched when clicking a different team in the sidebar. Because the route stays the same (e.g. `/`), components were not remounted and stale team data persisted. - BoardPage: listen for the active-team-key event and feed changes through the existing pendingTeamKey mechanism so the GraphQL query re-fetches with the new team filter - CyclesPage: convert the one-shot readStoredTeamKey() call into reactive state with the same event listener so cycles reload for the selected team Co-authored-by: Cursor <cursoragent@cursor.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughBoardPage and CyclesPage now synchronize their team key values by listening to a shared ChangesEvent-driven team key synchronization
🎯 2 (Simple) | ⏱️ ~10 minutes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements a synchronization mechanism for the active team key across the BoardPage and CyclesPage components by listening to a custom 'involute:active-team-key' event. The review feedback highlights three main areas for improvement: refining the state update logic in BoardPage to prevent potential race conditions when switching teams, moving the assignment of activeTeamKeyRef.current into a useEffect hook to adhere to React best practices, and extracting the hardcoded event name into a shared constant to improve maintainability and reduce the risk of typos.
| if (nextTeamKey !== activeTeamKeyRef.current) { | ||
| setPendingTeamKey(nextTeamKey); | ||
| } |
There was a problem hiding this comment.
在处理 involute:active-team-key 事件时，如果 nextTeamKey 与当前 activeTeamKey 相同，建议显式将 pendingTeamKey 重置为 null。这可以避免在快速切换团队（例如 A -> B -> A）时，由于 pendingTeamKey 仍停留在旧值（'B'）而导致组件最终错误地切换到团队 B 的竞态问题。
setPendingTeamKey(nextTeamKey === activeTeamKeyRef.current ? null : nextTeamKey);
| const [activeTeamKey, setActiveTeamKey] = useState<string | null>(() => readStoredTeamKey()); | ||
| const [pendingTeamKey, setPendingTeamKey] = useState<string | null>(null); | ||
| const activeTeamKeyRef = useRef(activeTeamKey); | ||
| activeTeamKeyRef.current = activeTeamKey; |
There was a problem hiding this comment.
避免在渲染过程中直接修改 ref.current。根据 React 官方文档建议，这类副作用操作应放在 useEffect 或 useLayoutEffect 中，以确保在并发渲染模式下的行为正确性。
useEffect(() => {
activeTeamKeyRef.current = activeTeamKey;
}, [activeTeamKey]);
| } | ||
| } | ||
|
|
||
| window.addEventListener('involute:active-team-key', handleActiveTeamKeyChange as EventListener); |
There was a problem hiding this comment.
事件名称 'involute:active-team-key' 在多个组件中硬编码使用。建议将其提取到 utils.ts 中的常量（例如 ACTIVE_TEAM_EVENT），以提高代码的可维护性并减少因拼写错误导致的 Bug。
1 participant
Summary
involute:active-team-key事件，但 BoardPage 和 CyclesPage 未监听该事件，路由不变时组件不重挂载，数据不刷新pendingTeamKey机制触发 GraphQL 重新查询teamKey改为响应式 useState + 事件监听Test plan
Made with Cursor
Summary by CodeRabbit