udpates!

src/components/layout/Header.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import carto from '@carto/carto.js';
 import HeaderToggle from './header/HeaderToggle'
 import HeaderLink from './header/HeaderLink'
 import Avatar from './Avatar'
@@ -51,7 +49,6 @@ class Header extends Component {
 const mapStateToProps = state => ({
   client: state.client,
   map: state.map,
-  filters: state.filters,
   layers: state.layers,
   viewport: state.viewport,
   boundingbox: state.boundingbox

src/components/layout/LeftBar.js

@@ -22,6 +22,7 @@ class LeftBar extends Component {
         ...props
       }
     this.moveMap = this.moveMap.bind(this);
+
   }
 
   state = {
@@ -33,15 +34,12 @@ class LeftBar extends Component {
   }
 
 
-  componentDidMount() {
-    const z = `as-sidebar as-sidebar--${this.props.size} as-sidebar--left ${this.props.background}`;
-    this.setState({size: z})
-  }
-
   render() {
 
+    const size = `as-sidebar as-sidebar--${this.props.size} as-sidebar--left ${this.props.background}`;
+
     return (
-      <aside className={this.state.size} data-name={this.props.name}>
+      <aside className={size} data-name={this.props.name}>
       <div className="as-m--24">
       <LinkButton
         name='CARTO Website'
@@ -88,6 +86,7 @@ class LeftBar extends Component {
         title='Accident Description'
         description='Search text in the accident description field'
         id='search'
+        layer={this.props.layers.railaccidents.source}
         placeholder='Search...'
         column='narrative'
       />

src/components/layout/RightBar.js

@@ -50,6 +50,8 @@ class RightBar extends Component {
         description='Average total damage in USD for accidents in view'
         round={true}
         currency={true}
+        locale='en-US'
+        currencyType='USD'
         layer={this.props.layers.railaccidents.source}
         column='total_damage'
         operation={carto.operation.AVG}
@@ -63,16 +65,14 @@ class RightBar extends Component {
         name='Export Data'
       />
       </div>
-      <div className="as-p--16">
       <Category
-        heading='State'
+        title='State'
         description='Total damage for each railroad company in USD'
         categoryLayer={this.props.layers.railaccidents.source}
         column='state'
         operation={carto.operation.SUM}
         operationColumn='equipment_damage'
       />
-      </div>
       <div className="as-p--16">
       <Histogram
         title='Hour'

src/components/widgets/Category.js

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import carto from '@carto/carto.js';
 
-
 class Category extends Component {
 
   static defaultProps = {
@@ -63,12 +62,10 @@ class Category extends Component {
 
     this.dataView.on('dataChanged', ({ categories }) => this.setState({ categories }));
 
-    console.log('CATEGORY ', this.state)
     this.props.client.addDataview(this.dataView);
  }
 
   _createFilter() {
-    console.log('_createFilter RAN')
     const filter = new carto.filter.Category(this.props.column, { in: this.state.selection });
     this.props.categoryLayer.addFilter(filter);
     this.setState({  filter });
@@ -109,18 +106,18 @@ class Category extends Component {
 
 
   render() {
-    const { heading, description } = this.props;
+    const { title, description } = this.props;
     const { categories, filter, selection } = this.state;
 
-    //console.log()
+    console.log(title)
 
     const showApplyButton = selection.length > 0 && !filter;
 
     return (
-      <div>
+      <div className="as-p--16">
       <as-category-widget
         ref={node => { this.widget = node; }}
-        heading={heading}
+        heading={title}
         description={description}
         categories={categories}
         onSelectedChanged={this.onSelectedChanged}

src/components/widgets/TextSearch.js

@@ -37,19 +37,18 @@ class TextSearch extends Component {
 
   createFilter() {
     const filter = new carto.filter.Category(this.props.column, { similarTo: this.state.value });
-    this.props.layers.railaccidents.source.addFilter(filter);
+    this.props.layer.addFilter(filter);
     this.setState({ filter });
   }
 
   updateFilter() {
     const { filter } = this.state;
-    this.props.layers.railaccidents.source.removeFilter(filter);
+    this.props.layer.removeFilter(filter);
     this.createFilter()
   }
 
   setUpFilter() {
     const { filter, value } = this.state;
-    console.log(value)
     !filter
       ? this.createFilter()
       : this.updateFilter();
@@ -73,14 +72,11 @@ class TextSearch extends Component {
 const mapStateToProps = state => ({
   client: state.client,
   map: state.map,
-  filters: state.filters,
   layers: state.layers,
   viewport: state.viewport,
   boundingbox: state.boundingbox
 });
 
-const mapDispatchToProps = dispatch => ({
-  setNeighbourhoods: selected => dispatch(setNeighbourhoods(selected)),
-});
+const mapDispatchToProps = dispatch => ({ });
 
 export default connect(mapStateToProps, mapDispatchToProps)(TextSearch);

src/data/layers/index.js

@@ -1,4 +1,6 @@
 import railaccidents from './railaccidents';
+// import usstates from './usstates';
+
 // import neighbourhoods from './neighbourhoods';
 
 // Export order will be the layer order

src/data/layers/usstates.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'US States',
+
+  visible: true,
+
+  cartocss: `
+  #layer {
+  polygon-fill: #6ba2dc;
+  polygon-opacity: 1;
+}
+#layer::outline {
+  line-width: 1;
+  line-color: #FFFFFF;
+  line-opacity: 0.5;
+}
+  `,
+
+  query: `
+    SELECT * FROM us_states
+  `,
+
+  options: {
+    featureClickColumns: []
+  }
+};