Skip to content

Commit

Permalink
Merge pull request #11 from leozhang14/createDropdown
Browse files Browse the repository at this point in the history 
Create dropdown
  • Loading branch information
@Zavista
Zavista authored Sep 15, 2024
2 parents 7b73c30 + 18a6bc5 commit 4448432
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 73 deletions.
80 changes: 80 additions & 0 deletions frontend/src/components/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
35 changes: 3 additions & 32 deletions frontend/src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,14 @@
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;
location?: string;
};

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">
Expand Down Expand Up @@ -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>

Expand Down
38 changes: 19 additions & 19 deletions frontend/src/pages/FavouritesPage/FavouritesCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const FavouritesCard = ({
favourite,
index,
id,
onDelete
onDelete,
}: FavouritesCardProps) => {
const [isShowMore, setIsShowMore] = useState(false);
const [isEditting, setIsEditting] = useState(false);
Expand All @@ -41,7 +41,7 @@ const FavouritesCard = ({
toast.success("Copied to clipboard", {
autoClose: 1000,
hideProgressBar: true,
position: "bottom-left"
position: "bottom-left",
});
};

Expand All @@ -56,15 +56,15 @@ const FavouritesCard = ({
toast.success("Favourite deleted", {
autoClose: 1000,
hideProgressBar: true,
position: "bottom-left"
position: "bottom-left",
});
onDelete(id);
} catch (error) {
console.error("Error deleting favourite:", error);
toast.error("Failed to delete favourite", {
autoClose: 1000,
hideProgressBar: true,
position: "bottom-left"
position: "bottom-left",
});
}
}
Expand All @@ -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}
/>
)}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
38 changes: 26 additions & 12 deletions frontend/src/pages/RecentsPage/RecentsCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
}
};

Expand All @@ -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>
);
Expand Down
21 changes: 11 additions & 10 deletions frontend/src/pages/RecordPage/RecordPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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";

Expand All @@ -16,8 +16,8 @@ const RecordPage = () => {
console.log(text);
stopListening();
} else {
setText("")
setLatex("")
setText("");
setLatex("");
startListening();
}
};
Expand All @@ -34,21 +34,21 @@ const RecordPage = () => {
toast.success("Text has been submitted", {
autoClose: 2000,
hideProgressBar: true,
position: "bottom-left"
position: "bottom-left",
});
} else {
toast.error("User not authenticated", {
autoClose: 2000,
hideProgressBar: true,
position: "bottom-left"
position: "bottom-left",
});
}
} catch (error) {
console.error("Error saving equation:", error);
toast.error("Error submitting text", {
autoClose: 2000,
hideProgressBar: true,
position: "bottom-left"
position: "bottom-left",
});
}
};
Expand All @@ -57,9 +57,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" />
Expand All @@ -78,7 +80,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}
>
Expand All @@ -98,4 +100,3 @@ const RecordPage = () => {
};

export default RecordPage;

0 comments on commit 4448432

Please sign in to comment.