From 0abfd51fea30e2f305648e63df2cab8ba872c963 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 22 Aug 2020 14:32:26 +0300
Subject: feat: display avatar upload progress
---
src/containers/Profile/ProfileInfo.tsx | 64 ++++++++++++++++++++--------------
1 file changed, 37 insertions(+), 27 deletions(-)
(limited to 'src/containers/Profile/ProfileInfo.tsx')
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index fbd6272..e2fb0a9 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback } from 'react';
-import { Badge, Typography } from '@material-ui/core/';
+import React, { useState, useCallback } from 'react';
+import { Badge, Typography, CircularProgress } from '@material-ui/core/';
+import { CameraAlt, CheckCircleOutline } from '@material-ui/icons/';
import { makeStyles } from '@material-ui/core/styles';
-import { User } from 'which-types';
-import CameraAltIcon from '@material-ui/icons/CameraAlt';
-import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
import Skeleton from '@material-ui/lab/Skeleton';
+import { User } from 'which-types';
+
import Highlight from './Highlight';
import FileUpload from '../../components/FileUpload/FileUpload';
import Avatar from '../../components/Avatar/Avatar';
@@ -12,7 +12,6 @@ import { patch } from '../../requests';
import { useAuth } from '../../hooks/useAuth';
import uploadFileToS3 from '../../utils/uploadFileToS3';
-
interface PropTypes {
savedPolls: number;
totalVotes: number;
@@ -67,7 +66,9 @@ const useStyles = makeStyles(theme => ({
},
avatarContainer: {
position: 'relative',
- textAlign: 'center'
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
},
menuNumber: {
fontWeight: 800,
@@ -79,8 +80,11 @@ const useStyles = makeStyles(theme => ({
skeleton: {
margin: '10px auto',
borderRadius: 2
+ },
+ progress: {
+ position: 'absolute',
+ color: 'white'
}
-
}));
@@ -89,14 +93,16 @@ const ProfileInfo: React.FC<PropTypes> = ({
}) => {
const classes = useStyles();
const { user } = useAuth();
+ const [progress, setProgress] = useState<number>(0);
const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
const handleUpdateAvatar = useCallback(async (file: File) => {
if (user) {
- uploadFileToS3(file, 1)
+ uploadFileToS3(file, 0.8, setProgress)
.then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl }))
- .then(response => setUserInfo(response.data));
+ .then(response => setUserInfo(response.data))
+ .then(() => setProgress(0));
}
}, [user, setUserInfo]);
@@ -107,24 +113,28 @@ const ProfileInfo: React.FC<PropTypes> = ({
? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
: userInfo?._id === user?._id
? (
- <FileUpload callback={handleUpdateAvatar}>
- <div className={classes.avatarContainer}>
- <Badge
- overlap="circle"
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right'
- }}
- badgeContent={(
+ <div className={classes.avatarContainer}>
+ <Badge
+ overlap="circle"
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'right'
+ }}
+ className={classes.avatarContainer}
+ badgeContent={(
+ <FileUpload callback={handleUpdateAvatar}>
<div className={classes.badge}>
- <CameraAltIcon />
+ <CameraAlt />
</div>
- )}
- >
- <Avatar className={classes.avatar} user={userInfo} />
- </Badge>
- </div>
- </FileUpload>
+ </FileUpload>
+ )}
+ >
+ <Avatar className={classes.avatar} user={userInfo} />
+ {progress > 0 && (
+ <CircularProgress variant="static" value={progress} className={classes.progress} />
+ )}
+ </Badge>
+ </div>
)
: <Avatar className={classes.avatar} user={userInfo} />
}
@@ -134,7 +144,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
: (
<Typography variant="h5" className={classes.name}>
{userInfo?.username}
- {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
+ {userInfo?.verified && <CheckCircleOutline className={classes.verified} color="primary" />}
</Typography>
)
}
--
cgit v1.2.3