-
Notifications
You must be signed in to change notification settings - Fork 189
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.
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
Fixes #2169: Rename blog prop to url in PostAvatar, deal with optional value #2176
Conversation
</Avatar> | ||
</a> | ||
<div> | ||
{url.length > 0 ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about this, but shouldn't we also be checking if url is not null as well, basically if it exists as well as if the length is greater than 0
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So, I think from what I understand after reading the PostAvatar.tsx
component is that, if no url
is given in the props, then the url
is assigned to a ""
empty string. Either way, I can add it quickly it's no problem
Edit: check the latest commit
Edit2: I just realized there are a lot of ways to check if url
is undefined, if you have a better conditional let me know and I can quickly update it
@@ -59,7 +59,7 @@ const PostAvatar = ({ name, img, url = '' }: AvatarProps) => { | |||
.join(''); | |||
return ( | |||
<div> | |||
{url.length > 0 ? ( | |||
{url.length > 0 && url != undefined ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Think just url.length > 0 && url
is fine enough
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
url?.length && (...)
Please update the title of this PR to give info about what it is, in addition to what it fixes. |
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme: Theme) => | |||
}) | |||
); | |||
|
|||
const PostAvatar = ({ name, img, blog = '' }: AvatarProps) => { | |||
const PostAvatar = ({ name, img, url = '' }: AvatarProps) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't use = ''
as a default. If it's not there, we need to know that.
@@ -59,7 +59,7 @@ const PostAvatar = ({ name, img, url = '' }: AvatarProps) => { | |||
.join(''); | |||
return ( | |||
<div> | |||
{url.length > 0 ? ( | |||
{url.length > 0 && url != undefined ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
url?.length && (...)
</Avatar> | ||
</a> | ||
<div> | ||
{url != undefined && url?.length > 0 ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is really gonna sound nit-picky, but should be !==
instead of !=
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doing url?
is the same as checking if url
exists, so you don't need this. However, @HyperTHD is right: you never want to use != or == in JS, since they both allow implicit type casting to happen, whereas !== and === will also check the types.
</Avatar> | ||
</a> | ||
<div> | ||
{url != undefined && url?.length > 0 ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doing url?
is the same as checking if url
exists, so you don't need this. However, @HyperTHD is right: you never want to use != or == in JS, since they both allow implicit type casting to happen, whereas !== and === will also check the types.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just do squash and merge, otherwise looks good for me :)
Squashed and rebased |
deal with optional value * Changed blog prop to url * Changed prop name to url in other files using PostAvatar * Changed PostAvatar to no longer wrapped by an <a> by default * Searched for instances of PostAvatar and changed blog prop to url * Added extra conditional to check if url is not undefined * Removed url defaulting to empty string. Changed the conditional * 'url != undefined' changed to 'url !=== undefined' * Changed 'url !== undefined && url?.length > 0' to 'url?.length'
@rjayroso you can rebase and merge this from GitHub, you don't have to keep rebasing manually. |
@rjayroso wait to merge this til we fix CI, which is failing atm |
Yeah no worries, now that I know I can rebase and merge from GitHub I'm ready whenever 😅 |
Issue This PR Addresses
Fixes #2169
Type of Change
Description
Changes the PostAvatar
blog
prop to be namedurl
.Changes how the PostAvatar is rendered: if there is no url, then PostAvatar is rendered without an
<a>
element wrapped around it.How to Test
Pull this branch for testing, go to
components/Posts/Post.tsx
in VSCode (or your editor of choice) and scroll to the bottom - put a<PostAvatar name="FirstName LastName" />
element somewhere that it can be rendered and seen.You should see an Avatar with the initials "FL" and it should also be unclickable (since their is no url prop)
Now add the prop
url="Test"
to thePostAvatar
(e.g.<PostAvatar name="FirstName LastName" url="Test"/>
You should see that same Avatar now be clickable (if clicked it will give you Telescope's 404 because it is an invalid url).
Checklist