refactored Avatar component
This commit is contained in:
parent
ea3748e71b
commit
69a08eb994
|
@ -26,7 +26,7 @@ const AvatarBase = styled('div')<{ colorCode: string; size: number }>`
|
|||
`;
|
||||
|
||||
const Avatar: React.FC<AvatarProps> = ({ file }) => {
|
||||
const { idToMail, user } = useContext(GalleryContext);
|
||||
const { userIDToEmailMap, user } = useContext(GalleryContext);
|
||||
const theme = useTheme();
|
||||
|
||||
const [colorCode, setColorCode] = useState('');
|
||||
|
@ -36,15 +36,26 @@ const Avatar: React.FC<AvatarProps> = ({ file }) => {
|
|||
try {
|
||||
if (file.ownerID !== user.id) {
|
||||
// getting email from in-memory id-email map
|
||||
const email = idToMail.get(file.ownerID);
|
||||
const email = userIDToEmailMap.get(file.ownerID);
|
||||
if (!email) {
|
||||
logError(Error(), 'email not found in userIDToEmailMap');
|
||||
return;
|
||||
}
|
||||
const colorIndex =
|
||||
file.ownerID % theme.colors.avatarColors.length;
|
||||
const colorCode = darkThemeColors.avatarColors[colorIndex];
|
||||
setUserLetter(email?.charAt(0)?.toUpperCase());
|
||||
setUserLetter(email[0].toUpperCase());
|
||||
setColorCode(colorCode);
|
||||
} else if (file.ownerID === user.id) {
|
||||
const uploaderName = file.pubMagicMetadata.data.uploaderName;
|
||||
setUserLetter(uploaderName?.charAt(0)?.toUpperCase());
|
||||
if (!uploaderName) {
|
||||
logError(
|
||||
Error(),
|
||||
'uploaderName not found in file.pubMagicMetadata.data'
|
||||
);
|
||||
return;
|
||||
}
|
||||
setUserLetter(uploaderName[0].toUpperCase());
|
||||
setColorCode(PUBLIC_COLLECTED_FILES_AVATAR_COLOR_CODE);
|
||||
}
|
||||
} catch (err) {
|
||||
|
@ -52,6 +63,10 @@ const Avatar: React.FC<AvatarProps> = ({ file }) => {
|
|||
}
|
||||
}, []);
|
||||
|
||||
if (!colorCode || !userLetter) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AvatarBase size={18} colorCode={colorCode}>
|
||||
{userLetter}
|
||||
|
|
|
@ -375,7 +375,7 @@ export default function PreviewCard(props: IProps) {
|
|||
(file.ownerID === user.id &&
|
||||
file.pubMagicMetadata?.data?.uploaderName)) && (
|
||||
<AvatarOverlay>
|
||||
<Avatar file={file}></Avatar>
|
||||
<Avatar file={file} />
|
||||
</AvatarOverlay>
|
||||
)}
|
||||
|
||||
|
|
Loading…
Reference in a new issue