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(""); const [user, setUser] = useState(null); + const [dummyProfileSrc, setDummyProfileSrc] = useState(""); const [recipes, setRecipes] = useState([]); const [favorites, setFavorites] = useState([]); const [activity, setActivity] = useState([]); @@ -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() { { + e.currentTarget.onerror = null; // prevent infinite loop + e.currentTarget.src = dummyProfileSrc; + }} /> ) : ( )}