Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request modifies the mail components by updating how email threads are managed in the Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 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: 0
🧹 Nitpick comments (1)
apps/mail/components/mail/mail-list.tsx (1)
389-412: Refactor handleMailClick to reduce code duplicationWhile the URL-based thread selection logic works well, there's some code duplication between the if and else branches. Consider refactoring to extract common code.
const handleMailClick = useCallback( (message: InitialThread) => () => { const selectMode = getSelectMode(); // Handle other selection modes... const threadId = message.threadId ?? message.id; const currentParams = new URLSearchParams(searchParams.toString()); + // Reset bulk selection regardless of selection action + setMail((prev) => ({ + ...prev, + bulkSelected: [], + })); if (threadIdParam === threadId) { // Deselect the thread and update URL to remove threadId currentParams.delete('threadId'); - setMail((prev) => ({ - ...prev, - bulkSelected: [], - })); } else { // Select the thread and update URL with threadId currentParams.set('threadId', threadId); - setMail((prev) => ({ - ...prev, - bulkSelected: [], - })); } // Update URL with new parameters router.push(`/mail/${folder}?${currentParams.toString()}`); if (message.unread) { return markAsRead({ ids: [message.id] }) .then(() => mutate()) .catch(console.error); } }, [mail, setMail, items, getSelectMode, router, searchParams, folder], );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/mail/components/mail/mail-list.tsx(6 hunks)apps/mail/components/mail/mail.tsx(6 hunks)apps/mail/components/mail/thread-display.tsx(4 hunks)apps/mail/hooks/use-threads.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
apps/mail/components/mail/thread-display.tsx (1)
apps/mail/hooks/use-threads.ts (1) (1)
useThread(114-125)
apps/mail/hooks/use-threads.ts (1)
apps/mail/types/index.ts (1) (1)
ParsedMessage(32-55)
🔇 Additional comments (18)
apps/mail/hooks/use-threads.ts (1)
114-118: Improved flexibility with nullable thread ID parameterThe change to accept
string | nullfor theidparameter improves the hook's flexibility, allowing components to use it without necessarily having a thread ID. The conditional check ensures SWR only fetches data when both a valid session and thread ID exist, preventing unnecessary API calls.apps/mail/components/mail/thread-display.tsx (4)
6-6: Added useSearchParams for URL-based thread selectionAdding this import enables retrieving the thread ID from the URL query parameters, which is essential for the overall functionality of this PR.
26-26: Making the mail prop optional accommodates URL-based selectionMaking the
189-193: Well-implemented thread ID retrieval logicThis code intelligently retrieves the thread ID from multiple possible sources in a clear priority order: first from props, then from URL parameters, with a sensible default. The comment also clearly explains that thread data is only fetched when a valid ID exists.
207-209: Simplified handleClose functionThe handleClose function has been simplified to only call the provided onClose callback. This aligns with the new approach where thread selection state is managed through the URL rather than component state.
apps/mail/components/mail/mail.tsx (8)
200-202: Added URL parameter handling for thread selectionUsing the
useSearchParamshook to extract thethreadIdfrom the URL aligns with the PR objective of including thread IDs in URLs when emails are opened.
203-209: Updated thread visibility logic based on URL parameterThe component now determines whether to display a thread based on the presence of the
threadIdURL parameter rather than component state, creating a more consistent and sharable user experience.
211-217: Improved handleClose with URL parameter managementThe function now properly updates the URL to remove the threadId parameter when closing a thread, which ensures the URL state stays in sync with the UI state.
241-242: Consistent UI visibility based on URL parametersUsing the
threadIdParamto conditionally show/hide UI elements ensures consistency between the URL state and the visual state of the application.
298-298: Dynamically adjust UI based on thread selection statusThe
iconsOnlyprop now uses thethreadIdParamto determine if icons should be compact, providing a responsive UI that adapts to the current state.
343-343: Thread visibility controlled by URL parameterThe conditional rendering of the thread display now depends on the URL parameter rather than component state, completing the integration of URL-based thread selection.
351-351: Simplified ThreadDisplay component usageThe component no longer needs to receive the selected mail through props since it can retrieve the required information from the URL.
367-367: Consistent ThreadDisplay usage in mobile viewThe mobile view implementation also adopts the new approach, ensuring consistency across different viewport sizes.
apps/mail/components/mail/mail-list.tsx (5)
8-8: Added router and search params for URL manipulationAdding these imports enables the component to read from and update the URL based on user interactions with mail threads.
51-52: Retrieve thread ID from URL parametersThese lines retrieve the current thread ID from the URL, allowing the component to determine which thread is currently selected.
57-60: Updated thread selection logic to use URL parametersThe isMailSelected logic now compares against the threadId from URL parameters rather than component state, ensuring consistency between the URL and UI.
142-143: Adaptive UI based on thread selectionThis conditional styling ensures the sender name is properly truncated when a thread is selected, improving the UI when viewing threads.
420-420: Updated dependencies for handleMailClickThe dependency array has been properly updated to include the new dependencies (router, searchParams, folder) required for URL manipulation.
1 participant
READ CAREFULLY THEN REMOVE
Remove bullet points that are not relevant.
PLEASE REFRAIN FROM USING AI TO WRITE YOUR CODE AND PR DESCRIPTION. IF YOU DO USE AI TO WRITE YOUR CODE PLEASE PROVIDE A DESCRIPTION AND REVIEW IT CAREFULLY. MAKE SURE YOU UNDERSTAND THE CODE YOU ARE SUBMITTING USING AI.
Description
Please provide a clear description of your changes.
Type of Change
Please delete options that are not relevant.
Areas Affected
Please check all that apply:
Testing Done
Describe the tests you've done:
Security Considerations
For changes involving data or authentication:
Checklist
Additional Notes
Add any other context about the pull request here.
Screenshots/Recordings
Add screenshots or recordings here if applicable.
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit
New Features
Bug Fixes
Style
ThreadSubjectcomponent for improved consistency.Chores
useThreadfunction to optimize data fetching.