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')

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