Merge pull request #12 from patrickml/development

Release 0.0.2

README.md

@@ -2,18 +2,19 @@
 Pokélert is an Open Source Pokémon GO pokemon tracker. It uses the https://pokevision.com/ API to perform lookups. The Goal of this application is to provide background notifications of pokemon in your area. i.e Theres a Charazard 500m away!
 
 ## ToDo
-- [ ]  Finish Menu
-- [ ]  List Pokemon in menu and add filters
-- [ ]  List Pokemon in menu and toggle tracking
+- [x]  Finish Menu
+- [x]  List Pokemon in menu
+- [ ]  List Pokemon in menu and toggle filter
 - [ ]  Use pokemon API to pull up information about the pokemon when clicked
-- [ ]  Add Map Markers 
+- [x]  Add Map Markers 
+- [ ]  Add Map Callouts 
 - [ ]  Add Background GeoLocation Services
 - [ ]  Notifiy use when pokemon they want are near
 - [ ]  Add local storage to store user filters and tracking
 
 ## Installation
 
-To install this application you will need to have https://facebook.github.io/react-native/ installed you can follow there [getting started](https://facebook.github.io/react-native/docs/getting-started.html#content) guide.
+To install this application you will need to have [React Native](https://facebook.github.io/react-native/) installed you can follow their [getting started](https://facebook.github.io/react-native/docs/getting-started.html#content) guide.
 
 ## Contributing
 
@@ -25,7 +26,7 @@ To install this application you will need to have https://facebook.github.io/rea
 
 ## History
 
-version 0.0.1
+Version 0.0.2
 
 ## Credits
 
@@ -58,4 +59,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
 
+## Image
+![Image](https://cloud.githubusercontent.com/assets/7581369/17268331/5aed152e-55f5-11e6-8ef8-817c4271eb04.png)
+
 

app/actions/index.js

@@ -1,3 +1,5 @@
 import './map.actions';
 import './modal.actions';
 import './menu.actions';
+import './timer.actions';
+import './location.actions';

app/actions/location.actions.js

@@ -0,0 +1,10 @@
+import EventHorizon from 'react-native-event-horizon';
+
+EventHorizon.createAction('location', 'UPDATE_LOCATION', (store, location, update) => {
+  update({
+    latitude: location.latitude,
+    longitude: location.longitude,
+  });
+});
+
+export default (region) => EventHorizon.dispatch('UPDATE_LOCATION', region);

app/actions/map.actions.js

@@ -1,28 +1,23 @@
 import EventHorizon from 'react-native-event-horizon';
-import fetchPokemon from '../fetch';
-
-EventHorizon.createAction('map', 'UPDATE_MAP_REGION', (store, region, update) => {
-  if (region && region.latitude) {
-    update({
-      location: region,
-    });
-  }
-
-  fetchPokemon(region || store.location);
-});
 
 EventHorizon.createAction('map', 'SET_MAP_LOADING', (store, data, update) => {
   update({
     loading: true,
-  })
+  });
+});
+
+EventHorizon.createAction('map', 'TOGGLE_MAP_TRACKING', (store, data, update) => {
+  console.log(store.track);
+  update({
+    track: !store.track,
+  });
 });
 
 EventHorizon.createAction('map', 'UPDATE_MAP_POKEMON', (store, pokemon, update) => {
-  console.log(pokemon);
   update({
     pokemon,
     loading: false,
-  })
+  });
 });
 
 EventHorizon.createAction('map', 'REMOVE_MAP_POKEMON', (store, index, update) => {
@@ -31,10 +26,10 @@ EventHorizon.createAction('map', 'REMOVE_MAP_POKEMON', (store, index, update) =>
       ...store.pokemon.slice(0, index),
       ...store.pokemon.slice(index + 1),
     ],
-  })
+  });
 });
 
-export const updateRegion = (region) => EventHorizon.dispatch('UPDATE_MAP_REGION', region);
-export const setLoading = () => EventHorizon.dispatch('SET_MAP_LOADING', {});
+export const setLoading = () => EventHorizon.dispatch('SET_MAP_LOADING');
+export const toggleNavigation = () => EventHorizon.dispatch('TOGGLE_MAP_TRACKING');
 export const updatePokemon = (pokemon) => EventHorizon.dispatch('UPDATE_MAP_POKEMON', pokemon);
 export const removePokemon = (index) => EventHorizon.dispatch('REMOVE_MAP_POKEMON', index);

