feat: add success and error toast

README.md

@@ -17,7 +17,6 @@ Disclaimer: Randomfy is not affiliated with Spotify. The site is built on Nextjs
 - [ ] config Husky
 - [ ] config CommitStage
 - [ ] msw
-- [ ] toast
 - [ ] refresh token
 
 ## Demo

package.json

@@ -27,6 +27,7 @@
     "nookies": "^2.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hot-toast": "^2.2.0",
     "react-query": "^3.34.16",
     "react-use": "^17.3.2",
     "spotify-web-api-node": "^5.0.2"

src/features/playlist/playlist.tsx

@@ -1,4 +1,5 @@
 import { Fragment } from 'react'
+import { Toaster } from 'react-hot-toast'
 
 import { MAX_RANDOM_FY_ITEMS } from '../../constants'
 import { Recommendation } from 'types'
@@ -30,6 +31,16 @@ export const Playlist = ({
           Create Playlist
         </PrimaryButton>
       </div>
+      <Toaster
+        toastOptions={{
+          error: {
+            style: {
+              background: 'red',
+              color: 'white'
+            }
+          }
+        }}
+      />
     </Fragment>
   ) : null
 }

src/queries/use-playlist-mutation/use-playlist-mutation.ts

@@ -1,14 +1,16 @@
+import toast from 'react-hot-toast'
 import { useMutation } from 'react-query'
+
 import { createPlaylist } from 'services'
 import { Recommendation } from 'types'
 
 export const usePlaylistMutation = () => {
   return useMutation((data: Array<Recommendation>) => createPlaylist(data), {
     onSuccess: () => {
-      console.log('success')
+      toast.success('Playlist create with success!')
     },
-    onError: (error) => {
-      console.log(error)
+    onError: () => {
+      toast.error('Something wrong with the Playlist! ')
     }
   })
 }

yarn.lock

@@ -3599,6 +3599,11 @@ globby@^11.0.0, globby@^11.0.1, globby@^11.0.4:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.1:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.8.tgz#e592c04d093cb38f77b38cfcb012b7811c85765e"
+  integrity sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==
+
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.9"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
@@ -6151,6 +6156,13 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-hot-toast@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
+  integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==
+  dependencies:
+    goober "^2.1.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"