feat: show playlist after created

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: {

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! ')