Improve sync deletion warnings (#3054)

* Make `selectHasYoutubeChannels` return `false` if account doesn't have YouTube channels * Add warning about synced channels do deletion modal * On channel deleiton, only show warning about sync deletion for accounts that have any synced channels. And make it look bit better * Put back accidentally deleted string --------- Co-authored-by: miko <[email protected]>
OdyseeTeam · Feb 5, 2024 · 61c1d7c · 61c1d7c
1 parent 5e054cf
commit 61c1d7c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/ui/modal/modalRemoveAccount/index.js b/ui/modal/modalRemoveAccount/index.js
@@ -15,13 +15,14 @@ import {
   selectIsFetchingAccountsSuccess,
 } from 'redux/selectors/wallet';
 import { doFetchAccountList } from 'redux/actions/wallet';
-import { selectUser } from 'redux/selectors/user';
+import { selectUser, selectHasYoutubeChannels } from 'redux/selectors/user';
 import { doFetchChannelListMine, doFetchClaimListMine } from 'redux/actions/claims';
 import { doRemoveAccountSequence } from './thunk';
 import ModalRemoveAccount from './view';
 
 const select = (state) => ({
   isPendingDeletion: selectUser(state)?.pending_deletion,
+  hasYouTubeChannels: selectHasYoutubeChannels(state),
   totalBalance: selectTotalBalance(state),
   totalClaimsCount: selectMyClaimsPageItemCount(state),
   channelUrls: selectMyChannelClaimUrls(state),

diff --git a/ui/modal/modalRemoveAccount/view.jsx b/ui/modal/modalRemoveAccount/view.jsx
@@ -9,6 +9,7 @@ import { FormField } from 'component/common/form';
 
 type Props = {
   isPendingDeletion: ?boolean,
+  hasYouTubeChannels: boolean,
   totalBalance: number,
   totalClaimsCount: number,
   isFetchingChannels: boolean,
@@ -29,6 +30,7 @@ type Props = {
 export default function ModalRemoveAccount(props: Props) {
   const {
     isPendingDeletion,
+    hasYouTubeChannels,
     totalBalance,
     totalClaimsCount,
     isFetchingChannels,
@@ -55,10 +57,7 @@ export default function ModalRemoveAccount(props: Props) {
   const isLoadingAccountInfo = isFetchingChannels || isFetchingAccounts || isFetchingClaims;
   const isLoadingAccountInfoSuccess = isFetchingChannelsSuccess && isFetchingAccountsSuccess && isFetchingClaimsSuccess;
   const showButton =
-    !buttonClicked &&
-    (!isPendingDeletion || !isWalletEmpty) &&
-    isLoadingAccountInfoSuccess &&
-    !isLoadingAccountInfo;
+    !buttonClicked && (!isPendingDeletion || !isWalletEmpty) && isLoadingAccountInfoSuccess && !isLoadingAccountInfo;
 
   React.useEffect(() => {
     if (!isPendingDeletion || !isWalletEmpty) {
@@ -155,6 +154,16 @@ export default function ModalRemoveAccount(props: Props) {
                 </p>
               </div>
             )}
+            {showButton && hasYouTubeChannels && (
+              <div className="help--warning">
+                <p>{__('YOUTUBE SYNCED CHANNELS!')}</p>
+                <p>
+                  {__(
+                    "If something went wrong with the sync, please don't try to fix it by deleting the channel. Instead reach out to us at [email protected] to get it fixed. Once deleted we may not be able to sync it again or fix it."
+                  )}
+                </p>
+              </div>
+            )}
             <div className="section__actions">
               {isBusy || isLoadingAccountInfo ? (
                 <BusyIndicator message={isBusy ? __('Removing content...') : __('Loading account info...')} />

diff --git a/ui/modal/modalRevokeClaim/index.js b/ui/modal/modalRevokeClaim/index.js
@@ -2,11 +2,13 @@ import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
 import { doAbandonTxo, doAbandonClaim, doResolveUri } from 'redux/actions/claims';
 import { doToast } from 'redux/actions/notifications';
+import { selectHasYoutubeChannels } from 'redux/selectors/user';
 import ModalRevokeClaim from './view';
 import { selectTransactionItems } from 'redux/selectors/wallet';
 
 const select = (state) => ({
   transactionItems: selectTransactionItems(state),
+  hasYouTubeChannels: selectHasYoutubeChannels(state),
 });
 
 const perform = (dispatch) => ({

diff --git a/ui/modal/modalRevokeClaim/view.jsx b/ui/modal/modalRevokeClaim/view.jsx
@@ -13,13 +13,14 @@ type Props = {
   abandonTxo: (Txo, () => void) => void,
   abandonClaim: (Claim, ?() => void) => void,
   tx: Txo,
+  hasYouTubeChannels: boolean,
   claim: Claim,
   cb: () => void,
   doResolveUri: (string) => void,
 };
 
 export default function ModalRevokeClaim(props: Props) {
-  const { tx, claim, closeModal, abandonTxo, abandonClaim, cb, doResolveUri } = props;
+  const { tx, hasYouTubeChannels, claim, closeModal, abandonTxo, abandonClaim, cb, doResolveUri } = props;
   const { value_type: valueType, type, normalized_name: name, is_my_input: isSupport } = tx || claim;
   const [channelName, setChannelName] = useState('');
 
@@ -73,12 +74,16 @@ export default function ModalRevokeClaim(props: Props) {
           <p>
             {__('This will permanently remove your channel. Content published under this channel will be orphaned.')}
           </p>
-          <p>{__('YOUTUBE SYNCED CHANNELS!')}</p>
-          <p>
-            {__(
-              "If something went wrong with the sync, please don't try to fix it by deleting the channel. Instead reach out to us at [email protected] to get it fixed. Once deleted we may not be able to sync it again or fix it."
-            )}
-          </p>
+          {hasYouTubeChannels && (
+            <div className="help--warning">
+              <p>{__('YOUTUBE SYNCED CHANNELS!')}</p>
+              <p>
+                {__(
+                  "If something went wrong with the sync, please don't try to fix it by deleting the channel. Instead reach out to us at [email protected] to get it fixed. Once deleted we may not be able to sync it again or fix it."
+                )}
+              </p>
+            </div>
+          )}
           <p>{__('Are you sure? Type %name% to confirm that you wish to remove the channel.', { name })}</p>
           <FormField type={'text'} onChange={(e) => setChannelName(e.target.value)} />
         </React.Fragment>

diff --git a/ui/redux/selectors/user.js b/ui/redux/selectors/user.js
@@ -34,7 +34,7 @@ export const selectPhoneToVerify = createSelector(
 );
 
 export const selectYoutubeChannels = createSelector(selectUser, (user) => (user ? user.youtube_channels : null));
-export const selectHasYoutubeChannels = (state) => Number.isInteger(selectYoutubeChannels(state)?.length);
+export const selectHasYoutubeChannels = (state) => selectYoutubeChannels(state)?.length > 0;
 
 export const selectUserIsRewardApproved = createSelector(selectUser, (user) => user && user.is_reward_approved);