Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: clickable org if there is any @ text in user bio #951

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

fix: clickable org if there is any @ text in user bio #951

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1411900
fix: clickable org if there is any @ text in user bio
jaiakash Feb 27, 2025
c3df6b1
fix: unit tests
jaiakash Feb 27, 2025
658aa7e
Merge branch 'main' into link-in-user-bio
jaiakash Mar 1, 2025
22d0a4d
Merge branch 'main' into link-in-user-bio
jaiakash Mar 2, 2025
25c1c4a
fix: trailing punctuation in github user name
jaiakash Mar 2, 2025
a6bd818
Merge branch 'main' into link-in-user-bio
jaiakash Mar 3, 2025
7a695a0
fix: remove dot at end if its present in username
jaiakash Mar 3, 2025
d5d12a7
Merge branch 'main' into link-in-user-bio
jaiakash Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/__tests__/unit/data/mockUserDetails.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const mockUserDetailsData = {
name: 'Test User',
avatarUrl: 'https://example.com/avatar.jpg',
url: 'https://github.com/testuser',
bio: 'This is a test user',
bio: 'Test @User',
company: 'Test Company',
location: 'Test Location',
email: '[email protected]',
Expand Down
3 changes: 2 additions & 1 deletion frontend/__tests__/unit/pages/UserDetails.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ describe('UserDetailsPage', () => {

expect(screen.getByText('Test User')).toBeInTheDocument()
expect(screen.getByText(`@testuser`)).toBeInTheDocument()
expect(screen.getByText('This is a test user')).toBeInTheDocument()
expect(screen.getByText('Test')).toBeInTheDocument()
expect(screen.getByText('@User')).toBeInTheDocument()
expect(screen.getByText('Test Company')).toBeInTheDocument()
expect(screen.getByText('Test Location')).toBeInTheDocument()
})
Expand Down
23 changes: 21 additions & 2 deletions frontend/src/pages/UserDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,27 @@ const UserDetailsPage: React.FC = () => {
</div>
</div>
<div className="px-6 py-6">
{user.bio && <p className="text-lg text-gray-700 dark:text-gray-300">{user.bio}</p>}
{user.bio && (
<p className="text-lg text-gray-700 dark:text-gray-300">
{user.bio.split(' ').map((word, index) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

If there's a dot after the link like in this example - the dot is added to the link, which makes it a 404.
Screenshot 2025-03-01 at 5 58 41 PM
There could also be a ;!? or any other thing like that.
Could you fix this?

const mentionMatch = word.match(/^@(\w+)/)
Copy link
Collaborator

Choose a reason for hiding this comment

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

This works for the link but it still shows the dot highlighted in the UI. You should be able to fix that by updating both regexes here and at the top. The taking out the correct group item.
Also, could we move this logic out of the template? It's getting messy.
Screenshot 2025-03-02 at 9 56 30 AM

if (mentionMatch) {
return (
<Link
key={index}
href={`https://github.com/${mentionMatch[1]}`}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
>
{word}{' '}
</Link>
)
}
return <span key={index}>{word} </span>
})}
</p>
)}
<div className="mt-4 space-y-3">
{user.company && (
<div className="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
Expand Down Expand Up @@ -229,7 +249,6 @@ const UserDetailsPage: React.FC = () => {
</div>
</div>
)}

{user.releases && user.releases.length > 0 && (
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
Expand Down