azpect/Potion
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

(FIX): Fixed google image error.

Browse Source 
The API is rate limited, so by defaulting to the letter images works
fine for now.
This commit is contained in:
Hayden Hargreaves 2025-11-18 21:36:22 -07:00
parent 3e138089dd
commit 3905557511
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/pages/Profile.tsx
View File

@ -10,6 +10,9 @@ import { isApiError, type ApiError } from "../types/api/error";
import { Logout } from "../services/AuthService"; import { Logout } from "../services/AuthService";
import { useNavigate } from "react-router-dom"; 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() { export default function Profile() {
// Context // Context
const { getJwt } = use(AuthContext); const { getJwt } = use(AuthContext);
@ -18,6 +21,7 @@ export default function Profile() {
// Page state // Page state
const [error, setError] = useState<string>(""); const [error, setError] = useState<string>("");
const [user, setUser] = useState<User | null>(null); const [user, setUser] = useState<User | null>(null);
const [dummyProfileSrc, setDummyProfileSrc] = useState<string>("");
const [recipes, setRecipes] = useState<Recipe[]>([]); const [recipes, setRecipes] = useState<Recipe[]>([]);
const [favorites, setFavorites] = useState<Recipe[]>([]); const [favorites, setFavorites] = useState<Recipe[]>([]);
const [activity, setActivity] = useState<Engagement[]>([]); const [activity, setActivity] = useState<Engagement[]>([]);
@ -81,11 +85,9 @@ export default function Profile() {
}, [error]); }, [error]);
useEffect(() => { useEffect(() => {
if (activity) if (user)
console.log("@activity", activity); setDummyProfileSrc(`https://ui-avatars.com/api/?name=${user?.Name.split(" ")[0]}+${user?.Name.split(" ")[1]}&size=150`);
}, [activity]); }, [user]);
return ( return (
<> <>
@ -96,11 +98,15 @@ export default function Profile() {
<img <img
className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none" className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
src={user?.ImageUrl ?? undefined} src={user?.ImageUrl ?? undefined}
onError={e => {
e.currentTarget.onerror = null; // prevent infinite loop
e.currentTarget.src = dummyProfileSrc;
}}
/> />
) : ( ) : (
<img <img
className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none" 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"> <div className="flex flex-col gap-y-4">