From a3b3a204b03bab9d119c32b3fc54cab219cecf42 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 15 Oct 2019 17:23:51 -0400 Subject: [PATCH] first pass at sync for everyone --- package.json | 2 +- src/ui/component/app/index.js | 6 +- src/ui/component/app/view.jsx | 31 +++++++-- src/ui/component/syncToggle/index.js | 20 ++++++ src/ui/component/syncToggle/view.jsx | 36 +++++++++++ src/ui/component/userEmailNew/index.js | 2 - src/ui/component/userEmailNew/view.jsx | 87 +++++++++----------------- src/ui/page/settings/view.jsx | 6 +- src/ui/redux/actions/app.js | 73 +++++++++------------ src/ui/scss/component/_form-field.scss | 5 ++ src/ui/util/saved-passwords.js | 8 +++ yarn.lock | 4 +- 12 files changed, 164 insertions(+), 116 deletions(-) create mode 100644 src/ui/component/syncToggle/index.js create mode 100644 src/ui/component/syncToggle/view.jsx diff --git a/package.json b/package.json index bb60bc7cf..7fc753696 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "husky": "^0.14.3", "json-loader": "^0.5.4", "lbry-format": "https://github.com/lbryio/lbry-format.git", - "lbry-redux": "lbryio/lbry-redux#6edcf747e10919605b05b905214fe1d3286898e3", + "lbry-redux": "lbryio/lbry-redux#0090f195eb88f4620db7d038f7b01eaa76119836", "lbryinc": "lbryio/lbryinc#b8e1708ee4491db342c81576265e1b58f542bedb", "lint-staged": "^7.0.2", "localforage": "^1.7.1", diff --git a/src/ui/component/app/index.js b/src/ui/component/app/index.js index 8788fb428..31ee09b0b 100644 --- a/src/ui/component/app/index.js +++ b/src/ui/component/app/index.js @@ -5,7 +5,8 @@ import { selectUser, doRewardList, doFetchRewardedContent, doFetchAccessToken } import { doFetchTransactions, doFetchChannelListMine, selectBalance } from 'lbry-redux'; import { makeSelectClientSetting, selectThemePath } from 'redux/selectors/settings'; import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app'; -import { doDownloadUpgradeRequested, doSignIn } from 'redux/actions/app'; +import { doDownloadUpgradeRequested, doSignIn, doSyncWithPreferences } from 'redux/actions/app'; +import { doSetClientSetting } from 'redux/actions/settings'; import App from './view'; const select = state => ({ @@ -15,6 +16,7 @@ const select = state => ({ autoUpdateDownloaded: selectAutoUpdateDownloaded(state), isUpgradeAvailable: selectIsUpgradeAvailable(state), balance: selectBalance(state), + syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state), }); const perform = dispatch => ({ @@ -25,6 +27,8 @@ const perform = dispatch => ({ fetchChannelListMine: () => dispatch(doFetchChannelListMine()), signIn: () => dispatch(doSignIn()), requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()), + checkSync: () => dispatch(doSyncWithPreferences()), + setSyncEnabled: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_SYNC, value)), }); export default hot( diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx index b500adac7..892d053b7 100644 --- a/src/ui/component/app/view.jsx +++ b/src/ui/component/app/view.jsx @@ -19,6 +19,7 @@ export const MAIN_WRAPPER_CLASS = 'main-wrapper'; // @if TARGET='app' export const IS_MAC = process.platform === 'darwin'; // @endif +const SYNC_INTERVAL = 1000 * 60 * 5; // 5 minutes type Props = { alertError: (string | {}) => void, @@ -38,7 +39,9 @@ type Props = { onSignedIn: () => void, isUpgradeAvailable: boolean, autoUpdateDownloaded: boolean, - balance: ?number, + checkSync: () => void, + setSyncEnabled: boolean => void, + syncEnabled: boolean, }; function App(props: Props) { @@ -54,7 +57,9 @@ function App(props: Props) { autoUpdateDownloaded, isUpgradeAvailable, requestDownloadUpgrade, - balance, + syncEnabled, + checkSync, + setSyncEnabled, } = props; const appRef = useRef(); const isEnhancedLayout = useKonamiListener(); @@ -114,13 +119,27 @@ function App(props: Props) { // Keep this at the end to ensure initial setup effects are run first useEffect(() => { // Wait for balance to be populated on desktop so we know when we can begin syncing - // @syncwithbalancefixme - if (!hasSignedIn && hasVerifiedEmail && (IS_WEB || balance !== undefined)) { + if (!hasSignedIn && hasVerifiedEmail) { signIn(); - setHasSignedIn(true); } - }, [hasVerifiedEmail, signIn, balance, hasSignedIn]); + }, [hasVerifiedEmail, signIn, hasSignedIn]); + + useEffect(() => { + if (!hasVerifiedEmail && syncEnabled) { + setSyncEnabled(false); + } else if (hasVerifiedEmail && syncEnabled) { + checkSync(); + + let syncInterval = setInterval(() => { + checkSync(); + }, SYNC_INTERVAL); + + return () => { + clearInterval(syncInterval); + }; + } + }, [hasVerifiedEmail, syncEnabled, checkSync, setSyncEnabled]); if (!user) { return null; diff --git a/src/ui/component/syncToggle/index.js b/src/ui/component/syncToggle/index.js new file mode 100644 index 000000000..1f68361bd --- /dev/null +++ b/src/ui/component/syncToggle/index.js @@ -0,0 +1,20 @@ +import * as SETTINGS from 'constants/settings'; +import { connect } from 'react-redux'; +import { selectUserVerifiedEmail } from 'lbryinc'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import { doSetClientSetting } from 'redux/actions/settings'; +import SyncToggle from './view'; + +const select = state => ({ + syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state), + verifiedEmail: selectUserVerifiedEmail(state), +}); + +const perform = dispatch => ({ + setSyncEnabled: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_SYNC, value)), +}); + +export default connect( + select, + perform +)(SyncToggle); diff --git a/src/ui/component/syncToggle/view.jsx b/src/ui/component/syncToggle/view.jsx new file mode 100644 index 000000000..81ab10807 --- /dev/null +++ b/src/ui/component/syncToggle/view.jsx @@ -0,0 +1,36 @@ +// @flow +import React from 'react'; +import { FormField } from 'component/common/form'; +import Button from 'component/button'; + +type Props = { + setSyncEnabled: boolean => void, + syncEnabled: boolean, + verifiedEmail: ?string, +}; + +function SyncToggle(props: Props) { + const { setSyncEnabled, syncEnabled, verifiedEmail } = props; + + function handleChange() { + setSyncEnabled(!syncEnabled); + } + + return ( +
+ {!verifiedEmail ? ( +
+ ); +} + +export default SyncToggle; diff --git a/src/ui/component/userEmailNew/index.js b/src/ui/component/userEmailNew/index.js index 17530ee20..aef725484 100644 --- a/src/ui/component/userEmailNew/index.js +++ b/src/ui/component/userEmailNew/index.js @@ -1,6 +1,5 @@ import * as SETTINGS from 'constants/settings'; import { connect } from 'react-redux'; -import { selectBalance } from 'lbry-redux'; import { selectEmailNewIsPending, selectEmailNewErrorMessage, doUserEmailNew } from 'lbryinc'; import { doSetClientSetting } from 'redux/actions/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings'; @@ -10,7 +9,6 @@ const select = state => ({ isPending: selectEmailNewIsPending(state), errorMessage: selectEmailNewErrorMessage(state), syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state), - balance: selectBalance(state), }); const perform = dispatch => ({ diff --git a/src/ui/component/userEmailNew/view.jsx b/src/ui/component/userEmailNew/view.jsx index d964641a9..d3eeed056 100644 --- a/src/ui/component/userEmailNew/view.jsx +++ b/src/ui/component/userEmailNew/view.jsx @@ -17,12 +17,13 @@ type Props = { }; function UserEmailNew(props: Props) { - const { errorMessage, isPending, addUserEmail, syncEnabled, setSync, balance } = props; + const { errorMessage, isPending, addUserEmail, setSync } = props; const [newEmail, setEmail] = useState(''); - const [ageConfirmation, setAgeConfirmation] = useState(true); + const [formSyncEnabled, setFormSyncEnabled] = useState(true); const valid = newEmail.match(EMAIL_REGEX); function handleSubmit() { + setSync(formSyncEnabled); addUserEmail(newEmail); analytics.emailProvidedEvent(); @@ -31,15 +32,8 @@ function UserEmailNew(props: Props) { // @endif } - React.useEffect(() => { - // Sync currently doesn't work for wallets with balances - if (syncEnabled && balance) { - setSync(false); - } - }, [balance, syncEnabled, setSync]); - return ( -
+

{__('Welcome To LBRY')}

{__('Create a new account or sign in.')}

@@ -54,60 +48,39 @@ function UserEmailNew(props: Props) { error={errorMessage} onChange={e => setEmail(e.target.value)} /> -
+ + {!IS_WEB && ( - ), - }} - > - I am over the age of 13 and agree to the %terms%. - + + {__('Sync balance and preferences across devices.')}{' '} +
+ )} +
+
-
+ ); } diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx index 2400be8d4..a58c91c52 100644 --- a/src/ui/page/settings/view.jsx +++ b/src/ui/page/settings/view.jsx @@ -11,6 +11,7 @@ import I18nMessage from 'component/i18nMessage'; import Page from 'component/page'; import SettingLanguage from 'component/settingLanguage'; import FileSelector from 'component/common/file-selector'; +import SyncToggle from 'component/syncToggle'; import Card from 'component/common/card'; import { getSavedPassword } from 'util/saved-passwords'; @@ -229,6 +230,7 @@ class SettingsPage extends React.PureComponent { ) : (
} /> + } /> {/* @if TARGET='app' */} { + {__( 'This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.' )} -

+ } actions={