➕ feat: toastify

linder3hs · Apr 26, 2024 · 0de6566 · 0de6566
1 parent d4195f4
commit 0de6566
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/pokedex/package-lock.json b/pokedex/package-lock.json
diff --git a/pokedex/package.json b/pokedex/package.json
@@ -14,6 +14,7 @@
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.5",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {

diff --git a/pokedex/src/App.jsx b/pokedex/src/App.jsx
@@ -2,6 +2,8 @@ import logo from "./assets/logo.svg";
 import pokeSearch from "./assets/poke-search.svg";
 import useGetPokemon from "./hooks/useGetPokemon";
 import useInputValue from "./hooks/useInputValue";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   const { inputValue, handleInputValue } = useInputValue();
@@ -10,6 +12,7 @@ function App() {
 
   return (
     <>
+      <ToastContainer />
       <main className="p-6">
         <div className="flex items-center gap-1">
           <img src={logo} width={40} alt="" />

diff --git a/pokedex/src/hooks/useGetPokemon.js b/pokedex/src/hooks/useGetPokemon.js
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { toast } from "react-toastify";
 
 export default function useGetPokemon(inputValue) {
   const [pokemon, setPokemon] = useState(null);
@@ -8,7 +9,10 @@ export default function useGetPokemon(inputValue) {
     const response = await fetch(url);
 
     if (!response.ok) {
-      alert("Hubo un error");
+      toast.error("Hubo un error", {
+        autoClose: true,
+        closeButton: true,
+      });
       return;
     }