Added address info to map

teamglados · Nov 26, 2017 · 750781a · 750781a
1 parent d18c047
commit 750781a
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 24 deletions.
diff --git a/client/features/evaluate/Card.js b/client/features/evaluate/Card.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components/native';
 import Icon from 'react-native-vector-icons/FontAwesome';
@@ -26,15 +26,15 @@ const propTypes = {
 
 const { width: windowWidth } = Dimensions.get('window');
 
-class Card extends Component {
+class Card extends PureComponent {
   render() {
     const { item, onOk, onDecline, onAddComment } = this.props;
 
     return (
       <CardWrapper>
         <CardImage
           source={{ uri: item.image }}
-          resizeMode="cover"
+          resizeMode="contain"
         />
         <Details>
           <Icon name="clock-o" size={18} color="#444" />
@@ -101,6 +101,7 @@ const CardWrapper = styled.View`
   shadow-color: #000;
   shadow-offset: 0px 4px;
   padding-bottom: 16px;
+  elevation: 3;
 `;
 
 const CardImage = styled.Image`
@@ -146,6 +147,7 @@ const Details = styled.View`
   padding-horizontal: 16px;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
 `;
 
 const AddComment = styled.View`

diff --git a/client/features/evaluate/evaluate.screen.js b/client/features/evaluate/evaluate.screen.js
@@ -33,9 +33,8 @@ class EvaluateScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      swipes: 0,
       commentedItem: null,
-      dataSource: props.marks,
+      dataSource: [...props.marks],
     };
   }
 
@@ -45,34 +44,26 @@ class EvaluateScreen extends Component {
 
   handleOk = item => {
     if (this.deckSwiper) {
-      this.incSwipes();
-      this.props.addMarkType({ id: item.id, type: 'ok' });
       this.deckSwiper._root.swipeRight();
+      this.props.addMarkType({ id: item.id, type: 'ok' });
     }
   }
 
   handleDecline = item => {
     if (this.deckSwiper) {
-      this.incSwipes();
-      this.props.addMarkType({ id: item.id, type: 'repair' });
       this.deckSwiper._root.swipeLeft();
+      this.props.addMarkType({ id: item.id, type: 'repair' });
     }
   }
 
   handleSwipeLeft = item => {
-    this.incSwipes();
     this.props.addMarkType({ id: item.id, type: 'repair' });
   }
 
   handleSwipeRight = item => {
-    this.incSwipes();
     this.props.addMarkType({ id: item.id, type: 'ok' });
   }
 
-  incSwipes = () => {
-    this.setState(prev => ({ swipes: prev.swipes + 1 }));
-  }
-
   finishEvaluation = () => {
     this.props.navigation.navigate('Optimize');
   }
@@ -97,8 +88,12 @@ class EvaluateScreen extends Component {
   }
 
   render() {
-    const { marksByid } = this.props;
-    const { isModalVisible, commentedItem, swipes, dataSource } = this.state;
+    const { marksByid, marks } = this.props;
+    const { isModalVisible, commentedItem, dataSource } = this.state;
+    const swipes = marks.reduce((sum, mark) => {
+      if (mark.type === 'repair' || mark.type === 'ok') sum += 1;
+      return sum;
+    }, 0);
 
     return (
       <EvaluateScreenWrapper>

diff --git a/client/features/mark/mark.ducks.js b/client/features/mark/mark.ducks.js
@@ -86,7 +86,6 @@ function* handleCapturePhoto({ payload }) {
       if (!demoCoords.length) return;
 
       const id = guid();
-      // const geo = demoCoords.pop();
       const geo = demoCoords[0];
 
       // post image and geo location to server
@@ -104,6 +103,9 @@ function* handleCapturePhoto({ payload }) {
 }
 
 function* handleMarkReceive({ payload }) {
+  // Consume coords
+  if (demoCoords.length) demoCoords.shift();
+
   const {
     id,
     timestamp,

diff --git a/client/features/mark/mark.screen.js b/client/features/mark/mark.screen.js
@@ -19,7 +19,7 @@ const propTypes = {
   marks: PropTypes.array.isRequired,
 };
 
-const PHOTO_INTERVAL = 2000;
+const PHOTO_INTERVAL = 1000;
 
 class MarkScreen extends Component {
   componentDidMount() {
@@ -68,6 +68,7 @@ class MarkScreen extends Component {
           captureQuality={Camera.constants.CaptureQuality['480p']}
           orientation="portrait"
           keepAwake
+          fixOrientation
         >
           <Button onPress={this.finishMarking} lg success>
             <Text size="18px">

diff --git a/client/features/optimize/optimize.screen.js b/client/features/optimize/optimize.screen.js
@@ -21,9 +21,11 @@ const propTypes = {
 class OptimizeScreen extends Component {
   state = {
     route: null,
+    adById: null,
   }
 
   componentWillMount() {
+    this.getAddresses();
     this.getDirections();
   }
 
@@ -33,6 +35,28 @@ class OptimizeScreen extends Component {
     return [marks[0].geo.long, marks[0].geo.lat];
   }
 
+  getAddresses = () => {
+    const { marks } = this.props;
+    const promises = [];
+
+    marks.forEach(({ geo, id }) => {
+      promises.push(
+        fetch(`http://nominatim.openstreetmap.org/reverse?format=json&lat=${geo.lat}&lon=${geo.long}&zoom=18&addressdetails=1`) // eslint-disable-line
+          .then(res => res.json())
+          .then(({ address }) => ({ address, id }))
+      );
+    });
+
+    Promise.all(promises)
+      .then(addresses => {
+        const adById = {};
+        addresses.forEach(({ address, id }) => {
+          adById[id] = `${address.road}, ${address.suburb}, ${address.city}`;
+        });
+        this.setState({ adById });
+      });
+  }
+
   getDirections = () => {
     const { marks } = this.props;
 
@@ -70,10 +94,12 @@ class OptimizeScreen extends Component {
   }
 
   render() {
-    const { route } = this.state;
+    const { route, adById } = this.state;
     const { marks } = this.props;
     const center = this.getCenterCoord();
 
+    if (!adById) return null;
+
     return (
       <OptimizeScreenWrapper>
         <Mapbox.MapView
@@ -88,14 +114,15 @@ class OptimizeScreen extends Component {
 
           {marks.map(mark =>
             <Mapbox.PointAnnotation
-              key={`${mark.id}_${mark.geo.lat}`}
-              id="markPoint"
+              key={`${mark.id}`}
+              id={`${mark.id}`}
               coordinate={[mark.geo.long, mark.geo.lat]}
+              title={adById[mark.id]}
             >
               <Dot>
                 <DotFill type={mark.type} />
               </Dot>
-              <Mapbox.Callout title="Look! An annotation!" />
+              <Mapbox.Callout title={adById[mark.id]} />
             </Mapbox.PointAnnotation>
           )}
 

diff --git a/client/middleware/index.js b/client/middleware/index.js
@@ -1,7 +1,7 @@
 import { createClient } from './client';
 
 // const wsUrl = '2fd5cbca.ngrok.io';
-const wsUrl = 'e9ba5d43.ngrok.io';
+const wsUrl = 'ca5b2adf.ngrok.io';
 
 // Export middleware function
 export default () => store => {