Handle error in doUserDeleteAccount and remove async-ness

static/app-strings.json

@@ -2943,7 +2943,7 @@
   "Delete Account" : "Delete Account",
   "Request account deletion" : "Request account deletion",
   "Send account deletion request to Odysee" : "Send account deletion request to Odysee",
-  "Sorry, there may have been an issue when wiping the account. Please check back in few minutes, and try again if content/credits still exist. If the issue persists please contact help@odysee.com for possible next steps." : "Sorry, there may have been an issue when wiping the account. Please check back in few minutes, and try again if content/credits still exist. If the issue persists please contact help@odysee.com for possible next steps.",
+  "Sorry, there may have been an issue when wiping the account. Please check back in few minutes, and try again. If the issue persists please contact help@odysee.com for possible next steps." : "Sorry, there may have been an issue when wiping the account. Please check back in few minutes, and try again. If the issue persists please contact help@odysee.com for possible next steps.",
   "Account has already been queued for deletion." : "Account has already been queued for deletion.",
   "Account has already been queued for deletion. If you still have content/credits on the account which you want removed, click \"Remove content\"." : "Account has already been queued for deletion. If you still have content/credits on the account which you want removed, click \"Remove content\".",
   "Remove all content from the account and send a deletion request to Odysee. Removing the content is a permanent action and can't be undone." : "Remove all content from the account and send a deletion request to Odysee. Removing the content is a permanent action and can't be undone.",

ui/constants/action_types.js

@@ -301,6 +301,7 @@ export const AUTHENTICATION_FAILURE = 'AUTHENTICATION_FAILURE';
 export const USER_DELETION_STARTED = 'USER_DELETION_STARTED';
 export const USER_DELETION_SUCCESS = 'USER_DELETION_SUCCESS';
 export const USER_DELETION_FAILURE = 'USER_DELETION_FAILURE';
+export const USER_DELETION_CLEAR = 'USER_DELETION_CLEAR';
 export const USER_EMAIL_DECLINE = 'USER_EMAIL_DECLINE';
 export const USER_EMAIL_NEW_STARTED = 'USER_EMAIL_NEW_STARTED';
 export const USER_EMAIL_NEW_SUCCESS = 'USER_EMAIL_NEW_SUCCESS';

ui/modal/modalRemoveAccount/index.js

@@ -1,14 +1,15 @@
 import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
 import { doSpendEverything, doSendCreditsToOdysee } from 'redux/actions/wallet';
-import { doUserFetch, doUserDeleteAccount } from 'redux/actions/user';
+import { doUserFetch, doUserDeleteAccount, doClearUserDeletionSuccess } from 'redux/actions/user';
 import { selectTotalBalance } from 'redux/selectors/wallet';
