From 3905557511156b0a2c5933d7c4ff28c1d79ed8c9 Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Tue, 18 Nov 2025 21:36:22 -0700
Subject: [PATCH] (FIX): Fixed google image error.

The API is rate limited, so by defaulting to the letter images works
fine for now.
---
 web/src/pages/Profile.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx
index e88652b..fa693c4 100644
--- a/web/src/pages/Profile.tsx
+++ b/web/src/pages/Profile.tsx
@@ -10,6 +10,9 @@ import { isApiError, type ApiError } from "../types/api/error";
 import { Logout } from "../services/AuthService";
 import { useNavigate } from "react-router-dom";
 
+// TODO: Need to cache the image, it returns nothing because it fails with 429 (rate limits)
+//       Though this might just be a development issue, it seems to work in production.
+
 export default function Profile() {
   // Context
   const { getJwt } = use(AuthContext);
@@ -18,6 +21,7 @@ export default function Profile() {
   // Page state
   const [error, setError] = useState<string>("");
   const [user, setUser] = useState<User | null>(null);
+  const [dummyProfileSrc, setDummyProfileSrc] = useState<string>("");
   const [recipes, setRecipes] = useState<Recipe[]>([]);
   const [favorites, setFavorites] = useState<Recipe[]>([]);
   const [activity, setActivity] = useState<Engagement[]>([]);
@@ -81,11 +85,9 @@ export default function Profile() {
   }, [error]);
 
   useEffect(() => {
-    if (activity)
-      console.log("@activity", activity);
-  }, [activity]);
-
-
+    if (user)
+      setDummyProfileSrc(`https://ui-avatars.com/api/?name=${user?.Name.split(" ")[0]}+${user?.Name.split(" ")[1]}&size=150`);
+  }, [user]);
 
   return (
     <>
@@ -96,11 +98,15 @@ export default function Profile() {
             <img
               className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
               src={user?.ImageUrl ?? undefined}
+              onError={e => {
+                e.currentTarget.onerror = null; // prevent infinite loop
+                e.currentTarget.src = dummyProfileSrc;
+              }}
             />
           ) : (
             <img
               className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
-              src={`https://ui-avatars.com/api/?name=${user?.Name.split(" ")[0]}+${user?.Name.split(" ")[1]}&size=150`}
+              src={dummyProfileSrc}
             />
           )}
           <div className="flex flex-col gap-y-4">