From 0de6566f1714a304fce8cbdcd954cfdee652f5e9 Mon Sep 17 00:00:00 2001
From: Linder Hassinger <linder@peppermint.pe>
Date: Thu, 25 Apr 2024 23:01:51 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20feat:=20toastify?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pokedex/package-lock.json          | 21 +++++++++++++++++++++
 pokedex/package.json               |  1 +
 pokedex/src/App.jsx                |  3 +++
 pokedex/src/hooks/useGetPokemon.js |  6 +++++-
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/pokedex/package-lock.json b/pokedex/package-lock.json
index 7f73d43..feb8e51 100644
--- a/pokedex/package-lock.json
+++ b/pokedex/package-lock.json
@@ -12,6 +12,7 @@
         "postcss": "^8.4.38",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-toastify": "^10.0.5",
         "tailwindcss": "^3.4.3"
       },
       "devDependencies": {
@@ -1734,6 +1735,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4108,6 +4117,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/pokedex/package.json b/pokedex/package.json
index fde2191..3074e18 100644
--- 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
index 45b2804..91ad234 100644
--- 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
index ca6af45..af781de 100644
--- 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;
     }