keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2025-04-20 08:51:21 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: keannu125:v0.9.3.7-beta
Branches Tags
keannu125:master
keannu125:feature/qol-fixes
keannu125:feature/messaging
keannu125:initial-frontend
keannu125:feature/student_status
keannu125:feature/homepage_rendering
keannu125:feature/UserInfo
keannu125:feature/studentinfo
keannu125:feature/location
keannu125:feature/onboarding
keannu125:feature/auth
keannu125:v1.3
keannu125:v1.2
keannu125:v1.1
keannu125:v0.9.3.7-beta
keannu125:v0.9.3.6-beta
keannu125:v0.9.3.5-beta
keannu125:v0.9.2-beta
keannu125:v0.9.1-beta
keannu125:v0.9.0-beta
keannu125:v0.3.0-alpha
keannu125:v0.2.0-alpha
keannu125:pre-release
...
compare: keannu125:master
Branches Tags
keannu125:master
keannu125:feature/qol-fixes
keannu125:feature/messaging
keannu125:initial-frontend
keannu125:feature/student_status
keannu125:feature/homepage_rendering
keannu125:feature/UserInfo
keannu125:feature/studentinfo
keannu125:feature/location
keannu125:feature/onboarding
keannu125:feature/auth
keannu125:v1.3
keannu125:v1.2
keannu125:v1.1
keannu125:v0.9.3.7-beta
keannu125:v0.9.3.6-beta
keannu125:v0.9.3.5-beta
keannu125:v0.9.2-beta
keannu125:v0.9.1-beta
keannu125:v0.9.0-beta
keannu125:v0.3.0-alpha
keannu125:v0.2.0-alpha
keannu125:pre-release

7 commits
v0.9.3.7-b ... master

Author SHA1 Message Date
Keannu Bernasol
0b3af716a5 limit studying to within 250m of the center of ustp 2023-12-10 22:50:53 +08:00
Keannu Bernasol
05cee78d31 Format with Prettier and turn off debug flag 2023-11-24 21:15:47 +08:00
Keannu Bernasol
cbd82a05f9 Added callout information for study groups when pressing on maps and improved responsiveness of the homepage map renderer 2023-11-24 21:14:33 +08:00
Keannu Bernasol
d2aecbd89c Turn off debug flags 2023-11-24 00:26:02 +08:00
Keannu Bernasol
51b7b24430 Show landmarks if it exists in homepage and in conversation page 2023-11-24 00:22:14 +08:00
Keannu Bernasol
c0a8a8efc8 Always refresh location when pressing refresh button 2023-11-23 23:29:27 +08:00
Keannu Bernasol
7cd549cad7 Refetch user location when refreshing and added code snippet to stop user from studying if they stray too far from where they set their studying locatio. Also allow modal to be shown even when not currently studying 2023-11-23 23:27:38 +08:00
2 changed files with 307 additions and 27 deletions
Show stats Expand all files Collapse all files

10
src/routes/ConversationPage/ConversationPage.tsx
View file

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

