Skip to content

refactoring & improvements#502

Merged
MrgSub merged 24 commits intothread-movementfrom
feat/improved-markAsRead
Mar 21, 2025
Merged

refactoring & improvements#502
MrgSub merged 24 commits intothread-movementfrom
feat/improved-markAsRead

Conversation

@MrgSub
Copy link
Collaborator

@MrgSub MrgSub commented Mar 21, 2025

  • Refactors useThread and useThreads hooks to not require parameters
  • moved highlightText to a util file
  • optimistically markAsRead

Summary by CodeRabbit

  • Revert

    • Removed an outdated mail view component to simplify navigation.
  • Refactor

    • Streamlined email thread and mail data fetching by eliminating redundant search-state management and consolidating text highlighting functionality.
  • Style

    • Improved visual presentation with updated conditional styling for mail items and trimmed subject text for a cleaner display.
  • New Features

    • Introduced automatic marking of unread emails as read for enhanced message management.
    • Added a centralized text highlighting function to improve email content display.

@vercel
Copy link

vercel bot commented Mar 21, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
0 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 21, 2025 7:06pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 21, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR removes the deprecated MailPage component and simplifies the email thread fetching logic across several modules. The changes eliminate the dependency on the search value for fetching threads and instead rely on URL parameters. Inline implementations of the highlightText functionality have been replaced by a centralized utility in the email utils module. Additionally, the thread read state is now managed via an added markAsRead function, and a type signature update has been applied to the email thread click handler.

Changes

File(s) Summary
apps/mail/app/…/mail/page.tsx Removed the MailPage component used for rendering the mail interface.
apps/mail/components/context/thread-context.tsx, apps/mail/components/mail/mail.tsx, apps/mail/components/mail/mail-list.tsx, apps/mail/components/mail/thread-display.tsx, apps/mail/hooks/use-threads.ts Updated thread fetching: removed searchValue and parameters from useThreads, streamlined control flow using URL parameters, and introduced automatic marking of unread messages as read.
apps/mail/components/draft/drafts-list.tsx, apps/mail/components/mail/mail-list.tsx, apps/mail/lib/email-utils.client.tsx Refactored text highlighting: removed inline highlightText functions and replaced them with an imported centralized highlightText utility.
apps/mail/components/mail/thread-subject.tsx, apps/mail/types/index.ts Minor adjustments: trimmed whitespace in thread subjects and updated the type for the onClick property in ThreadProps.

Sequence Diagram(s)

sequenceDiagram
  participant UI as Email UI Components
  participant Hook as useThreads Hook
  participant API as getMail API
  participant Mark as markAsRead Function

  UI->>Hook: Call useThreads()
  Hook->>API: Fetch email threads
  API-->>Hook: Return threads (including unread messages)
  Hook->>Mark: Trigger markAsRead(unreadIds) if unread messages exist
  Mark-->>Hook: Acknowledge update
  Hook-->>UI: Return updated thread list
Loading

Possibly related PRs

Suggested reviewers

  • nizzyabi
  • ahmetskilinc

Poem

I'm a little rabbit, hopping with glee,
Watching new changes set the email interface free.
Threads now fetch cleanly without extra weight,
And highlights shine bright, looking first-rate!
With code so spry, our app leaps ahead –
A joyful dance, lines of code, bunny-led!
🐇✨


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🔭 Outside diff range comments (1)
apps/mail/components/mail/thread-display.tsx (1)

224-224: ⚠️ Potential issue

Fix missing mutate function reference

There's a call to mutate() which isn't defined after the refactoring. You need to destructure it from the useThread hook.

-const { data: emailData, isLoading } = useThread();
+const { data: emailData, isLoading, mutate } = useThread();
const { mutate: mutateThreads } = useThreads();
🧹 Nitpick comments (3)
apps/mail/types/index.ts (1)

102-102: Consider using a more specific return type than any

The type signature for the onClick handler has been broadened from Promise<any> | undefined to just any. While this provides more flexibility and aligns with the refactoring objectives, it reduces type safety. Consider using a more specific return type if possible (e.g., Promise<void> | void or unknown).

-  onClick?: (message: InitialThread) => () => any;
+  onClick?: (message: InitialThread) => () => Promise<void> | void;
apps/mail/hooks/use-threads.ts (2)

45-58: Improve type safety in the fetchThread function

