From d7986febc97e2d9789538909b7df830e31fd9158 Mon Sep 17 00:00:00 2001
From: Raul Andrade <raul.andrade@mercadofavo.com>
Date: Wed, 2 Mar 2022 00:38:44 -0300
Subject: [PATCH] feat: add success and error toast

---
 README.md                                            |  1 -
 package.json                                         |  1 +
 src/features/playlist/playlist.tsx                   | 11 +++++++++++
 .../use-playlist-mutation/use-playlist-mutation.ts   |  8 +++++---
 yarn.lock                                            | 12 ++++++++++++
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c48dcae..e87eaa2 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index 65fa549..dce2837 100644
--- a/package.json
+++ b/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"
diff --git a/src/features/playlist/playlist.tsx b/src/features/playlist/playlist.tsx
index c93fcb8..d1c4694 100644
--- a/src/features/playlist/playlist.tsx
+++ b/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
 }
diff --git a/src/queries/use-playlist-mutation/use-playlist-mutation.ts b/src/queries/use-playlist-mutation/use-playlist-mutation.ts
index ab5bee2..28da9d0 100644
--- a/src/queries/use-playlist-mutation/use-playlist-mutation.ts
+++ b/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! ')
     }
   })
 }
diff --git a/yarn.lock b/yarn.lock
index eea1965..685904b 100644
--- a/yarn.lock
+++ b/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"