diff options
Diffstat (limited to 'src/containers/Profile')
| -rw-r--r-- | src/containers/Profile/ProfileInfo.tsx | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index da952e9..763a077 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 AvatarCrop from "../../components/AvatarCrop/AvatarCrop"; interface PropTypes { savedPolls: number; @@ -107,7 +108,7 @@ 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) => { @@ -116,12 +117,21 @@ const ProfileInfo: React.FC<PropTypes> = ({ .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) .then(response => setUserInfo(response.data)) .then(() => setProgress(0)); + setAvatarToCrop(''); } }, [user, setUserInfo]); + const handleCropAvatar = useCallback( async(file: File) => { + const imageSrc = URL.createObjectURL(file); + setAvatarToCrop(imageSrc); + },[]); + return ( <div className={classes.root}> { + avatarToCrop && <AvatarCrop avatarToCrop={avatarToCrop} callback={handleUpdateAvatar}/> + } + { !userInfo ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} /> : userInfo?._id === user?._id @@ -135,7 +145,7 @@ const ProfileInfo: React.FC<PropTypes> = ({ }} className={classes.avatarContainer} badgeContent={( - <FileUpload callback={handleUpdateAvatar}> + <FileUpload callback={handleCropAvatar}> <div className={classes.badge}> <CameraAlt /> </div> |