Pass avatarUploadUrl to upload components

CirclesUBI · Oct 27, 2023 · d44ef5d · d44ef5d
1 parent e1e638d
commit d44ef5d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/src/components/AvatarUploader.js b/src/components/AvatarUploader.js
@@ -39,6 +39,7 @@ const AvatarUploader = ({ onLoadingChange, showIndicatorRing }) => {
   return (
     <Fragment>
       <DialogAvatarUpload
+        avatarUploadUrl={avatarUploadUrl}
         handleClose={() => setIsOpenDialogUploadInfo(false)}
         isOpen={isOpenDialogUploadInfo}
         setAvatarUploadUrl={setAvatarUploadUrl}

diff --git a/src/components/DialogAvatarUpload.js b/src/components/DialogAvatarUpload.js
@@ -13,20 +13,22 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const DialogAvatarUpload = ({ isOpen, handleClose, setAvatarUploadUrl }) => {
+const DialogAvatarUpload = ({
+  avatarUploadUrl,
+  isOpen,
+  handleClose,
+  setAvatarUploadUrl,
+}) => {
   const classes = useStyles();
 
-  const setNewAvatarUrl = (updatedValue) => {
-    setAvatarUploadUrl(updatedValue);
-  };
-
   return (
     <DialogInfo
       className={classes.dialogUploadContainer}
       dialogContent={
         <DialogContentUpload
+          avatarUploadUrl={avatarUploadUrl}
           handleClose={handleClose}
-          setNewAvatarUrl={setNewAvatarUrl}
+          setNewAvatarUrl={setAvatarUploadUrl}
         />
       }
       fullWidth
@@ -38,6 +40,7 @@ const DialogAvatarUpload = ({ isOpen, handleClose, setAvatarUploadUrl }) => {
 };
 
 DialogAvatarUpload.propTypes = {
+  avatarUploadUrl: PropTypes.string,
   handleClose: PropTypes.func.isRequired,
   isOpen: PropTypes.bool,
   setAvatarUploadUrl: PropTypes.func.isRequired,

diff --git a/src/components/DialogContentUpload.js b/src/components/DialogContentUpload.js
@@ -3,7 +3,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import mime from 'mime/lite';
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import Button from '~/components/Button';
 import UploadFromCamera from '~/components/UploadFromCamera';
@@ -31,12 +31,15 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const DialogContentUpload = ({ handleClose, setNewAvatarUrl }) => {
+const DialogContentUpload = ({
+  avatarUploadUrl,
+  handleClose,
+  setNewAvatarUrl,
+}) => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
   const [isUploadFromCamera, setIsUploadFromCamera] = useState(false);
-  const avatarUploadUrl = useSelector((state) => state.avatarUploadUrl);
   const fileInputElem = useRef();
   const fileInputElemMob = useRef();
   const deviceDetect = getDeviceDetect();
@@ -110,6 +113,10 @@ const DialogContentUpload = ({ handleClose, setNewAvatarUrl }) => {
       });
       // before setting new URL - delete old one (replacing Upload)
       setNewAvatarUrl(result.data.url);
+      /* eslint-disable no-console */
+      console.log({ avatarUploadUrl });
+      /* eslint-enable no-console */
+
       handleClose();
     } catch (error) {
       logError(error);
@@ -206,6 +213,7 @@ const DialogContentUpload = ({ handleClose, setNewAvatarUrl }) => {
 };
 
 DialogContentUpload.propTypes = {
+  avatarUploadUrl: PropTypes.string,
   handleClose: PropTypes.func,
   setNewAvatarUrl: PropTypes.func.isRequired,
 };

diff --git a/src/views/EditProfile.js b/src/views/EditProfile.js
@@ -98,9 +98,16 @@ const EditProfile = () => {
   const isOrganization = safe?.isOrganization;
   const { username } = useUserdata(safe.currentAccount);
 
-  const handleCancel = () => {
+  const handleCancel = async () => {
     // TODO AVATAR Remove avatarUploadUrl and set state to null
     setIsClose(true);
+    /* eslint-disable no-console */
+    console.log('Edit profile cancel', { avatarUploadUrl });
+    /* eslint-enable no-console */
+    if (avatarUploadUrl !== '') {
+      await core.avatar.delete(avatarUploadUrl);
+      setAvatarUploadUrl('');
+    }
   };
 
   const onChangeUsernameHandler = (username) => {
@@ -126,7 +133,10 @@ const EditProfile = () => {
 
   async function editUserData() {
     const userResult = await core.user.resolve([safe.currentAccount]);
-    const oldAvatarUrl = userResult[0].avatarUrl;
+    /* eslint-disable no-console */
+    console.log('Edit profile cancel', { userResult });
+    /* eslint-enable no-console */
+    const oldAvatarUrl = userResult.data[0].avatarUrl;
 
     try {
       const updateResult = await core.user.update(
@@ -164,7 +174,14 @@ const EditProfile = () => {
       );
     }
     // After replacing an avatar the old avatar has to be deleted from AWS
-    if (avatarUploadUrl !== oldAvatarUrl) {
+    if (oldAvatarUrl && avatarUploadUrl !== oldAvatarUrl) {
+      /* eslint-disable no-console */
+      console.log(
+        'Edit profile old avatar',
+        { oldAvatarUrl },
+        typeof avatarUploadUrl,
+      );
+      /* eslint-enable no-console */
       try {
         await core.avatar.delete({ url: oldAvatarUrl });
       } catch (error) {
@@ -264,6 +281,7 @@ const EditProfile = () => {
             onConfirm={() => setIsOpenDialogCancelInfo(false)}
           />
           <DialogAvatarUpload
+            avatarUploadUrl={avatarUploadUrl}
             handleClose={() => setIsOpenDialogUploadInfo(false)}
             isOpen={isOpenDialogUploadInfo}
             setAvatarUploadUrl={setAvatarUploadUrl}

diff --git a/src/views/Onboarding.js b/src/views/Onboarding.js
@@ -109,8 +109,8 @@ const Onboarding = () => {
   const dispatch = useDispatch();
 
   const steps = [
-    //OnboardingStepEmail,
-    //OnboardingStepUsername,
+    OnboardingStepEmail,
+    OnboardingStepUsername,
     OnboardingStepAvatar,
     OnboardingStepSecureWallet,
     OnboardingStepSeedPhrase,