import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

/* component styles */
// import { styles } from './styles.scss';

export class SocialDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="row">
        <div className="col-lg-12 text-center">
          <h2>Neuroticism: {this.props.social.neuroticism_big5}</h2>
        </div>
      </div>
    );
  }
}

function mapStateToProps({ tone }) {
  if (tone.toneData) {
    return {
      social: tone.toneData.social,
    };
  }
  return {
    social: tone,
  };
}

export default connect(mapStateToProps)(SocialDisplay);

@@ -118,16 +118,145 @@
 redux';%0A
+import %7B BarChart %7D from 'react-d3-basic';%0A%0Aimport %7B getTone %7D from '../../actions/index';%0Aimport chartSetup from './ChartSetUp';
 %0A/* comp
@@ -421,16 +421,65 @@
 tate = %7B
+%0A      socialData: %5B%5D,%0A      lastNerotic: 0,%0A    
 %7D;%0A  %7D%0A%0A
@@ -649,16 +649,419 @@
 5%7D%3C/h2%3E%0A
+          %3CBarChart%0A            title=%7BchartSetup.title%7D%0A            data=%7Bthis.state.socialData%7D%0A            width=%7BchartSetup.width%7D%0A            height=%7BchartSetup.height%7D%0A            margins=%7BchartSetup.margins%7D%0A            chartSeries=%7BchartSetup.chartSeries%7D%0A            x=%7BchartSetup.x%7D%0A            xScale=%7BchartSetup.xScale%7D%0A            y=%7BchartSetup.y%7D%0A            yTicks=%7BchartSetup.yTicks%7D /%3E%0A
         

Update Social Data