diff options
Diffstat (limited to 'src/containers/Profile/ProfileInfo.tsx')
| -rw-r--r-- | src/containers/Profile/ProfileInfo.tsx | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index da952e9..4c9f17e 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -11,6 +11,7 @@ import Avatar from '../../components/Avatar/Avatar'; import { patch } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; import uploadFileToS3 from '../../utils/uploadFileToS3'; +import AvatarCropModal from '../AvatarCropModal/AvatarCropModal'; interface PropTypes { savedPolls: number; @@ -107,21 +108,27 @@ const ProfileInfo: React.FC<PropTypes> = ({ const classes = useStyles(); const { user } = useAuth(); const [progress, setProgress] = useState<number>(0); - + const [avatarToCrop, setAvatarToCrop] = useState<string>(''); const dateSince = useMemo(() => formatDate(userInfo?.createdAt), [userInfo]); const handleUpdateAvatar = useCallback(async (file: File) => { - if (user) { - uploadFileToS3(file, 0.8, setProgress) - .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) - .then(response => setUserInfo(response.data)) - .then(() => setProgress(0)); - } + if (user) uploadFileToS3(file, 0.8, setProgress) + .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) + .then(response => setUserInfo(response.data)) + .then(() => setProgress(0)); }, [user, setUserInfo]); + const handleCropAvatar = useCallback( async(file: File) => { + const imageSrc = URL.createObjectURL(file); + setAvatarToCrop(imageSrc); + },[]); + return ( <div className={classes.root}> { + avatarToCrop && <AvatarCropModal avatar={avatarToCrop} callback={handleUpdateAvatar}/> + } + { !userInfo ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} /> : userInfo?._id === user?._id @@ -135,7 +142,7 @@ const ProfileInfo: React.FC<PropTypes> = ({ }} className={classes.avatarContainer} badgeContent={( - <FileUpload callback={handleUpdateAvatar}> + <FileUpload callback={handleCropAvatar}> <div className={classes.badge}> <CameraAlt /> </div> |