feat: show toast when post is shared by user #4251
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
AmarTrebinjac
requested review from
rebelchris,
omBratteng,
ilasw,
capJavert,
sshanzel and
nensidosari
| const { data: contentPreference, isPending } = | ||
| useContentPreferenceStatusQuery({ | ||
| id: userId, | ||
| entity: ContentPreferenceType.User, | ||
| }); | ||
| const { data: user } = useUserShortByIdQuery({ id: userId }); | ||
| const { follow } = useContentPreference({ showToastOnSuccess: true }); |
There was a problem hiding this comment.
Are we currently blocking those queries if the post author is the current logged in user? We should avoid network calls in this case.
There was a problem hiding this comment.
Some of these handle it already. But it doesn't matter that much because its not visual and cases where users visit their own link is already low.
| setTimeout(() => { | ||
| hasShownToast.current = true; | ||
| displayToast( |
There was a problem hiding this comment.
I’m not really a fan of using setTimeout inside useEffect, but I think we should handle the case where a user lands on the page and then quickly navigates back to the home page.
I suggest adding a ref to store the timerId, then clearing the timer on unmount. We should also clear it if the userId changes to prevent issues when navigating between shared posts. Wdyt?
There was a problem hiding this comment.
+1 we have to clear timeout, it introduces memory leaks
There was a problem hiding this comment.
But toast already handles timeout internally why do you need another manual timeout?
There was a problem hiding this comment.
@rebelchris Because what I mentioned in the OP, for some reason if we pop the toast instantly it gets cleared immediately. I am assuming there's some state updates / mounting stuff going on. It's a bit of a hacky fix, but at the same time by delaying it just a little, it also ensures that the toast is visible when the user is looking at the page and it isnt shifting around.
There was a problem hiding this comment.
But you can pass a prop to keep it between page shifts, it's an option already
| setTimeout(() => { | ||
| hasShownToast.current = true; | ||
| displayToast( |
There was a problem hiding this comment.
But toast already handles timeout internally why do you need another manual timeout?
| entityName: `@${user.username}`, | ||
| }); | ||
| }} | ||
| className="bg-background-default text-text-primary" |
There was a problem hiding this comment.
This can't be right, is it not a guideline button?
| > | ||
| <ProfilePicture user={user} size={ProfileImageSize.Medium} /> | ||
| <span> | ||
| <Typography tag={TypographyTag.Span} bold> |
There was a problem hiding this comment.
You are missing the types here, it can break on some implementation.
(Note to self t make it mandatory)
There was a problem hiding this comment.
Refactor to as const as well ? 🤪
Changes
TASK
DESIGN
SPEC
Not going to lie, I struggled a little bit with this one. The toast kept getting "wiped" due to state/cache updates and other weird stuff. Solve one scenario, two new ones pop up. 😭
I ended up wrapping it in a timeout to make sure the page has loaded most of its content before showing it. If any of you got any better suggestion as to how to make sure the toast does not get insta-wiped, feel free to make them.
Example:
Note that there's a bit more padding left to the avatar than there is on the design. It's because we have padding left + margin in our toast. I thought instead of creating unnecessary props or overriding, we just leave it be as is, and let design know. Let me know if this is disagreeable.
Events
Did you introduce any new tracking events?
Experiment
Did you introduce any new experiments?
Manual Testing
Caution
Please make sure existing components are not breaking/affected by this PR
Preview domain
https://mi-812.preview.app.daily.dev
Jira ticket
MI-812