Linked Camera to game, and also fixed polygon last points are not equal

App.js

@@ -36,10 +36,29 @@ export default class App extends Component<Props> {
     constructor(props) {
         super(props);
 
+        let watchID = navigator.geolocation.watchPosition((position) => {
+            console.log(this.state.activeWalk)
+            if(this.state.activeWalk){
+                this.setState({
+                    walkMarkers: [
+                        ...this.state.walkMarkers, {
+                            coordinate: position.coords,
+                            key: id++
+                        }
+                    ]
+                });
+            }
+            // if(!this.state.activeWalk){
+            //     this.setState({
+            //         walkMarkers: []
+            //     })
+            // }
+        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
+
         this.state = {
             activeWalk: false,
-            username: "",
+            username: "samded",
-            gameNumber: "",
+            gameNumber: "samdum",
             walkMarkers: [],
             captures: [
                 // new CapturedArea("fanded", [
@@ -56,30 +75,12 @@ export default class App extends Component<Props> {
                     {latitude: -43.5668, longitude:172.5615}
                 ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
             ],
-            watchID 
+            watchID,
+            activity: "map"
         };
     }
 
     componentDidMount() {
-        let watchID = navigator.geolocation.watchPosition((position) => {
-            console.log(this.state.activeWalk)
-            if(this.state.activeWalk){
-                this.setState({
-                    walkMarkers: [
-                        ...this.state.walkMarkers, {
-                            coordinate: position.coords,
-                            key: id++
-                        }
-                    ]
-                });
-            }
-            // if(!this.state.activeWalk){
-            //     this.setState({
-            //         walkMarkers: []
-            //     })
-            // }
-        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
-
         setInterval(() => {
             this.updateCaptures();
         }, 5000);
@@ -104,6 +105,12 @@ export default class App extends Component<Props> {
     stopWalk(){
         console.log("stopping walk")
         sendArea(this.state.gameNumber, this.state.username, this.state.walkMarkers)
+        .then(data => {
+            console.log(data);
+            if (data != []) {
+                this.takePicture(data.polygonID);
+            }
+        });
         this.setState({activeWalk: false})
 
     }
@@ -111,41 +118,26 @@ export default class App extends Component<Props> {
     componentWillUnmount() {
         navigator.geolocation.stopWatch(this.state.watchID);
     }
-    takePicture = async function() {
+
+    takePicture = async function(polygonID) {
         if (this.camera) {
           const options = { quality: 0.5, base64: true };
           const data = await this.camera.takePictureAsync(options)
           console.log(data.uri);
+          this.setState({activity: "map"});
         }
     };
+
+    showCamera() {
+        this.setState({activity: "takePicture"});
+    }
     
 
     render() {
         
-        return (
+        let view = "";
-            // <View style={styles.container}>
+        if (this.state.activity === "map") {
-            //     <RNCamera
+            view = 
-            //         ref={ref => {
-            //         this.camera = ref;
-            //         }}
-            //         style = {styles.preview}
-            //         type={RNCamera.Constants.Type.back}
-            //         flashMode={RNCamera.Constants.FlashMode.on}
-            //         permissionDialogTitle={'Permission to use camera'}
-            //         permissionDialogMessage={'We need your permission to use your camera phone'}
-            //         onGoogleVisionBarcodesDetected={({ barcodes }) => {
-            //         console.log(barcodes)
-            //         }}
-            //     />
-            //     <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
-            //     <TouchableOpacity
-            //         onPress={this.takePicture.bind(this)}
-            //         style = {styles.capture}
-            //     >
-            //         <Text style={{fontSize: 14}}> SNAP </Text>
-            //     </TouchableOpacity>
-            //     </View>
-            // </View>
             <View style ={{flex: 1}}>
                 <MapView
                     showsUserLocation
@@ -199,7 +191,34 @@ export default class App extends Component<Props> {
                     </View>
                 </View>
            </View>
-    );
+        } else if (this.state.activity === "takePicture") {
+            view = <View style={styles.container}>
+            <RNCamera
+                ref={ref => {
+                this.camera = ref;
+                }}
+                style = {styles.preview}
+                type={RNCamera.Constants.Type.back}
+                flashMode={RNCamera.Constants.FlashMode.on}
+                permissionDialogTitle={'Permission to use camera'}
+                permissionDialogMessage={'We need your permission to use your camera phone'}
+                onGoogleVisionBarcodesDetected={({ barcodes }) => {
+                console.log(barcodes)
+                }}
+            />
+            <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
+            <TouchableOpacity
+                onPress={this.takePicture.bind(this)}
+                style = {styles.capture}
+            >
+                <Text style={{fontSize: 14}}> SNAP </Text>
+            </TouchableOpacity>
+            </View>
+        </View>
+        }
+
+
+        return view;
   }
 }
 

api/v1/areaFunctions.js

@@ -85,6 +85,10 @@ module.exports = {
             let polygonResult = [];
             let polygonsMerged = [];
             polygons.map((polygon) => {
+                if (polygon[0].lat != polygon[polygon.length - 1].lat &&
+                    polygon[0].lng != polygon[polygon.length - 1].lng) {
+                        polygon.push({lat: polygon[0].lat, lng: polygon[0].lng})
+                }
                 let intersect = module.exports.checkIntersects(polygonPoints, polygon.coords);
                 if (intersect != null) {
                     polygonPoints = module.exports.unionPolygon(polygonPoints, polygon.coords);

gpx.gpx

@@ -56,4 +56,8 @@
     <ele>20.00</ele>
     <time>2018-09-29T00:15:59Z</time>
 </wpt>
+<wpt lat="-43.56034430559162" lon="172.56487963850645">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:16:00Z</time>
+</wpt>
 </gpx>

update-map.js

@@ -13,12 +13,12 @@ export const sendArea = (gameID, username, polygon) => {
     formBody.push("points=" + JSON.stringify(points));
     formBody = formBody.join("&");
     console.log(formBody)
-    fetch("http://"+config.host + ":" + config.port + "/v1/polygon", {
+    return fetch("http://"+config.host + ":" + config.port + "/v1/polygon", {
       method: "post",
       headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
       body: formBody
     })
-    .then(res => {return res.json()}).then(data => console.log(data));
+    .then(res => {return res.json()});
 }
 
 export const updateAreas = (gameID, update) => {