-import { selectUser } from 'redux/selectors/user';
+import { selectUser, selectUserDeletionSuccess } from 'redux/selectors/user';
 import ModalRemoveAccount from './view';
 
 const select = (state) => ({
-  totalBalance: selectTotalBalance(state),
   user: selectUser(state),
+  totalBalance: selectTotalBalance(state),
+  userDeletionSuccess: selectUserDeletionSuccess(state),
 });
 
 const perform = {
@@ -17,6 +18,7 @@ const perform = {
   doSpendEverything,
   doUserDeleteAccount,
   doSendCreditsToOdysee,
+  doClearUserDeletionSuccess,
 };
 
 export default connect(select, perform)(ModalRemoveAccount);

ui/modal/modalRemoveAccount/view.jsx

@@ -10,34 +10,49 @@ import { FormField } from 'component/common/form';
 type Props = {
   user: User,
   totalBalance: number,
+  userDeletionSuccess: boolean,
   // --- perform ---
   doHideModal: () => void,
   doUserFetch: () => void,
   doSpendEverything: () => Promise<any>,
   doUserDeleteAccount: () => void,
   doSendCreditsToOdysee: () => Promise<any>,
+  doClearUserDeletionSuccess: () => void,
 };
 
 export default function ModalRemoveAccount(props: Props) {
-  const { user, totalBalance, doHideModal, doUserFetch, doSpendEverything, doUserDeleteAccount, doSendCreditsToOdysee } = props;
+  const { user, totalBalance, userDeletionSuccess, doHideModal, doUserFetch, doSpendEverything, doUserDeleteAccount, doSendCreditsToOdysee, doClearUserDeletionSuccess } = props;
 
   const [isAlreadyPendingDeletion] = React.useState(user.pending_deletion);
   const [buttonClicked, setButtonClicked] = React.useState(false);
   const [isBusy, setIsBusy] = React.useState(false);
   const [isForfeitChecked, setIsForfeitChecked] = React.useState(false);
   const [errorOccurred, setErrorOccurred] = React.useState(false);
 
-  const isWalletEmpty = totalBalance <= 0.001;
+  const isWalletEmpty = totalBalance <= 0.0001;
   const showButton = !buttonClicked && (!isAlreadyPendingDeletion || !isWalletEmpty);
 
-  function forfeitCredits() {
-    setIsBusy(true);
+  React.useEffect(() => {
+    if (userDeletionSuccess === false) {
+      setErrorOccurred(true);
+    }
+  }, [userDeletionSuccess]);
+
+  function sendDeletionRequest() {
+    if (!isAlreadyPendingDeletion) {
+      doUserDeleteAccount();
+      setTimeout(doUserFetch, 1000);
+    }
+    setIsBusy(false);
+  }
+
+  function forfeitCreditsAndSendDeletionRequest() {
     doSpendEverything()
       .then(() => {
         setTimeout(() => {
           doSendCreditsToOdysee()
             .then(() => {
-              setIsBusy(false);
+              sendDeletionRequest();
             })
             .catch(() => {
               setErrorOccurred(true);
@@ -52,23 +67,27 @@ export default function ModalRemoveAccount(props: Props) {
   }
 
   function handleOnClick() {
+    setIsBusy(true);
     if (!isWalletEmpty) {
-      forfeitCredits();
-    }
-    if (!isAlreadyPendingDeletion) {
-      doUserDeleteAccount();
-      setTimeout(doUserFetch, 1000);
+      forfeitCreditsAndSendDeletionRequest();
+    } else {
+      sendDeletionRequest();
     }
     setButtonClicked(true);
   }
 
+  function handleOnClose() {
+    doClearUserDeletionSuccess();
+    doHideModal();
+  }
+
   return (
     <Modal isOpen type="custom" width="wide">
       <Card
         title={__('Delete account')}
         subtitle={isBusy ? ''
           : errorOccurred
-          ? __('Sorry, there may have been an issue when wiping the account. Please check back in few minutes, and try again if content/credits still exist. If the issue persists please contact help@odysee.com for possible next steps.')
+          ? __('Sorry, there may have been an issue when wiping the account. Please check back in few minutes, and try again. If the issue persists please contact help@odysee.com for possible next steps.')
           : isAlreadyPendingDeletion && !buttonClicked && isWalletEmpty
           ? __('Account has already been queued for deletion.')
           : isAlreadyPendingDeletion && !buttonClicked && !isWalletEmpty
@@ -105,7 +124,7 @@ export default function ModalRemoveAccount(props: Props) {
               )}
 
               {!(isBusy) && (
-                <Button button="link" label={__('Close')} disabled={isBusy} onClick={doHideModal} />
+                <Button button="link" label={__('Close')} disabled={isBusy} onClick={handleOnClose} />
               )}
             </div>
           </>

ui/redux/actions/user.js

@@ -584,6 +584,11 @@ export function doUserEmailVerifyFailure(error) {
   };
 }
 
+export function doClearUserDeletionSuccess() {
+  return {
+    type: ACTIONS.USER_DELETION_CLEAR,
+  };
+}
 export function doUserEmailVerify(verificationToken, recaptcha) {
   return (dispatch, getState) => {
     const email = selectEmailToVerify(getState());

ui/redux/reducers/user.js

@@ -392,6 +392,12 @@ reducers[ACTIONS.USER_DELETION_FAILURE] = (state) =>
     userDeletionSuccess: false,
   });
 
+reducers[ACTIONS.USER_DELETION_CLEAR] = (state) =>
+  Object.assign({}, state, {
+    userDeletionPending: false,
+    userDeletionSuccess: defaultState.userDeletionSuccess,
+  });
+
 reducers[ACTIONS.USER_FETCH_LOCALE_DONE] = (state, action) =>
   Object.assign({}, state, {
     locale: action.data,

ui/redux/selectors/user.js

@@ -119,6 +119,8 @@ export const selectYouTubeImportVideosComplete = createSelector(selectState, (st
   }
 });
 
+export const selectUserDeletionSuccess = (state) => selectState(state).userDeletionSuccess;
+
 export const makeSelectUserPropForProp = (prop) => createSelector(selectUser, (user) => (user ? user[prop] : null));
 
 export const selectUserLocale = (state) => selectState(state).locale;