mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-04-20 08:51:21 +08:00
Compare commits
7 commits
v0.9.3.7-b
...
master
Author | SHA1 | Date | |
---|---|---|---|
0b3af716a5 | |||
05cee78d31 | |||
cbd82a05f9 | |||
d2aecbd89c | |||
51b7b24430 | |||
c0a8a8efc8 | |||
7cd549cad7 |
2 changed files with 307 additions and 27 deletions
|
@ -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={{
|
||||
|
|
|
@ -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" }}>
|
||||
|
|
Loading…
Add table
Reference in a new issue