LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

review changes

Browse source
This commit is contained in:
jessop 2019-12-12 15:18:13 -05:00 committed by Sean Yesmunt
parent f197236466
commit 3c739719b4
15 changed files with 161 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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#7d2e8ba1707100393975897a70a28a63b288bc47",
"lbry-redux": "lbryio/lbry-redux#341d60661468b654b9baf5b96ca4a08ee202f0f2",
"lbryinc": "lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8",
"lint-staged": "^7.0.2",
"localforage": "^1.7.1",

6
static/app-strings.json
View file

@ -935,5 +935,9 @@
"%numberOfMonthsSincePublish% months ago": "%numberOfMonthsSincePublish% months ago",
"%numberOfDaysSincePublish% months ago": "%numberOfDaysSincePublish% months ago",
"%numberOfDaysSincePublish% days ago": "%numberOfDaysSincePublish% days ago",
"The wallet server took a bit too long. Resetting defaults just in case. Shutdown (Cmd/Ctrl+Q) LBRY and restart if this continues.": "The wallet server took a bit too long. Resetting defaults just in case. Shutdown (Cmd/Ctrl+Q) LBRY and restart if this continues."
"The wallet server took a bit too long. Resetting defaults just in case. Shutdown (Cmd/Ctrl+Q) LBRY and restart if this continues.": "The wallet server took a bit too long. Resetting defaults just in case. Shutdown (Cmd/Ctrl+Q) LBRY and restart if this continues.",
"Provide a description and link to your license": "Provide a description and link to your license",
"Walletserver preference": "Walletserver preference",
"Wallet servers": "Wallet servers",
"lbry.tv": "lbry.tv"
}

13
ui/component/settingWalletServer/index.js
View file

@ -1,20 +1,21 @@
import { connect } from 'react-redux';
import { DAEMON_SETTINGS } from 'lbry-redux';
import { doSetDaemonSetting, doClearDaemonSetting, doGetDaemonStatus, doCacheCustomWalletServers, doFetchDaemonSettings } from 'redux/actions/settings';
import { selectDaemonSettings, selectCachedWalletServers, makeSelectSharedPrefsForKey } from 'redux/selectors/settings';
import { doSetDaemonSetting, doClearDaemonSetting, doGetDaemonStatus, doSaveCustomWalletServers, doFetchDaemonSettings } from 'redux/actions/settings';
import { selectDaemonSettings, selectSavedWalletServers, selectDaemonStatus, selectHasWalletServerPrefs } from 'redux/selectors/settings';
import SettingWalletServer from './view';
const select = state => ({
daemonSettings: selectDaemonSettings(state),
customServers: selectCachedWalletServers(state),
serverPrefs: makeSelectSharedPrefsForKey(DAEMON_SETTINGS.LBRYUM_SERVERS)(state),
daemonStatus: selectDaemonStatus(state),
customWalletServers: selectSavedWalletServers(state),
hasWalletServerPrefs: selectHasWalletServerPrefs(state),
});
const perform = dispatch => ({
setWalletServers: (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()),
saveServers: (servers) => dispatch(doCacheCustomWalletServers(servers)),
saveServerConfig: (servers) => dispatch(doSaveCustomWalletServers(servers)),
fetchDaemonSettings: () => dispatch(doFetchDaemonSettings()),
});

35
ui/component/settingWalletServer/internal/displayRow.jsx
View file

@ -1,35 +0,0 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import Button from 'component/button';
import Icon from 'component/common/icon';
type Props = {
host: string,
port: string,
available: boolean,
index: number,
remove: number => void,
};
function ServerDisplayRow(props: Props) {
const { host, port, available, index, remove } = props;
return (
<tr>
<td className="table__item--actionable">
{host}
</td>
<td className="table__item--actionable">
{port}
</td>
<td>
{available && <Icon icon={ICONS.SUBSCRIBE} />}
</td>
<td>
<Button button={'link'} icon={ICONS.REMOVE} onClick={() => remove(index)} />
</td>
</tr>
);
}
export default ServerDisplayRow;

23
ui/component/settingWalletServer/internal/inputRow.jsx
View file

