-
Notifications
You must be signed in to change notification settings - Fork 0
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
feat: favorites view and API integration #18
Conversation
src/app/(app)/favorites.tsx
Outdated
className={`mx-4 border ${ | ||
isFirstItem ? 'rounded-t-lg' : '' | ||
} ${isLastItem ? 'rounded-b-lg' : ''}`} | ||
> |
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 forget to use twMerge
src/app/(app)/product-list.tsx
Outdated
className={`mx-4 border ${isFirstItem ? 'rounded-t-lg' : ''} ${ | ||
isLastItem ? 'rounded-b-lg' : '' | ||
}`} |
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.
here also, use twMerge
state === 'used' ? 'bg-restored' : 'bg-new' | ||
}`} | ||
> | ||
<Text className={`text-xs font-semibold text-white`}> |
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.
<Text className={`text-xs font-semibold text-white`}> | |
<Text className="text-xs font-semibold text-white"> |
className={`mb-2 mt-1 w-12 items-center space-x-2 rounded-md px-2 py-1 ${ | ||
state === 'used' ? 'bg-restored' : 'bg-new' | ||
}`} |
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.
dont forget to use twMerge
const { mutate: addFavorite } = useAddFavorite({ | ||
onSuccess: () => { | ||
refetch(); | ||
}, | ||
onError: () => { | ||
showErrorMessage('Something went wrong'); | ||
}, | ||
}); | ||
const { mutate: removeFavorite } = useRemoveFavorite({ | ||
onSuccess: () => { | ||
refetch(); | ||
}, | ||
onError: () => { | ||
showErrorMessage('Something went wrong'); | ||
}, | ||
}); |
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 feel this is too much responsability to the component to carry. Components should be mostly visual components and the logic should live in the parent
}: TitleAndFavoriteProps) => { | ||
const { mutate: addFavorite } = useAddFavorite({ | ||
onSuccess: () => { | ||
refetch(); |
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 recommend you to read about queries invalidations: https://tanstack.com/query/v3/docs/framework/react/guides/invalidations-from-mutations so you don't need to care about manually refetching.
<Link | ||
href={{ | ||
pathname: detailsRoute, | ||
params: { id: id }, |
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.
params: { id: id }, | |
params: { id }, |
<Link | ||
href={{ | ||
pathname: detailsRoute, | ||
params: { id: id }, |
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.
params: { id: id }, | |
params: { id }, |
mutationKey: ['addFavorite'], | ||
mutationFn: addFavorite, | ||
onSuccess: (data, variables, context) => { | ||
queryClient.invalidateQueries({ queryKey: ['products'] }); |
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.
Cool!
What does this do?
Favorites screen and API
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-10.at.11.43.02.mp4
Notion Ticket
Figma view
Why did you do this?
Who/what does this impact?
How did you test this?