app/actions/menu.actions.js

@@ -1,12 +1,16 @@
 import EventHorizon from 'react-native-event-horizon';
-import fetchPokemon from '../fetch';
 
 EventHorizon.createAction('menu', 'TRIGGER_OPEN_MENU', (store, open, update) => {
-  console.log('MENU', open);
   if (store.open !== open) {
     update({ open });
   }
 });
 
+EventHorizon.createAction('menu', 'TOGGLE_OPEN_MENU', (store, data, update) => {
+  update({ open: !store.open });
+});
+
 export const openMenu = () => EventHorizon.dispatch('TRIGGER_OPEN_MENU', true);
 export const closeMenu = () => EventHorizon.dispatch('TRIGGER_OPEN_MENU', false);
+export const setMenuState = (open) => EventHorizon.dispatch('TRIGGER_OPEN_MENU', open);
+export const toggleMenu = () => EventHorizon.dispatch('TOGGLE_OPEN_MENU');

app/actions/modal.actions.js

@@ -1,5 +1,4 @@
 import EventHorizon from 'react-native-event-horizon';
-import fetchPokemon from '../fetch';
 
 EventHorizon.createAction('modal', 'MODAL_VIEW_POKEMON', (store, pokemonId, update) => {
   update({

app/actions/timer.actions.js

@@ -0,0 +1,32 @@
+import EventHorizon from 'react-native-event-horizon';
+import defaultStore from '../stores/timer.store';
+
+// create a timer variable so we can set and reset it
+let timer = null;
+
+export const startTimer = () => EventHorizon.dispatch('TIMER_START');
+export const resetTimer = () => EventHorizon.dispatch('TIMER_RESET');
+export const decrementTimer = () => EventHorizon.dispatch('TIMER_DECREMENT');
+
+EventHorizon.createAction('timer', 'TIMER_RESET', (store, data, update) => {
+  update(defaultStore);
+});
+
+EventHorizon.createAction('timer', 'TIMER_START', (store, data, update) => {
+  update({
+    time: 30,
+  });
+  // set the timer to an interval of 1 second to decrement the store
+  timer = setInterval(() => decrementTimer(), 1000);
+});
+
+EventHorizon.createAction('timer', 'TIMER_DECREMENT', (store, data, update) => {
+  if (store.time > 0) {
+    update({
+      time: store.time - 1,
+    });
+  } else if (timer) {
+    // clear the interval if the value is 0
+    clearInterval(timer);
+  }
+});

app/app.js

@@ -2,36 +2,31 @@
  * Sample React Native App
  * https://github.com/facebook/react-native
  */
-import React, { Component } from 'react';
+import React from 'react';
 import {
   AppRegistry,
   StyleSheet,
-  Text,
   View,
-} from 'react-native'
+} from 'react-native';
 import './index';
 import Map from './map';
 import Fetching from './fetching';
 import Menu from './menu';
 
-class App extends Component {
-  render() {
-    return (
-      <Menu>
-        <View style={styles.container}>
-          <Map />
-          <Fetching />
-        </View>
-      </Menu>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
-    flex:1,
-    flexDirection: 'column'
+    flex: 1,
+    flexDirection: 'column',
   },
 });
 
+const App = () => (
+  <Menu>
+    <View style={styles.container}>
+      <Map />
+      <Fetching />
+    </View>
+  </Menu>
+);
+
 AppRegistry.registerComponent('pokelert', () => App);

app/countdown.js

@@ -2,27 +2,41 @@ import React, { PropTypes, Component } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { removePokemon } from './actions/map.actions';
 
-const getTime = (sec_num) => {
-  let days    = Math.floor(sec_num / (3600 * 24));
-  let hours   = Math.floor((sec_num - (days * (3600 * 24)))/3600);
-  let minutes = Math.floor((sec_num - (days * (3600 * 24)) - (hours * 3600)) / 60);
-  let seconds = Math.floor(sec_num - (days * (3600 * 24)) - (hours * 3600) - (minutes * 60));
+const getTime = (secs) => {
+  const days = Math.floor(secs / (3600 * 24));
+  const hours = Math.floor((secs - (days * (3600 * 24))) / 3600);
+  let minutes = Math.floor((secs - (days * (3600 * 24)) - (hours * 3600)) / 60);
+  let seconds = Math.floor(secs - (days * (3600 * 24)) - (hours * 3600) - (minutes * 60));
 
-  if (minutes < 10) {minutes = "0"+minutes;}
-  if (seconds < 10) {seconds = "0"+seconds;}
+  if (minutes < 10) { minutes = `0${minutes}`; }
+  if (seconds < 10) { seconds = `0${seconds}`; }
   return `${minutes}:${seconds}`;
-}
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'rgba(255, 255, 255, .50)',
+    borderColor: 'rgba(255, 255, 255, 0)',
+    borderRadius: 10,
+    borderWidth: 0.5,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
+  text: {
+    fontSize: 10,
+  },
+});
 
 export default class CountDown extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      seconds: 0
+      seconds: 0,
     };
     this.tick = this.tick.bind(this);
   }
 