@ -8,19 +8,20 @@ type Props = {
update: (string) => void,
};
const VALID_IPADDRESS_REGEX = new RegExp('^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\\.)){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$');
const VALID_HOSTNAME_REGEX = new RegExp('^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])(\\.))+([A-Za-z]|[A-Za-z][A-Za-z]*[A-Za-z])$');
const VALID_PORT_REGEX = new RegExp('^([0-9]){1,5}$');
function ServerInputRow(props: Props) {
const { update } = props;
const ValidIpAddressRegex = new RegExp('^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\\.)){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$');
const ValidHostnameRegex = new RegExp('^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])(\\.))+([A-Za-z]|[A-Za-z][A-Za-z]*[A-Za-z])$');
const ValidPortRegex = new RegExp('^([0-9]){1,5}$');
const [hostString, setHostString] = useState('');
const [portString, setPortString] = useState('');
const [valid, setValid] = useState(false);
const [validServerString, setValidServerString] = useState(false);
useEffect(() => {
setValid((ValidIpAddressRegex.test(hostString) || ValidHostnameRegex.test(hostString)) && ValidPortRegex.test(portString));
}, [hostString, portString, valid, setValid]);
setValidServerString((VALID_IPADDRESS_REGEX.test(hostString) || VALID_HOSTNAME_REGEX.test(hostString)) && VALID_PORT_REGEX.test(portString));
}, [hostString, portString, validServerString, setValidServerString]);
function onClick() {
update([hostString, portString]);
@ -30,15 +31,15 @@ function ServerInputRow(props: Props) {
return (
<tr>
<td> {/* host */}
<FormField type="text" value={hostString} onChange={e => setHostString(e.target.value)}/>
<td>
<FormField type="text" value={hostString} onChange={e => setHostString(e.target.value)} />
</td>
<td> {/* port */}
<FormField type="text" value={portString} onChange={e => setPortString(e.target.value)}/>
<td>
<FormField type="text" value={portString} onChange={e => setPortString(e.target.value)} />
</td>
<td />
<td>
<Button button={'link'} icon={ICONS.ADD} disabled={!valid} onClick={onClick}/>
<Button button={'link'} icon={ICONS.ADD} disabled={!validServerString} onClick={onClick} />
</td>
</tr>
);

117
ui/component/settingWalletServer/view.jsx
View file

@ -2,11 +2,18 @@
import React, { useState, useEffect } from 'react';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import * as ICONS from 'constants/icons';
import Icon from 'component/common/icon';
import ServerInputRow from './internal/inputRow';
import ServerDisplayRow from './internal/displayRow';
type DaemonSettings = {
lbryum_servers: Array<>
lbryum_servers: Array<>,
};
type DaemonStatus = {
wallet: any,
};
type StatusOfServer = {
@ -14,71 +21,69 @@ type StatusOfServer = {
port: string,
availability: boolean,
latency: number,
}
};
type ServerInConfig = Array<string> // ['host', 'port']
type ServerTuple = Array<string>; // ['host', 'port']
type DisplayOfServer = {
host: string,
port: string,
availability: boolean,
}
};
type ServerStatus = Array<StatusOfServer>
type ServerConfig = Array<ServerInConfig>
type DisplayList = Array<DisplayOfServer>
type ServerStatus = Array<StatusOfServer>;
type ServerConfig = Array<ServerTuple>;
type DisplayList = Array<DisplayOfServer>;
type Props = {
daemonSettings: DaemonSettings,
getDaemonStatus: () => void,
setWalletServers: any => void,
setCustomWalletServers: any => void,
clearWalletServers: () => void,
customServers: ServerConfig,
saveServers: string => void,
customWalletServers: ServerConfig,
saveServerConfig: string => void,
fetchDaemonSettings: () => void,
serverPrefs: ServerConfig,
hasWalletServerPrefs: boolean,
daemonStatus: DaemonStatus,
};
function SettingWalletServer(props: Props) {
const {
daemonSettings,
daemonStatus,
fetchDaemonSettings,
setWalletServers,
setCustomWalletServers,
getDaemonStatus,
clearWalletServers,
saveServers,
customServers,
serverPrefs,
saveServerConfig,
customWalletServers,
hasWalletServerPrefs,
} = props;
const [custom, setCustom] = useState(false);
const [status, setStatus] = useState([]);
const serversInConfig: ServerConfig = daemonSettings && daemonSettings.lbryum_servers;
const servers = customServers.length ? customServers : serversInConfig;
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 STATUS_INTERVAL = 5000;
console.log(hasWalletServerPrefs)
useEffect(() => {
if (serverPrefs && serverPrefs.length) {
setCustom(true);
if (hasWalletServerPrefs) {
setAdvancedMode(true);
}
}, []);
// TODO: do this globally to have status updated for the app
useEffect(() => {
const interval = setInterval(() => {
getDaemonStatus()
.then(s => {
if (s && s.wallet && s.wallet.servers) {
setStatus(s.wallet.servers);
}
});
getDaemonStatus();
}, STATUS_INTERVAL);
return () => clearInterval(interval);
}, []);
useEffect(() => {
fetchDaemonSettings();
}, [custom]);
}, []);
function makeDisplayList(l) {
const displayList = [];
@ -87,8 +92,7 @@ function SettingWalletServer(props: Props) {
host: entry[0],
port: entry[1],
available:
(status && status.some(s => s.host === entry[0] && String(s.port) === entry[1] && s.availability)) ||
false,
activeWalletServers.some(s => s.host === entry[0] && String(s.port) === entry[1] && s.availability) || false,
});
});
return displayList;
@ -102,31 +106,36 @@ function SettingWalletServer(props: Props) {
}
function doClear() {
setCustom(false);
setAdvancedMode(false);
clearWalletServers();
}
function onAdd(serverTuple) {
let newServerConfig = servers.concat();
let newServerConfig = serverConfig.concat();
newServerConfig.push(serverTuple);
saveServers(newServerConfig);
setWalletServers(makeServerParam(newServerConfig));
updateServers(newServerConfig);
}
function onDelete(i) {
const newServerList = servers.concat();
newServerList.splice(i, 1);
saveServers(newServerList);
setWalletServers(makeServerParam(newServerList));
const newServerConfig = serverConfig.concat();
newServerConfig.splice(i, 1);
updateServers(newServerConfig);
}
function updateServers(newConfig) {
saveServerConfig(newConfig);
setCustomWalletServers(makeServerParam(newConfig));
}
return (
<React.Fragment>
<label>{__('Wallet servers')}</label>
<fieldset>
<FormField
type="radio"
name="default_wallet_servers"
checked={!custom}
label={__('lbry.tv wallet servers')}
checked={!advancedMode}
label={__('lbry.tv')}
onChange={e => {
if (e.target.checked) {
doClear();
@ -136,16 +145,17 @@ function SettingWalletServer(props: Props) {
<FormField
type="radio"
name="custom_wallet_servers"
checked={custom}
checked={advancedMode}
onChange={e => {
setCustom(e.target.checked);
setAdvancedMode(e.target.checked);
if (e.target.checked) {
setWalletServers(makeServerParam(customServers));
setCustomWalletServers(makeServerParam(customWalletServers));
}
}}
label={__('Custom wallet servers')}
label={__('customize')}
/>
{custom && (
</fieldset>
{advancedMode && (
<div>
<table className="table table--transactions">
<thead>
@ -157,9 +167,16 @@ function SettingWalletServer(props: Props) {
</tr>
</thead>
<tbody>
{servers &&
makeDisplayList(servers).map((t, i) => (
<ServerDisplayRow key={`${t.host}:${t.port}`} host={t.host} port={t.port} available={t.available} index={i} remove={onDelete} />
{serverConfig &&
makeDisplayList(serverConfig).map((t, i) => (
<tr key={`${t.host}:${t.port}`}>
<td>{t.host}</td>
<td>{t.port}</td>
<td>{t.available && <Icon icon={ICONS.SUBSCRIBE} />}</td>
<td>
<Button button={'link'} icon={ICONS.REMOVE} onClick={() => onDelete(i)} />
</td>
</tr>
))}
<ServerInputRow update={onAdd} />
</tbody>

2
ui/component/splash/view.jsx
View file

@ -160,7 +160,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
});
return;
} else if (startupStatus && !startupStatus.wallet && wallet.available_servers < 1) {
} else if (startupStatus && !startupStatus.wallet && wallet && wallet.available_servers < 1) {
this.setState({waitingForWallet: this.state.waitingForWallet + (UPDATE_INTERVAL / 1000)});
} else if (wallet && wallet.blocks_behind > 0) {
this.setState({

1
ui/constants/action_types.js
View file

@ -114,7 +114,6 @@ export const UPDATE_SEARCH_SUGGESTIONS = 'UPDATE_SEARCH_SUGGESTIONS';
export const DAEMON_SETTINGS_RECEIVED = 'DAEMON_SETTINGS_RECEIVED';
export const CLIENT_SETTING_CHANGED = 'CLIENT_SETTING_CHANGED';
export const UPDATE_IS_NIGHT = 'UPDATE_IS_NIGHT';
export const WALLET_SERVERS_CACHED = 'WALLET_SERVERS_CACHED';
// User
export const AUTHENTICATION_STARTED = 'AUTHENTICATION_STARTED';

10
ui/index.jsx
View file

@ -290,11 +290,11 @@ function AppWrapper() {
</ConnectedRouter>
) : (
<Fragment>
<SplashScreen
authenticate={() => app.store.dispatch(doAuthenticate(pjson.version))}
onReadyToLaunch={() => setReadyToLaunch(true)}
/>
<SnackBar />
<SplashScreen
authenticate={() => app.store.dispatch(doAuthenticate(pjson.version))}
onReadyToLaunch={() => setReadyToLaunch(true)}
/>
<SnackBar />
</Fragment>
)}
</Fragment>

4
ui/page/settings/view.jsx
View file

@ -226,7 +226,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
<div>
<Card title={__('Language')} actions={<SettingLanguage />} />
{/* @if TARGET='app' */}
<Card title={__('Wallet Server')} actions={<SettingWalletServer />} />
<Card
title={__('Sync')}
subtitle={
@ -647,7 +646,8 @@ class SettingsPage extends React.PureComponent<Props, State> {
))}
</FormField>
</fieldset-section>
{/* @endif */}
<SettingWalletServer />
{/* @endif */}
</React.Fragment>
}
/>

35
ui/redux/actions/settings.js
View file

@ -1,4 +1,4 @@
import { Lbry, ACTIONS, doToast, SHARED_PREFS, doWalletReconnect } from 'lbry-redux';
import { Lbry, ACTIONS, doToast, SHARED_PREFERENCES, doWalletReconnect } from 'lbry-redux';
import * as SETTINGS from 'constants/settings';
import * as LOCAL_ACTIONS from 'constants/action_types';
import analytics from 'analytics';
@ -23,19 +23,34 @@ export function doFetchDaemonSettings() {
};
}
export function doGetDaemonStatus() {
return dispatch => {
return Lbry.status().then(status => {
dispatch({
type: ACTIONS.DAEMON_STATUS_RECEIVED,
data: {
status,
},
});
return status;
},
);
};
};
export function doClearDaemonSetting(key) {
return dispatch => {
const clearKey = {
key,
};
Lbry.settings_clear(clearKey).then(defaultSettings => {
if (Object.values(SHARED_PREFS).includes(key)) {
if (Object.values(SHARED_PREFERENCES).includes(key)) {
dispatch({
type: ACTIONS.SHARED_PREFERENCE_SET,
data: { key: key, value: undefined },
});
}
if (key === SHARED_PREFS.WALLET_SERVERS) {
if (key === SHARED_PREFERENCES.WALLET_SERVERS) {
dispatch(doWalletReconnect());
}
});
@ -58,14 +73,14 @@ export function doSetDaemonSetting(key, value) {
value: !value && value !== false ? null : value,
};
Lbry.settings_set(newSettings).then(newSetting => {
if (Object.values(SHARED_PREFS).includes(key)) {
if (Object.values(SHARED_PREFERENCES).includes(key)) {
dispatch({
type: ACTIONS.SHARED_PREFERENCE_SET,
data: {key: key, value: newSetting[key]},
});
}
// hardcoding this in lieu of a better solution
if (key === SHARED_PREFS.WALLET_SERVERS) {
if (key === SHARED_PREFERENCES.WALLET_SERVERS) {
dispatch(doWalletReconnect());
}
});
@ -81,19 +96,13 @@ export function doSetDaemonSetting(key, value) {
};
}
export function doCacheCustomWalletServers(servers) {
export function doSaveCustomWalletServers(servers) {
return {
type: ACTIONS.WALLET_SERVERS_CACHED,
type: ACTIONS.SAVE_CUSTOM_WALLET_SERVERS,
data: servers,
};
}
export function doGetDaemonStatus() {
return dispatch => {
return Lbry.status().then(settings => settings);
};
};
export function doSetClientSetting(key, value) {
return {
type: ACTIONS.CLIENT_SETTING_CHANGED,

26
ui/redux/reducers/settings.js
View file

@ -2,17 +2,18 @@ import * as ACTIONS from 'constants/action_types';
import * as SETTINGS from 'constants/settings';
import moment from 'moment';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import { ACTIONS as LBRY_REDUX_ACTIONS, SHARED_PREFS } from 'lbry-redux';
import { ACTIONS as LBRY_REDUX_ACTIONS, SHARED_PREFERENCES } from 'lbry-redux';
const reducers = {};
const defaultState = {
isNight: false,
loadedLanguages: [...Object.keys(window.i18n_messages), 'en'] || ['en'],
customWalletServers: [],
sharedPrefs: {
[SHARED_PREFS.WALLET_SERVERS]: false,
sharedPreferences: {
[SHARED_PREFERENCES.WALLET_SERVERS]: false,
},
daemonSettings: {},
daemonStatus: {},
clientSettings: {
// UX
[SETTINGS.NEW_USER_ACKNOWLEDGED]: false,
@ -56,11 +57,16 @@ const defaultState = {
},
};
reducers[ACTIONS.DAEMON_SETTINGS_RECEIVED] = (state, action) =>
reducers[LBRY_REDUX_ACTIONS.DAEMON_SETTINGS_RECEIVED] = (state, action) =>
Object.assign({}, state, {
daemonSettings: action.data.settings,
});
reducers[LBRY_REDUX_ACTIONS.DAEMON_STATUS_RECEIVED] = (state, action) =>
Object.assign({}, state, {
daemonStatus: action.data.status,
});
reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => {
const { key, value } = action.data;
const clientSettings = Object.assign({}, state.clientSettings);
@ -99,11 +105,11 @@ reducers[ACTIONS.DOWNLOAD_LANGUAGE_SUCCESS] = (state, action) => {
reducers[LBRY_REDUX_ACTIONS.SHARED_PREFERENCE_SET] = (state, action) => {
const { key, value } = action.data;
const sharedPrefs = Object.assign({}, state.sharedPrefs);
sharedPrefs[key] = value;
const sharedPreferences = Object.assign({}, state.sharedPreferences);
sharedPreferences[key] = value;
return Object.assign({}, state, {
sharedPrefs,
sharedPreferences,
});
}
@ -122,13 +128,13 @@ reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (
state,
action,
) => {
const { settings: sharedPrefs } = action.data;
const { settings: sharedPreferences } = action.data;
// process clientSettings and daemonSettings
return Object.assign({}, state, { sharedPrefs });
return Object.assign({}, state, { sharedPreferences });
};
reducers[ACTIONS.WALLET_SERVERS_CACHED] = (state, action) => {
reducers[LBRY_REDUX_ACTIONS.SAVE_CUSTOM_WALLET_SERVERS] = (state, action) => {
return Object.assign({}, state, {customWalletServers: action.data});
}

25
ui/redux/selectors/settings.js
View file

@ -1,4 +1,5 @@
import * as SETTINGS from 'constants/settings';
import { SHARED_PREFERENCES } from 'lbry-redux';
import { createSelector } from 'reselect';
const selectState = state => state.settings || {};
@ -8,6 +9,11 @@ export const selectDaemonSettings = createSelector(
state => state.daemonSettings
);
export const selectDaemonStatus = createSelector(
selectState,
state => state.daemonStatus
);
export const selectClientSettings = createSelector(
selectState,
state => state.clientSettings || {}
@ -34,22 +40,31 @@ export const selectIsNight = createSelector(
state => state.isNight
);
export const selectCachedWalletServers = createSelector(
export const selectSavedWalletServers = createSelector(
selectState,
state => state.customWalletServers
);
export const selectSharedPrefs = createSelector(
export const selectSharedPreferences = createSelector(
selectState,
state => state.sharedPrefs
state => state.sharedPreferences
);
export const makeSelectSharedPrefsForKey = key =>
export const makeSelectSharedPreferencesForKey = key =>
createSelector(
selectSharedPrefs,
selectSharedPreferences,
prefs => (prefs ? prefs[key] : undefined)
);
export const selectHasWalletServerPrefs =
createSelector(
makeSelectSharedPreferencesForKey(SHARED_PREFERENCES.WALLET_SERVERS),
servers => {
if (servers && servers.length) return true;
return false;
}
)
export const selectThemePath = createSelector(
selectTheme,
selectAutomaticDarkModeEnabled,

2
ui/store.js
View file

@ -130,7 +130,7 @@ const sharedStateFilters = {
},
},
blocked: { source: 'blocked', property: 'blockedChannels' },
settings: { source: 'settings', property: 'sharedPrefs'},
settings: { source: 'settings', property: 'sharedPreferences'},
};
const sharedStateCb = ({ dispatch, getState }) => {

4
yarn.lock
View file

@ -7066,9 +7066,9 @@ lazy-val@^1.0.4:
yargs "^13.2.2"
zstd-codec "^0.1.1"
lbry-redux@lbryio/lbry-redux#9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc:
lbry-redux@lbryio/lbry-redux#341d60661468b654b9baf5b96ca4a08ee202f0f2:
version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/341d60661468b654b9baf5b96ca4a08ee202f0f2"
dependencies:
proxy-polyfill "0.1.6"
reselect "^3.0.0"