From a70080e7ff68e43d3e5e77624acc8c8dc8663630 Mon Sep 17 00:00:00 2001
From: Zavista <84294353+Zavista@users.noreply.github.com>
Date: Sun, 15 Sep 2024 00:39:35 -0400
Subject: [PATCH 1/2] added cursor-pointer

---
 .../pages/FavouritesPage/FavouritesCard.tsx   | 38 +++++++++---------
 .../src/pages/RecentsPage/RecentsCard.tsx     | 38 ++++++++++++------
 frontend/src/pages/RecordPage/RecordPage.tsx  | 39 +++++++++++--------
 3 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/frontend/src/pages/FavouritesPage/FavouritesCard.tsx b/frontend/src/pages/FavouritesPage/FavouritesCard.tsx
index af3758b..8fabe91 100644
--- a/frontend/src/pages/FavouritesPage/FavouritesCard.tsx
+++ b/frontend/src/pages/FavouritesPage/FavouritesCard.tsx
@@ -20,7 +20,7 @@ const FavouritesCard = ({
   favourite,
   index,
   id,
-  onDelete
+  onDelete,
 }: FavouritesCardProps) => {
   const [isShowMore, setIsShowMore] = useState(false);
   const [isEditting, setIsEditting] = useState(false);
@@ -41,7 +41,7 @@ const FavouritesCard = ({
     toast.success("Copied to clipboard", {
       autoClose: 1000,
       hideProgressBar: true,
-      position: "bottom-left"
+      position: "bottom-left",
     });
   };
 
@@ -56,7 +56,7 @@ const FavouritesCard = ({
         toast.success("Favourite deleted", {
           autoClose: 1000,
           hideProgressBar: true,
-          position: "bottom-left"
+          position: "bottom-left",
         });
         onDelete(id);
       } catch (error) {
@@ -64,7 +64,7 @@ const FavouritesCard = ({
         toast.error("Failed to delete favourite", {
           autoClose: 1000,
           hideProgressBar: true,
-          position: "bottom-left"
+          position: "bottom-left",
         });
       }
     }
@@ -81,12 +81,12 @@ const FavouritesCard = ({
           <div className="w-8">
             {isShowMore ? (
               <FaChevronDown
-                className="text-2xl transform transition-transform duration-300"
+                className="cursor-pointer text-2xl transform transition-transform duration-300"
                 onClick={handleShowMore}
               />
             ) : (
               <FaChevronRight
-                className="text-2xl transform transition-transform duration-300"
+                className="cursor-pointer text-2xl transform transition-transform duration-300"
                 onClick={handleShowMore}
               />
             )}
@@ -104,19 +104,19 @@ const FavouritesCard = ({
           )}
         </div>
         <div className="flex items-center space-x-4 text-xl">
-            {isEditting ? (
-                <FaCheck
-                className="text-xl hover:text-green-700 hover:text-2xl transform transition-transform duration-200 hover:scale-125"
-                onClick={handleSubmit}
-                ></FaCheck>
-            ) : (
-                <MdEdit
-                className="text-2xl transform transition-transform duration-200 hover:scale-125"
-                onClick={() => setIsEditting(true)}
-                ></MdEdit>
-            )}
+          {isEditting ? (
+            <FaCheck
+              className="cursor-pointer text-xl hover:text-green-700 hover:text-2xl transform transition-transform duration-200 hover:scale-125"
+              onClick={handleSubmit}
+            ></FaCheck>
+          ) : (
+            <MdEdit
+              className="cursor-pointer text-2xl transform transition-transform duration-200 hover:scale-125"
+              onClick={() => setIsEditting(true)}
+            ></MdEdit>
+          )}
           <FaTrash
-            className="text-2xl transform transition-transform duration-200 hover:scale-125"
+            className="cursor-pointer text-2xl transform transition-transform duration-200 hover:scale-125"
             onClick={handleDelete}
           />
         </div>
@@ -137,7 +137,7 @@ const FavouritesCard = ({
             <div>{favourite}</div>
           </div>
           <IoCopySharp
-            className="text-xl transform transition-transform duration-200 hover:scale-125"
+            className="cursor-pointer text-xl transform transition-transform duration-200 hover:scale-125"
             onClick={handleCopy}
           />
         </div>
diff --git a/frontend/src/pages/RecentsPage/RecentsCard.tsx b/frontend/src/pages/RecentsPage/RecentsCard.tsx
index dd9d3a0..292aa6d 100644
--- a/frontend/src/pages/RecentsPage/RecentsCard.tsx
+++ b/frontend/src/pages/RecentsPage/RecentsCard.tsx
@@ -16,24 +16,36 @@ const RecentsCard = ({ text, liked, index }: RecentsCardsProps) => {
     toast.success("Copied to clipboard", {
       autoClose: 1000,
       hideProgressBar: true,
-      position: "bottom-left"
+      position: "bottom-left",
     });
   };
 
   const handleLike = async () => {
     const user = auth.currentUser;
     if (!user) {
-      toast.error("User not logged in", { autoClose: 1000, hideProgressBar: true, position: "bottom-left" });
+      toast.error("User not logged in", {
+        autoClose: 1000,
+        hideProgressBar: true,
+        position: "bottom-left",
+      });
       return;
     }
     const userId = user.uid;
 
     try {
       await saveEquation(userId, text, true);
-      toast.success("Added to favourites", { autoClose: 1000, hideProgressBar: true, position: "bottom-left" });
+      toast.success("Added to favourites", {
+        autoClose: 1000,
+        hideProgressBar: true,
+        position: "bottom-left",
+      });
     } catch (error) {
       console.error("Error saving to favourites:", error);
-      toast.error("Failed to add to favourites", { autoClose: 1000, hideProgressBar: true, position: "bottom-left" });
+      toast.error("Failed to add to favourites", {
+        autoClose: 1000,
+        hideProgressBar: true,
+        position: "bottom-left",
+      });
     }
   };
 
@@ -45,14 +57,16 @@ const RecentsCard = ({ text, liked, index }: RecentsCardsProps) => {
     >
       <div>{text}</div>
       <div className="flex items-center space-x-4 text-xl">
-      <FaHeart 
-        onClick={handleLike} 
-        className={`transform transition-transform duration-200 hover:scale-125 ${liked ? "text-red-600" : ""}`}
-      />
-      <IoCopySharp 
-        onClick={handleCopy} 
-        className="transform transition-transform duration-200 hover:scale-125" 
-      />
+        <FaHeart
+          onClick={handleLike}
+          className={`cursor-pointer transform transition-transform duration-200 hover:scale-125 ${
+            liked ? "text-red-600" : ""
+          }`}
+        />
+        <IoCopySharp
+          onClick={handleCopy}
+          className="cursor-pointer transform transition-transform duration-200 hover:scale-125"
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/pages/RecordPage/RecordPage.tsx b/frontend/src/pages/RecordPage/RecordPage.tsx
index 1bc1c3b..462a46e 100644
--- a/frontend/src/pages/RecordPage/RecordPage.tsx
+++ b/frontend/src/pages/RecordPage/RecordPage.tsx
@@ -4,12 +4,13 @@ import { FaMicrophone } from "react-icons/fa";
 import useSpeechRecognition from "../../hooks/useSpeechRecognitionHook";
 import styles from "../../styles/RecordPage.module.css";
 import { toast } from "react-toastify";
-import { auth } from '../../firebase';
+import { auth } from "../../firebase";
 import { saveEquation } from "../../firestore";
 import { useState } from "react";
 
 const RecordPage = () => {
-  const { text, startListening, stopListening, isListening, setText } = useSpeechRecognition();
+  const { text, startListening, stopListening, isListening, setText } =
+    useSpeechRecognition();
 
   const [latex, setLatex] = useState("");
 
@@ -18,8 +19,8 @@ const RecordPage = () => {
       console.log(text);
       stopListening();
     } else {
-      setText("")
-      setLatex("")
+      setText("");
+      setLatex("");
       startListening();
     }
   };
@@ -36,30 +37,33 @@ const RecordPage = () => {
         toast.success("Text has been submitted", {
           autoClose: 2000,
           hideProgressBar: true,
-          position: "bottom-left"
+          position: "bottom-left",
         });
         try {
           // Make the GET request to the backend endpoint, passing the parameter in the query string
-          const response = await fetch(`http://localhost:3001/gpt-query?text=${encodeURIComponent(text)}`, {
-            method: 'GET',
-          });
+          const response = await fetch(
+            `http://localhost:3001/gpt-query?text=${encodeURIComponent(text)}`,
+            {
+              method: "GET",
+            }
+          );
           // Check if the response is ok
           if (response.ok) {
             // Parse the JSON response
             const data = await response.json();
-            console.log(data)
+            console.log(data);
             setLatex(data.response);
           } else {
-            console.error('Failed to fetch from backend');
+            console.error("Failed to fetch from backend");
           }
         } catch (error) {
-          console.error('Error occurred while fetching:', error);
+          console.error("Error occurred while fetching:", error);
         }
       } else {
         toast.error("User not authenticated", {
           autoClose: 2000,
           hideProgressBar: true,
-          position: "bottom-left"
+          position: "bottom-left",
         });
       }
     } catch (error) {
@@ -67,7 +71,7 @@ const RecordPage = () => {
       toast.error("Error submitting text", {
         autoClose: 2000,
         hideProgressBar: true,
-        position: "bottom-left"
+        position: "bottom-left",
       });
     }
   };
@@ -76,9 +80,11 @@ const RecordPage = () => {
     <div>
       <Navbar title="Record new commands" location="record" />
       <div className="container mx-auto p-5 flex flex-col items-center">
-        <div className="flex items-center space-x-3">
+        <div className="flex items-center space-x-3 cursor-pointer">
           <div
-            className={`${styles.mic} ${isListening ? styles.listening : ""} bg-green-600 rounded-full w-24 h-24 flex items-center justify-center text-white`}
+            className={`${styles.mic} ${
+              isListening ? styles.listening : ""
+            } bg-green-600 rounded-full w-24 h-24 flex items-center justify-center text-white`}
             onClick={handleOnClick}
           >
             <FaMicrophone className="text-3xl" />
@@ -97,7 +103,7 @@ const RecordPage = () => {
             className={`ml-auto p-2 px-4 border-2 rounded-lg mt-2 ${
               isListening
                 ? "border-green-600 bg-green-100 text-green-700 cursor-not-allowed"
-                : "border-black hover:bg-black hover:text-white"
+                : "border-black hover:bg-black hover:text-white cursor-pointer"
             } ${isListening ? "bg-green-200" : ""}`}
             onClick={!isListening ? handleSubmit : undefined}
           >
@@ -117,4 +123,3 @@ const RecordPage = () => {
 };
 
 export default RecordPage;
-

From d4259b25e005f4add53296df707c1722afb6d62d Mon Sep 17 00:00:00 2001
From: Zavista <84294353+Zavista@users.noreply.github.com>
Date: Sun, 15 Sep 2024 02:10:13 -0400
Subject: [PATCH 2/2] added dropdown

---
 frontend/src/components/Dropdown.tsx | 80 ++++++++++++++++++++++++++++
 frontend/src/components/Navbar.tsx   | 35 ++----------
 2 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/components/Dropdown.tsx

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
new file mode 100644
index 0000000..5f8b110
--- /dev/null
+++ b/frontend/src/components/Dropdown.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { CiMenuBurger } from "react-icons/ci";
+import { logout } from "./Auth";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+type DropdownProps = {
+  email?: string | null;
+};
+
+function getUsernameFromEmail(email: string): string {
+  const atIndex = email.indexOf("@");
+
+  if (atIndex !== -1) {
+    return email.substring(0, atIndex);
+  }
+
+  return email;
+}
+
+const Dropdown = ({ email }: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    try {
+      await logout(navigate);
+      toast.success("Logged out successfully", {
+        autoClose: 1000,
+        hideProgressBar: true,
+        position: "bottom-left",
+      });
+
+      console.log("Logged out successfully");
+    } catch (error) {
+      toast.error("Logged out successfully", {
+        autoClose: 1000,
+        hideProgressBar: true,
+        position: "bottom-left",
+      });
+      console.error("Logout failed", error);
+    }
+  };
+
+  return (
+    <div className="flex items-center relative">
+      <CiMenuBurger
+        className="text-3xl cursor-pointer hover:scale-110"
+        onClick={handleClick}
+      ></CiMenuBurger>
+
+      {isOpen && (
+        <div className="absolute right-0 top-14 w-48 bg-white border rounded-lg shadow-lg z-10 text-center">
+          <div className="flex flex-col">
+            <div className="p-2 border-b text-gray-400">
+              <span>
+                {email ? getUsernameFromEmail(email) : "not logged in"}
+              </span>
+            </div>
+
+            {/* Logout option */}
+            <div
+              className="p-3 px-3 text-gray-700 cursor-pointer hover:bg-gray-100"
+              onClick={handleLogout}
+            >
+              Log Out
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a63ab06..9020898 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,9 +1,7 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import verbatex from "../assets/verbatex.png";
-import { logout } from "./Auth";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
+import Dropdown from "./Dropdown";
+import { auth } from "../firebase";
 
 type NavbarProps = {
   title: string;
@@ -11,28 +9,6 @@ type NavbarProps = {
 };
 
 const Navbar = ({ title, location }: NavbarProps) => {
-  const navigate = useNavigate();
-
-  const handleLogout = async () => {
-    try {
-      await logout(navigate);
-      toast.success("Logged out successfully", {
-        autoClose: 1000,
-        hideProgressBar: true,
-        position: "bottom-left",
-      });
-
-      console.log("Logged out successfully");
-    } catch (error) {
-      toast.error("Logged out successfully", {
-        autoClose: 1000,
-        hideProgressBar: true,
-        position: "bottom-left",
-      });
-      console.error("Logout failed", error);
-    }
-  };
-
   return (
     <>
       <header className="fixed top-0 left-0 w-full flex justify-between items-center p-4 bg-white shadow-md z-20">
@@ -73,12 +49,7 @@ const Navbar = ({ title, location }: NavbarProps) => {
           >
             Favourites
           </Link>
-          <div
-            onClick={handleLogout}
-            className="flex p-2 px-6 border-2 border-green-700 bg-green-700 rounded-lg text-white cursor-pointer"
-          >
-            Log Out
-          </div>
+          <Dropdown email={auth.currentUser?.email}></Dropdown>
         </div>
       </header>