Merged code, moved some code from constructor to componentDidMount to avoid bugs on really slow devices

App.js

@@ -17,7 +17,7 @@ import { RNCamera } from 'react-native-camera';
 
 import RunInfo from './components/run-info';
 import RunInfoNumeric from './components/run-info-num';
-import {updateAreas} from './update-map'
+import {updateAreas, sendArea} from './update-map'
 import MapView from 'react-native-maps';
 import WalkButton from "./components/new-button";
 import JoinButton from "./components/join-button";
@@ -33,69 +33,84 @@ const instructions = Platform.select({
 type Props = {};
 let id = 0;
 export default class App extends Component<Props> {
-    // constructor(props) {
+    constructor(props) {
-    //     super(props);
+        super(props);
 
-    //      setInterval(() => {
+        this.state = {
-    //         this.updateCaptures();
+            activeWalk: false,
-    //     }, 5000);
+            username: "",
+            gameNumber: "",
+            walkMarkers: [],
+            captures: [
+                // new CapturedArea("fanded", [
+                //     {latitude: -43.5623, longitude:172.5655},
+                //     {latitude: -43.5623, longitude:172.5650},
+                //     {latitude: -43.5628, longitude:172.5650},
+                //     {latitude: -43.5628, longitude:172.5655}
+                // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
 
-    //     let watchID = navigator.geolocation.watchPosition((position) => {
+                new CapturedArea("samded", [
+                    {latitude: -43.5663, longitude:172.5615},
+                    {latitude: -43.5663, longitude:172.5610},
+                    {latitude: -43.5668, longitude:172.5610},
+                    {latitude: -43.5668, longitude:172.5615}
+                ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
+            ],
+            watchID 
+        };
+    }
+
+    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: [
+            //         walkMarkers: []
-    //                 ...this.state.walkMarkers, {
-    //                     coordinate: position.coords,
-    //                     key: id++
-    //                 }
-    //             ]
-    //         });
-    //     }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
-
-    //     this.state = {
-    //         activeWalk: false,
-    //         username: "",
-    //         gameNumber: "",
-    //         walkMarkers: [],
-    //         captures: [
-    //             // new CapturedArea("fanded", [
-    //             //     {latitude: -43.5623, longitude:172.5655},
-    //             //     {latitude: -43.5623, longitude:172.5650},
-    //             //     {latitude: -43.5628, longitude:172.5650},
-    //             //     {latitude: -43.5628, longitude:172.5655}
-    //             // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
-
-    //             new CapturedArea("samded", [
-    //                 {latitude: -43.5663, longitude:172.5615},
-    //                 {latitude: -43.5663, longitude:172.5610},
-    //                 {latitude: -43.5668, longitude:172.5610},
-    //                 {latitude: -43.5668, longitude:172.5615}
-    //             ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
-    //         ],
-    //         watchID 
-    //     };
-    // }
-    // updateCaptures(){
-    //     updateAreas(this.state.gameNumber, (polygons) => {
-    //         this.setState({
-    //             captures: polygons
-    //         })
             //     })
             // }
-    // setGameNumber(user, number){
+        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
-    //     this.setState({username: user, gameNumber: number})
-    // }
 
-    // startWalk(){
+        setInterval(() => {
-    //     this.setState({walkMarkers: [], activeWalk: true})
+            this.updateCaptures();
-    // }
+        }, 5000);
+    }
 
-    // stopWalk(){
+    updateCaptures(){
-    //     this.setState({activeWalk: false})
+        updateAreas(this.state.gameNumber, (polygons) => {
-    // }
+            this.setState({
+                captures: polygons
+            })
+        })
+    }
+    setGameNumber(user, number){
+        this.setState({username: user, gameNumber: number})
+    }
     
-    // componentWillUnmount() {
+    startWalk(){
-    //     navigator.geolocation.stopWatch(this.state.watchID);
+        console.log("starting walk")
-    // }
+        this.setState({walkMarkers: [], activeWalk: true})
+    }
+
+    stopWalk(){
+        console.log("stopping walk")
+        sendArea(this.state.gameNumber, this.state.username, this.state.walkMarkers)
+        this.setState({activeWalk: false})
+
+    }
+
+    componentWillUnmount() {
+        navigator.geolocation.stopWatch(this.state.watchID);
+    }
     takePicture = async function() {
         if (this.camera) {
           const options = { quality: 0.5, base64: true };
@@ -108,82 +123,82 @@ export default class App extends Component<Props> {
     render() {
         
         return (
-            <View style={styles.container}>
+            // <View style={styles.container}>
-        <RNCamera
+            //     <RNCamera
-            ref={ref => {
+            //         ref={ref => {
-              this.camera = 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
-        //             style = {styles.map}
-        //             initialRegion={{
-        //                 latitude: -43.5610623,
-        //                 longitude: 172.5655853,
-        //                 latitudeDelta: 0.02,
-        //                 longitudeDelta: 0.02,
             //         }}
-        //             // onRegionChange = {(region)=> this.addMarker((region))}
+            //         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>
-        //             <MapView.Polyline
+            //     </TouchableOpacity>
-        //                 coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
-        //                 strokeWidth={5}
-        //             />
-        //             {this.state.captures.map((capture, i) => {
-        //                 return <MapView.Polygon
-        //                     key={i}
-        //                     coordinates={capture.coordinates}
-        //                     strokeWidth={2}
-        //                     strokeColor={capture.strokeColor}
-        //                     fillColor={capture.fillColor}
-        //                 />
-        //                 }
-        //             )
-        //             }
-        //         </MapView>
-        //         <Text style={styles.gameNumber}>
-        //             {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
-                
-        //         </Text>
-
-        //         <RoomInput 
-        //             ref={instance => this.roomInputModal = instance}
-        //             join={(user, number) => this.setGameNumber(user, number)}/>
-        //         <View style={styles.menu}>
-                
-        //             <View style={styles.walk}>
-        //                 <WalkButton 
-        //                     start={() => {this.startWalk()}}
-        //                     stop={() => {this.stopWalk()}}
-        //                     />
-        //             </View>
-
-        //             <View style={styles.infoWrapper}>
-        //                 <JoinButton 
-        //                     modal={() => this.roomInputModal.setModalVisible(true)}/>
-        //             </View>
             //     </View>
             // </View>
+            <View style ={{flex: 1}}>
+                <MapView
+                    showsUserLocation
+                    style = {styles.map}
+                    initialRegion={{
+                        latitude: -43.5610623,
+                        longitude: 172.5655853,
+                        latitudeDelta: 0.02,
+                        longitudeDelta: 0.02,
+                    }}
+
+                >
+
+                    <MapView.Polyline
+                        coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
+                        strokeWidth={5}
+                        strokeColor={"rgb(148,0,211)"}
+                    />
+                    {this.state.captures.map((capture, i) => {
+                        return <MapView.Polygon
+                            key={i}
+                            coordinates={capture.coordinates}
+                            strokeWidth={2}
+                            strokeColor={capture.strokeColor}
+                            fillColor={capture.fillColor}
+                        />
+                        }
+                    )
+                    }
+                </MapView>
+                <Text style={styles.gameNumber}>
+                    {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
+                
+                 </Text>
+
+                 <RoomInput 
+                    ref={instance => this.roomInputModal = instance}
+                    join={(user, number) => this.setGameNumber(user, number)}/>
+                <View style={styles.menu}>
+                
+                    <View style={styles.walk}>
+                        <WalkButton 
+                            start={() => {this.startWalk()}}
+                            stop={() => {this.stopWalk()}}
+                            />
+                    </View>
+
+                    <View style={styles.infoWrapper}>
+                        <JoinButton 
+                            modal={() => this.roomInputModal.setModalVisible(true)}/>
+                    </View>
+                </View>
+           </View>
     );
   }
 }

api/config/db.js

@@ -10,6 +10,8 @@ exports.connect = function(done){
         host: 'localhost',
         user: 'admin_seng440',
         password: 'seng440',
+        // user: 'root',
+        // password: '',
         port:  3306,
         database: "admin_territory-walker",
         //multipleStatements: true

api/v1/areaFunctions.js

@@ -95,7 +95,7 @@ module.exports = {
             });
 
             let area = mathFunc.calculateArea(points);
-            module.exports.polygonDestruction(res, gameID, userID, polygonPoints, area, polygonsMerged);
+            // module.exports.polygonDestruction(res, gameID, userID, polygonPoints, area, polygonsMerged);
             module.exports.submitFinalCollation(res, gameID, userID, polygonPoints, area, polygonsMerged);
         });
     },

components/new-button.js

@@ -37,7 +37,7 @@ export default class WalkButton extends Component {
                             buttonText: "Start Capture",
                             buttonColour: 'rgba(0,255,0,0.5)'
                         })
-                        this.start();
+                        this.stop();
                     }else{
                         console.log("state false to true")
                         this.setState({
@@ -45,7 +45,7 @@ export default class WalkButton extends Component {
                             buttonText: "Stop Capture",
                             buttonColour: 'rgba(255,0,0,0.5)'
                         })
-                        this.stop()
+                        this.start()
                     }}}
                 // style={sharedStyles.new}
             >

config.json

@@ -1,4 +1,4 @@
 {
-  "host"  : "http://umbrasheep.com",
+  "host"  : "umbrasheep.com",
   "port" : "13370"
 }

update-map.js

@@ -1,6 +1,26 @@
 const config = require("./config.json");
 import CapturedArea from "./components/captured-area";
 
+export const sendArea = (gameID, username, polygon) => {
+    // console.log(polygon)
+    points = []
+    polygon.map((point) => {
+        points.push({lat: point.coordinate.latitude, lng: point.coordinate.longitude})
+    })
+    let formBody = [];
+    formBody.push("gameID=" + gameID);
+    formBody.push("userID=" + username);
+    formBody.push("points=" + JSON.stringify(points));
+    formBody = formBody.join("&");
+    console.log(formBody)
+    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));
+}
+
 export const updateAreas = (gameID, update) => {
     getPolygons(gameID).then((responseJson) => {
         let polygons = []
@@ -24,9 +44,9 @@ export const updateAreas = (gameID, update) => {
 function getPolygons(gameID) {
     console.log("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID)
     return fetch("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID, {method: 'GET',
-    headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},})
+    headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}})
-    .then((response) => response.json())
+    .then(response => response.json())
-    .catch((error) => {
+    .catch(error => {
         console.error(error);
     });
 }