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

[#103] Update logic to get twitter username #104

Merged
merged 3 commits into from
Oct 31, 2024
Merged

[#103] Update logic to get twitter username #104

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
06e0452
Update logic to get twitter username in SpeakerDetail component #103
JNicolao Oct 30, 2024
d9e8630
Merge branch 'dev' into update-logic
JNicolao Oct 30, 2024
0f290cb
requested changes for Update logic to get twitter username
JNicolao Oct 30, 2024
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
13 changes: 12 additions & 1 deletion components/sessions/SpeakersDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,17 @@ export const SpeakersDetails = ({ session }: { session: Session }) => {
if (!showChild) {
return null
}

const getTwitterUsername = (url: string) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

What does the function return? string, null or both? const getTwitterUsername = (url: string): string | null

if it's not url, you can return null form the start

if (!url) return null;

You can use regex to match both twitter and x URLs

const match = url.match(/(?:twitter\.com|x\.com)\/([^/?#]+)/i);
return match?.[1] ?? null;

The complete function

const getTwitterUsername = (url: string): string | null => {
  if (!url) return null;
  
  const match = url.match(/(?:twitter\.com|x\.com)\/([^/?#]+)/i);
  return match?.[1] ?? null;
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is fantastic @danielotieno . I don't know how I missed that. Exiting the loop early for non URLs will remove unnecessary processing. Let me make the changes.

if (url.includes('twitter.com/')) {
return url.split('twitter.com/')[1]
}
if (url.includes('x.com/')) {
return url.split('x.com/')[1]
}
return null
}

return (
<div className="w-full flex-wrap lg:w-4/12 flex border-r-0 pr-0 lg:pr-4 mb-6 md:mb-0">
<div className="w-full py-4">
Expand Down Expand Up @@ -63,7 +74,7 @@ export const SpeakersDetails = ({ session }: { session: Session }) => {
>
@
{speaker.twitter
? speaker.twitter.split('twitter.com/')[1]
? getTwitterUsername(speaker.twitter)
Copy link
Collaborator

Choose a reason for hiding this comment

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

Here, why not?

{getTwitterUsername(speaker.twitter) ?? speaker.name}

Copy link
Collaborator Author

@JNicolao JNicolao Oct 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks @danielotieno . Let me implement that. What do you think about
{getTwitterUsername(speaker.twitter ?? '') ?? speaker.name} to ensure that speaker.twitter is a string before passing it to getTwitterUsername ?

Copy link
Member

Choose a reason for hiding this comment

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

{getTwitterUsername(speaker.twitter ?? '') || speaker.name}
you can check the usage of || vs ??

Copy link
Collaborator

Choose a reason for hiding this comment

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

Or if you want to use ternary

{speaker.twitter 
  ? getTwitterUsername(speaker.twitter) || speaker.name
  : speaker.name}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes || would be best in this case. I've already resolved this and pushed. Please review.

: speaker.name}
</a>
</a>
Expand Down