diff --git a/App.js b/App.js index a571093f02c57f09f4668feea39d59f851e46d18..a8fdf01befd005d7dc29452898fda916d7ba0b22 100755 --- a/App.js +++ b/App.js @@ -6,8 +6,7 @@ import Login from "./components/Login"; export default class App extends React.Component { state = { - userLocation: null, - usersHistory: [] + userLocation: null }; userTrackingHandler = () => { diff --git a/components/GameList.js b/components/GameList.js index f6ecf0848edc5a5db650b0986c8ac537d6e5dee5..ae1c7a69c80c10b9267e9d88da8c0f544597c52e 100644 --- a/components/GameList.js +++ b/components/GameList.js @@ -1,14 +1,19 @@ import React, { Component, Fragment } from "react"; -import { FlatList, Button } from "react-native"; +import { FlatList, Button, Picker, Text, StyleSheet } from "react-native"; + +import LocationTracker from "./LocationTracker"; class GameList extends Component { constructor(props) { super(props); this.state = { games: [], + tracking: false, selectedGame: null, editForm: false }; + + intervalID = 0; } componentDidMount() { @@ -28,17 +33,69 @@ class GameList extends Component { }); } + handleTrackingChange() { + this.setState({ tracking: !this.state.tracking }); + } + + startTracking() { + this.intervalID = setInterval(() => { + console.log("Nyt träkätää nim birusti."); + }, 3000); + } + + stopTracking() { + clearInterval(this.intervalID); + console.log("Nyt lopetetaa seuranta."); + } + + componentDidUpdate() { + if (this.state.tracking) { + this.startTracking(); + } else if (!this.state.tracking) { + this.stopTracking(); + } + } + componentWillUnmount() { + clearInterval(this.intervalID); + } render() { - return ( - <Fragment> - {this.state.games.length > 0 && ( - <FlatList - data={this.state.games} - renderItem={({ item }) => <Button title={item.name} />} + if (this.state.games.length > 0) { + const items = ( + <Fragment> + <Picker + style={styles.picker} + selectedValue={this.state.selectedGame} + onValueChange={(selectedGame, itemIndex) => + this.setState({ selectedGame }) + } + > + {this.state.games.map(game => ( + <Picker.Item label={game.name} value={game.id} /> + ))} + </Picker> + <LocationTracker + tracking={this.state.tracking} + handleTrackingChange={this.handleTrackingChange.bind(this)} /> - )} - </Fragment> - ); + </Fragment> + ); + return <Fragment>{items}</Fragment>; + } else return null; } } + +const styles = StyleSheet.create({ + picker: { + width: 200, + height: 100 + } +}); + export default GameList; + +// {this.state.games.length > 0 && ( +// <FlatList +// data={this.state.games} +// renderItem={({ item }) => <Button title={item.name} />} +// /> +// )} diff --git a/components/LocationTracker.js b/components/LocationTracker.js new file mode 100644 index 0000000000000000000000000000000000000000..1a20e5429d5ec756a8efabc5f2123ea70c52e255 --- /dev/null +++ b/components/LocationTracker.js @@ -0,0 +1,27 @@ +import React, { Fragment } from "react"; +import { Switch, Text, StyleSheet } from "react-native"; + +const LocationTracker = props => { + return ( + <Fragment> + <Text style={styles.titleText}>Tracking:</Text> + <Switch + style={styles.switch} + value={props.tracking} + onValueChange={props.handleTrackingChange} + /> + </Fragment> + ); +}; + +const styles = StyleSheet.create({ + switch: {}, + titleText: { + fontSize: 40, + fontWeight: "bold", + textAlign: "center", + textAlignVertical: "center" + } +}); + +export default LocationTracker;