keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added callout information for study groups when pressing on maps and improved responsiveness of the homepage map renderer

Browse source
This commit is contained in:
Keannu Bernasol 2023-11-24 21:14:33 +08:00
parent d2aecbd89c
commit cbd82a05f9
1 changed files with 159 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
src/routes/Home/Home.tsx
View file

@ -6,10 +6,11 @@ import {
ScrollView, ScrollView,
Switch, Switch,
ActivityIndicator, ActivityIndicator,
TouchableHighlight,
} from "react-native"; } from "react-native";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer"; import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import MapView, { Circle, Marker, UrlTile } from "react-native-maps"; import MapView, { Callout, Circle, Marker, UrlTile } from "react-native-maps";
import * as Location from "expo-location"; import * as Location from "expo-location";
import GetDistance from "../../components/GetDistance/GetDistance"; import GetDistance from "../../components/GetDistance/GetDistance";
import Button from "../../components/Button/Button"; import Button from "../../components/Button/Button";
@ -45,10 +46,11 @@ import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon"; import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon"; import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
export default function Home() { export default function Home() {
// Switch this condition to see the main map when debugging // Switch this condition to see the main map when debugging
const map_distance_override = false; const map_distance_override = true;
const navigation = useNavigation<RootDrawerParamList>(); const navigation = useNavigation<RootDrawerParamList>();
const [location, setLocation] = useState<RawLocationType | null>(null); const [location, setLocation] = useState<RawLocationType | null>(null);
const [locationPermitted, setLocationPermitted] = useState(false); const [locationPermitted, setLocationPermitted] = useState(false);
@ -84,10 +86,10 @@ export default function Home() {
async function requestLocation() { async function requestLocation() {
if (locationPermitted) { if (locationPermitted) {
let newLocation = await Location.getCurrentPositionAsync(); let newLocation = await Location.getCurrentPositionAsync();
if (newLocation) {
setLocation(newLocation); setLocation(newLocation);
await DistanceHandler(newLocation); await DistanceHandler(newLocation);
}
} }
} }
@ -412,6 +414,19 @@ export default function Home() {
<Text style={styles.text_white_medium}>Loading...</Text> <Text style={styles.text_white_medium}>Loading...</Text>
</> </>
); );
} else if (
study_groups == undefined ||
study_groups_global == undefined ||
student_statuses == undefined||
student_statuses_global == undefined
) {
return (
<>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</>
);
} else if (dist && location) { } else if (dist && location) {
if (dist <= 1 || map_distance_override) { if (dist <= 1 || map_distance_override) {
return ( return (
@ -472,6 +487,7 @@ export default function Home() {
zIndex={1000} zIndex={1000}
onPress={() => { onPress={() => {
toast.hideAll(); toast.hideAll();
toast.show( toast.show(
<View <View
style={{ style={{
@ -500,7 +516,26 @@ export default function Home() {
} }
); );
}} }}
/> >
<Callout>
<Text style={styles.text_white_tiny_bold}>
Student: {student_status.user}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${student_status.subject}`}
</Text>
<Text style={styles.text_black_tiny}>
{`${Math.round(
GetDistance(
student_status.location.latitude,
student_status.location.longitude,
location.coords.latitude,
location.coords.longitude
) * 1000
)}m away`}
</Text>
</Callout>
</Marker>
); );
} }
) )
@ -581,6 +616,7 @@ export default function Home() {
zIndex={1000} zIndex={1000}
onPress={() => { onPress={() => {
toast.hideAll(); toast.hideAll();
toast.show( toast.show(
<View <View
style={{ style={{
@ -663,7 +699,35 @@ export default function Home() {
} }
); );
}} }}
/> >
<Callout>
<Text style={styles.text_black_tiny}>
Study Group: {studygroup.name}
</Text>
<Text style={styles.text_black_tiny}>
Studying: {studygroup.subject}
</Text>
{studygroup.landmark ? (
<Text style={styles.text_black_tiny}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_black_tiny}>
{`${studygroup.students.length} ${
studygroup.students.length > 1
? "students"
: "student"
} studying`}
</Text>
<Text style={styles.text_black_tiny}>
{`${Math.round(
studygroup.distance * 1000
)}m away`}
</Text>
</Callout>
</Marker>
<Circle <Circle
center={studygroup.location} center={studygroup.location}
radius={studygroup.radius} radius={studygroup.radius}
@ -745,7 +809,40 @@ export default function Home() {
} }
); );
}} }}
/> >
<Callout>
<Text style={styles.text_black_tiny}>
Study Group: {studygroup.name}
</Text>
<Text style={styles.text_black_tiny}>
Studying: {studygroup.subject}
</Text>
{studygroup.landmark ? (
<Text style={styles.text_black_tiny}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_black_tiny}>
{`${studygroup.students.length} ${
studygroup.students.length > 1
? "students"
: "student"
} studying`}
</Text>
<Text style={styles.text_black_tiny}>
{`${Math.round(
GetDistance(
studygroup.location.latitude,
studygroup.location.longitude,
location.coords.latitude,
location.coords.longitude
)
)}m away`}
</Text>
</Callout>
</Marker>
<Circle <Circle
center={studygroup.location} center={studygroup.location}
radius={studygroup.radius} radius={studygroup.radius}
@ -1035,6 +1132,20 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`${Math.round(student_status.distance * 1000)}m away`} {`${Math.round(student_status.distance * 1000)}m away`}
</Text> </Text>
{location && location.coords ? (
<Text style={styles.text_black_tiny}>
{`${Math.round(
GetDistance(
student_status.location.latitude,
student_status.location.longitude,
location.coords.latitude,
location.coords.longitude
)
)}m away`}
</Text>
) : (
<></>
)}
</View> </View>
); );
} }
@ -1063,12 +1174,12 @@ export default function Home() {
Group Name: {studygroup.name} Group Name: {studygroup.name}
</Text> </Text>
{studygroup.landmark ? ( {studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{studygroup.landmark} {studygroup.landmark}
</Text> </Text>
) : ( ) : (
<></> <></>
)} )}
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`} {`Studying ${studygroup.subject}`}
</Text> </Text>
@ -1186,6 +1297,20 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`Studying ${student_status.subject}`} {`Studying ${student_status.subject}`}
</Text> </Text>
{location && location.coords ? (
<Text style={styles.text_white_tiny}>
{`${Math.round(
GetDistance(
student_status.location.latitude,
student_status.location.longitude,
location.coords.latitude,
location.coords.longitude
)
)}m away`}
</Text>
) : (
<></>
)}
</View> </View>
); );
} }
@ -1215,18 +1340,32 @@ export default function Home() {
Group Name: {studygroup.name} Group Name: {studygroup.name}
</Text> </Text>
{studygroup.landmark ? ( {studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{studygroup.landmark} {studygroup.landmark}
</Text> </Text>
) : ( ) : (
<></> <></>
)} )}
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`} {`Studying ${studygroup.subject}`}
</Text> </Text>
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
Students Studying: {studygroup.students.length} Students Studying: {studygroup.students.length}
</Text> </Text>
{location && location.coords ? (
<Text style={styles.text_white_tiny}>
{`${Math.round(
GetDistance(
studygroup.location.latitude,
studygroup.location.longitude,
location.coords.latitude,
location.coords.longitude
)
)}m away`}
</Text>
) : (
<></>
)}
</View> </View>
); );
} }
@ -1237,6 +1376,7 @@ export default function Home() {
</ScrollView> </ScrollView>
</AnimatedContainer> </AnimatedContainer>
</Modal> </Modal>
<AnimatedContainer> <AnimatedContainer>
<View style={{ borderRadius: 16, overflow: "hidden" }}> <View style={{ borderRadius: 16, overflow: "hidden" }}>
<CustomMap /> <CustomMap />