refactored Avatar component

This commit is contained in:
Abhinav 2023-06-27 16:10:30 +05:30
parent ea3748e71b
commit 69a08eb994
2 changed files with 20 additions and 5 deletions

View file

@ -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}

View file

@ -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>
)}