From 36f083c898468422b4edf963ccb47f35dce7ac88 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 14:21:28 +0800 Subject: [PATCH 01/11] Added initial map in homepage --- app.json | 10 +++++- package-lock.json | 33 +++++++++++++++++ package.json | 2 ++ .../AnimatedContainer/AnimatedContainer.tsx | 4 +-- src/routes/Home/Home.tsx | 35 +++++++++++++++++-- src/styles.tsx | 9 ++++- 6 files changed, 87 insertions(+), 6 deletions(-) diff --git a/app.json b/app.json index ca641e0..4802c78 100644 --- a/app.json +++ b/app.json @@ -26,6 +26,14 @@ }, "web": { "favicon": "./assets/favicon.png" - } + }, + "plugins": [ + [ + "expo-location", + { + "locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location." + } + ] + ] } } diff --git a/package-lock.json b/package-lock.json index 02e3d1a..f41b725 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3caa37d..f9621d3 100644 --- a/package.json +++ b/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", diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx index 838a688..aade0dc 100644 --- a/src/components/AnimatedContainer/AnimatedContainer.tsx +++ b/src/components/AnimatedContainer/AnimatedContainer.tsx @@ -1,8 +1,8 @@ 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; } diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 96c6532..6aed10a 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -1,17 +1,48 @@ -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 React, { useState, useEffect } from "react"; +import MapView, { Marker, UrlTile } from "react-native-maps"; +import * as Location from "expo-location"; +type LocationType = Location.LocationObject; export default function Home() { + const [location, setLocation] = useState(null); + + useEffect(() => { + (async () => { + let { status } = await Location.requestForegroundPermissionsAsync(); + if (status !== "granted") { + console.error("Permission to access location was denied"); + return; + } + let location = await Location.getCurrentPositionAsync({}); + setLocation(location); + })(); + }, []); + + function getInitialState() { + return { + latitude: 8.4857, + longitude: 124.6565, + latitudeDelta: 0.000235, + longitudeDelta: 0.000067, + }; + } const creds = useSelector((state: RootState) => state.user.user); return ( Template Homepage - {JSON.stringify(creds)} + + + User Location:{" "} + {location + ? `${location.coords.latitude}, ${location.coords.longitude}` + : "Loading..."} + ); diff --git a/src/styles.tsx b/src/styles.tsx index 6700f9a..3f0057f 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -1,4 +1,7 @@ -import { StyleSheet } from "react-native"; +import { StyleSheet, Dimensions } from "react-native"; + +const width = Dimensions.get("window").width; +const height = Dimensions.get("window").height; export const colors = { orange_1: "#FFBC72", @@ -104,6 +107,10 @@ const styles = StyleSheet.create({ width: "70%", marginVertical: 6, }, + map: { + height: "50%", + width: "90%", + }, }); export default styles; From 5729eed1752688169926b22a7d4a0b8b0132dc39 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 14:36:01 +0800 Subject: [PATCH 02/11] Made AnimatedContainer scrollable --- .../AnimatedContainer/AnimatedContainer.tsx | 25 +++++++++++++------ src/styles.tsx | 6 +++-- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx index aade0dc..91f6bfb 100644 --- a/src/components/AnimatedContainer/AnimatedContainer.tsx +++ b/src/components/AnimatedContainer/AnimatedContainer.tsx @@ -9,13 +9,22 @@ export interface props { export default function AnimatedContainer(props: props) { return ( - - {props.children} - + + + {props.children} + + ); } diff --git a/src/styles.tsx b/src/styles.tsx index 3f0057f..27285c0 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -32,7 +32,8 @@ const styles = StyleSheet.create({ width: "100%", }, container: { - marginTop: "5%", + flex: 1, + marginVertical: "5%", width: "92%", borderRadius: 15, backgroundColor: colors.blue_2, @@ -108,8 +109,9 @@ const styles = StyleSheet.create({ marginVertical: 6, }, map: { - height: "50%", + height: 512, width: "90%", + alignSelf: "center", }, }); From d9adc45b27f13735be6b33395740ceeca805be2a Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 14:59:04 +0800 Subject: [PATCH 03/11] Added initial map structure for homepage --- src/components/GetDistance/GetDistance.tsx | 23 ++++++ src/routes/Home/Home.tsx | 86 +++++++++++++++------- 2 files changed, 84 insertions(+), 25 deletions(-) create mode 100644 src/components/GetDistance/GetDistance.tsx diff --git a/src/components/GetDistance/GetDistance.tsx b/src/components/GetDistance/GetDistance.tsx new file mode 100644 index 0000000..d3af390 --- /dev/null +++ b/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; +} diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 6aed10a..9ec4010 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -3,46 +3,82 @@ 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 React, { useState, useEffect } from "react"; +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(null); + const [dist, setDist] = useState(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(() => { - (async () => { - let { status } = await Location.requestForegroundPermissionsAsync(); - if (status !== "granted") { - console.error("Permission to access location was denied"); - return; - } - let location = await Location.getCurrentPositionAsync({}); - setLocation(location); - })(); + requestLocation(); }, []); - - function getInitialState() { - return { - latitude: 8.4857, - longitude: 124.6565, - latitudeDelta: 0.000235, - longitudeDelta: 0.000067, - }; + const ustpCoords = { + latitude: 8.4857, + longitude: 124.6565, + latitudeDelta: 0.000235, + longitudeDelta: 0.000067, + }; + function CustomMap() { + if (dist !== null && location !== null) { + if (dist <= 1) { + return ; + } else { + return ( + + You must be within the campus to use StudE {"\n"} + {dist}km away from USTP {"\n"} + User Location: + {"\n"} Latitude {location.coords.latitude} + {"\n"} Longitude {location.coords.longitude} + + ); + } + } else { + return ( + + + Please allow location permission{"\n"} + + + + ); + } } const creds = useSelector((state: RootState) => state.user.user); return ( Template Homepage - - - User Location:{" "} - {location - ? `${location.coords.latitude}, ${location.coords.longitude}` - : "Loading..."} - + ); From 875a7154fa499ff95e028f96f973b06be4529950 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:07:56 +0800 Subject: [PATCH 04/11] Improved homepage --- src/routes/Home/Home.tsx | 2 +- src/styles.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 9ec4010..1a392ed 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -48,6 +48,7 @@ export default function Home() { function CustomMap() { if (dist !== null && location !== null) { if (dist <= 1) { + // Just switch this condition for map debugging return ; } else { return ( @@ -77,7 +78,6 @@ export default function Home() { return ( - Template Homepage diff --git a/src/styles.tsx b/src/styles.tsx index 27285c0..f4d8f5d 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -3,6 +3,9 @@ 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", orange_2: "#FFE2C1", @@ -109,8 +112,9 @@ const styles = StyleSheet.create({ marginVertical: 6, }, map: { - height: 512, - width: "90%", + flex: 1, + height: containerHeight, + width: containerWidth, alignSelf: "center", }, }); From 8ffb35960412c6152dda8a90d363425343f1c371 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:09:46 +0800 Subject: [PATCH 05/11] Homepage prompt changes --- src/routes/Home/Home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 1a392ed..f8f409a 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -52,8 +52,8 @@ export default function Home() { return ; } else { return ( - - You must be within the campus to use StudE {"\n"} + + You must be within 1km of USTP to use Stud-E{"\n"} {dist}km away from USTP {"\n"} User Location: {"\n"} Latitude {location.coords.latitude} From 96df2f2f053eb3711264da6461e366bc5cb33ab0 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:27:32 +0800 Subject: [PATCH 06/11] Polished animated container and homepage --- .../AnimatedContainer/AnimatedContainer.tsx | 46 ++++++++++++------- src/routes/Home/Home.tsx | 2 +- src/styles.tsx | 2 +- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx index 91f6bfb..4c8667a 100644 --- a/src/components/AnimatedContainer/AnimatedContainer.tsx +++ b/src/components/AnimatedContainer/AnimatedContainer.tsx @@ -9,22 +9,34 @@ export interface props { export default function AnimatedContainer(props: props) { return ( - - - {props.children} - - + + {props.children} + ); } diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index f8f409a..5375e58 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -47,7 +47,7 @@ export default function Home() { }; function CustomMap() { if (dist !== null && location !== null) { - if (dist <= 1) { + if (dist >= 1) { // Just switch this condition for map debugging return ; } else { diff --git a/src/styles.tsx b/src/styles.tsx index f4d8f5d..e528322 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -39,7 +39,7 @@ const styles = StyleSheet.create({ marginVertical: "5%", width: "92%", borderRadius: 15, - backgroundColor: colors.blue_2, + // backgroundColor: colors.blue_2, alignItems: "center", alignSelf: "center", paddingTop: 32, From 9e8317e7c0e337d865ac98f0ef105017fb617de4 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:27:52 +0800 Subject: [PATCH 07/11] Fixed map condition in homepage --- src/routes/Home/Home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 5375e58..f8f409a 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -47,7 +47,7 @@ export default function Home() { }; function CustomMap() { if (dist !== null && location !== null) { - if (dist >= 1) { + if (dist <= 1) { // Just switch this condition for map debugging return ; } else { From d7710478b63e9c7d1f73077922bb83b3ea145698 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:37:05 +0800 Subject: [PATCH 08/11] Homepage and container improvements --- .../AnimatedContainer/AnimatedContainer.tsx | 9 +-------- src/routes/Home/Home.tsx | 18 +++++++++++------- src/styles.tsx | 12 ++++-------- 3 files changed, 16 insertions(+), 23 deletions(-) diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx index 4c8667a..8f5960d 100644 --- a/src/components/AnimatedContainer/AnimatedContainer.tsx +++ b/src/components/AnimatedContainer/AnimatedContainer.tsx @@ -10,14 +10,7 @@ export interface props { export default function AnimatedContainer(props: props) { return ( ; } else { return ( - - You must be within 1km of USTP to use Stud-E{"\n"} - {dist}km away from USTP {"\n"} - User Location: - {"\n"} Latitude {location.coords.latitude} - {"\n"} Longitude {location.coords.longitude} - + + + You must be within 1km of USTP to use Stud-E{"\n"} + + + {dist}km away from USTP {"\n"} + User Location: + {"\n"} Latitude {location.coords.latitude} + {"\n"} Longitude {location.coords.longitude} + + ); } } else { diff --git a/src/styles.tsx b/src/styles.tsx index e528322..31bc34a 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -35,18 +35,13 @@ const styles = StyleSheet.create({ width: "100%", }, container: { - flex: 1, - marginVertical: "5%", - width: "92%", - borderRadius: 15, - // backgroundColor: colors.blue_2, alignItems: "center", alignSelf: "center", - paddingTop: 32, - paddingBottom: 32, - justifyContent: "flex-start", + justifyContent: "center", display: "flex", flexDirection: "column", + flex: 1, + paddingHorizontal: 4, }, flex_row: { display: "flex", @@ -57,6 +52,7 @@ const styles = StyleSheet.create({ display: "flex", flexDirection: "column", alignItems: "center", + justifyContent: "center", }, text_white_tiny: { color: colors.text_default, From 28a3d26c7e9dfb92561fe2892a1d5ce6e7192b78 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:50:19 +0800 Subject: [PATCH 09/11] Homepage feedback improvements --- src/routes/Home/Home.tsx | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index e047d85..715a244 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -47,20 +47,34 @@ export default function Home() { }; function CustomMap() { if (dist !== null && location !== null) { - if (dist <= 1) { + if (dist <= 1.5) { // Just switch this condition for map debugging return ; } else { return ( - You must be within 1km of USTP to use Stud-E{"\n"} + You are too far from USTP {"\n"} + Get closer to use Stud-E + - {dist}km away from USTP {"\n"} - User Location: - {"\n"} Latitude {location.coords.latitude} - {"\n"} Longitude {location.coords.longitude} + You are {dist}km away from USTP {"\n"} ); From 6d3628ac8ad002778ff4d14e300c93189f7748ee Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:52:18 +0800 Subject: [PATCH 10/11] Homepage improvements --- src/routes/Home/Home.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 715a244..3307465 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -65,6 +65,8 @@ export default function Home() { }} showsUserLocation={true} scrollEnabled={false} + zoomEnabled={false} + rotateEnabled={false} minZoomLevel={15} initialRegion={{ latitude: location.coords.latitude, From 9c3437da65029ed190b89d45482d122f36c264f3 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 7 Jul 2023 15:53:32 +0800 Subject: [PATCH 11/11] Feedback map now follows user location --- src/routes/Home/Home.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 3307465..31fdb1b 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -67,6 +67,7 @@ export default function Home() { scrollEnabled={false} zoomEnabled={false} rotateEnabled={false} + followsUserLocation={true} minZoomLevel={15} initialRegion={{ latitude: location.coords.latitude,