Optimized homepage rendering and removed overly complicated components

src/components/Api/Api.tsx

@@ -296,3 +296,17 @@ export async function GetStudentStatusListFilteredCurrentLocation() {
       return [false, error_message];
     });
 }
+
+export async function GetStudyGroupListFiltered() {
+  const config = await GetConfig();
+  return instance
+    .get("/api/v1/study_groups/near/", config)
+    .then((response) => {
+      console.log("Data:", response.data);
+      return [true, response.data];
+    })
+    .catch((error) => {
+      let error_message = ParseError(error);
+      return [false, error_message];
+    });
+}

src/components/ParseStudentStatusList/ParseStudentStatusList.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { View, Text } from "react-native";
-import {
-  StudentStatusFilterType,
-  LocationType,
-  subjectUserMapType,
-  StudentStatusListType,
-  StudentStatusFilterTypeFlattened,
-} from "../../interfaces/Interfaces";
-import { Double, Float } from "react-native/Libraries/Types/CodegenTypes";
-
-export default function ParseStudentStatusList(data: any) {
-  // Individual map point generation for student statuses
-  // Include only those that do not have study groups
-  // Then we simply flatten the data. Much simpler compared to study groups
-  let data_filtered = data.filter(
-    (item: StudentStatusFilterType) => item.study_group == ""
-  );
-  // console.log("Filtered Data:", data_filtered);
-  // Then we flatten the data so that all attributes are in the first layer
-  // We first flatten the data to remove nested entries
-  let data_flattened = data_filtered.map((item: StudentStatusFilterType) => ({
-    active: item.active,
-    distance: item.distance,
-    landmark: item.landmark,
-    latitude: item.location.latitude,
-    longitude: item.location.longitude,
-    study_group: item.study_group,
-    subject: item.subject,
-    user: item.user,
-    weight: 1,
-  }));
-
-  return data_flattened;
-}

src/components/ParseStudyGroupList/ParseStudyGroupList.tsx

