From d216f8d72331f71e5320f810c372de30c6d5c05a Mon Sep 17 00:00:00 2001
From: Respirayson <raysonyeap4c@gmail.com>
Date: Mon, 11 Mar 2024 21:51:57 +0800
Subject: [PATCH] Add toast error to event page

---
 package-lock.json          | 27 +++++++++++++++++++++++++--
 package.json               |  1 +
 src/App.jsx                |  2 ++
 src/pages/events/index.tsx |  3 ++-
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8423b09..e17286b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "react": "^18.2.0",
         "react-calendar": "^4.8.0",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.4.1",
         "react-icons": "^5.0.1",
         "react-router-dom": "^6.21.1",
         "react-slick": "^0.30.2"
@@ -2190,8 +2191,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -3103,6 +3103,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -4459,6 +4467,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
diff --git a/package.json b/package.json
index f549b1c..667e670 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-calendar": "^4.8.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.21.1",
     "react-slick": "^0.30.2"
diff --git a/src/App.jsx b/src/App.jsx
index 1f0cfe3..914d29f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, Routes, Route } from 'react-router-dom';
 import { About, Article, Events, Home, Privacy, Resources } from './pages';
+import { Toaster } from 'react-hot-toast';
 import NavigationBar from './layout/NavigationBar';
 import Footer from './layout/Footer';
 import './App.css';
@@ -13,6 +14,7 @@ function App() {
       {/* Main content */}
       <ScrollToTop />
       <main className='w-full'>
+        <div><Toaster/></div>
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/privacy' element={<Privacy />} />
diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx
index 821f632..4c0111c 100644
--- a/src/pages/events/index.tsx
+++ b/src/pages/events/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Calendar from 'react-calendar';
+import { toast } from 'react-hot-toast';
 import { FaSearch } from 'react-icons/fa';
 import articles from './articles.json' with {type: 'json'};
 import SearchResult from './SearchResult';
@@ -50,7 +51,7 @@ function Events() {
             }
 
             {/* TODO: handle this */}
-            <button className='' onClick={() => alert('More coming soon!')}>
+            <button className='' onClick={() => toast.error('More coming soon!')}>
               More Results
             </button>
           </div>