Auto eslint fix
This commit is contained in:
James Barnsley
@ -1,8 +1,8 @@
|
||||
|
||||
import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import Link from '../../components/Link'
|
||||
import { createStore, bindActionCreators } from 'redux'
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createStore, bindActionCreators } from 'redux';
|
||||
import Link from '../../components/Link';
|
||||
|
||||
import Modal from './Modal';
|
||||
import Icon from '../../components/Icon';
|
||||
@ -11,208 +11,221 @@ import * as uiActions from '../../services/ui/actions';
|
||||
import * as pusherActions from '../../services/pusher/actions';
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
class ShareConfiguration extends React.Component {
|
||||
class ShareConfiguration extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
recipients: [],
|
||||
spotify: false,
|
||||
lastfm: false,
|
||||
genius: false,
|
||||
ui: false,
|
||||
};
|
||||
}
|
||||
|
||||
this.state = {
|
||||
recipients: [],
|
||||
spotify: false,
|
||||
lastfm: false,
|
||||
genius: false,
|
||||
ui: false
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.uiActions.setWindowTitle('Share configuration');
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.props.uiActions.setWindowTitle("Share configuration");
|
||||
}
|
||||
toggleRecipient(id) {
|
||||
const { recipients } = this.state;
|
||||
if (recipients.includes(id)) {
|
||||
const index = recipients.indexOf(id);
|
||||
recipients.splice(index, 1);
|
||||
} else {
|
||||
recipients.push(id);
|
||||
}
|
||||
this.setState({ recipients });
|
||||
}
|
||||
|
||||
toggleRecipient(id){
|
||||
var recipients = this.state.recipients;
|
||||
if (recipients.includes(id)){
|
||||
var index = recipients.indexOf(id);
|
||||
recipients.splice(index,1);
|
||||
} else {
|
||||
recipients.push(id);
|
||||
}
|
||||
this.setState({recipients: recipients});
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
handleSubmit(e){
|
||||
e.preventDefault();
|
||||
const configuration = {};
|
||||
if (this.state.spotify) {
|
||||
configuration.spotify = {
|
||||
authorization: this.props.spotify_authorization,
|
||||
me: this.props.spotify_me,
|
||||
};
|
||||
}
|
||||
if (this.state.genius) {
|
||||
configuration.genius = {
|
||||
authorization: this.props.genius_authorization,
|
||||
me: this.props.genius_me,
|
||||
};
|
||||
}
|
||||
if (this.state.lastfm) {
|
||||
configuration.lastfm = {
|
||||
authorization: this.props.lastfm_authorization,
|
||||
me: this.props.lastfm_me,
|
||||
};
|
||||
}
|
||||
if (this.state.ui) {
|
||||
configuration.ui = this.props.ui;
|
||||
}
|
||||
|
||||
var configuration = {};
|
||||
if (this.state.spotify){
|
||||
configuration.spotify = {
|
||||
authorization: this.props.spotify_authorization,
|
||||
me: this.props.spotify_me
|
||||
}
|
||||
}
|
||||
if (this.state.genius){
|
||||
configuration.genius = {
|
||||
authorization: this.props.genius_authorization,
|
||||
me: this.props.genius_me
|
||||
}
|
||||
}
|
||||
if (this.state.lastfm){
|
||||
configuration.lastfm = {
|
||||
authorization: this.props.lastfm_authorization,
|
||||
me: this.props.lastfm_me
|
||||
}
|
||||
}
|
||||
if (this.state.ui){
|
||||
configuration.ui = this.props.ui;
|
||||
}
|
||||
for (const recipient of this.state.recipients) {
|
||||
this.props.pusherActions.deliverMessage(
|
||||
recipient,
|
||||
'share_configuration_received',
|
||||
configuration,
|
||||
);
|
||||
}
|
||||
|
||||
for (var recipient of this.state.recipients){
|
||||
this.props.pusherActions.deliverMessage(
|
||||
recipient,
|
||||
'share_configuration_received',
|
||||
configuration
|
||||
);
|
||||
}
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
window.history.back();
|
||||
return;
|
||||
}
|
||||
render() {
|
||||
const connections = [];
|
||||
for (const connection_id in this.props.connections) {
|
||||
if (this.props.connections.hasOwnProperty(connection_id) && connection_id != this.props.connection_id) {
|
||||
connections.push(this.props.connections[connection_id]);
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
var connections = []
|
||||
for (var connection_id in this.props.connections){
|
||||
if (this.props.connections.hasOwnProperty(connection_id) && connection_id != this.props.connection_id){
|
||||
connections.push(this.props.connections[connection_id])
|
||||
}
|
||||
}
|
||||
|
||||
if (connections.length > 0){
|
||||
var recipients = (
|
||||
<div className="input">
|
||||
{
|
||||
connections.map((connection, index) => {
|
||||
return (
|
||||
<label key={connection.connection_id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
name={"connection_"+connection.connection_id}
|
||||
checked={this.state.recipients.includes(connection.connection_id)}
|
||||
onChange={e => this.toggleRecipient(connection.connection_id)}
|
||||
/>
|
||||
<span className="label">
|
||||
<div className="title">{ connection.username }</div>
|
||||
<div className="description mid_grey-text">
|
||||
({ connection.ip })
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})
|
||||
if (connections.length > 0) {
|
||||
var recipients = (
|
||||
<div className="input">
|
||||
{
|
||||
connections.map((connection, index) => (
|
||||
<label key={connection.connection_id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
name={`connection_${connection.connection_id}`}
|
||||
checked={this.state.recipients.includes(connection.connection_id)}
|
||||
onChange={(e) => this.toggleRecipient(connection.connection_id)}
|
||||
/>
|
||||
<span className="label">
|
||||
<div className="title">{ connection.username }</div>
|
||||
<div className="description mid_grey-text">
|
||||
(
|
||||
{ connection.ip }
|
||||
)
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var recipients = (
|
||||
<div className="input text">
|
||||
<span className="mid_grey-text">
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var recipients = (
|
||||
<div className="input text">
|
||||
<span className="mid_grey-text">
|
||||
No peer connections
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal className="modal--share-configuration">
|
||||
|
||||
<h1>Share configuration</h1>
|
||||
<h2>Push your authorizations and interface settings to another, connected user</h2>
|
||||
return (
|
||||
<Modal className="modal--share-configuration">
|
||||
|
||||
<form onSubmit={e => this.handleSubmit(e)}>
|
||||
<div className="field checkbox white">
|
||||
<div className="name">Recipients</div>
|
||||
{recipients}
|
||||
</div>
|
||||
<h1>Share configuration</h1>
|
||||
<h2>Push your authorizations and interface settings to another, connected user</h2>
|
||||
|
||||
<div className="field checkbox checkbox--block">
|
||||
<div className="name">Configurations</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="interface"
|
||||
checked={ this.state.ui }
|
||||
onChange={ e => this.setState({ ui: !this.state.ui })} />
|
||||
<span className="label">
|
||||
<span className="title">UI customisation (theme, sorting, filters)</span>
|
||||
</span>
|
||||
</label>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
<div className="field checkbox white">
|
||||
<div className="name">Recipients</div>
|
||||
{recipients}
|
||||
</div>
|
||||
|
||||
{this.props.spotify_me && this.props.spotify_authorization ? <label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="spotify"
|
||||
checked={this.state.spotify}
|
||||
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
|
||||
<span className="label">
|
||||
<div className="title">Spotify authorization</div>
|
||||
<div className="description mid_grey-text">Logged in as {this.props.spotify_me.name}</div>
|
||||
</span>
|
||||
</label> : null}
|
||||
<div className="field checkbox checkbox--block">
|
||||
<div className="name">Configurations</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="interface"
|
||||
checked={this.state.ui}
|
||||
onChange={(e) => this.setState({ ui: !this.state.ui })}
|
||||
/>
|
||||
<span className="label">
|
||||
<span className="title">UI customisation (theme, sorting, filters)</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{this.props.lastfm_me && this.props.lastfm_authorization ? <label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="lastfm_authorization"
|
||||
checked={this.state.lastfm}
|
||||
onChange={ e => this.setState({ lastfm: !this.state.lastfm })} />
|
||||
<span className="label">
|
||||
<div className="title">LastFM authorization</div>
|
||||
<div className="description mid_grey-text">Logged in as {this.props.lastfm_me.name}</div>
|
||||
</span>
|
||||
</label> : null}
|
||||
{this.props.spotify_me && this.props.spotify_authorization ? (
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="spotify"
|
||||
checked={this.state.spotify}
|
||||
onChange={(e) => this.setState({ spotify: !this.state.spotify })}
|
||||
/>
|
||||
<span className="label">
|
||||
<div className="title">Spotify authorization</div>
|
||||
<div className="description mid_grey-text">
|
||||
Logged in as
|
||||
{this.props.spotify_me.name}
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{this.props.genius_me && this.props.genius_authorization ? <label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="genius_authorization"
|
||||
checked={this.state.genius}
|
||||
onChange={ e => this.setState({ genius: !this.state.genius })} />
|
||||
<span className="label">
|
||||
<div className="title">Genius authorization</div>
|
||||
<div className="description mid_grey-text">Logged in as {this.props.genius_me.name}</div>
|
||||
</span>
|
||||
</label> : null}
|
||||
</div>
|
||||
</div>
|
||||
{this.props.lastfm_me && this.props.lastfm_authorization ? (
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="lastfm_authorization"
|
||||
checked={this.state.lastfm}
|
||||
onChange={(e) => this.setState({ lastfm: !this.state.lastfm })}
|
||||
/>
|
||||
<span className="label">
|
||||
<div className="title">LastFM authorization</div>
|
||||
<div className="description mid_grey-text">
|
||||
Logged in as
|
||||
{this.props.lastfm_me.name}
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
<div className="actions centered-text">
|
||||
{this.state.recipients.length > 0 ? <button className="button button--primary button--large" onClick={e => this.handleSubmit(e)}>Send</button> : <button className="button button--primary button--large" disabled="disabled" onClick={e => this.handleSubmit(e)}>Send</button>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
{this.props.genius_me && this.props.genius_authorization ? (
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="genius_authorization"
|
||||
checked={this.state.genius}
|
||||
onChange={(e) => this.setState({ genius: !this.state.genius })}
|
||||
/>
|
||||
<span className="label">
|
||||
<div className="title">Genius authorization</div>
|
||||
<div className="description mid_grey-text">
|
||||
Logged in as
|
||||
{this.props.genius_me.name}
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="actions centered-text">
|
||||
{this.state.recipients.length > 0 ? <button className="button button--primary button--large" onClick={(e) => this.handleSubmit(e)}>Send</button> : <button className="button button--primary button--large" disabled="disabled" onClick={(e) => this.handleSubmit(e)}>Send</button>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
spotify_authorization: state.spotify.authorization,
|
||||
spotify_me: state.spotify.me,
|
||||
genius_authorization: state.genius.authorization,
|
||||
genius_me: state.genius.me,
|
||||
lastfm_authorization: state.lastfm.authorization,
|
||||
lastfm_me: state.lastfm.me,
|
||||
ui: state.ui,
|
||||
connection_id: state.pusher.connection_id,
|
||||
connections: state.pusher.connections
|
||||
}
|
||||
}
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
spotify_authorization: state.spotify.authorization,
|
||||
spotify_me: state.spotify.me,
|
||||
genius_authorization: state.genius.authorization,
|
||||
genius_me: state.genius.me,
|
||||
lastfm_authorization: state.lastfm.authorization,
|
||||
lastfm_me: state.lastfm.me,
|
||||
ui: state.ui,
|
||||
connection_id: state.pusher.connection_id,
|
||||
connections: state.pusher.connections,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
pusherActions: bindActionCreators(pusherActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch)
|
||||
}
|
||||
}
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
pusherActions: bindActionCreators(pusherActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShareConfiguration)
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShareConfiguration);
|
||||
|
||||
Reference in New Issue
Block a user