Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Iss 351 - Failed to Sync with API Server UI #381

Merged
merged 4 commits into from
Sep 13, 2017
Merged

Iss 351 - Failed to Sync with API Server UI #381

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7cb7472
Make sync error ux reuse access settings ux
calvinfroedge Sep 11, 2017
598d57d
Remove debugging
calvinfroedge Sep 11, 2017
fe798ad
Remove debugging
calvinfroedge Sep 11, 2017
acca055
Modify sync error styling, use props consistently
calvinfroedge Sep 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 12 additions & 42 deletions app/components/SyncError.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {Apis} from "bitsharesjs-ws";
import Icon from "./Icon/Icon";
import WebsocketAddModal from "./Settings/WebsocketAddModal";
import counterpart from "counterpart";
import AccessSettings from "./Settings/AccessSettings";

class SyncError extends React.Component {

Expand All @@ -18,6 +19,9 @@ class SyncError extends React.Component {
onChangeWS(e) {
SettingsActions.changeSetting({setting: "apiServer", value: e.target.value });
Apis.reset(e.target.value, true);
setTimeout(()=>{
this.onReloadClick();
}, 50);
}

onReloadClick(e) {
Expand All @@ -31,12 +35,12 @@ class SyncError extends React.Component {
else window.location.href = __BASE_URL__;
}

onReset() {
SettingsActions.changeSetting({setting: "apiServer", value: this.props.defaultConnection });
SettingsActions.clearSettings();
triggerModal(e, ...args) {
this.refs.ws_modal.show(e, ...args);
}

render() {
const { props } = this;
let options = this.props.apis.map(entry => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove this since it's not used anymore

let onlyDescription = entry.url.indexOf("fake.automatic-selection") !== -1;
let {location} = entry;
Expand All @@ -48,55 +52,20 @@ class SyncError extends React.Component {
return (

<div className="grid-frame vertical">

<div className="grid-container text-center" style={{paddingTop: "5rem", maxWidth: "40rem"}}>
<div className="grid-container text-center" style={{paddingTop: "5rem", maxWidth: "90%", overflowY: "auto"}}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks weird on a wide screen, with the scrollbar indented from the right:

image


<h2><Translate content="sync_fail.title" /></h2>
<br />
<p style={{marginBottom: 0}}><Translate content="sync_fail.sub_text_1" /></p>
<Icon name="clock" size="5x"/>

<p><Translate unsafe content="sync_fail.sub_text_2" /></p>
</div>
<div className="grid-container text-center" style={{paddingTop: "1rem", maxWidth: "40rem"}}>
<section className="block-list">
<header><Translate component="span" content={`settings.apiServer`} /></header>
<ul>
<li className="with-dropdown">

<select onChange={this.onChangeWS.bind(this)} value={this.props.apiServer}>
{options}
</select>
<hr />

<div style={{paddingTop: 10}} className="button-group">
<div
onClick={this.triggerModal.bind(this)}
className="button outline"
id="add"
>
<Translate id="add_text" content="settings.add_api" />
</div>
</div>
</li>
<li className="key-value clearfix">
<div className="float-left">Connection Status</div>
<div className="float-right">
{this.props.rpc_connection_status === "open" ? <span className="txtlabel success"><Translate content={`init_error.connected`} /></span> : <span className="txtlabel warning"><Translate content={`init_error.not_connected`} /></span>}
</div>
</li>
</ul>
</section>
<br/>
<div className="button-group">
<div className="button outline" href onClick={this.onReloadClick}><Translate content={`init_error.retry`} /></div>

<div onClick={this.onReset.bind(this)} className="button outline">
<Translate content="settings.reset" />
</div>
<AccessSettings currentNode={props.apiServer} nodes={props.apis} onChange={this.onChangeWS.bind(this)} apiLatencies={this.props.apiLatencies} triggerModal={this.triggerModal.bind(this)} />;
</div>

<WebsocketAddModal ref="ws_modal" apis={this.props.apis} />
</div>
<WebsocketAddModal ref="ws_modal" apis={this.props.apis} api={props.apiServer} />
</div>
);
}
Expand All @@ -112,6 +81,7 @@ SyncError = connect(SyncError, {
apis: SettingsStore.getState().defaults.apiServer,
apiServer: SettingsStore.getState().settings.get("apiServer"),
defaultConnection: SettingsStore.getState().defaultSettings.get("apiServer"),
apiLatencies: SettingsStore.getState().apiLatencies
};
}
});
Expand Down