Compare commits

..

7 commits

2 changed files with 307 additions and 27 deletions

View file

@ -200,9 +200,17 @@ export default function ConversationPage() {
>
<View style={styles.flex_row}>
<Text style={{ ...styles.text_white_medium }}>
{`Group: ${studygroup?.name ? studygroup.name : ""}`}
{`Group: ${studygroup?.name ? studygroup.name : "Loading..."}`}
</Text>
</View>
{studygroup.landmark ? (
<Text style={{...styles.text_white_tiny_bold,...{textAlign:'left'}}}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<View style={{ ...styles.flex_row }}>
<Text
style={{

View file

@ -6,10 +6,11 @@ import {
ScrollView,
Switch,
ActivityIndicator,
TouchableHighlight,
} from "react-native";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
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 GetDistance from "../../components/GetDistance/GetDistance";
import Button from "../../components/Button/Button";
@ -45,6 +46,7 @@ import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
import AsyncStorage from "@react-native-async-storage/async-storage";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
export default function Home() {
// Switch this condition to see the main map when debugging
@ -84,23 +86,15 @@ export default function Home() {
async function requestLocation() {
if (locationPermitted) {
let newLocation = await Location.getCurrentPositionAsync();
if (newLocation) {
// Only update location state if user's location has changed
if (
!location ||
newLocation.coords.latitude !== location.coords.latitude ||
newLocation.coords.longitude !== location.coords.longitude
) {
setLocation(newLocation);
await DistanceHandler(newLocation);
}
}
setLocation(newLocation);
await DistanceHandler(newLocation);
}
}
useEffect(() => {
console.log("changed");
console.log(locationPermitted);
// console.log("Location Update");
// console.log(locationPermitted);
requestLocation();
}, [locationPermitted]);
@ -117,8 +111,8 @@ export default function Home() {
async function DistanceHandler(location: RawLocationType) {
let dist = GetDistanceFromUSTP(location.coords);
setDist(dist);
// Deactivate student status if too far away and still studying
if (dist >= 2 && !map_distance_override && studying && !stopping_toofar) {
// Deactivate student status if too far away from USTP and still studying
if (dist >= 1 && !map_distance_override && studying && !stopping_toofar) {
stop_studying.mutate({
active: false,
});
@ -152,6 +146,22 @@ export default function Home() {
setSubject(data[1].subject);
setStudying(data[1].active);
setStudentStatus(data[1]);
// Deactivate student status if too far away from current location you are studying in
if (student_status && location) {
const dist = GetDistance(
student_status.location.latitude,
student_status.location.longitude,
location.coords.latitude,
location.coords.longitude
);
if (dist > 0.5 && studying && !stopping_toofar) {
console.log("Too far from current studying location");
stop_studying.mutate({
active: false,
});
setStopping(true);
}
}
},
onError: (error: Error) => {
toast.show(String(error), {
@ -197,9 +207,7 @@ export default function Home() {
}, 500);
setStudyGroups([]);
setStudying(false);
if (stopping_toofar) {
setStopping(false);
}
setStopping(false);
},
onError: (error: Error) => {
toast.show(String(error), {
@ -398,8 +406,21 @@ export default function Home() {
<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) {
if (dist <= 1 || map_distance_override) {
if (dist <= 0.25 || map_distance_override) {
return (
<>
<MapView
@ -458,6 +479,7 @@ export default function Home() {
zIndex={1000}
onPress={() => {
toast.hideAll();
toast.show(
<View
style={{
@ -486,7 +508,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>
);
}
)
@ -567,6 +608,7 @@ export default function Home() {
zIndex={1000}
onPress={() => {
toast.hideAll();
toast.show(
<View
style={{
@ -578,6 +620,13 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}>
Study Group: {studygroup.name}
</Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
@ -642,7 +691,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
center={studygroup.location}
radius={studygroup.radius}
@ -685,6 +762,13 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}>
Study Group: {studygroup.name}
</Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
@ -717,7 +801,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
center={studygroup.location}
radius={studygroup.radius}
@ -893,6 +1010,7 @@ export default function Home() {
duration: 2000,
animationType: "slide-in",
});
requestLocation();
}}
>
<RefreshIcon size={32} />
@ -908,7 +1026,7 @@ export default function Home() {
setModalOpen(true);
}}
>
{studying ? <CaretUpIcon size={32} /> : <></>}
<CaretUpIcon size={32} />
</Pressable>
</View>
{student_status?.active && !student_status?.study_group ? (
@ -967,14 +1085,15 @@ export default function Home() {
>
<DropdownIcon size={32} />
</Pressable>
<View style={styles.flex_row}>
<View style={styles.flex_column}>
<Text style={styles.text_white_medium}>List View</Text>
<Switch
value={modalByGroup}
onChange={() => {
setModalByGroup(!modalByGroup);
}}
style={{ alignSelf: "center" }}
/>
<Text style={styles.text_white_medium}>List View</Text>
</View>
<ScrollView>
@ -1005,6 +1124,20 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}>
{`${Math.round(student_status.distance * 1000)}m away`}
</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>
);
}
@ -1032,6 +1165,13 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}>
Group Name: {studygroup.name}
</Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
@ -1096,6 +1236,138 @@ export default function Home() {
</ScrollView>
</AnimatedContainer>
</Modal>
<Modal
coverScreen={false}
isVisible={modalOpen && !studying}
style={{ opacity: 0.85 }}
hasBackdrop={false}
>
<AnimatedContainer>
<Pressable
style={{
alignContent: "flex-start",
backgroundColor: colors.secondary_3,
borderRadius: 16,
}}
onPress={() => setModalOpen(false)}
>
<DropdownIcon size={32} />
</Pressable>
<View style={styles.flex_column}>
<Text style={styles.text_white_medium}>List View</Text>
<Switch
value={modalByGroup}
onChange={() => {
setModalByGroup(!modalByGroup);
}}
style={{ alignSelf: "center" }}
/>
</View>
<ScrollView>
{!modalByGroup ? (
student_statuses_global.map(
(student_status: StudentStatusFilterType, index: number) => {
return (
<View
key={index}
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
backgroundColor: colors.secondary_3,
borderColor: colors.primary_2,
borderWidth: 1,
borderRadius: 16,
width: 256,
marginVertical: 4,
}}
>
<Text style={styles.text_white_tiny_bold}>
Student: {student_status.user}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${student_status.subject}`}
</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>
);
}
)
) : (
<></>
)}
{modalByGroup ? (
study_groups_global.map(
(studygroup: StudyGroupType, index: number) => {
return (
<View
key={index}
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
backgroundColor: colors.secondary_3,
borderColor: colors.primary_2,
borderWidth: 1,
borderRadius: 16,
width: 256,
marginVertical: 4,
}}
>
<Text style={styles.text_white_tiny_bold}>
Group Name: {studygroup.name}
</Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
Students Studying: {studygroup.students.length}
</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>
);
}
)
) : (
<></>
)}
</ScrollView>
</AnimatedContainer>
</Modal>
<AnimatedContainer>
<View style={{ borderRadius: 16, overflow: "hidden" }}>