mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-04-19 16:31:21 +08:00
696 lines
24 KiB
TypeScript
696 lines
24 KiB
TypeScript
import styles, { Viewport, colors } from "../../styles";
|
|
import { View, Text } from "react-native";
|
|
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
|
import { useState, useEffect } from "react";
|
|
import MapView, {
|
|
Callout,
|
|
Heatmap,
|
|
Circle,
|
|
Marker,
|
|
UrlTile,
|
|
Overlay,
|
|
Polygon,
|
|
} from "react-native-maps";
|
|
import * as Location from "expo-location";
|
|
import GetDistance from "../../components/GetDistance/GetDistance";
|
|
import Button from "../../components/Button/Button";
|
|
import {
|
|
RootDrawerParamList,
|
|
StudentStatusReturnType,
|
|
RawLocationType,
|
|
StudentStatusType,
|
|
StudentStatusListReturnType,
|
|
StudentStatusListType,
|
|
subjectUserMapType,
|
|
StudentStatusFilterTypeFlattened,
|
|
StudentStatusPatchType,
|
|
StudyGroupType,
|
|
StudyGroupReturnType,
|
|
StudentStatusFilterType,
|
|
StudyGroupCreateType,
|
|
} from "../../interfaces/Interfaces";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import {
|
|
CreateStudyGroup,
|
|
GetStudentStatus,
|
|
GetStudentStatusList,
|
|
GetStudentStatusListFiltered,
|
|
GetStudyGroupList,
|
|
GetStudyGroupListFiltered,
|
|
PatchStudentStatus,
|
|
urlProvider,
|
|
} from "../../components/Api/Api";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useToast } from "react-native-toast-notifications";
|
|
import React from "react";
|
|
import CustomMapCallout from "../../components/CustomMapCallout/CustomMapCallout";
|
|
import MapRendererFar from "../../components/MapRenderer/MapRendererFar";
|
|
import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUSTP";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../features/redux/Store/Store";
|
|
|
|
export default function Home() {
|
|
// Switch this condition to see the main map when debugging
|
|
const map_debug = true;
|
|
const user_state = useSelector((state: RootState) => state.user);
|
|
const navigation = useNavigation<RootDrawerParamList>();
|
|
const [location, setLocation] = useState<RawLocationType | null>(null);
|
|
const [dist, setDist] = useState<number | null>(null);
|
|
const [feedback, setFeedback] = useState(
|
|
"To continue, please allow Stud-E permission to location services"
|
|
);
|
|
const queryClient = useQueryClient();
|
|
const toast = useToast();
|
|
|
|
const ustpCoords = {
|
|
latitude: 8.4857,
|
|
longitude: 124.6565,
|
|
latitudeDelta: 0.000235,
|
|
longitudeDelta: 0.000067,
|
|
};
|
|
async function requestLocation() {
|
|
const { status } = await Location.requestForegroundPermissionsAsync();
|
|
if (status !== "granted") {
|
|
setFeedback("Allow location permissions to continue");
|
|
toast.show(
|
|
"Location permission was denied. Please allow in order to use StudE",
|
|
{
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
}
|
|
);
|
|
return;
|
|
}
|
|
if (status == "granted") {
|
|
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);
|
|
DistanceHandler(newLocation);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Refresh every 15 seconds
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
requestLocation();
|
|
}, 15000);
|
|
|
|
return () => clearInterval(interval);
|
|
});
|
|
|
|
// Refresh when screen loads
|
|
useEffect(() => {
|
|
requestLocation();
|
|
}, []);
|
|
|
|
async function DistanceHandler(location: RawLocationType) {
|
|
let dist = GetDistanceFromUSTP(location.coords);
|
|
setDist(dist);
|
|
// Deactivate student status if too far away
|
|
if (dist >= 2 && !map_debug)
|
|
mutation.mutate({
|
|
active: false,
|
|
});
|
|
}
|
|
|
|
// Student Status
|
|
const [studying, setStudying] = useState(false);
|
|
const [subject, setSubject] = useState("");
|
|
const [buttonLabel, setButtonLabel] = useState("Start studying");
|
|
const [student_status, setStudentStatus] = useState<StudentStatusType>();
|
|
const StudentStatusQuery = useQuery({
|
|
queryKey: ["user_status"],
|
|
queryFn: async () => {
|
|
const data = await GetStudentStatus();
|
|
if (data[0] == false) {
|
|
return Promise.reject(new Error(JSON.stringify(data[1])));
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: (data: StudentStatusReturnType) => {
|
|
if (data[1].active !== undefined) {
|
|
setStudying(data[1].active);
|
|
}
|
|
if (data[1].subject !== undefined) {
|
|
setSubject(data[1].subject);
|
|
}
|
|
if (data[1].active == true) {
|
|
setButtonLabel("Stop Studying");
|
|
} else if (data[1].active == false) {
|
|
setButtonLabel("Start Studying");
|
|
}
|
|
setStudentStatus(data[1]);
|
|
console.log(student_status);
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: async (info: StudentStatusPatchType) => {
|
|
const data = await PatchStudentStatus(info);
|
|
if (data[0] != true) {
|
|
return Promise.reject(new Error());
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["user"] });
|
|
queryClient.invalidateQueries({ queryKey: ["user_status"] });
|
|
toast.show("You are no longer studying \n" + subject, {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const study_group_create = useMutation({
|
|
mutationFn: async (info: StudyGroupCreateType) => {
|
|
const data = await CreateStudyGroup(info);
|
|
if (data[0] != true) {
|
|
return Promise.reject(new Error());
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["user"] });
|
|
queryClient.invalidateQueries({ queryKey: ["user_status"] });
|
|
toast.show("Created successfully", {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const [student_statuses, setStudentStatuses] =
|
|
useState<StudentStatusListType>([]);
|
|
// Student Status List
|
|
const StudentStatusListQuery = useQuery({
|
|
enabled: studying,
|
|
queryKey: ["user_status_list"],
|
|
queryFn: async () => {
|
|
const data = await GetStudentStatusListFiltered();
|
|
if (data[0] == false) {
|
|
return Promise.reject(new Error(JSON.stringify(data[1])));
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: (data: StudentStatusListReturnType) => {
|
|
if (data[1] && location) {
|
|
// Filter to only include students studying solo
|
|
let data_filtered = data[1].filter(
|
|
(item: StudentStatusFilterType) => item.study_group == ""
|
|
);
|
|
setStudentStatuses(data_filtered);
|
|
}
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const [study_groups, setStudyGroups] = useState<StudyGroupType[]>([]);
|
|
// Student Status List
|
|
const StudyGroupQuery = useQuery({
|
|
enabled: studying,
|
|
queryKey: ["study_group_list"],
|
|
queryFn: async () => {
|
|
const data = await GetStudyGroupListFiltered();
|
|
if (data[0] == false) {
|
|
return Promise.reject(new Error(JSON.stringify(data[1])));
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: (data: StudyGroupReturnType) => {
|
|
if (data[1] && location) {
|
|
setStudyGroups(data[1]);
|
|
}
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
const [study_groups_global, setStudyGroupsGlobal] = useState<
|
|
StudyGroupType[]
|
|
>([]);
|
|
// Student Status List
|
|
const StudyGroupGlobalQuery = useQuery({
|
|
enabled: !studying,
|
|
queryKey: ["study_group_list_global"],
|
|
queryFn: async () => {
|
|
const data = await GetStudyGroupList();
|
|
if (data[0] == false) {
|
|
return Promise.reject(new Error(JSON.stringify(data[1])));
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: (data: StudyGroupReturnType) => {
|
|
if (data[1] && location) {
|
|
setStudyGroupsGlobal(data[1]);
|
|
}
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
function CustomMap() {
|
|
if (dist && location) {
|
|
if (dist <= 2 || map_debug) {
|
|
return (
|
|
<View>
|
|
<MapView
|
|
style={styles.map}
|
|
customMapStyle={[
|
|
{
|
|
featureType: "poi",
|
|
stylers: [
|
|
{
|
|
visibility: "off",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
scrollEnabled={true}
|
|
zoomEnabled={true}
|
|
toolbarEnabled={false}
|
|
rotateEnabled={false}
|
|
maxZoomLevel={19}
|
|
minZoomLevel={19}
|
|
zoomTapEnabled
|
|
initialRegion={{
|
|
latitude:
|
|
student_status?.location?.latitude ||
|
|
location.coords.latitude,
|
|
longitude:
|
|
student_status?.location?.longitude ||
|
|
location.coords.longitude,
|
|
latitudeDelta: 0.4,
|
|
longitudeDelta: 0.4,
|
|
}}
|
|
loadingBackgroundColor={colors.secondary_2}
|
|
>
|
|
{student_statuses.map(
|
|
(student_status: StudentStatusFilterType, index: number) => {
|
|
const randomColorWithOpacity = `rgba(${Math.floor(
|
|
Math.random() * 256
|
|
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
|
|
Math.random() * 256
|
|
)}, 0.7)`;
|
|
|
|
return (
|
|
<Marker
|
|
key={index}
|
|
coordinate={student_status.location}
|
|
pinColor={randomColorWithOpacity}
|
|
zIndex={1000}
|
|
onPress={() => {
|
|
toast.hideAll();
|
|
toast.show(
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Student: {student_status.user}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Studying Subject: {student_status.subject}
|
|
</Text>
|
|
</View>,
|
|
{
|
|
type: "normal",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
style: {
|
|
backgroundColor: colors.secondary_2,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary_1,
|
|
},
|
|
}
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
)}
|
|
{study_groups.map((studygroup: StudyGroupType, index: number) => {
|
|
const randomColorWithOpacity = `rgba(${Math.floor(
|
|
Math.random() * 256
|
|
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
|
|
Math.random() * 256
|
|
)}, 0.7)`;
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Marker
|
|
coordinate={studygroup.location}
|
|
pinColor={randomColorWithOpacity}
|
|
zIndex={1000}
|
|
onPress={() => {
|
|
toast.hideAll();
|
|
toast.show(
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Subject: {studygroup.subject}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Students Studying: {studygroup.students.length}
|
|
</Text>
|
|
<Button
|
|
onPress={() => {
|
|
toast.show("Joined successfully", {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Join Group
|
|
</Text>
|
|
</Button>
|
|
</View>,
|
|
{
|
|
type: "normal",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
style: {
|
|
backgroundColor: colors.secondary_2,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary_1,
|
|
},
|
|
}
|
|
);
|
|
}}
|
|
/>
|
|
<Circle
|
|
center={studygroup.location}
|
|
radius={studygroup.radius}
|
|
fillColor={randomColorWithOpacity}
|
|
strokeColor="white"
|
|
zIndex={1000}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
{study_groups_global.map(
|
|
(studygroup: StudyGroupType, index: number) => {
|
|
const randomColorWithOpacity = `rgba(${Math.floor(
|
|
Math.random() * 256
|
|
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
|
|
Math.random() * 256
|
|
)}, 0.7)`;
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<Marker
|
|
coordinate={studygroup.location}
|
|
pinColor={randomColorWithOpacity}
|
|
zIndex={1000}
|
|
onPress={() => {
|
|
toast.hideAll();
|
|
toast.show(
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Subject: {studygroup.subject}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Students Studying: {studygroup.students.length}
|
|
</Text>
|
|
<Button
|
|
onPress={() => {
|
|
toast.show("Joined successfully", {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Join Group
|
|
</Text>
|
|
</Button>
|
|
</View>,
|
|
{
|
|
type: "normal",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
style: {
|
|
backgroundColor: colors.secondary_2,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary_1,
|
|
},
|
|
}
|
|
);
|
|
}}
|
|
/>
|
|
<Circle
|
|
center={studygroup.location}
|
|
radius={studygroup.radius}
|
|
fillColor={randomColorWithOpacity}
|
|
strokeColor="white"
|
|
zIndex={1000}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
)}
|
|
<Marker
|
|
zIndex={1001}
|
|
coordinate={{
|
|
latitude:
|
|
student_status?.location?.latitude ||
|
|
location.coords.latitude,
|
|
longitude:
|
|
student_status?.location?.longitude ||
|
|
location.coords.longitude,
|
|
}}
|
|
draggable={!student_status?.active}
|
|
onDragEnd={(e) => {
|
|
const newLocation = e.nativeEvent.coordinate;
|
|
const distance = GetDistance(
|
|
newLocation.latitude,
|
|
newLocation.longitude,
|
|
location.coords.latitude,
|
|
location.coords.longitude
|
|
);
|
|
if (distance <= 0.1) {
|
|
// If the new location is within 100 meters of the actual location, update the location state
|
|
setLocation({
|
|
...location,
|
|
coords: {
|
|
...location.coords,
|
|
latitude: newLocation.latitude,
|
|
longitude: newLocation.longitude,
|
|
},
|
|
});
|
|
} else {
|
|
// If the new location is more than 100 meters away from the actual location, reset the marker to the actual location
|
|
setLocation({
|
|
...location,
|
|
});
|
|
}
|
|
}}
|
|
pinColor={colors.primary_1}
|
|
onPress={() => {
|
|
toast.hideAll();
|
|
toast.show(
|
|
<View
|
|
style={{
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
You are here
|
|
</Text>
|
|
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{"x: " +
|
|
(student_status?.location?.longitude != undefined
|
|
? student_status?.location?.longitude.toFixed(4)
|
|
: location.coords.longitude.toFixed(4))}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{"y: " +
|
|
(student_status?.location?.latitude != undefined
|
|
? student_status?.location?.latitude.toFixed(4)
|
|
: location.coords.latitude.toFixed(4))}
|
|
</Text>
|
|
{student_status?.active &&
|
|
!student_status?.study_group ? (
|
|
<>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{student_status?.active
|
|
? "Studying " + student_status?.subject
|
|
: ""}
|
|
</Text>
|
|
<Button
|
|
onPress={() => {
|
|
if (student_status?.subject) {
|
|
console.log({
|
|
location: {
|
|
latitude: student_status?.location.latitude,
|
|
longitude:
|
|
student_status?.location.longitude,
|
|
},
|
|
subject: student_status?.subject,
|
|
});
|
|
navigation.navigate("Create Group", {
|
|
location: {
|
|
latitude: student_status?.location.latitude,
|
|
longitude:
|
|
student_status?.location.longitude,
|
|
},
|
|
subject: student_status?.subject,
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Create Group
|
|
</Text>
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{student_status?.study_group ? (
|
|
<>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`Studying ${student_status?.subject}`}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`In group ${student_status?.study_group}`}
|
|
</Text>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</View>,
|
|
{
|
|
type: "normal",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
style: {
|
|
backgroundColor: colors.secondary_2,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary_1,
|
|
},
|
|
}
|
|
);
|
|
}}
|
|
></Marker>
|
|
</MapView>
|
|
<Button
|
|
onPress={async () => {
|
|
if (!student_status?.active) {
|
|
navigation.navigate("Start Studying", { location: location });
|
|
} else {
|
|
mutation.mutate({
|
|
active: false,
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_medium}>{buttonLabel}</Text>
|
|
</Button>
|
|
</View>
|
|
);
|
|
} else {
|
|
return <MapRendererFar location={location.coords} dist={dist} />;
|
|
}
|
|
} else {
|
|
requestLocation();
|
|
return (
|
|
<AnimatedContainer>
|
|
<Text style={styles.text_white_medium}>{feedback}</Text>
|
|
<Button onPress={requestLocation}>
|
|
<Text style={styles.text_white_medium}>Allow Access</Text>
|
|
</Button>
|
|
</AnimatedContainer>
|
|
);
|
|
}
|
|
}
|
|
return (
|
|
<View style={styles.background}>
|
|
<AnimatedContainer>
|
|
<CustomMap />
|
|
</AnimatedContainer>
|
|
</View>
|
|
);
|
|
}
|