mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-04-19 00:11:22 +08:00
989 lines
36 KiB
TypeScript
989 lines
36 KiB
TypeScript
import styles, { colors } from "../../styles";
|
|
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
ScrollView,
|
|
Switch,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
|
|
import { useState, useEffect } from "react";
|
|
import MapView, { 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";
|
|
import {
|
|
RootDrawerParamList,
|
|
StudentStatusReturnType,
|
|
RawLocationType,
|
|
StudentStatusType,
|
|
StudentStatusListReturnType,
|
|
StudentStatusListType,
|
|
StudentStatusPatchType,
|
|
StudyGroupType,
|
|
StudyGroupReturnType,
|
|
StudentStatusFilterType,
|
|
} from "../../interfaces/Interfaces";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import {
|
|
GetStudentStatus,
|
|
GetStudentStatusList,
|
|
GetStudentStatusListNear,
|
|
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 MapRendererFar from "../../components/MapRenderer/MapRendererFar";
|
|
import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUSTP";
|
|
import Modal from "react-native-modal";
|
|
import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
|
|
import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
|
|
|
|
export default function Home() {
|
|
// Switch this condition to see the main map when debugging
|
|
const map_distance_override = false;
|
|
const navigation = useNavigation<RootDrawerParamList>();
|
|
const [location, setLocation] = useState<RawLocationType | null>(null);
|
|
const [locationFetched, setLocationFetched] = useState(false);
|
|
const [locationPermitted, setLocationPermitted] = useState(false);
|
|
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 [modalOpen, setModalOpen] = useState(false);
|
|
const [modalByGroup, setModalByGroup] = useState(false);
|
|
|
|
async function requestLocation() {
|
|
const { status } = await Location.requestForegroundPermissionsAsync();
|
|
if (status !== "granted") {
|
|
setLocationPermitted(true);
|
|
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 10 seconds
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
requestLocation();
|
|
}, 10000);
|
|
|
|
return () => clearInterval(interval);
|
|
});
|
|
|
|
// Refresh when screen loads
|
|
requestLocation();
|
|
useEffect(() => {
|
|
requestLocation();
|
|
}, []);
|
|
|
|
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)
|
|
stop_studying.mutate({
|
|
active: false,
|
|
});
|
|
setLocationFetched(true);
|
|
}
|
|
|
|
// 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 == true) {
|
|
setButtonLabel("Stop Studying");
|
|
} else if (data[1].active == false) {
|
|
setButtonLabel("Start Studying");
|
|
}
|
|
setSubject(data[1].subject);
|
|
setStudying(data[1].active);
|
|
setStudentStatus(data[1]);
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const stop_studying = useMutation({
|
|
mutationFn: async (info: StudentStatusPatchType) => {
|
|
const data = await PatchStudentStatus(info);
|
|
if (data[0] != true) {
|
|
return Promise.reject(new Error());
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
if (student_status?.study_group) {
|
|
// Display separate toast if you stop studying while in a study group
|
|
toast.show("You left study group \n" + student_status?.study_group, {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
}
|
|
toast.show("You are no longer studying \n" + subject, {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
queryClient.invalidateQueries({ queryKey: ["user_status"] });
|
|
// Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
|
|
setTimeout(() => {
|
|
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["study_group_list_global"],
|
|
});
|
|
}, 500);
|
|
setStudyGroups([]);
|
|
setStudying(false);
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const change_study_group = useMutation({
|
|
mutationFn: async (info: StudentStatusPatchType) => {
|
|
const data = await PatchStudentStatus(info);
|
|
if (data[0] != true) {
|
|
return Promise.reject(new Error());
|
|
}
|
|
return data;
|
|
},
|
|
onSuccess: () => {
|
|
if (student_status?.study_group) {
|
|
// Display separate toast if you stop studying while in a study group
|
|
toast.show("You left study group \n" + student_status?.study_group, {
|
|
type: "success",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
}
|
|
queryClient.invalidateQueries({ queryKey: ["user_status"] });
|
|
|
|
// Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
|
|
setTimeout(() => {
|
|
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["study_group_list_global"],
|
|
});
|
|
}, 500);
|
|
setStudyGroups([]);
|
|
},
|
|
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 && !StudentStatusQuery.isLoading,
|
|
queryKey: ["user_status_list"],
|
|
queryFn: async () => {
|
|
const data = await GetStudentStatusListNear();
|
|
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 == null
|
|
);
|
|
setStudentStatuses(data_filtered);
|
|
}
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const [student_statuses_global, setStudentStatusesGlobal] =
|
|
useState<StudentStatusListType>([]);
|
|
// Student Status List Global
|
|
const StudentStatusListGlobalQuery = useQuery({
|
|
enabled: !studying && !StudentStatusQuery.isLoading,
|
|
queryKey: ["user_status_list_global"],
|
|
queryFn: async () => {
|
|
const data = await GetStudentStatusList();
|
|
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 == null
|
|
);
|
|
setStudentStatusesGlobal(data_filtered);
|
|
}
|
|
},
|
|
onError: (error: Error) => {
|
|
toast.show(String(error), {
|
|
type: "warning",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
});
|
|
},
|
|
});
|
|
|
|
const [study_groups, setStudyGroups] = useState<StudyGroupType[]>([]);
|
|
// Study Group List
|
|
const StudyGroupQuery = useQuery({
|
|
enabled: studying && !StudentStatusQuery.isLoading,
|
|
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[]
|
|
>([]);
|
|
// Study Group Global List
|
|
const StudyGroupGlobalQuery = useQuery({
|
|
enabled: !studying && !StudentStatusQuery.isLoading,
|
|
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 && locationFetched) {
|
|
if (
|
|
(StudentStatusQuery.isFetching && studying) ||
|
|
StudentStatusListQuery.isFetching ||
|
|
StudyGroupQuery.isFetching ||
|
|
(StudentStatusQuery.isFetching && !studying) ||
|
|
StudentStatusListGlobalQuery.isFetching ||
|
|
StudyGroupGlobalQuery.isFetching
|
|
) {
|
|
return (
|
|
<>
|
|
<View style={{ paddingVertical: 8 }} />
|
|
<ActivityIndicator size={96} color={colors.secondary_1} />
|
|
<Text style={styles.text_white_medium}>Loading...</Text>
|
|
</>
|
|
);
|
|
}
|
|
if (dist <= 1 || map_distance_override) {
|
|
return (
|
|
<>
|
|
<MapView
|
|
mapType={"none"}
|
|
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}
|
|
>
|
|
<UrlTile
|
|
urlTemplate={urlProvider}
|
|
shouldReplaceMapContent={true}
|
|
maximumZ={19}
|
|
flipY={false}
|
|
zIndex={1}
|
|
/>
|
|
{!studying ? (
|
|
student_statuses_global.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 ${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,
|
|
},
|
|
}
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
{studying ? (
|
|
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 ${student_status.subject}`}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`${Math.round(
|
|
student_status.distance * 1000
|
|
)}m away`}
|
|
</Text>
|
|
</View>,
|
|
{
|
|
type: "normal",
|
|
placement: "top",
|
|
duration: 2000,
|
|
animationType: "slide-in",
|
|
style: {
|
|
backgroundColor: colors.secondary_2,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary_1,
|
|
},
|
|
}
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
{studying ? (
|
|
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}>
|
|
Study Group: {studygroup.name}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`Studying ${studygroup.subject}`}
|
|
</Text>
|
|
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`${studygroup.students.length} ${
|
|
studygroup.students.length > 1
|
|
? "students"
|
|
: "student"
|
|
} studying`}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`${Math.round(
|
|
studygroup.distance * 1000
|
|
)}m away`}
|
|
</Text>
|
|
{student_status?.study_group !=
|
|
studygroup.name ? (
|
|
<Button
|
|
onPress={() => {
|
|
change_study_group.mutate({
|
|
study_group: studygroup.name,
|
|
subject: studygroup.subject,
|
|
});
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Join Group
|
|
</Text>
|
|
</Button>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{student_status?.study_group ==
|
|
studygroup.name ? (
|
|
<Button
|
|
onPress={() => {
|
|
change_study_group.mutate({
|
|
study_group: "",
|
|
});
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Leave 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>
|
|
);
|
|
}
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
{!studying ? (
|
|
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}>
|
|
Study Group: {studygroup.name}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`Studying ${studygroup.subject}`}
|
|
</Text>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`${studygroup.students.length} ${
|
|
studygroup.students.length > 1
|
|
? "students"
|
|
: "student"
|
|
} studying`}
|
|
</Text>
|
|
{student_status?.study_group !=
|
|
studygroup.name ? (
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Study nearby to join
|
|
</Text>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</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>
|
|
);
|
|
}
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
{!studying || !student_status?.study_group ? (
|
|
<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>
|
|
{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) {
|
|
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>
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Button
|
|
onPress={async () => {
|
|
if (!student_status?.active) {
|
|
navigation.navigate("Start Studying", {
|
|
location: location,
|
|
});
|
|
} else {
|
|
stop_studying.mutate({
|
|
active: false,
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_small}>{buttonLabel}</Text>
|
|
</Button>
|
|
<Pressable
|
|
style={{
|
|
display: modalOpen ? "none" : "flex",
|
|
backgroundColor: colors.secondary_3,
|
|
borderRadius: 16,
|
|
alignSelf: "center",
|
|
}}
|
|
onPress={() => {
|
|
setModalOpen(true);
|
|
}}
|
|
>
|
|
{studying ? <CaretUpIcon size={32} /> : <></>}
|
|
</Pressable>
|
|
</View>
|
|
|
|
<View style={styles.padding} />
|
|
</>
|
|
);
|
|
} else {
|
|
return <MapRendererFar location={location.coords} dist={dist} />;
|
|
}
|
|
} else if (!locationPermitted) {
|
|
return (
|
|
<>
|
|
<Text style={styles.text_white_medium}>{feedback}</Text>
|
|
<Button onPress={async () => await requestLocation()}>
|
|
<Text style={styles.text_white_medium}>Allow Access</Text>
|
|
</Button>
|
|
</>
|
|
);
|
|
} else {
|
|
return <></>;
|
|
}
|
|
}
|
|
return (
|
|
<View style={styles.background}>
|
|
<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_row}>
|
|
<Switch
|
|
value={modalByGroup}
|
|
onChange={() => {
|
|
setModalByGroup(!modalByGroup);
|
|
}}
|
|
/>
|
|
<Text style={styles.text_white_medium}>List View</Text>
|
|
</View>
|
|
|
|
<ScrollView>
|
|
{!modalByGroup ? (
|
|
student_statuses.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,
|
|
}}
|
|
>
|
|
<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_white_tiny_bold}>
|
|
{`${Math.round(student_status.distance * 1000)}m away`}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
{modalByGroup ? (
|
|
study_groups.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,
|
|
}}
|
|
>
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
Group Name: {studygroup.name}
|
|
</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>
|
|
{student_status?.study_group != studygroup.name ? (
|
|
<Text style={styles.text_white_tiny_bold}>
|
|
{`${Math.round(studygroup.distance * 1000)}m away`}
|
|
</Text>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</View>
|
|
);
|
|
})
|
|
) : (
|
|
<></>
|
|
)}
|
|
</ScrollView>
|
|
</AnimatedContainer>
|
|
</Modal>
|
|
<AnimatedContainer>
|
|
<View style={{ borderRadius: 16, overflow: "hidden" }}>
|
|
<CustomMap />
|
|
</View>
|
|
</AnimatedContainer>
|
|
</View>
|
|
);
|
|
}
|