diff --git a/package.json b/package.json index 06a2a3acf..cb41297cc 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "imagesloaded": "^4.1.4", "json-loader": "^0.5.4", "lbry-format": "https://github.com/lbryio/lbry-format.git", - "lbry-redux": "lbryio/lbry-redux#bd9f1b1b0d2a16eaa9c08483400c9c3085301962", + "lbry-redux": "lbryio/lbry-redux#74eba1f297cd1fe458033323776a9c8d891a4fa1", "lbryinc": "lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8", "lint-staged": "^7.0.2", "localforage": "^1.7.1", diff --git a/static/app-strings.json b/static/app-strings.json index 9a8be86fe..53f2d6ae4 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -931,5 +931,7 @@ "In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.": "In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.", "lbry.tv": "lbry.tv", "Your Blocked Channels": "Your Blocked Channels", - "Bid position must be a number.": "Bid position must be a number." + "Bid position must be a number.": "Bid position must be a number.", + "Copy": "Copy", + "Text copied": "Text copied" } diff --git a/ui/component/settingWalletServer/index.js b/ui/component/settingWalletServer/index.js index bc21225fd..54917e792 100644 --- a/ui/component/settingWalletServer/index.js +++ b/ui/component/settingWalletServer/index.js @@ -1,22 +1,26 @@ import { connect } from 'react-redux'; -import { DAEMON_SETTINGS } from 'lbry-redux'; -import { doSetDaemonSetting, doClearDaemonSetting, doGetDaemonStatus, doSaveCustomWalletServers, doFetchDaemonSettings } from 'redux/actions/settings'; -import { selectDaemonSettings, selectSavedWalletServers, selectDaemonStatus, selectHasWalletServerPrefs } from 'redux/selectors/settings'; +import { DAEMON_SETTINGS, selectIsWalletReconnecting } from 'lbry-redux'; +import { + doSetDaemonSetting, + doClearDaemonSetting, + doGetDaemonStatus, + doSaveCustomWalletServers, +} from 'redux/actions/settings'; +import { selectSavedWalletServers, selectDaemonStatus, selectHasWalletServerPrefs } from 'redux/selectors/settings'; import SettingWalletServer from './view'; const select = state => ({ - daemonSettings: selectDaemonSettings(state), daemonStatus: selectDaemonStatus(state), customWalletServers: selectSavedWalletServers(state), hasWalletServerPrefs: selectHasWalletServerPrefs(state), + walletReconnecting: selectIsWalletReconnecting(state), }); const perform = dispatch => ({ - setCustomWalletServers: (value) => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS, value)), + setCustomWalletServers: value => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS, value)), clearWalletServers: () => dispatch(doClearDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS)), getDaemonStatus: () => dispatch(doGetDaemonStatus()), - saveServerConfig: (servers) => dispatch(doSaveCustomWalletServers(servers)), - fetchDaemonSettings: () => dispatch(doFetchDaemonSettings()), + saveServerConfig: servers => dispatch(doSaveCustomWalletServers(servers)), }); export default connect( diff --git a/ui/component/settingWalletServer/view.jsx b/ui/component/settingWalletServer/view.jsx index 8b7cc5bec..43b30e7d2 100644 --- a/ui/component/settingWalletServer/view.jsx +++ b/ui/component/settingWalletServer/view.jsx @@ -1,16 +1,12 @@ // @flow -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { FormField } from 'component/common/form'; import Button from 'component/button'; import * as ICONS from 'constants/icons'; import ServerInputRow from './internal/inputRow'; -type DaemonSettings = { - lbryum_servers: Array, -}; - type DaemonStatus = { wallet: any, }; @@ -22,42 +18,60 @@ type StatusOfServer = { latency: number, }; -type ServerTuple = Array; // ['host', 'port'] +type ServerTuple = [string, string]; // ['host', 'port'] type ServerStatus = Array; type ServerConfig = Array; type Props = { - daemonSettings: DaemonSettings, getDaemonStatus: () => void, setCustomWalletServers: any => void, clearWalletServers: () => void, customWalletServers: ServerConfig, - saveServerConfig: (Array) => void, - fetchDaemonSettings: () => void, + saveServerConfig: (Array) => void, hasWalletServerPrefs: boolean, daemonStatus: DaemonStatus, + walletReconnecting: boolean, }; function SettingWalletServer(props: Props) { const { - daemonSettings, daemonStatus, - fetchDaemonSettings, setCustomWalletServers, getDaemonStatus, clearWalletServers, saveServerConfig, customWalletServers, hasWalletServerPrefs, + walletReconnecting, } = props; const [advancedMode, setAdvancedMode] = useState(false); - const activeWalletServers: ServerStatus = (daemonStatus && daemonStatus.wallet && daemonStatus.wallet.servers) || []; - const currentServerConfig: ServerConfig = daemonSettings && daemonSettings.lbryum_servers; - const serverConfig: ServerConfig = customWalletServers.length ? customWalletServers : currentServerConfig; + const walletStatus = daemonStatus && daemonStatus.wallet; + const activeWalletServers: ServerStatus = (walletStatus && walletStatus.servers) || []; + const availableServers = walletStatus && walletStatus.available_servers; + const serverConfig: ServerConfig = customWalletServers; const STATUS_INTERVAL = 5000; + // onUnmount, if there are no available servers, doClear() + // in order to replicate componentWillUnmount, the effect needs to get the value from a ref + const hasAvailableRef = useRef(); + useEffect( + () => () => { + hasAvailableRef.current = availableServers; + }, + [availableServers] + ); + + useEffect( + () => () => { + if (!hasAvailableRef.current) { + doClear(); + } + }, + [] + ); + useEffect(() => { if (hasWalletServerPrefs) { setAdvancedMode(true); @@ -71,10 +85,6 @@ function SettingWalletServer(props: Props) { return () => clearInterval(interval); }, []); - useEffect(() => { - fetchDaemonSettings(); - }, []); - function makeServerParam(configList) { return configList.reduce((acc, cur) => { acc.push(`${cur[0]}:${cur[1]}`); @@ -87,7 +97,7 @@ function SettingWalletServer(props: Props) { clearWalletServers(); } - function onAdd(serverTuple: Array) { + function onAdd(serverTuple: ServerTuple) { let newServerConfig = serverConfig.concat(); newServerConfig.push(serverTuple); updateServers(newServerConfig); @@ -124,7 +134,7 @@ function SettingWalletServer(props: Props) { checked={advancedMode} onChange={e => { setAdvancedMode(e.target.checked); - if (e.target.checked) { + if (e.target.checked && customWalletServers.length) { setCustomWalletServers(makeServerParam(customWalletServers)); } }} @@ -147,7 +157,9 @@ function SettingWalletServer(props: Props) {

{host}:{port}

- {available ? 'Connected' : 'Not connected'} + + {available ? 'Connected' : walletReconnecting ? 'Connecting...' : 'Not connected'} +