diff --git a/src/features/playlist/playlist.tsx b/src/features/playlist/playlist.tsx index f706692..dfa6e85 100644 --- a/src/features/playlist/playlist.tsx +++ b/src/features/playlist/playlist.tsx @@ -15,25 +15,42 @@ export const Playlist = ({ artists, usePlaylist = usePlaylistMutation }: PlaylistProps) => { - const { mutate, isLoading } = usePlaylist() + const { mutate, isLoading, data } = usePlaylist() + + const playlistCreated = data?.data + const text = playlistCreated?.id + ? 'Randomfy playlist was created.' + : 'You can make a randomfy playlist!' return artists.length === MAX_RANDOM_FY_ITEMS ? ( <Fragment> <div className="p-4 max-w-5xl my-0 mx-auto"> - <PrimaryText>You can make a randomfy playlist!</PrimaryText> + <PrimaryText>{text}</PrimaryText> </div> <div className={`flex justify-center p-4 pb-12 ${ isLoading ? 'animate-pulse' : '' }`} > - <PrimaryButton - ariaLabel="create playlist button" - onClick={() => mutate(artists)} - > - Create Playlist - </PrimaryButton> + {playlistCreated?.id ? ( + <iframe + className="max-w-5xl my-0 mx-auto rounded-xl" + src={`https://open.spotify.com/embed/playlist/${playlistCreated.id}?utm_source=generator&theme=0`} + width="100%" + height="380" + frameBorder="0" + allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" + ></iframe> + ) : ( + <PrimaryButton + ariaLabel="create playlist button" + onClick={() => mutate(artists)} + > + Create Playlist + </PrimaryButton> + )} </div> + <Toaster toastOptions={{ error: { diff --git a/src/queries/use-playlist-mutation/use-playlist-mutation.ts b/src/queries/use-playlist-mutation/use-playlist-mutation.ts index d0af3d0..98f0f20 100644 --- a/src/queries/use-playlist-mutation/use-playlist-mutation.ts +++ b/src/queries/use-playlist-mutation/use-playlist-mutation.ts @@ -12,7 +12,7 @@ export const usePlaylistMutation = () => { Array<Recommendation> >((data) => createPlaylist(data), { onSuccess: () => { - toast.success('Playlist create with success!') + toast.success('Playlist was created with success!') }, onError: () => { toast.error('Something wrong with the Playlist! ')