fix: change two DayPickers with one

.dockerignore

@@ -0,0 +1,2 @@
+db
+*.csv

src/Components/Map/Filters/DayPicker.js

@@ -1,5 +1,33 @@
 import styled from 'styled-components';
 
 export default styled.div`
+  border-radius: 5px;
   margin-bottom: 43px;
+  
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  background-color: #141228;
+  
+  font-size: 16px !important; 
+  
+  .DayPicker-Caption > div {
+    font-weight: bold;  
+    color: #dadfee;
+  }
+  
+  .DayPicker-NavButton--prev {
+    margin-right: 0.7em;
+  }
+
+  .DayPicker-NavButton {
+    width: 0.7em;
+    height: 0.7em;
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--outside) {
+    background-color: #2c0ea6 !important;
+  }
+
+  .DayPicker-Day {
+    border-radius: 0 !important;
+  }
 `;

src/Components/Map/Filters/DayPicker/DayPicker.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const foo = () => {
+
+}

src/Components/Map/Filters/Filters.js

@@ -1,31 +1,34 @@
 import React, { PureComponent } from 'react';
-import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { debounce } from "debounce";
+import DayPicker, { DateUtils } from 'react-day-picker';
+import { debounce } from 'debounce';
 import 'react-day-picker/lib/style.css';
 
 import Container from './Container';
 import Title from "./Title";
 import Description from "./Description";
-import DayPicker from "./DayPicker";
-import Input from "./Input";
+import Range from "./Range";
+import DayPickerContainer from "./DayPicker";
 import TimePicker from "./TimePicker";
 import AvgTime from "./AvgTime";
+import Input from "./Input";
 
 class Filters extends PureComponent {
-  changeFrom = (from) => {
-    this.props.changeFilter('from', from);
-  };
+  handleDayClick = (day) => {
+    const range = DateUtils.addDayToRange(day, this.props.range);
 
-  changeTo = (to) => {
-    this.props.changeFilter('to', to);
+    this.props.changeFilter('range', range);
   };
 
   changeTime = (e) => {
     debounce(this.props.changeFilter('hour', e.target.value), 300);
   };
 
+  dateConverter = date => `${date.getDay()}.${date.getMonth() + 1}`;
+
   render() {
-    const { from, to, hour } = this.props;
+    const { range, hour } = this.props;
+    const { from, to } = range;
+    const modifiers = { start: from, end: to };
 
     return (
       <Container>
@@ -35,39 +38,30 @@ class Filters extends PureComponent {
         <Description>
           Conducted from an area
         </Description>
-        <DayPicker>
-          <DayPickerInput
-            value={from}
-            placeholder="From"
-            dayPickerProps={{
-              selectedDays: [from, {from, to}],
-              disabledDays: {after: to},
-              month: new Date(2017, 0),
-              numberOfMonths: 1,
-              fromMonth: new Date(2017, 0),
-              toMonth: new Date(2017, 11),
-              onDayClick: () => this.to.getInput().focus(),
+        <Range>
+          {this.dateConverter(from)} – {this.dateConverter(to)}
+        </Range>
+        <DayPickerContainer>
+          <DayPicker
+            numberOfMonths={1}
+            selectedDays={[from, { from, to }]}
+            modifiers={modifiers}
+            onDayClick={this.handleDayClick}
+            captionElement={({date, localeUtils, locale}) => {
+              const months = localeUtils.getMonths(locale);
+
+              return (
+                <div className='DayPicker-Caption'>
+                  {months[date.getMonth()]}
+                </div>
+              );
             }}
-            onDayChange={this.changeFrom}
+
+            initialMonth={new Date(2017, 0)}
+            fromMonth={new Date(2017, 0)}
+            toMonth={new Date(2017, 11)}
           />
-          {' '}—{' '}
-          <span className="InputFromTo-to">
-            <DayPickerInput
-              ref={el => (this.to = el)}
-              value={to}
-              placeholder="To"
-              dayPickerProps={{
-                selectedDays: [from, {from, to}],
-                disabledDays: {before: from},
-                month: from || new Date(2017, 0),
-                fromMonth: new Date(2017, 0),
-                toMonth: new Date(2017, 11),
-                numberOfMonths: 1,
-              }}
-              onDayChange={this.changeTo}
-            />
-          </span>
-        </DayPicker>
+        </DayPickerContainer>
         <TimePicker>
           <AvgTime
             isEnabled={hour === -1}

src/Components/Map/Filters/Range.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  margin-bottom: 17px;
+
+  font-size: 16px;
+  font-weight: bold;
+`;

src/Components/Map/Map.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import mapboxgl from 'mapbox-gl';
+import { DateUtils } from 'react-day-picker';
 import 'mapbox-gl/dist/mapbox-gl.css'
 import Container from './Container';
 import Filters from './Filters';
@@ -11,8 +12,10 @@ const mapStyle = {
 
 class Map extends PureComponent {
   state = {
-    from: undefined,
-    to: undefined,
+    range: {
+      from: new Date(2017, 0, 1),
+      to: new Date(2017, 3, 4),
+    },
     hour: 9
   };
 
@@ -20,7 +23,7 @@ class Map extends PureComponent {
     mapboxgl.accessToken = 'pk.eyJ1IjoibWFydGlucHJvamVjdDEiLCJhIjoiY2ptdW93MXZrMDNjMTNrcGhmNTJ1ZGljdCJ9.9fC5LXUepNAYTKu8O162OA';
     this.map = new mapboxgl.Map({
       container: 'map',
-      style: 'mapbox://styles/martinproject1/cjmuoyx103ioc2rnw61w96aen'
+      style: 'mapbox://styles/martinproject1/cjnfxj6053wz32rq8r9sija4o'
     });
     this.nav = new mapboxgl.NavigationControl();
     this.map.scrollZoom.disable();
@@ -29,7 +32,8 @@ class Map extends PureComponent {
   }
 
   componentDidUpdate() {
-    const { from, to, hour } = this.state;
+    const { range, hour } = this.state;
+    const { from, to } = range;
     if (!from || !to) return;
 
     const dateFrom = this.dateConverter(from);
@@ -100,7 +104,7 @@ class Map extends PureComponent {
   };
 
   render() {
-    const { from, to, hour } = this.state;
+    const { range, hour } = this.state;
 
     return (
       <Container>
@@ -109,8 +113,7 @@ class Map extends PureComponent {
           style={mapStyle}
         />
         <Filters
-          from={from}
-          to={to}
+          range={range}
           hour={hour}
           changeFilter={this.changeFilter}
         />