324
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,6 +46,7 @@ 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
@ -84,23 +86,15 @@ 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) {
// Only update location state if user's location has changed setLocation(newLocation);
if ( await DistanceHandler(newLocation);
!location ||
newLocation.coords.latitude !== location.coords.latitude ||
newLocation.coords.longitude !== location.coords.longitude
) {
setLocation(newLocation);
await DistanceHandler(newLocation);
}
}
} }
} }
useEffect(() => { useEffect(() => {
console.log("changed"); // console.log("Location Update");
console.log(locationPermitted); // console.log(locationPermitted);
requestLocation(); requestLocation();
}, [locationPermitted]); }, [locationPermitted]);
@ -117,8 +111,8 @@ export default function Home() {
async function DistanceHandler(location: RawLocationType) { async function DistanceHandler(location: RawLocationType) {
let dist = GetDistanceFromUSTP(location.coords); let dist = GetDistanceFromUSTP(location.coords);
setDist(dist); setDist(dist);
// Deactivate student status if too far away and still studying // Deactivate student status if too far away from USTP and still studying
if (dist >= 2 && !map_distance_override && studying && !stopping_toofar) { if (dist >= 1 && !map_distance_override && studying && !stopping_toofar) {
stop_studying.mutate({ stop_studying.mutate({
active: false, active: false,
}); });
@ -152,6 +146,22 @@ export default function Home() {
setSubject(data[1].subject); setSubject(data[1].subject);
setStudying(data[1].active); setStudying(data[1].active);
setStudentStatus(data[1]); 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) => { onError: (error: Error) => {
toast.show(String(error), { toast.show(String(error), {
@ -197,9 +207,7 @@ export default function Home() {
}, 500); }, 500);
setStudyGroups([]); setStudyGroups([]);
setStudying(false); setStudying(false);
if (stopping_toofar) { setStopping(false);
setStopping(false);
}
}, },
onError: (error: Error) => { onError: (error: Error) => {
toast.show(String(error), { toast.show(String(error), {
@ -398,8 +406,21 @@ 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 <= 0.25 || map_distance_override) {
return ( return (
<> <>
<MapView <MapView
@ -458,6 +479,7 @@ export default function Home() {
zIndex={1000} zIndex={1000}
onPress={() => { onPress={() => {
toast.hideAll(); toast.hideAll();
toast.show( toast.show(
<View <View
style={{ 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} zIndex={1000}
onPress={() => { onPress={() => {
toast.hideAll(); toast.hideAll();
toast.show( toast.show(
<View <View
style={{ style={{
@ -578,6 +620,13 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
Study Group: {studygroup.name} Study Group: {studygroup.name}
</Text> </Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`} {`Studying ${studygroup.subject}`}
</Text> </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 <Circle
center={studygroup.location} center={studygroup.location}
radius={studygroup.radius} radius={studygroup.radius}
@ -685,6 +762,13 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
Study Group: {studygroup.name} Study Group: {studygroup.name}
</Text> </Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`} {`Studying ${studygroup.subject}`}
</Text> </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 <Circle
center={studygroup.location} center={studygroup.location}
radius={studygroup.radius} radius={studygroup.radius}
@ -893,6 +1010,7 @@ export default function Home() {
duration: 2000, duration: 2000,
animationType: "slide-in", animationType: "slide-in",
}); });
requestLocation();
}} }}
> >
<RefreshIcon size={32} /> <RefreshIcon size={32} />
@ -908,7 +1026,7 @@ export default function Home() {
setModalOpen(true); setModalOpen(true);
}} }}
> >
{studying ? <CaretUpIcon size={32} /> : <></>} <CaretUpIcon size={32} />
</Pressable> </Pressable>
</View> </View>
{student_status?.active && !student_status?.study_group ? ( {student_status?.active && !student_status?.study_group ? (
@ -967,14 +1085,15 @@ export default function Home() {
> >
<DropdownIcon size={32} /> <DropdownIcon size={32} />
</Pressable> </Pressable>
<View style={styles.flex_row}> <View style={styles.flex_column}>
<Text style={styles.text_white_medium}>List View</Text>
<Switch <Switch
value={modalByGroup} value={modalByGroup}
onChange={() => { onChange={() => {
setModalByGroup(!modalByGroup); setModalByGroup(!modalByGroup);
}} }}
style={{ alignSelf: "center" }}
/> />
<Text style={styles.text_white_medium}>List View</Text>
</View> </View>
<ScrollView> <ScrollView>
@ -1005,6 +1124,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>
); );
} }
@ -1032,6 +1165,13 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
Group Name: {studygroup.name} Group Name: {studygroup.name}
</Text> </Text>
{studygroup.landmark ? (
<Text style={styles.text_white_tiny_bold}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`} {`Studying ${studygroup.subject}`}
</Text> </Text>
@ -1096,6 +1236,138 @@ export default function Home() {
</ScrollView> </ScrollView>
</AnimatedContainer> </AnimatedContainer>
</Modal> </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> <AnimatedContainer>
<View style={{ borderRadius: 16, overflow: "hidden" }}> <View style={{ borderRadius: 16, overflow: "hidden" }}>