redux: fixed estimated

src/components/UserLocation.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import L, { marker } from 'leaflet';
+import { marker } from 'leaflet';
 import { DomMarker } from '$utils/DomMarker';
 import { Icon } from '$components/panels/Icon';
+import { editor } from '$modules/Editor';
 
 export class UserLocation extends React.Component {
   constructor(props) {
@@ -15,7 +16,7 @@ export class UserLocation extends React.Component {
     });
 
     this.mark = null;
-    this.map = props.editor.map.map;
+    this.map = editor.map.map;
     this.location = [];
   }
 
@@ -24,6 +25,7 @@ export class UserLocation extends React.Component {
   }
 
   getUserLocation = callback => {
+    // todo: TO SAGAS
     if (!window.navigator || !window.navigator.geolocation) return;
 
     window.navigator.geolocation.getCurrentPosition(position => {

src/components/panels/EditorPanel.jsx

@@ -24,7 +24,7 @@ type Props = {
   logo: String,
   routerPoints: Number,
   activeSticker: String,
-  estimateTime: Number, // todo: implement!
+  estimated: Number, // todo: implement!
 
   setMode: Function,
   startEditing: Function,
@@ -61,7 +61,7 @@ class Component extends React.PureComponent<Props, void> {
 
   render() {
     const {
-      mode, routerPoints, distance, estimateTime, activeSticker, logo, user, editing, title, address, changed,
+      mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address, changed,
     } = this.props;
 
     return (
@@ -87,8 +87,8 @@ class Component extends React.PureComponent<Props, void> {
           <Icon icon="icon-cycle" size={32} />
           {
             <span>{
-              // toHours(estimateTime)
-            }HOURS HERE</span>
+              toHours(estimated)
+            }</span>
           }
         </div>
 
@@ -184,7 +184,7 @@ function mapStateToProps(state) {
       mode,
       routerPoints,
       distance,
-      estimateTime,
+      estimated,
       activeSticker,
       logo,
       title,
@@ -199,7 +199,7 @@ function mapStateToProps(state) {
     mode,
     routerPoints,
     distance,
-    estimateTime,
+    estimated,
     activeSticker,
     logo,
     title,

src/components/panels/UserPanel.jsx

@@ -91,18 +91,7 @@ export class Component extends React.PureComponent<Props, void> {
 }
 
 
-function mapStateToProps(state) {
-  const { user: { user } } = state;
+const mapStateToProps = ({ user: { user } }) => ({ user });
+const mapDispatchToProps = dispatch => bindActionCreators({ setUser, userLogout }, dispatch);
 
-  return { user };
-}
-
-const mapDispatchToProps = dispatch => bindActionCreators({
-  setUser,
-  userLogout,
-}, dispatch);
-
-export const UserPanel = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Component);
+export const UserPanel = connect(mapStateToProps, mapDispatchToProps)(Component);

src/containers/App.jsx

@@ -200,21 +200,11 @@ class Component extends React.Component<Props, void> {
   // };
 
   render() {
-    const { props: { user } } = this;
-
     return (
       <div>
         <Fills />
-
-        <UserLocation editor={editor} />
-
-        <UserPanel
-          editor={editor}
-          user={user}
-          // setUser={this.setUser}
-          // userLogout={this.userLogout}
-        />
-
+        <UserLocation />
+        <UserPanel />
         <EditorPanel />
       </div>
     );
@@ -229,7 +219,7 @@ function mapStateToProps(state) {
       mode,
       routerPoints,
       totalDistance,
-      estimateTime,
+      estimated,
       activeSticker,
       logo,
       title,
@@ -244,7 +234,7 @@ function mapStateToProps(state) {
     mode,
     routerPoints,
     totalDistance,
-    estimateTime,
+    estimated,
     activeSticker,
     logo,
     title,

src/redux/user/reducer.js

@@ -4,6 +4,11 @@ import { DEFAULT_USER } from '$constants/auth';
 import { MODES } from '$constants/modes';
 import { DEFAULT_LOGO } from '$constants/logos';
 
+const getEstimated = distance => {
+  const time = (distance && (distance / 15)) || 0;
+  return (time && parseFloat(time.toFixed(1)));
+};
+
 const setUser = (state, { user }) => ({
   ...state,
   user: {
@@ -15,7 +20,12 @@ const setUser = (state, { user }) => ({
 const setEditing = (state, { editing }) => ({ ...state, editing });
 const setChanged = (state, { changed }) => ({ ...state, changed });
 const setMode = (state, { mode }) => ({ ...state, mode });
-const setDistance = (state, { distance }) => ({ ...state, distance });
+const setDistance = (state, { distance }) => ({
+  ...state,
+  distance,
+  estimated: getEstimated(distance),
+});
+
 const setRouterPoints = (state, { routerPoints }) => ({ ...state, routerPoints });
 
 const setActiveSticker = (state, { activeSticker }) => ({ ...state, activeSticker });
@@ -43,7 +53,7 @@ export const INITIAL_STATE = {
   logo: DEFAULT_LOGO,
   routerPoints: 0,
   distance: 0,
-  estimateTime: 0,
+  estimated: 0,
   activeSticker: null,
   title: 0,
   address: '',

src/redux/user/sagas.js

@@ -126,6 +126,7 @@ function* setLogoSaga({ logo }) {
     yield put(setMode(MODES.NONE));
   }
 }
+
 export function* userSaga() {
   // ASYNCHRONOUS!!! :-)