diff --git a/App.js b/App.js index ec98dc46e35af61b8d880c320c7f3fe41c1c715a..ea7869dda5a77406c782ad24e0362501ad905d4b 100755 --- a/App.js +++ b/App.js @@ -1,10 +1,9 @@ import React, { Component } from "react"; -import { StyleSheet, Text, View, Button, AsyncStorage } from "react-native"; +import { StyleSheet, View } from "react-native"; -import FetchLocation from "./components/FetchLocation"; import Login from "./components/Login"; -export default class App extends React.Component { +export default class App extends Component { state = { userLocation: null }; @@ -35,8 +34,6 @@ export default class App extends React.Component { } } -// <FetchLocation onStartTracking={this.userTrackingHandler} /> - const styles = StyleSheet.create({ container: { display: "flex", diff --git a/components/FetchLocation.js b/components/FetchLocation.js deleted file mode 100755 index 65c773dde97d8f1b1252fc19770eeca649cbc222..0000000000000000000000000000000000000000 --- a/components/FetchLocation.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import { Button } from "react-native"; - -const fetchLocation = props => { - return <Button title="Start tracking" onPress={props.onStartTracking} />; -}; - -export default fetchLocation; diff --git a/components/GameList.js b/components/GameList.js index ffd8cfd239237511daec098c549edec0986b33df..ccdf375fa589aa21b80ba12d2624625cf3ea9e7b 100644 --- a/components/GameList.js +++ b/components/GameList.js @@ -1,5 +1,5 @@ import React, { Component, Fragment } from "react"; -import { FlatList, Button, Picker, Text, StyleSheet } from "react-native"; +import { Picker, Text, StyleSheet } from "react-native"; import LocationTracker from "./LocationTracker"; @@ -13,13 +13,14 @@ class GameList extends Component { editForm: false }; - intervalID = 0; + intervalID = 0; // Used for starting and stopping the tracking ticks } componentDidMount() { this.getGames(); } + // Get all the games from the server and set the state to the first game getGames() { fetch("http://172.20.2.110:5000/game/listgames") .then(response => response.json()) @@ -33,25 +34,29 @@ class GameList extends Component { console.log(error); }); } - + // Toggles the tracking boolean handleTrackingChange() { this.setState({ tracking: !this.state.tracking }); } + // Start the player tracking with the wanted interval (ms) startTracking() { + let interval = 3000; this.intervalID = setInterval(() => { console.log( "Nyt träkätää nim birusti peliä: " + this.state.selectedGame.name ); console.log("Tracking: " + this.state.tracking); - }, 3000); + }, interval); } + // Stop tracking the player stopTracking() { clearInterval(this.intervalID); console.log("Nyt lopetetaa seuranta."); } + // Start & stop tracking depending on the boolean 'tracking' in state componentDidUpdate() { if (this.state.tracking) { this.startTracking(); @@ -59,6 +64,8 @@ class GameList extends Component { this.stopTracking(); } } + + // Stop tracking on Unmount componentWillUnmount() { clearInterval(this.intervalID); } @@ -85,7 +92,7 @@ class GameList extends Component { </Fragment> ); return <Fragment>{items}</Fragment>; - } else return null; + } else return <Text>No games found.</Text>; } } diff --git a/components/LocationTracker.js b/components/LocationTracker.js index 07217e7b0cfc226d75e48106fbc9d2c52456f810..f40a7708f56f3860fcf087abdecd525a24cf7941 100644 --- a/components/LocationTracker.js +++ b/components/LocationTracker.js @@ -16,6 +16,7 @@ const LocationTracker = props => { ); }; +// Need a container for the switch to align it in the middle const styles = StyleSheet.create({ switchContainer: { justifyContent: "center", diff --git a/components/Login.js b/components/Login.js index 330cec424fb40782f2aa338f0b0eecd092f0df07..5546335d3d9a5143273343572fd98cc7f5ad2e26 100644 --- a/components/Login.js +++ b/components/Login.js @@ -1,5 +1,6 @@ import React, { Component, Fragment } from "react"; -import { View, Button, AsyncStorage, StyleSheet } from "react-native"; +import { View, Button, StyleSheet } from "react-native"; +import { AsyncStorage } from "async-storage"; import LoginForm from "./LoginForm"; import RegisterForm from "./RegisterForm"; @@ -7,21 +8,25 @@ import GameList from "./GameList"; class Login extends Component { state = { - form: "", // Popup form (login, register etc.) + form: "", // Used for forms (login, register etc.) username: null, token: null }; + // Toggling the register and login forms visibility toggleView = view => { this.setState({ form: view }); }; + + // Storing the username and token when logging in handleState = async data => { await AsyncStorage.setItem("name", data.name); await AsyncStorage.setItem("token", data.token); await this.setState({ username: data.name, token: data.token }); }; + // When logging out, removing the token from the storage handleLogout = async () => { await this.setState({ username: null, token: null }); await AsyncStorage.removeItem("token"); diff --git a/components/RegisterForm.js b/components/RegisterForm.js index 6cf762ce8c316566a953a52ea1e1558afa9b10f3..02224360a1f34ee6b4c8c33eb8a9b25c92ccb3da 100644 --- a/components/RegisterForm.js +++ b/components/RegisterForm.js @@ -13,7 +13,7 @@ export class RegisterForm extends React.Component { registered: false }; - //this.handleRegister = this.handleRegister.bind(this); + this.handleRegister = this.handleRegister.bind(this); } // shows error messages associated with registering diff --git a/package.json b/package.json index e1f59e13db857005214e11a932f76a3cbb18e1c9..e6ddfa0a0e7db1ad1b41e0a39dfec55cb3008d66 100755 --- a/package.json +++ b/package.json @@ -7,10 +7,9 @@ "test": "jest" }, "dependencies": { - "@terrylinla/react-native-sketch-canvas": "^0.8.0", - "react": "16.8.3", - "react-native": "0.59.8", - "react-native-maps": "^0.24.2" + "@react-native-community/async-storage": "^1.5.0", + "react": "16.8.6", + "react-native": "0.60.0" }, "devDependencies": { "@babel/core": "7.4.5",