@@ -1,179 +0,0 @@
-import * as React from "react";
-import { View, Text } from "react-native";
-import {
-  StudentStatusFilterType,
-  LocationType,
-  subjectUserMapType,
-  StudentStatusListType,
-  StudentStatusFilterTypeFlattened,
-} from "../../interfaces/Interfaces";
-import { Double, Float } from "react-native/Libraries/Types/CodegenTypes";
-
-export default function ParseStudyGroupList(
-  data: any,
-  user_location: LocationType
-) {
-  // Circle generation for students in a study group
-  let result: any[] = [];
-  // We first remove any instances that do not have a study group associated with it
-  let data_filtered = data.filter(
-    (item: StudentStatusFilterType) =>
-      item.study_group !== undefined && item.study_group.length > 0
-  );
-  // console.log("Filtered Data:", data_filtered);
-  // Then we flatten the data so that all attributes are in the first layer
-  // We first flatten the data to remove nested entries
-  let data_flattened = data_filtered.map((item: StudentStatusFilterType) => ({
-    active: item.active,
-    distance: item.distance,
-    landmark: item.landmark,
-    latitude: item.location.latitude,
-    longitude: item.location.longitude,
-    study_group: item.study_group,
-    subject: item.subject,
-    user: item.user,
-    weight: 1,
-  }));
-  // console.log("Flattened Data:", data_flattened);
-
-  // We take from the array all unique study groups
-  let unique_studygroups = [
-    ...new Set(
-      data_flattened.map((item: StudentStatusFilterType) => item.study_group)
-    ),
-  ];
-
-  // Then we create arrays unique to each subject
-  unique_studygroups.forEach((studygroup, index: number) => {
-    // We build another array for each subject, including only those instances that are the same subject name
-    let unique_subject_list = data_flattened
-      .filter(
-        (item: StudentStatusFilterTypeFlattened) =>
-          item.study_group === studygroup
-      )
-      .map((item: StudentStatusFilterTypeFlattened) => ({
-        active: item.active,
-        distance: item.distance,
-        landmark: item.landmark,
-        latitude: item.latitude,
-        longitude: item.longitude,
-        study_group: item.study_group,
-        subject: item.subject,
-        user: item.user,
-        weight: 1,
-      }));
-
-    /*
-    let unique_subject_object = data_flattened.filter(
-      (item: StudentStatusFilterTypeFlattened) => item.subject === subject
-    );
-    */
-
-    // We get the circle's center by averaging all the points
-    // Calculate the average latitude and longitude
-    const totalLat = unique_subject_list.reduce(
-      (sum: Double, point: LocationType) => sum + point.latitude,
-      0
-    );
-    const totalLng = unique_subject_list.reduce(
-      (sum: Double, point: LocationType) => sum + point.longitude,
-      0
-    );
-
-    let avgLat = totalLat / unique_subject_list.length;
-    let avgLng = totalLng / unique_subject_list.length;
-
-    // console.log("Center Latitude:", avgLat);
-    // console.log("Center Longitude:", avgLng);
-
-    // Haversine Distance Function
-    function haversineDistance(
-      lat1: number,
-      lon1: number,
-      lat2: number,
-      lon2: number
-    ) {
-      function toRad(x: number) {
-        return (x * Math.PI) / 180;
-      }
-
-      lat1 = toRad(lat1);
-      lon1 = toRad(lon1);
-      lat2 = toRad(lat2);
-      lon2 = toRad(lon2);
-
-      let dLat = lat2 - lat1;
-      let dLon = lon2 - lon1;
-
-      let a =
-        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-        Math.cos(lat1) *
-          Math.cos(lat2) *
-          Math.sin(dLon / 2) *
-          Math.sin(dLon / 2);
-      let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-
-      // Multiply by Earth's radius (in kilometers) to obtain distance
-      let distance = 6371 * c;
-
-      // Convert to meters
-      return distance * 1000;
-    }
-
-    // We now calculate the radius of the circle using the Haversine Distance Formula
-    // For each entry, we calculate the Haversine Distance from the user's location.
-    // The largest value is used as the circle radius
-
-    let circle_radius = Math.max(
-      ...unique_subject_list.map(
-        (item: StudentStatusFilterTypeFlattened, index: number) => {
-          let distance = haversineDistance(
-            item.latitude,
-            item.longitude,
-            user_location.latitude,
-            user_location.longitude
-          );
-
-          /*console.log(
-            "Haversine Distance for entry #",
-            index + 1,
-            ":",
-            distance
-          );*/
-          return distance;
-        }
-      )
-    );
-    // console.log("Radius:", circle_radius);
-
-    // We now build the object that we will return
-    const subjectUserMap: subjectUserMapType = {
-      subject: "",
-      study_group: "",
-      users: [],
-      latitude: 0,
-      longitude: 0,
-      radius: 0,
-    };
-    unique_subject_list.forEach((item: StudentStatusFilterType) => {
-      if (!subjectUserMap["users"]) {
-        subjectUserMap["users"] = [];
-      }
-      if (!subjectUserMap["study_group"]) {
-        subjectUserMap["study_group"] = unique_subject_list[0].study_group;
-      }
-      subjectUserMap["subject"] = item.subject;
-      subjectUserMap["latitude"] = avgLat;
-      subjectUserMap["longitude"] = avgLng;
-      subjectUserMap["radius"] = circle_radius;
-      subjectUserMap["users"].push(item.user);
-    });
-    console.log(subjectUserMap);
-
-    result = result.concat([subjectUserMap]);
-  });
-
-  console.log("Final Result:", result);
-
-  return result;
-}

src/interfaces/Interfaces.tsx

@@ -166,6 +166,17 @@ export interface StudentStatusFilterTypeFlattened {
   weight?: number;
 }
 
+export interface StudyGroupType {
+  name: string;
+  users: string[];
+  distance: number;
+  landmark: string | null;
+  location: LocationType;
+  subject: string;
+  radius: number;
+}
+export type StudyGroupReturnType = [boolean, StudyGroupType[]];
+
 export type StudentStatusReturnType = [boolean, StudentStatusType];
 
 export type StudentStatusListType = Array<StudentStatusFilterType>;

src/routes/Home/Home.tsx

@@ -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={{