From a40961a2564738ca9f14d9e50e0d1d5c6ab7ec54 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 19 Oct 2020 00:53:19 +0300
Subject: feat: Add avatar crop

---
 src/containers/Profile/ProfileInfo.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'src/containers/Profile')

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,11 +117,20 @@ 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} />
@@ -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>
-- 
cgit v1.2.3


From 5eba5c1ffcdaee9a81e965f0570b00dd26bb38c6 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Thu, 29 Oct 2020 21:28:52 +0300
Subject: Wait till modal slide right on close

---
 src/containers/Profile/ProfileInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/containers/Profile')

diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index 763a077..b71e6db 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -129,7 +129,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        avatarToCrop && <AvatarCrop avatarToCrop={avatarToCrop} callback={handleUpdateAvatar}/>
+        avatarToCrop && <AvatarCrop avatarToCrop={avatarToCrop} setAvatarToCrop={setAvatarToCrop} callback={handleUpdateAvatar}/>
       }
       {
         !userInfo
-- 
cgit v1.2.3


From 3fef7795681c405322aed6e1c876948ebc2cc932 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 29 Oct 2020 23:53:13 +0300
Subject: refactor: separate ImageCropAreaSelect component

---
 src/containers/Profile/ProfileInfo.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

(limited to 'src/containers/Profile')

diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index b71e6db..4c9f17e 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -11,7 +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";
+import AvatarCropModal from '../AvatarCropModal/AvatarCropModal';
 
 interface PropTypes {
   savedPolls: number;
@@ -112,13 +112,10 @@ const ProfileInfo: React.FC<PropTypes> = ({
   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));
-      setAvatarToCrop('');
-    }
+    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) => {
@@ -129,7 +126,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        avatarToCrop && <AvatarCrop avatarToCrop={avatarToCrop} setAvatarToCrop={setAvatarToCrop} callback={handleUpdateAvatar}/>
+        avatarToCrop && <AvatarCropModal avatar={avatarToCrop} callback={handleUpdateAvatar}/>
       }
       {
         !userInfo
-- 
cgit v1.2.3