Merge pull request #3 from lemeow125/feature/location

Feature/location

app.json

@@ -26,6 +26,14 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location."
         }
+      ]
+    ]
   }
 }

package-lock.json

@@ -17,12 +17,14 @@
         "axios": "^1.4.0",
         "expo": "~48.0.18",
         "expo-linking": "~4.0.1",
+        "expo-location": "~15.1.1",
         "expo-status-bar": "~1.4.4",
         "moti": "^0.25.3",
         "react": "18.2.0",
         "react-native": "0.71.8",
         "react-native-dropdown-picker": "^5.4.6",
         "react-native-gesture-handler": "~2.9.0",
+        "react-native-maps": "^1.7.1",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
         "react-native-screens": "~3.20.0",
@@ -5238,6 +5240,11 @@
         }
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
+    },
     "node_modules/@types/hammerjs": {
       "version": "2.0.41",
       "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
@@ -7431,6 +7438,14 @@
         "url-parse": "^1.5.9"
       }
     },
+    "node_modules/expo-location": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-15.1.1.tgz",
+      "integrity": "sha512-hoKRlmi6Ya+NeZ72Zt385SDcSsIDpJI60TCBVO+Hc9xfKA9Hyminyyo5WiwI8J03igmPTCl8Y37MxBNKY9AWkg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz",
@@ -12227,6 +12242,24 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz",
       "integrity": "sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ=="
     },
+    "node_modules/react-native-maps": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.7.1.tgz",
+      "integrity": "sha512-CHVLzL+Q2jiUGgbt4/vosxVI1SukWyaLGjD62VLgR/wZpnH4Umi9ql1bmKDPWcfj2C1QZwMU0Yc7rXTbvZUIiw==",
+      "dependencies": {
+        "@types/geojson": "^7946.0.10"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-native": ">= 0.64.3",
+        "react-native-web": ">= 0.11"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "2.14.4",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz",

package.json

@@ -18,12 +18,14 @@
     "axios": "^1.4.0",
     "expo": "~48.0.18",
     "expo-linking": "~4.0.1",
+    "expo-location": "~15.1.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-maps": "^1.7.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -1,21 +1,35 @@
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View, Text, ScrollView } from "react-native";
 import styles from "../../styles";
 import { colors } from "../../styles";