-  componentDidMount() {
+  componentWillMount() {
     this.setState({ seconds: this.props.seconds });
     this.interval = setInterval(this.tick, 1000);
   }
@@ -52,16 +66,7 @@ export default class CountDown extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'rgba(255, 255, 255, .50)',
-    borderColor: 'rgba(255, 255, 255, 0)',
-    borderRadius: 10,
-    borderWidth: 0.5,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  text: {
-    fontSize: 10,
-  }
-});
+CountDown.propTypes = {
+  seconds: PropTypes.number,
+  index: PropTypes.number,
+};

app/fetch.js

@@ -1,12 +1,15 @@
 import EventHorizon from 'react-native-event-horizon';
-import { updatePokemon, setLoading } from './actions/map.actions.js';
+import { updatePokemon, setLoading } from './actions/map.actions';
+import { startTimer } from './actions/timer.actions';
 
-const parseData = (res) => res._bodyInit.type === 'text/html; charset=utf-8' && { pokemon: [] } || res.json();
+const parseData = (res) => (
+  res._bodyInit.type === 'text/html; charset=utf-8' && { pokemon: [] } || res.json()
+);
 
 const config = {
   method: 'GET',
   headers: {
-    'Accept': 'application/json',
+    Accept: 'application/json',
     'Content-Type': 'application/json',
   },
 };
@@ -17,22 +20,25 @@ const fetchData = ({ jobId, latitude, longitude }) => {
     .then((res) => { console.log(res); return res; })
     .then((res) => {
       if (res.jobStatus === 'in_progress') {
-        setTimeout(() => fetchData({ jobId, latitude, longitude }), 2000)
+        setTimeout(() => fetchData({ jobId, latitude, longitude }), 2000);
       } else if (res.jobStatus === 'unknown') {
-        setTimeout(() => fetchData({ jobId, latitude, longitude }), 30000)
+        setTimeout(() => fetchData({ jobId, latitude, longitude }), 30000);
       } else {
-        updatePokemon(res.pokemon)
+        updatePokemon(res.pokemon);
       }
     })
-    .catch(e => console.log(e))
-}
+    .catch(e => console.log(e));
+};
 
-export default ({ latitude, longitude }) => {
-  console.log(latitude, longitude);
-  setLoading();
-  fetch(`https://pokevision.com/map/scan/${latitude}/${longitude}`, config)
-    .then(parseData)
-    .then((res) => { console.log(res); return res; })
-    .then(({ jobId }) => setTimeout(() => fetchData({ jobId, latitude, longitude }), 2000))
-    .catch(e => console.log(e))
+export default () => {
+  const { latitude, longitude } = EventHorizon.subscribe('location');
+  if (latitude && longitude) {
+    setLoading();
+    startTimer();
+    fetch(`https://pokevision.com/map/scan/${latitude}/${longitude}`, config)
+      .then(parseData)
+      .then((res) => { console.log(res); return res; })
+      .then(({ jobId }) => setTimeout(() => fetchData({ jobId, latitude, longitude }), 2000))
+      .catch(e => console.log(e));
+  }
 };