Merge pull request #45 from yuxunn/issue-43-bug-fix

Add modal and fix bugs
yuxunn · Jul 26, 2024 · 19e7657 · 19e7657
2 parents 17771e6 + 4536337
commit 19e7657
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 87 deletions.
diff --git a/.firebase/hosting.ZnJvbnRlbmQvYnVpbGQ.cache b/.firebase/hosting.ZnJvbnRlbmQvYnVpbGQ.cache
@@ -1,26 +1,26 @@
-index.html,1721899332917,57451abae326433c900c5f7c234814ae2ce9902b3e5b431a665f5820154e7dcc
-logo192.png,1721899315368,f66564670b5bfe49f3f04a5b63107bae60f4a7736f1d3b83aa0115f7acf45150
-manifest.json,1721899315369,4e1d3adad9ce7e17c0d13fac197f1c27091906f4ecf3909c9f51247bff345118
-asset-manifest.json,1721899332917,95c964db27ffa32bedcbbf933b8cafe3fd0ec7bea64bf8b367a8fed0cdd85c41
-static/media/uparrow.949aeac3c17f941e86bf.png,1721899332886,091af7d7f7c554c148e36f832439da6a2761fe23f5b307c99bb8a2296432887f
-favicon.ico,1721899315368,5b38de901f18e095d7155d9bd0c6e41618702287d5cb786ee13e9cebfaa99873
-static/media/finn-the-human-duotone-svgrepo-com.c2af141b053a588ab779463a816a2318.svg,1721899332886,4bf06ca5478d8acf94f058532105301e7a15788e4ec5cab21c2fde365db6f5fa
-static/media/filledheart.172e627cb83b2ea56618.png,1721899332886,aac23cadfc2d053c94915519c1498b31eb0c6fc0a2fce1a3049da282365f73c7
-static/media/down.df5b3e065aa9403727bc.png,1721899332886,17010e1df709a5e16abb0f5315bf6185665e9a20b6830d4efb9c6fba36ab78b7
-static/media/bin.a6fd29509719f079bfd7.png,1721899332886,c797472c643f6d7334bd1d4a8e624e0c1da0b5485c05206ef4d36aad63dc664c
-static/js/main.3e06468f.js.LICENSE.txt,1721899332917,ad1d5e6af16ffe8e92a428dabf40f561b12ed268b0211d360fc6e7be765028d3
-static/css/main.447bb97f.css.map,1721899332917,048f84263d7f7122c71762c55d23bd4dbf1eaba2ac06ac9f07ee7efc1cc98f76
-static/css/main.447bb97f.css,1721899332917,8c017e00babd6aee39ed4b3ff1d217a9a433c851cfe80454629606f3a947d4a0
-static/media/young.46133b84dc73f8fd4e5d.png,1721899332886,8d68471a561553b4dc5cdc874f9bf173223ee464097a18bb8116cfa99b48cfae
-strawberry-cake.png,1721899315369,d9f87d425d830c81a8c691be543a158d4d8b65516e11b7ca1ae42374a92b78ce
-static/media/teenager.bfacfcc1a78c8289e4aa.png,1721899332886,0cc47e67e35ba42db25364f77407b8125ac118827d89c7bfeb6118d4c368d271
-static/media/heart.c412cbaead4744166c20.png,1721899332886,e51cad9407d658e54ba52d6238f5a02a84ca54eb83c938d57f27c63fbe99be89
-static/media/strawberrycake.0d5ebe11edd5bf600704.png,1721899332886,d9f87d425d830c81a8c691be543a158d4d8b65516e11b7ca1ae42374a92b78ce
-static/media/google.cadee8cdb0c0afb1a713.png,1721899332886,60b6f749a9daafdc12e3cdbc6347b7e1ac0ab37e4e4008eb8d9de22601c43080
-static/media/panda.0253ba0e4ab6e6b77c68.png,1721899332886,57b14170fed336abd491746bb7e3aee2379824606a2e7d411cbbb667266cc7a1
-static/media/cat.077086a0654634be593c.png,1721899332886,29b869731eb086ee1df0dea2689226cf9944a394d3b402e96dd3b13f8c57d607
-static/media/dog.f9eb1be80a2c19b336b6.png,1721899332886,0c702e5219385113707a4b9f7be3174bfc3a887709a8db9973b32d36378c9373
-static/media/blueberry-pie.f57f327ce0707ce0306f.jpg,1721899332886,88afba500cf8b0535c304a2c8c7b486d95fc7564720402feaea4d6a1cf8294d3
-static/media/raspberrytart.9cdf8b62e002147aa401.jpg,1721899332886,c8acd598dcadde275a334e0867e9cc74e1bc1b2adacdc62daaae82b8d47a2ced
-static/js/main.3e06468f.js,1721899332917,99851f481edd9d336cdc29da91592e63c9ed0ae400f8555953c09118bc2e3071
-static/js/main.3e06468f.js.map,1721899332919,ae458eab4c6fe006963f06687e2836a29a762d2cedab5483ed7a73d6909d0062
+index.html,1721921281143,fe10b833415485255dad2b8fb91ba11c2d542c259027b84114be565364b4d8bd
+asset-manifest.json,1721921281143,069b048def8243b53564462999fefd82561c441a526506408257cf78c0a7bfb4
+manifest.json,1721921263196,4e1d3adad9ce7e17c0d13fac197f1c27091906f4ecf3909c9f51247bff345118
+static/media/uparrow.949aeac3c17f941e86bf.png,1721921281111,091af7d7f7c554c148e36f832439da6a2761fe23f5b307c99bb8a2296432887f
+logo192.png,1721921263196,f66564670b5bfe49f3f04a5b63107bae60f4a7736f1d3b83aa0115f7acf45150
+favicon.ico,1721921263195,5b38de901f18e095d7155d9bd0c6e41618702287d5cb786ee13e9cebfaa99873
+static/media/finn-the-human-duotone-svgrepo-com.c2af141b053a588ab779463a816a2318.svg,1721921281111,4bf06ca5478d8acf94f058532105301e7a15788e4ec5cab21c2fde365db6f5fa
+static/media/filledheart.172e627cb83b2ea56618.png,1721921281111,aac23cadfc2d053c94915519c1498b31eb0c6fc0a2fce1a3049da282365f73c7
+static/media/down.df5b3e065aa9403727bc.png,1721921281111,17010e1df709a5e16abb0f5315bf6185665e9a20b6830d4efb9c6fba36ab78b7
+static/media/bin.a6fd29509719f079bfd7.png,1721921281111,c797472c643f6d7334bd1d4a8e624e0c1da0b5485c05206ef4d36aad63dc664c
+static/js/main.851eb9f5.js.LICENSE.txt,1721921281143,ad1d5e6af16ffe8e92a428dabf40f561b12ed268b0211d360fc6e7be765028d3
+static/css/main.447bb97f.css,1721921281144,8c017e00babd6aee39ed4b3ff1d217a9a433c851cfe80454629606f3a947d4a0
+static/css/main.447bb97f.css.map,1721921281143,048f84263d7f7122c71762c55d23bd4dbf1eaba2ac06ac9f07ee7efc1cc98f76
+static/media/young.46133b84dc73f8fd4e5d.png,1721921281111,8d68471a561553b4dc5cdc874f9bf173223ee464097a18bb8116cfa99b48cfae
+strawberry-cake.png,1721921263196,d9f87d425d830c81a8c691be543a158d4d8b65516e11b7ca1ae42374a92b78ce
+static/media/strawberrycake.0d5ebe11edd5bf600704.png,1721921281111,d9f87d425d830c81a8c691be543a158d4d8b65516e11b7ca1ae42374a92b78ce
+static/media/heart.c412cbaead4744166c20.png,1721921281111,e51cad9407d658e54ba52d6238f5a02a84ca54eb83c938d57f27c63fbe99be89
+static/media/teenager.bfacfcc1a78c8289e4aa.png,1721921281111,0cc47e67e35ba42db25364f77407b8125ac118827d89c7bfeb6118d4c368d271
+static/media/dog.f9eb1be80a2c19b336b6.png,1721921281111,0c702e5219385113707a4b9f7be3174bfc3a887709a8db9973b32d36378c9373
+static/media/google.cadee8cdb0c0afb1a713.png,1721921281111,60b6f749a9daafdc12e3cdbc6347b7e1ac0ab37e4e4008eb8d9de22601c43080
+static/media/panda.0253ba0e4ab6e6b77c68.png,1721921281111,57b14170fed336abd491746bb7e3aee2379824606a2e7d411cbbb667266cc7a1
+static/media/cat.077086a0654634be593c.png,1721921281111,29b869731eb086ee1df0dea2689226cf9944a394d3b402e96dd3b13f8c57d607
+static/media/blueberry-pie.f57f327ce0707ce0306f.jpg,1721921281111,88afba500cf8b0535c304a2c8c7b486d95fc7564720402feaea4d6a1cf8294d3
+static/media/raspberrytart.9cdf8b62e002147aa401.jpg,1721921281111,c8acd598dcadde275a334e0867e9cc74e1bc1b2adacdc62daaae82b8d47a2ced
+static/js/main.851eb9f5.js,1721921281144,e13fc15330a21e5a237c0ddd1b90fd32ce11c300eafb90ca392044b87cbc249c
+static/js/main.851eb9f5.js.map,1721921281145,d43c3c1a143f43811f16cc95e9187fb2c7dbeeaa5bbc20ca62731e93db6cb62a
diff --git a/frontend/src/components/modal.js b/frontend/src/components/modal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Modal = ({ isOpen, onClose, onConfirm, title, message }) => {
+const Modal = ({ isOpen, onClose, onConfirm, title, message, showCancelButton = true }) => {
   if (!isOpen) return null;
 
   return (
@@ -9,12 +9,14 @@ const Modal = ({ isOpen, onClose, onConfirm, title, message }) => {
         <h2 className="text-lg font-semibold mb-4">{title}</h2>
         <p className="mb-6">{message}</p>
         <div className="flex justify-end space-x-4">
-          <button
-            className="bg-gray-300 px-4 py-2 rounded"
-            onClick={onClose}
-          >
-            Cancel
-          </button>
+          {showCancelButton && (
+            <button
+              className="bg-gray-300 px-4 py-2 rounded"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+          )}
           <button
             className="bg-red-600 text-white px-4 py-2 rounded"
             onClick={onConfirm}

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
@@ -173,17 +173,6 @@ const Sidebar = () => {
             />
             {isSidebarOpen && <span>My Favourites</span>}
           </a>
-          <a
-            href="/courses"
-            className="flex items-center py-2 px-4 rounded transition duration-200 hover:bg-pink-100 text-gray-600"
-          >
-            <FaUsers
-              className={`text-lg ${
-                isSidebarOpen ? "mr-3" : "mx-auto"
-              }`}
-            />
-            {isSidebarOpen && <span>Courses</span>}
-          </a>
           <a
             href="/community"
             className="flex items-center py-2 px-4 rounded transition duration-200 hover:bg-pink-100 text-gray-600"

diff --git a/frontend/src/pages/login.js b/frontend/src/pages/login.js
@@ -5,12 +5,15 @@ import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
 import { auth, provider } from '../components/firebase';
 import googleLogo from "../assets/google.png";
 import Loading2 from '../animations/loading2';
+import Modal from '../components/modal'; 
 
 function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const handleEmailChange = (e) => {
     setEmail(e.target.value);
@@ -29,14 +32,16 @@ function Login() {
       await signInWithEmailAndPassword(auth, email, password);
       const user = auth.currentUser;
       if (user) { 
-      const sessionKey = await user.getIdToken();
-      console.log("session storeage")
-      sessionStorage.setItem('sessionKey', sessionKey);
-      console.log("logged in successfully");
-      window.location.href = "/home";
+        const sessionKey = await user.getIdToken();
+        console.log("session storeage")
+        sessionStorage.setItem('sessionKey', sessionKey);
+        console.log("logged in successfully");
+        window.location.href = "/home";
       }
     } catch (error) {
       console.log(error.message);
+      setErrorMessage("Incorrect username and/or password. Please try again. 😭");
+      setIsModalOpen(true);
       setIsSubmitting(false);
     }
   }
@@ -55,22 +60,27 @@ function Login() {
 
         window.location.href = "/home";
       }
-
     } catch (error) {
       console.log("error");
-      alert("failed to login TT");
+      setErrorMessage("Incorrect username and/or password. Please try again. 😭");
+      setIsModalOpen(true);
       setIsSubmitting(false);
     }
   };
 
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setErrorMessage('');
+  };
+
+  if (isSubmitting) {
+    return <Loading2/>
+  }
 
-if (isSubmitting) {
-  return <Loading2/>
-}
   return (
     <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-pink-200 to-blue-300">
       <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md mx-4">
-      <div className="flex items-center justify-center mb-4">
+        <div className="flex items-center justify-center mb-4">
           <img
             className="w-12 h-12 mb-2 mr-2"
             src={strawberrycake}
@@ -131,6 +141,14 @@ if (isSubmitting) {
           Login with Google
         </button>
       </div>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        onConfirm={handleCloseModal}
+        title="Login Error"
+        message={errorMessage}
+        showCancelButton={false}
+      />
     </div>
   );
 }

diff --git a/frontend/src/pages/viewRecipePage.js b/frontend/src/pages/viewRecipePage.js
@@ -73,42 +73,35 @@ const ViewRecipePage = () => {
           <p className="text-lg mb-2">Calories: {calories}</p>
           <div className="text-lg mb-2">
             {ingredients && ingredients.length > 0 && (
-          <div className="my-4">
-
-            <table className="min-w-full mt-4 border-collapse border border-gray-300">
-              <thead>
-                <tr>
-                  <th className="border border-gray-300 p-2">Ingredient</th>
-                  <th className="border border-gray-300 p-2">Quantity</th>
-                </tr>
-              </thead>
-              <tbody>
-                {ingredients.map((ingredient, index) => (
-                  <tr key={index} className="border-b">
-                    <td className="border-r border-gray-300 p-2">{ingredient.name}</td>
-                    <td className="p-2">{ingredient.amount}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
+              <div className="my-4">
+                <table className="min-w-full mt-4 border-collapse border border-gray-300">
+                  <thead>
+                    <tr>
+                      <th className="border border-gray-300 p-2">Ingredient</th>
+                      <th className="border border-gray-300 p-2">Quantity</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {ingredients.map((ingredient, index) => (
+                      <tr key={index} className="border-b">
+                        <td className="border-r border-gray-300 p-2">
+                          {ingredient.name}
+                        </td>
+                        <td className="p-2">{ingredient.amount}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
           </div>
           <h2 className="text-xl font-semibold mb-2 ">Description:</h2>
-          <p className="text-gray-700 whitespace-pre-line break-words">{description}</p>
-          {/* <div className="flex mb-4">
-            {[...Array(5)].map((_, i) => (
-              <span
-                key={i}
-                className={i < rating ? "text-red-500" : "text-gray-400"}
-              >
-                ★
-              </span>
-            ))}
-          </div> */}
+          <p className="text-gray-700 whitespace-pre-line break-words">
+            {description}
+          </p>
           <button
             onClick={handleBackButton}
-            className="w-full py-2 bg-gradient-to-r from-pink-500 to-blue-400 text-white rounded hover:bg-gradient-to-l"
+            className="w-full py-2 mt-4 bg-gradient-to-r from-pink-500 to-blue-400 text-white rounded hover:bg-gradient-to-l"
           >
             Return to Home Page
           </button>