Smoother login navigation & small improvements

Assios · Aug 26, 2023 · 7fcbb40 · 7fcbb40 · github-actions · Aug 26, 2023
1 parent 040bccf
commit 7fcbb40
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 25 deletions.
diff --git a/app/components/Navbar/Navbar.tsx b/app/components/Navbar/Navbar.tsx
@@ -1,10 +1,13 @@
-import { useContext } from "react";
+import { useContext, useRef, useState, useEffect } from "react";
 import { NavLink } from "@remix-run/react";
 import { AuthContext } from "../AuthProvider/AuthProvider";
-import { logOut } from "../../firebase/authUtils"; // adjust the path accordingly
+import { logOut } from "../../firebase/authUtils";
+import { idToColor } from "~/utils/utils";
 
 export const Navbar = ({ setShowModal, setShowTutorial, showNavbarStats }) => {
   const authContext = useContext(AuthContext);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const dropdownRef = useRef(null);
 
   if (!authContext) {
     throw new Error("Component must be wrapped with <AuthProvider>");
@@ -19,34 +22,62 @@ export const Navbar = ({ setShowModal, setShowTutorial, showNavbarStats }) => {
     }
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownVisible(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   const userProfileDropdown = user ? (
-    <div className="dropdown dropdown-end text-primary-content bg-primary">
-      <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-        <div className="w-10 rounded-full">
+    <div className="relative inline-block text-left">
+      <label
+        tabIndex={0}
+        className="btn btn-ghost btn-circle avatar"
+        onClick={() => setDropdownVisible(!dropdownVisible)} // Toggle dropdown visibility when avatar is clicked
+      >
+        <div className="w-8 rounded-full">
           <img
-            src={`https://ui-avatars.com/api/?name=${user.username}&size=512`}
+            src={`https://ui-avatars.com/api/?name=${
+              user.username
+            }&size=20&background=${idToColor(user.uid)}`}
             alt="Profile"
           />
         </div>
       </label>
-      <ul
-        tabIndex={0}
-        className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-primary rounded-box w-52"
-      >
-        <li>
-          <NavLink to={"/profile"} className="block px-4 py-2 justify-between">
-            Profile
-          </NavLink>
-        </li>
-        <li>
-          <button
-            onClick={handleLogout}
-            className="block w-full text-left px-4 py-2"
-          >
-            Log out
-          </button>
-        </li>
-      </ul>
+
+      {dropdownVisible && (
+        <ul
+          tabIndex={0}
+          className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-primary rounded-box w-52 absolute right-0"
+          ref={dropdownRef}
+        >
+          <li>
+            <NavLink
+              to={"/profile"}
+              className="block px-4 py-2 justify-between"
+              onClick={() => setDropdownVisible(false)}
+            >
+              Profile
+            </NavLink>
+          </li>
+          <li>
+            <button
+              onClick={handleLogout}
+              className="block w-full text-left px-4 py-2"
+            >
+              Log out
+            </button>
+          </li>
+        </ul>
+      )}
     </div>
   ) : null;
 

diff --git a/app/routes/profile.tsx b/app/routes/profile.tsx
@@ -188,7 +188,7 @@ export default function Profile() {
   } else {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="bg-white p-8 rounded-xl shadow-md w-96 text-center">
+        <div className="p-8 rounded-xl shadow-md w-96 text-center">
           <span>You are not logged in.</span>
         </div>
       </div>

diff --git a/app/routes/signup.tsx b/app/routes/signup.tsx
@@ -50,6 +50,7 @@ export default function SignUp() {
     try {
       await signUpWithEmailPasswordAndUsername(email, password, username);
       setMessage("Successfully signed up!");
+      window.location.href = "/profile";
     } catch (error) {
       setMessage(ERROR_MAP[error.code] || `Error: ${error.message}`);
     } finally {

diff --git a/app/utils/utils.tsx b/app/utils/utils.tsx
@@ -107,3 +107,29 @@ export const isValidPlayerStats = (stats: any): stats is PlayerStats => {
     hasValidGuesses(stats.guesses)
   );
 };
+
+export const idToColor = (userID) => {
+  const colors = {
+    "cyan-400": "22D3EE",
+    "yellow-400": "FBBF24",
+    "amber-400": "F59E0B",
+    "green-400": "10B981",
+    "lime-400": "84CC16",
+    "emerald-400": "059669",
+    "teal-400": "14B8A6",
+    "orange-400": "FB923C",
+    "red-400": "EF4444",
+    "fuchsia-400": "D946EF",
+    "pink-400": "EC4899",
+    "rose-400": "FB7185",
+  };
+
+  let hash = 0;
+  for (let i = 0; i < userID.length; i++) {
+    hash += userID.charCodeAt(i);
+  }
+
+  const colorKeys = Object.keys(colors);
+  const index = hash % colorKeys.length;
+  return colors[colorKeys[index]];
+};