From 61c1d7cad4224e33dc2a29a103c6df1ff08e1d55 Mon Sep 17 00:00:00 2001 From: miko <34790748+keikari@users.noreply.github.com> Date: Mon, 5 Feb 2024 14:56:33 +0200 Subject: [PATCH] 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 --- ui/modal/modalRemoveAccount/index.js | 3 ++- ui/modal/modalRemoveAccount/view.jsx | 17 +++++++++++++---- ui/modal/modalRevokeClaim/index.js | 2 ++ ui/modal/modalRevokeClaim/view.jsx | 19 ++++++++++++------- ui/redux/selectors/user.js | 2 +- 5 files changed, 30 insertions(+), 13 deletions(-) diff --git a/ui/modal/modalRemoveAccount/index.js b/ui/modal/modalRemoveAccount/index.js index 7e951e42e7..7a086a7c02 100644 --- 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 index 8ebb663a98..261c221658 100644 --- 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) {

)} + {showButton && hasYouTubeChannels && ( +
+

{__('YOUTUBE SYNCED CHANNELS!')}

+

+ {__( + "If something went wrong with the sync, please don't try to fix it by deleting the channel. Instead reach out to us at help@odysee.com to get it fixed. Once deleted we may not be able to sync it again or fix it." + )} +

+
+ )}
{isBusy || isLoadingAccountInfo ? ( diff --git a/ui/modal/modalRevokeClaim/index.js b/ui/modal/modalRevokeClaim/index.js index ef2534be84..09f8af38cb 100644 --- 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 index d2fc216a84..fb036a3780 100644 --- 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) {

{__('This will permanently remove your channel. Content published under this channel will be orphaned.')}

-

{__('YOUTUBE SYNCED CHANNELS!')}

-

- {__( - "If something went wrong with the sync, please don't try to fix it by deleting the channel. Instead reach out to us at help@odysee.com to get it fixed. Once deleted we may not be able to sync it again or fix it." - )} -

+ {hasYouTubeChannels && ( +
+

{__('YOUTUBE SYNCED CHANNELS!')}

+

+ {__( + "If something went wrong with the sync, please don't try to fix it by deleting the channel. Instead reach out to us at help@odysee.com to get it fixed. Once deleted we may not be able to sync it again or fix it." + )} +

+
+ )}

{__('Are you sure? Type %name% to confirm that you wish to remove the channel.', { name })}

setChannelName(e.target.value)} /> diff --git a/ui/redux/selectors/user.js b/ui/redux/selectors/user.js index 619b1ce04b..85eed77c8d 100644 --- 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);