<commit_before>import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/actions';
import Toggle from 'material-ui/Toggle';
import styles from '../assets/formStyles';
import $ from 'jquery';

export class DeviceProfilePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      error: '',
    };
  }

  toggleDevice() {
    const hardwarekey = this.props.appState.featured.hardwarekey;
    const deviceState = {
      isActive: !this.props.appState.featured.isActive,
      paidUsage: false,
    };
    const context = this;
     // TODO: need to replace the home ID with the real one once it is in appState
    const apiPath = 'http://localhost:3001/api/v1/homes/1/devices/'.concat(hardwarekey);

    $.post(apiPath, deviceState, (req) => {
      if (!req.success === true) {
        console.log('there was an error???');
        context.setState({
          error: req.message,
        });
      } else {
        if (this.props.appState.featured.isActive) {
          this.props.actions.toggleDevice(false);
        } else {
          this.props.actions.toggleDevice(true);
        }
      }
    })
    .fail(() => {
      // set local state to display error
      context.setState({
        error: 'Failed to connect to device, try again.',
      });
    });
  }

  render() {
    let errorMsg = <div style={styles.error}>{this.state.details}</div>;
    if (this.props.appState.featured.id === '') {
      return (
        <div style={styles.center}>
          <h2>Uh oh!</h2>
          <p>You need to choose a device to display.</p>
          <p>Click <a href="/dashboard">here</a> to return to your dashboard.</p>
        </div>
      );
    }
    return (
      <div>
        <h2>{this.props.appState.featured.name}</h2>
        {errorMsg}
        <h3>{this.props.appState.featured.description}</h3>
        <Toggle
          onToggle={() => this.toggleDevice()}
          defaultToggled={this.props.appState.featured.isActive}
        />
      </div>
    );
  }
}


DeviceProfilePage.propTypes = {
  actions: PropTypes.object.isRequired,
  appState: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    appState: state.appState,<commit_msg>(Fix) Change camel case on props<commit_after>import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/actions';
import Toggle from 'material-ui/Toggle';
import styles from '../assets/formStyles';
import $ from 'jquery';

export class DeviceProfilePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      error: '',
    };
  }

  toggleDevice() {
    const hardwarekey = this.props.appState.featured.hardwarekey;
    const deviceState = {
      isactive: !this.props.appState.featured.isactive,
      paidUsage: false,
    };
    const context = this;
     // TODO: need to replace the home ID with the real one once it is in appState
    const apiPath = 'http://localhost:3001/api/v1/homes/1/devices/'.concat(hardwarekey);

    $.post(apiPath, deviceState, (req) => {
      if (!req.success === true) {
        console.log('there was an error???');
        context.setState({
          error: req.message,
        });
      } else {
        if (this.props.appState.featured.isactive) {
          this.props.actions.toggleDevice(false);
        } else {
          this.props.actions.toggleDevice(true);
        }
      }
    })
    .fail(() => {
      // set local state to display error
      context.setState({
        error: 'Failed to connect to device, try again.',
      });
    });
  }

  render() {
    let errorMsg = <div style={styles.error}>{this.state.details}</div>;
    if (this.props.appState.featured.id === '') {
      return (
        <div style={styles.center}>
          <h2>Uh oh!</h2>
          <p>You need to choose a device to display.</p>
          <p>Click <a href="/dashboard">here</a> to return to your dashboard.</p>
        </div>
      );
    }
    return (
      <div>
        <h2>{this.props.appState.featured.name}</h2>
        {errorMsg}
        <h3>{this.props.appState.featured.description}</h3>
        <Toggle
          onToggle={() => this.toggleDevice()}
          defaultToggled={this.props.appState.featured.isactive}
        />
      </div>
    );
  }
}


DeviceProfilePage.propTypes = {
  actions: PropTypes.object.isRequired,
  appState: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    appState: state.appState,
{'fraction_non_alphanumeric': 0.1456498388829216, 'fraction_numerical': 0.0051557465091299675, 'mean_word_length': 2.4134897360703813, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3205681', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1434, 'n_words': 312}