Initial commit

web/components/Filters.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default class Filters extends React.Component {
+  render() {
+
+    return (
+      <div className="filters">
+        <div className="filter-row">
+          one filter
+        </div>
+        <div className="filter-row">
+          two filter
+        </div>
+        <div className="filter-row">
+          two filter
+        </div>
+        <div className="filter-row">
+          two filter
+        </div>
+      </div>)
+  }
+}

web/components/Listings.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default class Listings extends React.Component {
+  render() {
+
+    return (
+      <div className="listings">
+        <div className="listings-row">
+          one filter
+        </div>
+        <div className="listings-row">
+          two filter
+        </div>
+        <div className="listings-row">
+          two filter
+        </div>
+        <div className="listings-row">
+          two filter
+        </div>
+      </div>)
+  }
+}

web/components/Main.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import Filters from './Filters';
+import Listings from './Listings';
+
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    const uluru = {lat: -25.363, lng: 131.044};
+    const map = new google.maps.Map(this.refs.map, {
+      zoom: 4,
+      center: uluru,
+      streetViewControl: false,
+      mapTypeControl: false
+    });
+    const marker = new google.maps.Marker({
+      position: uluru,
+      map: map
+    });
+
+    var control = document.createElement('div');
+    control.classList.add('filters-btn-toggle');
+    control.innerHTML = '<button>Filters</button>';
+    control.style = "top: 200px;"
+
+    control.addEventListener('click', (e) => {
+      this.setState({
+        mapClicked: true
+      });
+    });
+    control.index = 1;
+    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
+  }
+
+  onCloseClick(e) {
+    this.setState({
+      mapClicked: false
+    });
+  }
+
+  render() {
+    const leftStyle  = {};
+    const rightStyle = {};
+
+    let leftClass = 'left-base';
+    let rightClass ='right-base';
+
+    if (this.state.mapClicked) {
+      leftClass = 'left-hidden';
+      rightClass = 'right-shown';
+    }
+
+    return (
+      <div id="container">
+        <div id="header">
+          Kivi {this.state.mapClicked ? 'YEs': 'No'}
+        </div>
+
+        <div id="right" style={rightStyle} className={rightClass}>
+          <div className="right-content">
+        <div className="filters-close-button">
+          <button onClick={this.onCloseClick.bind(this)}>Close me!</button>
+        </div>
+            <Filters />
+            <Listings />
+          </div>
+        </div>
+
+        <div id="left" style={leftStyle} className={leftClass}>
+          <div id="map" ref="map">
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+export default Main;