-import { MotiView } from "moti";
+import { MotiView, MotiScrollView } from "moti";
 export interface props {
   children: React.ReactNode;
 }
 
 export default function AnimatedContainer(props: props) {
   return (
-    <MotiView
+    <MotiScrollView
-      style={styles.container}
+      contentContainerStyle={styles.container}
-      from={{ opacity: 0, backgroundColor: colors.orange_1 }}
+      from={{
-      animate={{ opacity: 1, backgroundColor: colors.blue_2 }}
+        borderRadius: 0,
+        backgroundColor: colors.orange_2,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      animate={{
+        borderRadius: 15,
+        backgroundColor: colors.blue_2,
+        paddingTop: 16,
+        paddingBottom: 16,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
       transition={{ type: "timing", duration: 300 }}
     >
       {props.children}
-    </MotiView>
+    </MotiScrollView>
   );
 }

src/components/GetDistance/GetDistance.tsx

@@ -0,0 +1,23 @@
+export default function GetDistance(
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+) {
+  var R = 6371; // km
+  var dLat = toRad(lat2 - lat1);
+  var dLon = toRad(lon2 - lon1);
+  var lat1 = toRad(lat1);
+  var lat2 = toRad(lat2);
+
+  var a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
+  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  var distance = R * c;
+  return distance;
+}
+
+export function toRad(value: number) {
+  return (value * Math.PI) / 180;
+}

src/routes/Home/Home.tsx

@@ -1,17 +1,105 @@
-import * as React from "react";
 import styles from "../../styles";
 import { View, Text } from "react-native";
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import { useState, useEffect } from "react";
+import MapView, { Marker, UrlTile } from "react-native-maps";
+import * as Location from "expo-location";
+import GetDistance from "../../components/GetDistance/GetDistance";
+import Button from "../../components/Button/Button";
+import { colors } from "../../styles";
 
+type LocationType = Location.LocationObject;
 export default function Home() {
+  const [location, setLocation] = useState<LocationType | null>(null);
+  const [dist, setDist] = useState<number | null>(null);
+
+  async function requestLocation() {
+    let { status } = await Location.requestForegroundPermissionsAsync();
+    if (status !== "granted") {
+      console.error("Permission to access location was denied");
+      return;
+    } else {
+      getLocation();
+    }
+  }
+
+  async function getLocation() {
+    let location = await Location.getCurrentPositionAsync({});
+    setLocation(location);
+    let dist = GetDistance(
+      location.coords.latitude,
+      location.coords.longitude,
+      8.4857,
+      124.6565
+    );
+    setDist(Math.round(dist));
+  }
+  useEffect(() => {
+    requestLocation();
+  }, []);
+  const ustpCoords = {
+    latitude: 8.4857,
+    longitude: 124.6565,
+    latitudeDelta: 0.000235,
+    longitudeDelta: 0.000067,
+  };
+  function CustomMap() {
+    if (dist !== null && location !== null) {
+      if (dist <= 1.5) {
+        // Just switch this condition for map debugging
+        return <MapView style={styles.map} initialRegion={ustpCoords} />;
+      } else {
+        return (
+          <View>
+            <Text style={styles.text_white_medium}>
+              You are too far from USTP {"\n"}
+              Get closer to use Stud-E
+            </Text>
+            <MapView
+              style={{
+                height: 256,
+                width: 256,
+                alignSelf: "center",
+              }}
+              showsUserLocation={true}
+              scrollEnabled={false}
+              zoomEnabled={false}
+              rotateEnabled={false}
+              followsUserLocation={true}
+              minZoomLevel={15}
+              initialRegion={{
+                latitude: location.coords.latitude,
+                longitude: location.coords.longitude,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }}
+            />
+            <Text style={styles.text_white_small}>
+              You are {dist}km away from USTP {"\n"}
+            </Text>
+          </View>
+        );
+      }
+    } else {
+      return (
+        <View>
+          <Text style={styles.text_white_medium}>
+            Please allow location permission{"\n"}
+          </Text>
+          <Button onPress={() => requestLocation()} color={colors.blue_3}>
+            <Text style={styles.text_white_small}>Register</Text>
+          </Button>
+        </View>
+      );
+    }
+  }
   const creds = useSelector((state: RootState) => state.user.user);
   return (
     <View style={styles.background}>
       <AnimatedContainer>
-        <Text style={styles.text_white_large}>Template Homepage</Text>
+        <CustomMap />
-        <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
       </AnimatedContainer>
     </View>
   );

src/styles.tsx

@@ -1,4 +1,10 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, Dimensions } from "react-native";
+
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
+
+const containerWidth = width - width * 0.08;
+const containerHeight = height - height * 0.01;
 
 export const colors = {
   orange_1: "#FFBC72",
@@ -29,17 +35,13 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   container: {
-    marginTop: "5%",
-    width: "92%",
-    borderRadius: 15,
-    backgroundColor: colors.blue_2,
     alignItems: "center",
     alignSelf: "center",
-    paddingTop: 32,
+    justifyContent: "center",
-    paddingBottom: 32,
-    justifyContent: "flex-start",
     display: "flex",
     flexDirection: "column",
+    flex: 1,
+    paddingHorizontal: 4,
   },
   flex_row: {
     display: "flex",
@@ -50,6 +52,7 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    justifyContent: "center",
   },
   text_white_tiny: {
     color: colors.text_default,
@@ -104,6 +107,12 @@ const styles = StyleSheet.create({
     width: "70%",
     marginVertical: 6,
   },
+  map: {
+    flex: 1,
+    height: containerHeight,
+    width: containerWidth,
+    alignSelf: "center",
+  },
 });
 
 export default styles;