Fixes issue #1027 Clickalbe languages/topics #1087
Conversation
Summary by CodeRabbit
WalkthroughThis pull request updates the Changes
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (5)
🪧 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
Documentation and Community
|
![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
🧹 Nitpick comments (1)
frontend/src/components/ToggleableList.tsx (1)
24-27: Good implementation of clickable items with search functionality.The change from
<span>to<a>elements is semantically correct for clickable items. The href attribute correctly constructs a Google search URL, and the hover:underline class provides appropriate visual feedback.Consider these potential enhancements:
- Open links in a new tab with
target="_blank" rel="noopener noreferrer"to maintain the user's context.- Redirect to the application's internal search page instead of Google, as mentioned in the PR objectives.
<a key={index} href={`https://www.google.com/search?q=${item}`} + target="_blank" + rel="noopener noreferrer" className="rounded-lg border border-gray-400 px-2 py-1 text-sm hover:underline dark:border-gray-300" >
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/ToggleableList.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: CodeQL (python)
- GitHub Check: Run frontend e2e tests
- GitHub Check: CodeQL (javascript-typescript)
- GitHub Check: Run backend tests
- GitHub Check: Run frontend unit tests
| <a | ||
| key={index} | ||
| className="rounded-lg border border-gray-400 px-2 py-1 text-sm dark:border-gray-300" | ||
| href={`https://www.google.com/search?q=${item}`} | ||
| className="rounded-lg border border-gray-400 px-2 py-1 text-sm hover:underline dark:border-gray-300" | ||
| > | ||
| {item} | ||
| </span> | ||
| </a> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider encoding the search query parameter for security.
The current implementation could have issues with special characters in the item text. URL-encoding the query parameter would prevent potential issues with items containing special characters.
<a
key={index}
- href={`https://www.google.com/search?q=${item}`}
+ href={`https://www.google.com/search?q=${encodeURIComponent(item)}`}
className="rounded-lg border border-gray-400 px-2 py-1 text-sm hover:underline dark:border-gray-300"
>
{item}
</a>📝 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.
| <a | |
| key={index} | |
| className="rounded-lg border border-gray-400 px-2 py-1 text-sm dark:border-gray-300" | |
| href={`https://www.google.com/search?q=${item}`} | |
| className="rounded-lg border border-gray-400 px-2 py-1 text-sm hover:underline dark:border-gray-300" | |
| > | |
| {item} | |
| </span> | |
| </a> | |
| <a | |
| key={index} | |
| href={`https://www.google.com/search?q=${encodeURIComponent(item)}`} | |
| className="rounded-lg border border-gray-400 px-2 py-1 text-sm hover:underline dark:border-gray-300" | |
| > | |
| {item} | |
| </a> |
There was a problem hiding this comment.
@KaranNegi20Feb Great! I can see that you've implemented the URL encoding for the search query parameter using encodeURIComponent(). This is an important security practice that helps prevent issues with special characters in URLs. The PR looks good from this perspective.
KaranNegi20Feb
force-pushed
the
topics-link
branch
from
123e3f0 to
8cec0c7
Compare
|
Hey @arkid15r i have made the necessary change, please do review them, Thank you. |
| key={index} | ||
| className="rounded-lg border border-gray-400 px-2 py-1 text-sm dark:border-gray-300" | ||
| href={`https://www.google.com/search?q=${encodeURIComponent(item)}`} |
There was a problem hiding this comment.
| href={`https://www.google.com/search?q=${encodeURIComponent(item)}`} | |
| href={`/projects?q=${encodeURIComponent(item)}`} |
KaranNegi20Feb
force-pushed
the
topics-link
branch
from
27aa94f to
6e690e2
Compare
|
Improves the UX and makes languages/topics clickable. The click event should redirect user to the search page with the relevant query.
1.mov
2.1.mov