mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-05-17 11:58:06 +08:00
Optimized homepage rendering and removed overly complicated components
This commit is contained in:
parent
19d19c3dd5
commit
1bd07f9edd
5 changed files with 129 additions and 298 deletions
|
|
@ -24,20 +24,22 @@ import {
|
|||
subjectUserMapType,
|
||||
StudentStatusFilterTypeFlattened,
|
||||
StudentStatusPatchType,
|
||||
StudyGroupType,
|
||||
StudyGroupReturnType,
|
||||
StudentStatusFilterType,
|
||||
} from "../../interfaces/Interfaces";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import {
|
||||
GetStudentStatus,
|
||||
GetStudentStatusList,
|
||||
GetStudentStatusListFiltered,
|
||||
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 ParseStudyGroupList from "../../components/ParseStudyGroupList/ParseStudyGroupList";
|
||||
import ParseStudentStatusList from "../../components/ParseStudentStatusList/ParseStudentStatusList";
|
||||
import CustomMapCallout from "../../components/CustomMapCallout/CustomMapCallout";
|
||||
import MapRendererFar from "../../components/MapRenderer/MapRendererFar";
|
||||
import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUSTP";
|
||||
|
|
@ -120,7 +122,7 @@ export default function Home() {
|
|||
const [subject, setSubject] = useState("");
|
||||
const [buttonLabel, setButtonLabel] = useState("Start studying");
|
||||
const [student_status, setStudentStatus] = useState<StudentStatusType>();
|
||||
const StudentStatus = useQuery({
|
||||
const StudentStatusQuery = useQuery({
|
||||
queryKey: ["user_status"],
|
||||
queryFn: async () => {
|
||||
const data = await GetStudentStatus();
|
||||
|
|
@ -182,12 +184,10 @@ export default function Home() {
|
|||
},
|
||||
});
|
||||
|
||||
const [student_statuses, setStudentStatuses] = useState<
|
||||
StudentStatusFilterTypeFlattened[]
|
||||
>([]);
|
||||
const [study_groups, setStudyGroups] = useState<subjectUserMapType[]>([]);
|
||||
const [student_statuses, setStudentStatuses] =
|
||||
useState<StudentStatusListType>([]);
|
||||
// Student Status List
|
||||
const StudentStatusList = useQuery({
|
||||
const StudentStatusListQuery = useQuery({
|
||||
enabled: studying,
|
||||
queryKey: ["user_status_list"],
|
||||
queryFn: async () => {
|
||||
|
|
@ -199,13 +199,38 @@ export default function Home() {
|
|||
},
|
||||
onSuccess: (data: StudentStatusListReturnType) => {
|
||||
if (data[1] && location) {
|
||||
setStudyGroups(
|
||||
ParseStudyGroupList(data[1], {
|
||||
latitude: location.coords.latitude,
|
||||
longitude: location.coords.longitude,
|
||||
})
|
||||
// Filter to only include students studying solo
|
||||
let data_filtered = data[1].filter(
|
||||
(item: StudentStatusFilterType) => item.study_group == ""
|
||||
);
|
||||
setStudentStatuses(ParseStudentStatusList(data[1]));
|
||||
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) => {
|
||||
|
|
@ -255,10 +280,7 @@ export default function Home() {
|
|||
loadingBackgroundColor={colors.secondary_2}
|
||||
>
|
||||
{student_statuses.map(
|
||||
(
|
||||
student_status: StudentStatusFilterTypeFlattened,
|
||||
index: number
|
||||
) => {
|
||||
(student_status: StudentStatusFilterType, index: number) => {
|
||||
const randomColorWithOpacity = `rgba(${Math.floor(
|
||||
Math.random() * 256
|
||||
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
|
||||
|
|
@ -268,7 +290,7 @@ export default function Home() {
|
|||
return (
|
||||
<Marker
|
||||
key={index}
|
||||
coordinate={student_status}
|
||||
coordinate={student_status.location}
|
||||
pinColor={randomColorWithOpacity}
|
||||
zIndex={1000}
|
||||
onPress={() => {
|
||||
|
|
@ -305,76 +327,74 @@ export default function Home() {
|
|||
);
|
||||
}
|
||||
)}
|
||||
{study_groups.map(
|
||||
(student_status: subjectUserMapType, index: number) => {
|
||||
const randomColorWithOpacity = `rgba(${Math.floor(
|
||||
Math.random() * 256
|
||||
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
|
||||
Math.random() * 256
|
||||
)}, 0.7)`;
|
||||
{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={student_status}
|
||||
pinColor={randomColorWithOpacity}
|
||||
zIndex={1000}
|
||||
onPress={() => {
|
||||
toast.hideAll();
|
||||
toast.show(
|
||||
<View
|
||||
style={{
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
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.users.length}
|
||||
</Text>
|
||||
<Button
|
||||
onPress={() => {
|
||||
toast.show("Joined successfully", {
|
||||
type: "success",
|
||||
placement: "top",
|
||||
duration: 2000,
|
||||
animationType: "slide-in",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Text style={styles.text_white_tiny_bold}>
|
||||
Subject: {student_status.subject}
|
||||
Join Group
|
||||
</Text>
|
||||
<Text style={styles.text_white_tiny_bold}>
|
||||
Students Studying: {student_status.users.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={student_status}
|
||||
radius={student_status.radius}
|
||||
fillColor={randomColorWithOpacity}
|
||||
strokeColor="white"
|
||||
zIndex={1000}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</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={{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue