🚀 implement batch search feature #34
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Warning Rate Limit Exceeded@kawamataryo has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 1 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. WalkthroughThe update integrates Storybook for a React-Vite project, enhances UI with new components, and adopts Tailwind CSS for styling. It also refines user interactions in a Chrome extension, improving the handling of Bluesky user data with new functionality for user actions and visual feedback. Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 3
Configuration used: CodeRabbit UI
Files ignored due to path filters (2)
package-lock.jsonis excluded by:!**/*.jsonpackage.jsonis excluded by:!**/*.json
Files selected for processing (28)
- .storybook/main.ts (1 hunks)
- .storybook/preview.ts (1 hunks)
- .vscode/settings.json (1 hunks)
- src/contents/App.tsx (1 hunks)
- src/contents/content.ts (1 hunks)
- src/lib/bskyServiceWorkerClient.ts (2 hunks)
- src/lib/components/AlertError.stories.tsx (1 hunks)
- src/lib/components/AlertError.tsx (1 hunks)
- src/lib/components/AlertSuccess.stories.tsx (1 hunks)
- src/lib/components/AlertSuccess.tsx (1 hunks)
- src/lib/components/Icons/AvatarFallbackSvg.tsx (1 hunks)
- src/lib/components/Icons/BlueskyIconSvg.tsx (1 hunks)
- src/lib/components/MatchTypeFilter.stories.tsx (1 hunks)
- src/lib/components/MatchTypeFilter.tsx (1 hunks)
- src/lib/components/Modal.stories.tsx (1 hunks)
- src/lib/components/Modal.tsx (1 hunks)
- src/lib/components/UserCard.stories.tsx (1 hunks)
- src/lib/components/UserCard.tsx (1 hunks)
- src/lib/components/UserCardSkeleton.tsx (1 hunks)
- src/lib/components/UserCardSkelton.stories.tsx (1 hunks)
- src/lib/constants.ts (2 hunks)
- src/lib/hooks/useRetrieveBskyUsers.ts (1 hunks)
- src/lib/searchBskyUsers.ts (1 hunks)
- src/lib/utils.ts (1 hunks)
- src/popup.tsx (3 hunks)
- src/style.content.css (1 hunks)
- src/style.content.legacy.css (1 hunks)
- tailwind.config.js (1 hunks)
Files skipped from review due to trivial changes (2)
- src/lib/components/Icons/AvatarFallbackSvg.tsx
- src/lib/components/UserCardSkeleton.tsx
Additional comments: 30
src/style.content.css (1)
- 1-3: The file has been updated to use Tailwind CSS directives, which is a significant shift from custom CSS to a utility-first CSS framework. This change should make future styling more maintainable and scalable.
.vscode/settings.json (1)
- 6-6: The addition of
"editor.defaultFormatter": "biomejs.biome"to the VSCode settings ensures consistent code formatting across the development team, which is a good practice.src/lib/utils.ts (1)
- 11-13: The
waitfunction is a simple utility that can be used to introduce delays. It's implemented correctly and can be useful in various scenarios, such as simulating network delays in testing.src/lib/components/UserCardSkelton.stories.tsx (1)
- 1-13: The Storybook story for
UserCardSkeletonis correctly set up with default export metadata and an empty default story object. This is a standard pattern for initializing stories in Storybook..storybook/preview.ts (1)
- 1-16: The preview configuration for Storybook is set up correctly, importing the global styles and setting up parameters for actions and controls. This ensures a consistent look and behavior across all stories.
src/lib/components/AlertSuccess.stories.tsx (1)
- 1-17: The Storybook story for
AlertSuccessis correctly set up with default export metadata and a default story object with arguments. This is a standard pattern for initializing stories in Storybook.tailwind.config.js (2)
- 8-11: The addition of a
safelistin the Tailwind configuration is a proactive measure to ensure that certain classes are always included in the final build, even if they aren't detected in the template files. This can prevent styling issues in production.- 23-23: The
darkModeconfiguration has been updated to support both class-based and attribute-based dark mode toggling. This change provides more flexibility in how dark mode can be implemented in the application..storybook/main.ts (1)
- 1-19: The Storybook main configuration file is set up correctly, specifying the location of stories and adding necessary addons for links, essentials, onboarding, and interactions. This configuration is essential for a fully featured Storybook environment.
src/lib/components/AlertError.stories.tsx (1)
- 1-26: The Storybook stories for
AlertErrorare correctly set up with default export metadata, a default story object, and a story with a retry button. This provides examples of how the component can be used in different scenarios.src/lib/components/MatchTypeFilter.stories.tsx (1)
- 1-23: The Storybook story for
MatchTypeFilteris correctly set up with default export metadata and a default story object with arguments. This is a standard pattern for initializing stories in Storybook.src/lib/components/Modal.tsx (1)
- 1-24: The
Modalcomponent is implemented with a dialog element and a form to close the modal. The use of the HTML<dialog>element is modern and semantically correct for modal dialogs.src/lib/components/AlertSuccess.tsx (1)
- 1-26: The
AlertSuccesscomponent is implemented correctly, using Tailwind CSS classes for styling and rendering children passed to it. This is a reusable component that can be used to display success messages throughout the application.src/lib/components/AlertError.tsx (1)
- 1-45: The
AlertErrorcomponent is implemented correctly, with an optional retry action. The use of conditional rendering ({!!retryAction && ...}) is a standard React pattern for rendering elements based on the presence of a prop.src/lib/components/MatchTypeFilter.tsx (1)
- 1-42: The
MatchTypeFiltercomponent is implemented correctly, using a map function to render checkboxes for each match type. The use of thebadgeclass from Tailwind CSS for styling is consistent with the utility-first approach.src/lib/components/Icons/BlueskyIconSvg.tsx (1)
- 1-39: The
BlueskyIconSvgcomponent is a stateless functional component that returns an SVG element. The SVG is correctly defined with appropriate attributes and namespaces.src/lib/components/Modal.stories.tsx (1)
- 1-75: The Storybook stories for
Modalare correctly set up with default export metadata and two story templates demonstrating different modal states. This provides a clear example of how the modal behaves when opened and with content.src/lib/bskyServiceWorkerClient.ts (1)
- 1-1: The import of
ProfileViewand the change in the return type of thefetchActorsmethod toProfileView[]suggest an update in the data model. Ensure that all parts of the application that consume this method are updated to handle the new return type.src/lib/constants.ts (2)
- 8-11: The addition of new query parameters in
QUERY_PARAMSis a change that could affect how elements are selected in the DOM. Ensure that these new selectors are accurate and tested.- 62-75: The
MATCH_TYPE_LABEL_AND_COLORconstant provides a mapping between match types and their corresponding labels and colors. This is a good use of constants for maintainability and readability.src/lib/components/UserCard.stories.tsx (1)
- 1-109: The Storybook stories for
UserCardare correctly set up with default export metadata, a default story object, and a cards story object with multiple items. This provides a clear example of how theUserCardcomponent can be used with different props.src/contents/App.tsx (1)
- 1-129: The
Appcomponent is the main entry point for the content script. It uses theuseRetrieveBskyUsershook to manage state and effects, and correctly sets up a message listener for Chrome runtime messages. The component also handles the display of modals, alerts, and user cards based on the application state.src/lib/searchBskyUsers.ts (2)
- 14-18: The use of a
Setfor caching not found users (notFoundUserCache) is an efficient way to prevent unnecessary searches. This is a good performance optimization.- 18-24: The
searchBskyUserfunction is designed to search for users based on provided terms. Ensure that the search functionality is thoroughly tested, especially since it involves network requests and error handling.src/style.content.legacy.css (1)
- 1-210: The
src/style.content.legacy.cssfile contains legacy styles that may no longer be needed due to the migration to Tailwind CSS. Verify that these styles are not being used elsewhere in the application before removing or refactoring them.Verification successful
The search results indicate that the class names defined in
src/style.content.legacy.cssare indeed referenced in the codebase. Specifically, the filesrc/contents/content.tsimports the legacy CSS file, and the filesrc/lib/domHelpers.tsreferences classes.bsky-user-contentand.bsky-reload-btn-wrapperwhich are defined in the legacy CSS file.Based on this information, it is clear that the legacy styles are still being used within the application. Therefore, the review comment suggesting that the legacy styles may no longer be needed and should be verified before removal or refactoring is correct.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that the legacy styles are not used elsewhere in the application. rg 'style\.content\.legacy\.css' --type jsLength of output: 44
Script:
#!/bin/bash # Search for class names defined in the legacy CSS file within the entire codebase. rg '\.bsky-user-content-wrapper|\.match-type|\.bsky-user-content|\.icon-section|\.content|\.name-and-controller|\.bsky-user-content__not-found|\.bsky-reload-btn-wrapper|\.bsky-reload-btn|\.bsky-fade-in' -tallLength of output: 2502
src/lib/components/UserCard.tsx (1)
- 1-155: The
UserCardcomponent is implemented with a complex state management for button hover and click states. Ensure that the component's behavior is consistent with the user experience requirements and that all states are handled correctly.src/popup.tsx (3)
- 1-1: Added
useCallbackto the import statement from "react" is appropriate for memoizing functions to avoid unnecessary renders.- 48-56: Refactoring
loadCredentialsFromStorageto useuseCallbackis a good practice to ensure that this function is not recreated on every render, which can lead to performance improvements, especially if passed as a prop to child components.- 106-106: Replacing setting a success message with closing the window in
searchBskyUserfunction changes the user experience. Ensure that this behavior change is intentional and documented, as users will no longer see a success message before the window closes.src/lib/hooks/useRetrieveBskyUsers.ts (1)
- 40-281: The
useRetrieveBskyUsershook is a significant addition to the codebase. It encapsulates the logic for retrieving and managing Bluesky user profiles. The use ofuseCallbackanduseMemohooks is appropriate for optimizing performance. However, ensure that the dependencies of these hooks are correctly specified to avoid bugs related to stale closures or unnecessary computations.
Comment on lines
+67
to
+147
| export const searchBskyUsers = async ({ | ||
| agent, | ||
| userCellQueryParam, | ||
| }: { | ||
| agent: BskyServiceWorkerClient | BskyClient; | ||
| userCellQueryParam: string; | ||
| }) => { | ||
| const userCells = getUserCells({ | ||
| queryParam: userCellQueryParam, | ||
| filterInsertedElement: true, | ||
| }); | ||
| debugLog(`userCells length: ${userCells.length}`); | ||
|
|
||
| let index = 0; | ||
|
|
||
| const targetAccounts = [] as ProfileView[]; | ||
|
|
||
| // loop over twitter user profile cells and search and insert bsky user | ||
| for (const userCell of userCells) { | ||
| const { twAccountName, twDisplayName, twAccountNameRemoveUnderscore } = | ||
| getAccountNameAndDisplayName(userCell); | ||
|
|
||
| if (notFoundUserCache.has(twAccountName)) { | ||
| insertNotFoundEl(userCell); | ||
| continue; | ||
| } | ||
|
|
||
| const searchTerms = [twAccountNameRemoveUnderscore, twDisplayName]; | ||
|
|
||
| let targetAccount = null; | ||
| let matchType = null; | ||
|
|
||
| // Loop over search parameters and break if a user is found | ||
| searchLoop: for (const term of searchTerms) { | ||
| // one symbol is not a valid search term for bsky | ||
| if (!term || isOneSymbol(term)) { | ||
| continue; | ||
| } | ||
| try { | ||
| const searchResults = await agent.searchUser({ | ||
| term: term, | ||
| limit: 3, | ||
| }); | ||
|
|
||
| for (const searchResult of searchResults) { | ||
| const { isSimilar: isUserFound, type } = isSimilarUser( | ||
| { | ||
| accountName: twAccountName, | ||
| accountNameRemoveUnderscore: twAccountNameRemoveUnderscore, | ||
| displayName: twDisplayName, | ||
| }, | ||
| searchResult, | ||
| ); | ||
|
|
||
| if (isUserFound) { | ||
| targetAccount = searchResult; | ||
| matchType = type; | ||
| break searchLoop; // Stop searching when a user is found | ||
| } | ||
| } | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| } | ||
|
|
||
| // insert bsky profile or not found element | ||
| if (targetAccount) { | ||
| targetAccounts.push(targetAccount); | ||
| } else { | ||
| notFoundUserCache.add(twAccountName); | ||
| } | ||
|
|
||
| index++; | ||
|
|
||
| // if (process.env.NODE_ENV === "development" && index > 5) { | ||
| // break | ||
| // } | ||
| } | ||
|
|
||
| return targetAccounts; | ||
| }; |
There was a problem hiding this comment.
Tip
Codebase Verification
The searchBskyUsers function includes basic error handling but does not have explicit mechanisms to respect rate limits, such as handling HTTP 429 responses or implementing a delay between requests. The error handling is generic, catching exceptions and logging them to the console. While the calling code in useRetrieveBskyUsers checks for rate limit errors in the error message, this is not a robust method for rate limiting. Therefore, the original review comment stands correct, and it is advisable to implement more specific rate limit handling within the searchBskyUsers function.
Analysis chain
The searchBskyUsers function is a bulk operation that searches for multiple users. It's important to ensure that this function is used in a way that respects rate limits and handles potential errors gracefully.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verify that the searchBskyUsers function respects rate limits and has proper error handling.
rg 'searchBskyUsers' --type js
Length of output: 30
Script:
#!/bin/bash
# Search for 'searchBskyUsers' across the entire codebase to verify its usage.
rg 'searchBskyUsers'
Length of output: 180
Script:
#!/bin/bash
# Examine the contents of useRetrieveBskyUsers.ts to see how searchBskyUsers is used.
cat src/lib/hooks/useRetrieveBskyUsers.ts
Length of output: 8148
Script:
#!/bin/bash
# Examine the contents of searchBskyUsers.ts to verify the implementation of searchBskyUser.
cat src/lib/searchBskyUsers.ts
Length of output: 3851
kawamataryo
force-pushed
the
feature/add-bulk-search
branch
from
04a8293
to
5fab6c6
Compare
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (2)
package-lock.jsonis excluded by:!**/*.jsonpackage.jsonis excluded by:!**/*.json
Files selected for processing (28)
- .storybook/main.ts (1 hunks)
- .storybook/preview.ts (1 hunks)
- .vscode/settings.json (1 hunks)
- src/contents/App.tsx (1 hunks)
- src/contents/content.ts (1 hunks)
- src/lib/bskyServiceWorkerClient.ts (2 hunks)
- src/lib/components/AlertError.stories.tsx (1 hunks)
- src/lib/components/AlertError.tsx (1 hunks)
- src/lib/components/AlertSuccess.stories.tsx (1 hunks)
- src/lib/components/AlertSuccess.tsx (1 hunks)
- src/lib/components/Icons/AvatarFallbackSvg.tsx (1 hunks)
- src/lib/components/Icons/BlueskyIconSvg.tsx (1 hunks)
- src/lib/components/MatchTypeFilter.stories.tsx (1 hunks)
- src/lib/components/MatchTypeFilter.tsx (1 hunks)
- src/lib/components/Modal.stories.tsx (1 hunks)
- src/lib/components/Modal.tsx (1 hunks)
- src/lib/components/UserCard.stories.tsx (1 hunks)
- src/lib/components/UserCard.tsx (1 hunks)
- src/lib/components/UserCardSkeleton.tsx (1 hunks)
- src/lib/components/UserCardSkelton.stories.tsx (1 hunks)
- src/lib/constants.ts (2 hunks)
- src/lib/hooks/useRetrieveBskyUsers.ts (1 hunks)
- src/lib/searchBskyUsers.ts (1 hunks)
- src/lib/utils.ts (1 hunks)
- src/popup.tsx (3 hunks)
- src/style.content.css (1 hunks)
- src/style.content.legacy.css (1 hunks)
- tailwind.config.js (1 hunks)
Files skipped from review as they are similar to previous changes (27)
- .storybook/main.ts
- .storybook/preview.ts
- .vscode/settings.json
- src/contents/App.tsx
- src/contents/content.ts
- src/lib/bskyServiceWorkerClient.ts
- src/lib/components/AlertError.stories.tsx
- src/lib/components/AlertError.tsx
- src/lib/components/AlertSuccess.stories.tsx
- src/lib/components/AlertSuccess.tsx
- src/lib/components/Icons/AvatarFallbackSvg.tsx
- src/lib/components/Icons/BlueskyIconSvg.tsx
- src/lib/components/MatchTypeFilter.stories.tsx
- src/lib/components/MatchTypeFilter.tsx
- src/lib/components/Modal.stories.tsx
- src/lib/components/Modal.tsx
- src/lib/components/UserCard.stories.tsx
- src/lib/components/UserCard.tsx
- src/lib/components/UserCardSkeleton.tsx
- src/lib/components/UserCardSkelton.stories.tsx
- src/lib/hooks/useRetrieveBskyUsers.ts
- src/lib/searchBskyUsers.ts
- src/lib/utils.ts
- src/popup.tsx
- src/style.content.css
- src/style.content.legacy.css
- tailwind.config.js
Additional comments: 6
src/lib/constants.ts (6)
- 6-6: The
MESSAGE_NAMESconstant has been updated with additional message names.- 8-11: New query parameters have been added to the
QUERY_PARAMSconstant.- 14-17: The
MESSAGE_NAME_TO_QUERY_PARAM_MAPobject has been updated with additional mappings.- 20-22: New action modes have been added to the
ACTION_MODEconstant.- 25-28: The
MESSAGE_NAME_TO_ACTION_MODE_MAPobject has been updated with additional mappings.- 62-74: New match type labels and colors have been added to the
MATCH_TYPE_LABEL_AND_COLORconstant.
kawamataryo
force-pushed
the
feature/add-bulk-search
branch
from
5fab6c6
to
e7852bc
Compare
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (2)
package-lock.jsonis excluded by:!**/*.jsonpackage.jsonis excluded by:!**/*.json
Files selected for processing (28)
- .storybook/main.ts (1 hunks)
- .storybook/preview.ts (1 hunks)
- .vscode/settings.json (1 hunks)
- src/contents/App.tsx (1 hunks)
- src/contents/content.ts (1 hunks)
- src/lib/bskyServiceWorkerClient.ts (2 hunks)
- src/lib/components/AlertError.stories.tsx (1 hunks)
- src/lib/components/AlertError.tsx (1 hunks)
- src/lib/components/AlertSuccess.stories.tsx (1 hunks)
- src/lib/components/AlertSuccess.tsx (1 hunks)
- src/lib/components/Icons/AvatarFallbackSvg.tsx (1 hunks)
- src/lib/components/Icons/BlueskyIconSvg.tsx (1 hunks)
- src/lib/components/MatchTypeFilter.stories.tsx (1 hunks)
- src/lib/components/MatchTypeFilter.tsx (1 hunks)
- src/lib/components/Modal.stories.tsx (1 hunks)
- src/lib/components/Modal.tsx (1 hunks)
- src/lib/components/UserCard.stories.tsx (1 hunks)
- src/lib/components/UserCard.tsx (1 hunks)
- src/lib/components/UserCardSkeleton.tsx (1 hunks)
- src/lib/components/UserCardSkelton.stories.tsx (1 hunks)
- src/lib/constants.ts (2 hunks)
- src/lib/hooks/useRetrieveBskyUsers.ts (1 hunks)
- src/lib/searchBskyUsers.ts (1 hunks)
- src/lib/utils.ts (1 hunks)
- src/popup.tsx (3 hunks)
- src/style.content.css (1 hunks)
- src/style.content.legacy.css (1 hunks)
- tailwind.config.js (1 hunks)
Files skipped from review as they are similar to previous changes (28)
- .storybook/main.ts
- .storybook/preview.ts
- .vscode/settings.json
- src/contents/App.tsx
- src/contents/content.ts
- src/lib/bskyServiceWorkerClient.ts
- src/lib/components/AlertError.stories.tsx
- src/lib/components/AlertError.tsx
- src/lib/components/AlertSuccess.stories.tsx
- src/lib/components/AlertSuccess.tsx
- src/lib/components/Icons/AvatarFallbackSvg.tsx
- src/lib/components/Icons/BlueskyIconSvg.tsx
- src/lib/components/MatchTypeFilter.stories.tsx
- src/lib/components/MatchTypeFilter.tsx
- src/lib/components/Modal.stories.tsx
- src/lib/components/Modal.tsx
- src/lib/components/UserCard.stories.tsx
- src/lib/components/UserCard.tsx
- src/lib/components/UserCardSkeleton.tsx
- src/lib/components/UserCardSkelton.stories.tsx
- src/lib/constants.ts
- src/lib/hooks/useRetrieveBskyUsers.ts
- src/lib/searchBskyUsers.ts
- src/lib/utils.ts
- src/popup.tsx
- src/style.content.css
- src/style.content.legacy.css
- tailwind.config.js
kawamataryo
force-pushed
the
feature/add-bulk-search
branch
from
41aef32
to
e728bfd
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
implement batch search feature.
ref #28
demo.mp4
Summary by CodeRabbit
New Features
Enhancements
Refactor
popup.tsxto use theuseCallbackhook for better performance.Documentation
Style
Chores