From 69d2e11f37968da612592fd9b83f27bae65742f8 Mon Sep 17 00:00:00 2001
From: Jared Drueco <drueco03@gmail.com>
Date: Mon, 24 Jul 2023 09:48:16 -0600
Subject: [PATCH 1/2] Added error modal when dish not found

---
 app/src/features/api.tsx  |  6 +++++
 app/src/routes/borrow.tsx | 51 ++++++++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/app/src/features/api.tsx b/app/src/features/api.tsx
index c310ef3e..aa454a50 100644
--- a/app/src/features/api.tsx
+++ b/app/src/features/api.tsx
@@ -51,6 +51,8 @@ const DishAPI = {
   addDishBorrow: async function (qr: string, user: string | null) {
 
     console.log(FirebaseDatabase, QRCollectionName, qr)
+    try {
+
     const qrRef = doc(FirebaseDatabase, QRCollectionName, qr);
 
       const out = await runTransaction(FirebaseDatabase, async (transaction) => {
@@ -73,6 +75,10 @@ const DishAPI = {
         return docRef.id;
       });
       return out;
+    } catch (e) {
+      console.error('Error occurred:',e);
+      return null;
+    }
   },
 
   updateDishReturn: async function (qr: string) {
diff --git a/app/src/routes/borrow.tsx b/app/src/routes/borrow.tsx
index 71f28632..d2f72d8b 100644
--- a/app/src/routes/borrow.tsx
+++ b/app/src/routes/borrow.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import Scanner from "../widgets/scanner";
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
-import { faCoffee } from "@fortawesome/free-solid-svg-icons";
+import { faCoffee, faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import DishAPI from "../features/api";
 import { FirebaseContext } from "../firebase";
@@ -21,8 +21,8 @@ const Confirm = ({ show, onSubmit, onCancel, id }) => {
     >
       <Modal.Header closeButton></Modal.Header>
       <Modal.Body className="text-center">
-        <p style={{ textAlign: "center" }}>ID : {id}</p>
         <FontAwesomeIcon icon={faCoffee} size="4x" />
+        <p style={{ textAlign: "center" }}>ID: {id}</p>
       </Modal.Body>
       <Modal.Footer className="justify-content-center">
         <Button variant="secondary" onClick={onSubmit}>
@@ -33,9 +33,33 @@ const Confirm = ({ show, onSubmit, onCancel, id }) => {
   );
 };
 
+const BorrowError = ({ show, onCancel, id }) => {
+  return (
+    <Modal
+      onHide={onCancel}
+      show={show}
+      className="modal-dialog-centered modal-sm"
+      centered
+    >
+      <Modal.Header closeButton></Modal.Header>
+      <Modal.Body className="text-center">
+        <FontAwesomeIcon
+          style={{ color: 'red', margin: '16 0 16 0' }}
+          icon={faCircleExclamation}
+          size="4x"
+        />
+        <p style={{ textAlign: 'center' }}>
+          Dish ID: {id} does not exist. Please try again
+        </p>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
 export default () => {
   const [scanId, setScanId] = useState("");
   const [confirm, setConfirm] = useState(false);
+  const [borrowError, setBorrowError] = useState(false);
   const firebase = useContext(FirebaseContext);
   const navigate = useNavigate();
   const [Buffer, setBuffer] = useState(false);
@@ -54,6 +78,10 @@ export default () => {
     const user = firebase?.user?.uid || null;
     console.log("USER: " + user);
     const docId = await DishAPI.addDishBorrow(scanId, user);
+    if (docId === null) {
+      setBorrowError(true);
+    }
+
     setBuffer(true);
 
     console.log("doc ref" + docId);
@@ -62,16 +90,16 @@ export default () => {
     if (!firebase?.user) {
       console.log("USER IS NULL");
       navigate(`/login/?transaction_id=${transactionID}`);
+      console.log("LOGGED out user" + user);
     }
-    console.log("LOGGEd out user" + user);
+
   };
 
-  const onCancel = confirm
-    ? () => {
-        setScanId("");
-        setConfirm(false);
-      }
-    : null;
+  const onCancel = () => {
+    setScanId('');
+    setConfirm(false);
+    setBorrowError(false);
+  };
 
   return (
     <>
@@ -88,6 +116,11 @@ export default () => {
         }}
         onCancel={onCancel}
       />
+      <BorrowError
+        show={borrowError}
+        id={scanId}
+        onCancel={onCancel}
+       />
     </>
   );
 };

From 7be21f45f48b0b75ee44f7b8294e982ff6b8d157 Mon Sep 17 00:00:00 2001
From: Jared Drueco <drueco03@gmail.com>
Date: Fri, 28 Jul 2023 02:13:08 +0100
Subject: [PATCH 2/2] Fix borrow

---
 app/src/features/api.tsx  | 36 +++++++--------
 app/src/routes/borrow.tsx | 97 ++++++++++++++++++++++++++++-----------
 2 files changed, 86 insertions(+), 47 deletions(-)

diff --git a/app/src/features/api.tsx b/app/src/features/api.tsx
index aa454a50..e6a84af7 100644
--- a/app/src/features/api.tsx
+++ b/app/src/features/api.tsx
@@ -1,7 +1,7 @@
-import { collection, Timestamp, addDoc, getDocs, query, where, runTransaction, doc, orderBy, limit } from "firebase/firestore";
+import { collection, Timestamp, getDoc, getDocs, query, where, runTransaction, doc, orderBy, limit } from "firebase/firestore";
 import { FirebaseDatabase } from "../firebase";
 
-const TransactionsCollectionName = "transactions"
+const TransactionsCollectionName = "transactions-new"
 const DishCollectionName = "dishes"
 const UserCollectionName = "users"
 const QRCollectionName = "qr-codes"
@@ -51,34 +51,30 @@ const DishAPI = {
   addDishBorrow: async function (qr: string, user: string | null) {
 
     console.log(FirebaseDatabase, QRCollectionName, qr)
-    try {
-
     const qrRef = doc(FirebaseDatabase, QRCollectionName, qr);
 
       const out = await runTransaction(FirebaseDatabase, async (transaction) => {
         const qrDoc = await transaction.get(qrRef)
         if (!qrDoc.exists()) {
-          throw "QR code not registered";
+          return null;
         }
 
-        const dish = qrDoc.data().dish
-
-        const docData = {
-          dish: dish,
-          user: user,
-          timestamp: Timestamp.now(),
+        const dishRef = doc(FirebaseDatabase, "dishes", qrDoc.data().dishID);
+        const dishSnap = await getDoc(dishRef);
+
+        if (dishSnap.exists()) {
+          const dish = dishSnap.data();
+          const docData = {
+            dish: dish,
+            user: user,
+            timestamp: Timestamp.now(),
+          }
+          const docRef = doc(collection(FirebaseDatabase, TransactionsCollectionName));
+          transaction.set(docRef, docData);
+          return docRef.id;
         }
-
-        const docRef = doc(collection(FirebaseDatabase, TransactionsCollectionName));
-
-        await transaction.set(docRef, docData);
-        return docRef.id;
       });
       return out;
-    } catch (e) {
-      console.error('Error occurred:',e);
-      return null;
-    }
   },
 
   updateDishReturn: async function (qr: string) {
diff --git a/app/src/routes/borrow.tsx b/app/src/routes/borrow.tsx
index d2f72d8b..5c113a10 100644
--- a/app/src/routes/borrow.tsx
+++ b/app/src/routes/borrow.tsx
@@ -3,13 +3,10 @@ import { useNavigate } from "react-router-dom";
 import Scanner from "../widgets/scanner";
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
-import { faCoffee, faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faCoffee, faExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import DishAPI from "../features/api";
 import { FirebaseContext } from "../firebase";
-import Login from "./login";
-import { GoogleAuth, FirebaseAuth } from "../firebase";
-import { signInWithPopup } from "firebase/auth";
 
 const Confirm = ({ show, onSubmit, onCancel, id }) => {
   return (
@@ -33,7 +30,7 @@ const Confirm = ({ show, onSubmit, onCancel, id }) => {
   );
 };
 
-const BorrowError = ({ show, onCancel, id }) => {
+const DishNotFound = ({ show, onCancel, id }) => {
   return (
     <Modal
       onHide={onCancel}
@@ -44,22 +41,59 @@ const BorrowError = ({ show, onCancel, id }) => {
       <Modal.Header closeButton></Modal.Header>
       <Modal.Body className="text-center">
         <FontAwesomeIcon
-          style={{ color: 'red', margin: '16 0 16 0' }}
-          icon={faCircleExclamation}
+          style={{ color: '#BF4949', margin: '16 0 16 0' }}
+          icon={faExclamation}
           size="4x"
         />
         <p style={{ textAlign: 'center' }}>
-          Dish ID: {id} does not exist. Please try again
+          Dish ID: {id} does not exist. Please try again.
         </p>
       </Modal.Body>
     </Modal>
   );
 };
 
+const BorrowDishSuccess = ({ show, success, onCancel, id }) => {
+  return (
+    <Modal onHide={onCancel} show={show} className="modal-dialog-bottom modal-sm" centered>
+      <Modal.Header closeButton></Modal.Header>
+      <Modal.Body style={{ width: '100%', display: 'flex', gap: '0.5rem' }}>
+        {success ? (
+          <>
+            <FontAwesomeIcon icon={faCoffee} size="4x" />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div>Successfully borrowed</div>
+              <div>Dish # {id} </div>
+              <div>Return by ...</div>
+            </div>
+          </>
+        ) : (
+          <>
+            <FontAwesomeIcon
+              style={{ color: '#BF4949' }}
+              icon={faExclamation}
+              size="4x"
+            />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div>Failed to borrow</div>
+              <div>Dish # {id} </div>
+              <div>Please scan and try again</div>
+            </div>
+          </>
+        )}
+      </Modal.Body>
+    </Modal>
+  );
+}
+
 export default () => {
   const [scanId, setScanId] = useState("");
   const [confirm, setConfirm] = useState(false);
-  const [borrowError, setBorrowError] = useState(false);
+  const [dishNotFound, setDishNotFound] = useState(false);
+  const [borrowDishResult, setBorrowDishResult] = useState({
+    show: false,
+    success: false,
+  });
   const firebase = useContext(FirebaseContext);
   const navigate = useNavigate();
   const [Buffer, setBuffer] = useState(false);
@@ -77,28 +111,35 @@ export default () => {
     setConfirm(false);
     const user = firebase?.user?.uid || null;
     console.log("USER: " + user);
-    const docId = await DishAPI.addDishBorrow(scanId, user);
-    if (docId === null) {
-      setBorrowError(true);
-    }
 
-    setBuffer(true);
+    try {
+      const docId = await DishAPI.addDishBorrow(scanId, user);
+      if (docId === null) {
+        setDishNotFound(true);
+        return;
+      }
 
-    console.log("doc ref" + docId);
-    const transactionID = docId;
+      setBuffer(true);
 
-    if (!firebase?.user) {
-      console.log("USER IS NULL");
-      navigate(`/login/?transaction_id=${transactionID}`);
-      console.log("LOGGED out user" + user);
-    }
+      const transactionID = docId;
 
+      if (!firebase?.user) {
+        console.log('USER IS NULL');
+        navigate(`/login/?transaction_id=${transactionID}`);
+        console.log('LOGGED out user' + user);
+      }
+      setBorrowDishResult({ show: true, success: true });
+    } catch (e) {
+      console.log(e);
+      setBorrowDishResult({ show: true, success: false});
+    }
   };
 
   const onCancel = () => {
     setScanId('');
     setConfirm(false);
-    setBorrowError(false);
+    setDishNotFound(false);
+    setBorrowDishResult({ ...borrowDishResult, show: false });
   };
 
   return (
@@ -106,7 +147,7 @@ export default () => {
       <Scanner
         mode="Scan Dishes"
         onScan={onScan}
-        onClose={() => navigate("/home")}
+        onClose={() => navigate('/home')}
       />
       <Confirm
         show={confirm}
@@ -116,11 +157,13 @@ export default () => {
         }}
         onCancel={onCancel}
       />
-      <BorrowError
-        show={borrowError}
-        id={scanId}
+      <DishNotFound show={dishNotFound} id={scanId} onCancel={onCancel} />
+      <BorrowDishSuccess
+        show={borrowDishResult.show}
+        success={borrowDishResult.success}
         onCancel={onCancel}
-       />
+        id={scanId}
+      />
     </>
   );
 };