The implementation of optimistic updates for marking unread messages as read is a good enhancement. However, the use of any type for both the callback parameter and args array reduces type safety.

Consider using more specific types:

-const fetchThread = (cb: any) => async (args: any[]) => {
+const fetchThread = (cb?: () => void) => async (args: [string, string, string]) => {
  const [_, id] = args;
  try {
    return await getMail({ id }).then((response) => {
      if (response) {
        const unreadMessages = response.filter(e=>e.unread).map(e=>e.id)
        if (unreadMessages.length) {
          markAsRead({ids: unreadMessages}).then(()=>{
-            if (cb && typeof cb === 'function') cb()
+            if (cb) cb()
          });
        }
        return response
      }
    });

137-137: Consider removing the 'as any' cast

The code is passing the mutateThreads function to fetchThread, but relies on a type cast to any. With proper typing of the fetchThread function (as suggested earlier), this cast would be unnecessary.

-    fetchThread(mutateThreads) as any,
+    fetchThread(mutateThreads),
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 236b78b and eb80dfe.

📒 Files selected for processing (10)
  • apps/mail/app/(routes)/mail/page.tsx (0 hunks)
  • apps/mail/components/context/thread-context.tsx (1 hunks)
  • apps/mail/components/draft/drafts-list.tsx (1 hunks)
  • apps/mail/components/mail/mail-list.tsx (4 hunks)
  • apps/mail/components/mail/mail.tsx (1 hunks)
  • apps/mail/components/mail/thread-display.tsx (1 hunks)
  • apps/mail/components/mail/thread-subject.tsx (1 hunks)
  • apps/mail/hooks/use-threads.ts (4 hunks)
  • apps/mail/lib/email-utils.client.tsx (1 hunks)
  • apps/mail/types/index.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • apps/mail/app/(routes)/mail/page.tsx
🧰 Additional context used
🧬 Code Definitions (5)
apps/mail/components/mail/thread-display.tsx (1)
apps/mail/hooks/use-threads.ts (2) (2)
  • useThread (129-143)
  • useThreads (81-127)
apps/mail/components/mail/mail.tsx (1)
apps/mail/hooks/use-threads.ts (1) (1)
  • useThreads (81-127)
apps/mail/components/mail/mail-list.tsx (2)
apps/mail/lib/email-utils.client.tsx (1) (1)
  • highlightText (59-77)
apps/mail/hooks/use-threads.ts (1) (1)
  • useThreads (81-127)
apps/mail/components/context/thread-context.tsx (1)
apps/mail/hooks/use-threads.ts (1) (1)
  • useThreads (81-127)
apps/mail/hooks/use-threads.ts (3)
apps/mail/actions/mail.ts (2) (2)
  • getMail (31-43)
  • markAsRead (45-55)
apps/mail/lib/utils.ts (1) (1)
  • defaultPageSize (139-139)
apps/mail/types/index.ts (1) (1)
  • ParsedMessage (37-60)
🔇 Additional comments (16)
apps/mail/lib/email-utils.client.tsx (1)

59-77: Good extraction of the highlightText function to a utility file

The implementation is clean and handles edge cases well. This refactoring improves code organization by centralizing the text highlighting functionality that was previously duplicated across components.

apps/mail/components/mail/thread-subject.tsx (1)

51-51: Good improvement for UI consistency

Trimming whitespace from the subject ensures a cleaner display without leading or trailing spaces. This small change improves the user experience by presenting content more consistently.

apps/mail/components/draft/drafts-list.tsx (1)

19-19: Good refactoring by centralizing the highlightText function.

Moving the highlighting functionality to a dedicated utility file improves code maintainability and ensures consistent behavior across the application.

apps/mail/components/context/thread-context.tsx (2)

68-68: Good simplification of the useThreads hook usage.

Removing the parameters from the mutate() call simplifies the component and aligns with the refactored hook implementation. The hook now internally accesses the necessary context (folder and search parameters) from the URL, which is a cleaner approach.


110-111: Consistent implementation of the simplified mutate call.

The simplified mutate() call is correctly implemented when handling thread moves, maintaining consistency with the updated hook behavior.

apps/mail/components/mail/mail.tsx (1)

215-215: Good simplification of the useThreads hook usage.

Removing the parameters from the useThreads() call improves code maintainability by centralizing the logic for retrieving folder and search parameters within the hook itself. This change aligns with the PR objective of refactoring the hook to eliminate parameter requirements.

apps/mail/components/mail/mail-list.tsx (6)

15-15: Good refactoring by centralizing the highlightText function.

Moving the highlighting functionality to a dedicated utility file improves code maintainability and ensures consistent behavior across the application.


105-106: Improved opacity handling for thread items.

The updated condition enhances the visual distinction between different thread states. Now both selected threads and read threads will have reduced opacity, making unread and non-selected threads stand out more clearly.


119-120: Improved visual distinction for unread messages.

The conditional font weight now considers both the read status and selection state. This creates a better visual hierarchy by only highlighting truly unread and non-selected messages with bold text.


126-126: Improved unread indicator display logic.

The blue dot indicator for unread messages now only appears when the message is both unread and not selected. This creates a cleaner UI by removing redundant visual indicators when a thread is already highlighted through selection.


211-211: Good simplification of the useThreads hook usage.

Removing the parameters from the useThreads() call aligns with the hook's refactored implementation, which now internally accesses folder and search parameters from the URL. This change supports the PR objective of eliminating parameter requirements for the hook.


370-393: Read status is now managed separately from thread selection.

The code no longer automatically marks threads as read when clicked. This change aligns with the PR objective of implementing an optimistic update mechanism for the markAsRead functionality, decoupling selection from read status management.

apps/mail/hooks/use-threads.ts (4)

3-8: Good refactoring of imports to support new functionality

The imports have been appropriately updated to support the refactored hooks. Adding markAsRead, useParams, useSearchParams, useSearchValue, and defaultPageSize aligns with the PR objective of simplifying thread fetching by relying on URL parameters instead of direct arguments.


15-15: LGTM: Simplified preload function

The modification to pass undefined to fetchThread aligns with the refactoring approach, as the function now retrieves parameters from context rather than direct arguments.


81-90: Good refactoring to use URL parameters

The useThreads hook has been properly refactored to use URL parameters instead of function arguments, which aligns with the PR objectives. The implementation correctly extracts the folder from route parameters and search value from the hook, making the code more maintainable.


129-134: Good implementation of thread fetching using URL parameters

The useThread hook has been well refactored to use search parameters for the thread ID instead of requiring it as a function parameter. Additionally, using the mutate function from useThreads enables proper state management when threads are updated.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
apps/mail/components/mail/thread-display.tsx (1)

282-282: Consider handling the undefined case differently in icon selection.

The current condition !(emailData) || emailData[0]?.tags?.includes('STARRED') will show the StarOff icon when emailData is undefined. While this prevents a runtime error, it might be misleading to show an "unstar" action when there's no data to act upon.

-                icon={!(emailData) || emailData[0]?.tags?.includes('STARRED') ? StarOff : Star}
+                icon={emailData?.[0]?.tags?.includes('STARRED') ? StarOff : Star}
+                disabled={!emailData}

This way, the icon accurately reflects the starred status only when data is available, and the button is disabled when there's no data.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb80dfe and 3af18cc.

📒 Files selected for processing (1)
  • apps/mail/components/mail/thread-display.tsx (3 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
apps/mail/components/mail/thread-display.tsx (1)
apps/mail/hooks/use-threads.ts (2) (2)
  • useThread (129-143)
  • useThreads (81-127)
🔇 Additional comments (2)
apps/mail/components/mail/thread-display.tsx (2)

189-192: Hooks refactoring successfully implemented!

The removal of parameters from the hook calls aligns with the PR objectives. The code now uses the search parameters to get the threadId directly, making the implementation cleaner and more maintainable.


211-211: Good defensive check for thread operations.

Adding the null check for both emailData and threadId is a proper safeguard before performing operations on thread favorites.

@MrgSub MrgSub changed the base branch from staging to thread-movement March 21, 2025 18:50
@nizzyabi
Copy link
Collaborator

LGTM

@MrgSub MrgSub merged commit 74bece1 into thread-movement Mar 21, 2025
4 of 5 checks passed
This was referenced Apr 2, 2025
This was referenced Apr 14, 2025
@coderabbitai coderabbitai bot mentioned this pull request May 23, 2025
@BlankParticle BlankParticle deleted the feat/improved-markAsRead branch May 25, 2025 13:42
@coderabbitai coderabbitai bot mentioned this pull request Jun 28, 2025
34 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants