Refactoring classes to functions. Drawer-menu, Webcam page.

.eslintrc.js

@@ -0,0 +1,65 @@
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
+  },
+  parser: 'babel-eslint',
+  extends: [
+    'airbnb',
+    'plugin:react/recommended',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'import/prefer-default-export': 0,
+    'global-require': 0,
+    indent: [
+      'error',
+      2,
+    ],
+    'linebreak-style': [
+      'error',
+      'unix',
+    ],
+    quotes: [
+      'error',
+      'single',
+    ],
+    semi: [
+      'error',
+      'never',
+    ],
+    eqeqeq: 'error',
+    'no-trailing-spaces': 'error',
+    'object-curly-spacing': [
+      'error', 'always',
+    ],
+    'arrow-spacing': [
+      'error', { before: true, after: true },
+    ],
+    'no-console': 0,
+    'react/prop-types': 0,
+  },
+  settings: {
+    react: {
+      createClass: 'createReactClass', // Regex for Component Factory to use,
+      // default to "createReactClass"
+      pragma: 'React', // Pragma to use, default to "React"
+      version: 'detect', // React version. "detect" automatically picks the version you have installed.
+      // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+      // default to latest and warns if missing
+      // It will default to "detect" in the future
+      flowVersion: '0.53', // Flow version
+    },
+  },
+}

.gitignore

