diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js index d4341a2..b6f7965 100644 --- a/src/components/UserAvatar/UserAvatar.js +++ b/src/components/UserAvatar/UserAvatar.js @@ -3,22 +3,34 @@ import PropTypes from "prop-types"; import { Avatar } from "@material-ui/core"; export default function UserAvatar({ name, alias }) { - const [userImageURL, setUserImageURL] = useState([]); - - useEffect(() => { - const getImageURL = (async () => { - const response = await fetch(`https://engineering.purdue.edu/ECN/PersonPhotos/getPhoto?json=1&alias=${alias}`); - if (response.status >= 200 && response.status <= 299) { - const jsonResponse = await response.json(); - setUserImageURL(jsonResponse); - } else { - console.log(response.status, response.statusText) + const [userImageURL, setUserImageURL] = useState(""); + + // Load User Image from ECNDB + useEffect(_ => { + (async function getUserImage() { + if (alias === "") { + return null; + } + + const userImageResponse = await fetch(`https://engineering.purdue.edu/ECN/PersonPhotos/getPhoto?json=1&alias=${alias}`); + + if (userImageResponse.status !== 200) { + console.error(`Failed to load user image from ECNDB. Got code ${userImageResponse.status} (${userImageResponse.statusText})`); + return null; } + + let userImageData = await userImageResponse.json(); + if (userImageData.imagePath === "") { + return null; + } + + setUserImageURL(`https://engineering.purdue.edu/${userImageData.imagePath}`); + return null; })(); }, [alias]) return ( - + {name === "" ? null : name.charAt(0)} );