85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
Alert,
|
|
Card,
|
|
CardHeader,
|
|
CardBlock,
|
|
FormGroup,
|
|
Progress,
|
|
Label,
|
|
Input
|
|
} from 'reactstrap';
|
|
import { initialize } from '..';
|
|
import { SOCKET_STATE } from '../actions/socket';
|
|
|
|
class ConnectionOverlay extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
uri: "ws://127.0.0.1:8412",
|
|
autoconnect: false,
|
|
connecting: false
|
|
};
|
|
// TODO: "connecting..." UI
|
|
// TODO: autoconnect
|
|
// TODO: gracefully handle dis/reconnections
|
|
}
|
|
|
|
render() {
|
|
const { socket } = this.props;
|
|
if (socket.state === SOCKET_STATE.CONNECTED) {
|
|
return null;
|
|
}
|
|
if (socket.state === SOCKET_STATE.CONNECTING) {
|
|
return (
|
|
<div className="connection-overlay">
|
|
<Card>
|
|
<CardHeader>Connect to synapse</CardHeader>
|
|
<CardBlock>
|
|
<p className="text-center">Connecting...</p>
|
|
<Progress value={100} animated />
|
|
</CardBlock>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
const { uri, autoconnect } = this.state;
|
|
return (
|
|
<div className="connection-overlay">
|
|
<Card>
|
|
<CardHeader>Connect to synapse</CardHeader>
|
|
<CardBlock>
|
|
{socket.reason && <Alert color="info">{socket.reason}</Alert>}
|
|
<FormGroup>
|
|
<Label for="socket-uri">Server URI</Label>
|
|
<Input
|
|
id="socket-uri"
|
|
value={uri}
|
|
onChange={e => this.setState({ uri: e.target.value })}
|
|
/>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Label for="autoconnect" check>
|
|
<Input
|
|
id="autoconnect"
|
|
type="checkbox"
|
|
checked={autoconnect}
|
|
onChange={e => this.setState({ autoconnect: !autoconnect })}
|
|
check
|
|
/> Autoconnect to this server
|
|
</Label>
|
|
</FormGroup>
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={() => initialize(this.state.uri)}
|
|
>{socket.reason ? "Reconnect" : "Connect"}</button>
|
|
</CardBlock>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(state => ({ socket: state.socket }))(ConnectionOverlay);
|