From 12045985eeb78cb8c5e51ab7207298795de0c8a3 Mon Sep 17 00:00:00 2001
From: joeng03 <yinjoeng2003@gmail.com>
Date: Sat, 5 Nov 2022 20:52:47 +0800
Subject: [PATCH 1/2] added react-toastify success notification

---
 frontend/package.json                               |  1 +
 .../src/components/Mobile/JCRCBlockOutModal.tsx     |  2 +-
 .../routes/FacilityBooking/ViewFacility/index.tsx   | 13 +++++++++++++
 frontend/yarn.lock                                  | 12 ++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 209f24822..537c38b38 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,6 +52,7 @@
     "react-router-dom": "^5.2.0",
     "react-router-transition": "^2.1.0",
     "react-scripts": "4.0.1",
+    "react-toastify": "8.0.0",
     "react-truncate": "^2.4.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
diff --git a/frontend/src/components/Mobile/JCRCBlockOutModal.tsx b/frontend/src/components/Mobile/JCRCBlockOutModal.tsx
index b5b3a1034..2adadc7b5 100644
--- a/frontend/src/components/Mobile/JCRCBlockOutModal.tsx
+++ b/frontend/src/components/Mobile/JCRCBlockOutModal.tsx
@@ -270,7 +270,7 @@ function JCRCBlockOutModal({
           <h3>Venue</h3>
           <VenueSelection>
             <VenueOptions>
-              Select all
+              Select selectAll
               <Venueinput id="0" type="checkbox" onClick={() => handleSelectAll()} checked={selectAll} />
             </VenueOptions>
             {facilityList.map((facility) => {
diff --git a/frontend/src/routes/FacilityBooking/ViewFacility/index.tsx b/frontend/src/routes/FacilityBooking/ViewFacility/index.tsx
index 09d7f04ab..d5bb76fb8 100644
--- a/frontend/src/routes/FacilityBooking/ViewFacility/index.tsx
+++ b/frontend/src/routes/FacilityBooking/ViewFacility/index.tsx
@@ -24,6 +24,8 @@ import TopNavBarRevamp from '../../../components/TopNavBarRevamp'
 import { setClickedDate } from '../../../store/calendar/actions'
 import { BookingStatus } from '../../../store/facilityBooking/types'
 import ConflictBookingModal from '../ViewConflicts/ConflictBookingModal'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 const MainContainer = styled.div`
   width: 100%;
@@ -76,6 +78,16 @@ export default function ViewFacility() {
       dispatch(setBookingStatus(BookingStatus.INITIAL))
       console.log('sucessssssssss')
       // TODO show a toast notification to inform of success booking
+      toast.success('Booking was Successfull !', {
+        position: 'bottom-right',
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: 'light',
+      })
     }
     if (bookingStatus === BookingStatus.CONFLICT) {
       setModalIsOpen(true)
@@ -96,6 +108,7 @@ export default function ViewFacility() {
         </MainContainer>
       </PullToRefresh>
       <ConflictBookingModal modalOpen={modalIsOpen} setModalOpen={setModalIsOpen} />
+      <ToastContainer />
     </>
   )
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8d53e3b5c..64b39d475 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3642,6 +3642,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz"
@@ -11154,6 +11159,13 @@ react-test-renderer@^18.1.0:
     react-shallow-renderer "^16.15.0"
     scheduler "^0.23.0"
 
+react-toastify@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.0.0.tgz#f2ac0801610a72610628d739189078871ad02235"
+  integrity sha512-7a5uhwbJ5Ivp5QyJN8P9M8g+7wksJt51QuYAZW0c3pDOh0Jx8lH7XzNHzzJg4NHup9n4zcqH9rwXknnyzYg2OA==
+  dependencies:
+    clsx "^1.1.1"
+
 react-truncate@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/react-truncate/-/react-truncate-2.4.0.tgz"

From 6847c88655a1d10db94e1c14bca76504605e50c4 Mon Sep 17 00:00:00 2001
From: joeng03 <yinjoeng2003@gmail.com>
Date: Sat, 5 Nov 2022 20:57:39 +0800
Subject: [PATCH 2/2] added react-toastify success notification

---
 frontend/src/components/Mobile/JCRCBlockOutModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Mobile/JCRCBlockOutModal.tsx b/frontend/src/components/Mobile/JCRCBlockOutModal.tsx
index 2adadc7b5..b5b3a1034 100644
--- a/frontend/src/components/Mobile/JCRCBlockOutModal.tsx
+++ b/frontend/src/components/Mobile/JCRCBlockOutModal.tsx
@@ -270,7 +270,7 @@ function JCRCBlockOutModal({
           <h3>Venue</h3>
           <VenueSelection>
             <VenueOptions>
-              Select selectAll
+              Select all
               <Venueinput id="0" type="checkbox" onClick={() => handleSelectAll()} checked={selectAll} />
             </VenueOptions>
             {facilityList.map((facility) => {