Skip to content

Commit

Permalink
Implemented useEffect hook to get user Image based on their alias
Browse files Browse the repository at this point in the history
  • Loading branch information
wrigh393 committed Feb 15, 2021
1 parent 261775f commit 14ed84d
Showing 1 changed file with 17 additions and 3 deletions.
20 changes: 17 additions & 3 deletions src/components/UserAvatar/UserAvatar.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,32 @@ import PropTypes from "prop-types";
import { Avatar } from "@material-ui/core";

export default function UserAvatar({ name, alias, ...avatarProps }) {
const [userImage, setUserImage] = useState([]);

useEffect(() => {
const getImage = async () => {
const response = await fetch(`https://engineering.purdue.edu/ECN/PersonPhotos/getPhoto?json=1&alias=${alias}`);
const jsonResponse = await response.json();
setUserImage(jsonResponse);
};
getImage();
}, [alias])

return (
<Avatar {...avatarProps}>
<Avatar {...avatarProps} src={`https://engineering.purdue.edu/${userImage.imagePath}`}>
{name === "" ? null : name.charAt(0)}
</Avatar>
);
};

UserAvatar.propTypes = {
/** The name of the user. */
"name": PropTypes.string
"name": PropTypes.string,
/** The user's career account alias. */
"alias": PropTypes.string
};

UserAvatar.defaultProps = {
"name": ""
"name": "",
"alias": "",
};

0 comments on commit 14ed84d

Please sign in to comment.