add Button

src/components/layout/LeftBar.js

@@ -3,12 +3,10 @@ import { render } from 'react-dom';
 import { connect } from 'react-redux';
 import { setNeighbourhoods } from '../../actions/actions';
 import carto, { filter, source, style, layer  } from '@carto/carto.js';
-import Category from '.././widgets/Category'
-import Histogram from '.././widgets/Histogram'
+import Button from '.././widgets/Button'
 import Formula from '.././widgets/Formula'
-import Range from '.././widgets/Range'
-import Export from '.././widgets/Export'
 import '@carto/airship-style';
+import L from 'leaflet'
 
 class LeftBar extends Component {
 
@@ -17,12 +15,16 @@ class LeftBar extends Component {
       this.state = {
         ...props
       }
+    this.moveMap = this.moveMap.bind(this);
   }
 
   state = {
     size: null
   };
 
+  moveMap() {
+    this.props.map.flyTo([39.8283459, -98.5794797], 4);
+  }
 
 
   componentDidMount() {
@@ -35,6 +37,12 @@ class LeftBar extends Component {
     return (
       <aside className={this.state.size}>
       <div className="as-m--24">
+      <Button
+        name='CLICK'
+        action={this.moveMap}
+        type='secondary'
+        size=''
+      />
       <div className="as-p--16">
       <Formula
         title='Employees Injured'

src/components/widgets/Button.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import { connect } from 'react-redux';
+import LayerToggle from '../widgets/LayerToggle'
+import '@carto/airship-style';
+
+class Button extends Component {
+
+  constructor(props) {
+    super(props);
+      this.state = {
+        ...props
+      }
+      this.myFunction = this.myFunction.bind(this);
+  }
+
+  state = {
+    button: null
+  };
+
+  componentDidMount() {
+    const { type, size } = this.props;
+    let t
+    let s
+
+    if (size === 'large') {
+      s = 'as-btn--l'
+    } else if (size === 'small') {
+      s = 'as-btn--s'
+    } else {
+      s = ''
+    }
+
+    if (type === 'primary') {
+      t = 'as-btn--primary'
+    } else if (type === 'secondary') {
+      t = 'as-btn--secondary'
+    } else {
+      t = ''
+    }
+
+    const button = `as-btn ${t} ${s}`
+
+    this.setState({ button: button })
+  }
+
+  myFunction() {
+    this.props.action()
+  }
+
+  render() {
+
+    return (
+      <div className="as-p--16">
+        <button className={this.state.button} onClick={this.myFunction}>
+          <p>{this.props.name}</p>
+        </button>
+      </div>
+    );
+  }
+
+}
+
+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)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Button);

src/components/widgets/LayerToggle.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import carto from '@carto/carto.js';
 import { storeLayers, toggleLayer } from '../../actions/actions';
-
+import '@carto/airship-style';
 
 class LayerToggle extends Component {
 
@@ -36,10 +36,10 @@ class LayerToggle extends Component {
   render() {
     return (
       <div>
-        <span className="as-display--block as-p--4">
+        <span className="as-display--block">
           <p className="as-body">{this.props.layer.name}</p>
         </span>
-        <span className="as-display--block as-p--4">
+        <span className="as-display--block">
           <as-switch checked ref={node => { this.widget = node; }}></as-switch>
         </span>
       </div>