@@ -1,3 +1,4 @@
+node_modules
 node_modules/**/*
 .expo/*
 npm-debug.*

App.js

@@ -1,133 +1,119 @@
-// Begin: spaghetti code
-import React, { Component } from 'react';
-import { StyleSheet, Text, View, Image, ImageBackground, Alert, TouchableOpacity, Dimensions} from 'react-native';
-import * as Location from 'expo-location';
-import * as Permissions from 'expo-permissions';
-
-
-export default class App extends Component {
-
-  // init states
-  state = {
-    locationLat: null,
-    locationLon: null,
-    errorMessage: null,
-    flagImage: true,
-    textColour: '#FA5695'
-  };
-
-  // location functions
-
-  _getLocationPerms = async () => {
-    let { status } = await Permissions.askAsync(Permissions.LOCATION);
-    if (status !== 'granted') {
-      this.setState({
-        errorMessage: 'Permissions to access location was denied',
-      });
+import 'react-native-gesture-handler'
+import React, { useState, useEffect } from 'react'
+import {
+  ActivityIndicator, Text, View, Image, ImageBackground, TouchableOpacity, Dimensions,
+} from 'react-native'
+import {
+  createDrawerNavigator,
+} from '@react-navigation/drawer'
+import { NavigationContainer } from '@react-navigation/native'
+import haversine from 'haversine'
+import Hamburger from 'react-native-hamburger'
+import {
+  getLocationPerms, findCoordinates, findCity, toripolliisiLocation,
+} from './utils/locationUtilities'
+import Webcam from './components/Webcam'
+import { styles } from './style/style'
+
+const Home = (navigation) => {
+  const [location, setLocation] = useState({ latitude: 0, longitude: 0 })
+  const [city, setCity] = useState('Etsitään sijaintia…')
+  const [colorFlag, setColorFlag] = useState(true)
+
+  useEffect(async () => {
+    await getLocationPerms()
+    await findCoordinates(setLocation)
+  }, [])
+
+  useEffect(() => {
+    findCity(location, setCity)
+  }, [location])
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      await findCoordinates(setLocation)
+    }, 10 * 1000)
+    return () => {
+      clearInterval(interval)
     }
-  };
-
-  findCoordinates = async () => {
-    navigator.geolocation.getCurrentPosition(
-      position => {
-        const locationLat = JSON.stringify(position.coords.latitude);
-        const locationLon = JSON.stringify(position.coords.longitude);
-
-        this.setState({ locationLat });
-        this.setState({ locationLon });
-      },
-      error => Alert.alert(error.message),
-      { enableHighAccuracy: false, maximumAge: 10 }
-    );
-  };
-
-  changeImage() {
-   if (this.state.textColour === 'white') {
-     var textColour = '#FA5695';
-   } else {
-     var textColour = 'white';
-   }
-   this.setState({
-      flagImage:!this.state.flagImage,
-      textColour: textColour
-    });
-  };
-
-  tekstiStyle = function(options) {
-    return {
-      fontFamily: 'sans-serif', // android default font
-      fontSize: 30,
-      textAlign: "center",
-      margin: 10,
-      color: this.state.textColour // muuhun #F80160
-    }
-  };
-
-  render() {
-    const dimensions = Dimensions.get('window');
-    const haversine = require('haversine');
+  }, [])
 
-    setTimeout(this._getLocationPerms, 1000); // 2s
-    setTimeout(this.findCoordinates, 1000);
-
-    let toripolliisiLocation = {
-      latitude: 65.0126795,
-      longitude: 25.4649844
-    };
-
-    let start = {
-      latitude: this.state.locationLat,
-      longitude: this.state.locationLon
-    };
-
-    return (
-        <ImageBackground source={ this.state.flagImage === true ?
-                          require('./assets/backgroundWhite.png') :
-                          require('./assets/backgroundPink.png')}
-                          style={{flex: 1, width: '100%', height: '100%'}}>
-          <View style={styles.container}>
-
-            <TouchableOpacity onPress={ this.changeImage.bind(this) }>
-            <Image source={ this.state.flagImage === true ?
-                          require('./assets/ToripolliisiPink.png') :
-                          require('./assets/ToripolliisiWhite.png')}
-                    style={{width: Math.round(dimensions.width * 13 / 16), height: Math.round(dimensions.height * 8 / 16), resizeMode: 'center'}} />
-            </TouchableOpacity>
+  const changeColor = () => {
+    setColorFlag(!colorFlag)
+  }
 
-            <Text style={this.tekstiStyle()}>
-              {"\n"}Ettäisyys Toripolliisiin on
-            </Text>
-            <Text style={styles.etaisyys}>
-             {String(haversine(start, toripolliisiLocation)).substring(0,6)} km
+  const dimensions = Dimensions.get('window')
+
+  return (
+    <ImageBackground
+      source={colorFlag
+        ? require('./assets/backgroundWhite.png')
+        : require('./assets/backgroundPink.png')}
+      style={styles.image_background}
+    >
+      <View style={styles.container}>
+        <Hamburger
+          active={colorFlag}
+          type="cross"
+          onPress={() => navigation.toggleDrawer()}
+        />
+
+        <TouchableOpacity onPress={changeColor}>
+          <Image
+            source={colorFlag
+              ? require('./assets/ToripolliisiPink.png')
+              : require('./assets/ToripolliisiWhite.png')}
+            style={{
+              width: Math.round(dimensions.width * (13 / 16)),
+              height: Math.round(dimensions.height * (8 / 16)),
+              resizeMode: 'center',
+            }}
+          />
+        </TouchableOpacity>
+
+        <Text style={colorFlag
+          ? styles.textB
+          : styles.textW}
+        >
+          {'\n'}
+          Ettäisyys Toripolliisiin on
+        </Text>
+
+        { location.latitude === 0
+          ? <ActivityIndicator size="large" color="#F80160" />
+          : (
+            <Text style={styles.distance}>
+              {' '}
+              {String(haversine(location, toripolliisiLocation)).substring(0, 6)}
+              {' '}
+              km
             </Text>
+          ) }
 
-          </View>
-        </ImageBackground>
-    );
-  }
-}
+        <Text style={styles.location}>
+          {city}
+        </Text>
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  teksti: {
-    fontFamily: 'sans-serif', // android default font
-    fontSize: 26,
-    textAlign: "center",
-    margin: 10,
-    color: '#FA5695' // muuhun #F80160
-  },
+      </View>
+    </ImageBackground>
+  )
+}
 
-  etaisyys: {
-    fontFamily: 'sans-serif-medium',
-    fontSize: 36,
-    textAlign: "center",
-    fontWeight: 'bold',
-    color: 'black'
-  },
-});
+const Drawer = createDrawerNavigator()
+const App = () => (
+  <NavigationContainer>
+    <Drawer.Navigator
+      initialRouteName="Home"
+      drawerType="front"
+      drawerStyle={styles.drawer}
+      drawerContentOptions={{
+        itemStyle: { marginVertical: 10 },
+      }}
+    >
+      <Drawer.Screen name="Ettäisyys" component={Home} />
+      <Drawer.Screen name="Webcam" component={Webcam} />
+    </Drawer.Navigator>
+  </NavigationContainer>
+)
+
+export default App

README.md

@@ -9,13 +9,12 @@ Android app for showing the current distance to Toripolliisi in Oulu marketplace
 ## Setup
 * Download and install the [newest .apk](https://github.com/NikoDaGreat/Ettaisyyspolliisi/releases)
 
-## Features to add
-* Better performance
-* About menu and settings
-* Navigation bar maybe
-
 ## Screenshots
 <img src="https://i.imgur.com/QvNfOTT.png" alt="White Toripolliisi" width="50%" height="50%"/><img src="https://i.imgur.com/lbMHYD9.png" alt="Pink Toripolliisi" width="50%" height="50%"/>
 
 ## Special thanks
 * Aalto University Guild of Physics (especially their coffee machine)
+
+## Full Stack -websovelluskehitys tiedot
+* [Expo linkki](https://youtu.be/oHg5SJYRHA0)
+* [Työaikakirjanpito](./meta/työaikakirjanpito.md)

app.json

@@ -3,14 +3,13 @@
     "name": "Ettäisyyspolliisi",
     "slug": "toripolliisiApp",
     "privacy": "public",
-    "sdkVersion": "33.0.0",
     "platforms": [
       "ios",
       "android",
       "web"
     ],
     "ios": {
-      "bundleIdentifier": "com.nikodg.toripolliisiapp"
+      "supportsTablet": true
     },
     "android": {
       "package": "com.nikodg.toripolliisiapp"
@@ -28,9 +27,6 @@
     },
     "assetBundlePatterns": [
       "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    }
+    ]
   }
 }

babel.config.js

@@ -1,6 +1,6 @@
-module.exports = function(api) {
-  api.cache(true);
+module.exports = function (api) {
+  api.cache(true)
   return {
     presets: ['babel-preset-expo'],
-  };
-};
+  }
+}

components/Webcam.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Image, Dimensions } from 'react-native'
+
+const Webcam = (navigation) => {
+  const url = { uri: 'http://www.oulunkaupunki.fi/_private/kamera/picture1.jpg' }
+
+  const dimensions = Dimensions.get('window')
+
+  return (
+    <Image
+      source={url}
+      style={{
+        width: Math.round(dimensions.width * (13 / 16)),
+        height: Math.round(dimensions.height * (8 / 16)),
+        resizeMode: 'center',
+      }}
+    />
+  )
+}
+
+export default Webcam

eslintignore

@@ -0,0 +1,3 @@
+node_modules
+build
+cypress