From 980d1e636e2a8c471c7b4ea9666bc7abf5b78cdd Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Mon, 11 Sep 2023 19:16:48 +0800
Subject: [PATCH] Added student status point rendering

---
 .../ParseStudentStatusList.tsx                | 35 ++++++++++
 .../ParseStudyGroupList.tsx                   |  4 +-
 src/routes/Home/Home.tsx                      | 64 +++++++++++++++++--
 3 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ParseStudentStatusList/ParseStudentStatusList.tsx

diff --git a/src/components/ParseStudentStatusList/ParseStudentStatusList.tsx b/src/components/ParseStudentStatusList/ParseStudentStatusList.tsx
new file mode 100644
index 0000000..4e673c9
--- /dev/null
+++ b/src/components/ParseStudentStatusList/ParseStudentStatusList.tsx
@@ -0,0 +1,35 @@
+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;
+}
diff --git a/src/components/ParseStudyGroupList/ParseStudyGroupList.tsx b/src/components/ParseStudyGroupList/ParseStudyGroupList.tsx
index b6685e9..93c70cb 100644
--- a/src/components/ParseStudyGroupList/ParseStudyGroupList.tsx
+++ b/src/components/ParseStudyGroupList/ParseStudyGroupList.tsx
@@ -132,12 +132,12 @@ export default function ParseStudyGroupList(
             user_location.longitude
           );
 
-          console.log(
+          /*console.log(
             "Haversine Distance for entry #",
             index + 1,
             ":",
             distance
-          );
+          );*/
           return distance;
         }
       )
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 095cd95..f8bdf57 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -22,6 +22,7 @@ import {
   StudentStatusListReturnType,
   StudentStatusListType,
   subjectUserMapType,
+  StudentStatusFilterTypeFlattened,
 } from "../../interfaces/Interfaces";
 import { useNavigation } from "@react-navigation/native";
 import {
@@ -34,8 +35,9 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useToast } from "react-native-toast-notifications";
 import CustomMapCallout from "../../components/CustomMapCallout/CustomMapCallout";
-import ParseStudentStatusList from "../../components/ParseStudyGroupList/ParseStudyGroupList";
 import React from "react";
+import ParseStudyGroupList from "../../components/ParseStudyGroupList/ParseStudyGroupList";
+import ParseStudentStatusList from "../../components/ParseStudentStatusList/ParseStudentStatusList";
 
 export default function Home() {
   // Switch this condition to see the main map when debugging
@@ -179,7 +181,9 @@ export default function Home() {
     },
   });
 
-  const [student_statuses, setStudentStatuses] = useState<any>([]);
+  const [student_statuses, setStudentStatuses] = useState<
+    StudentStatusFilterTypeFlattened[]
+  >([]);
   const [study_groups, setStudyGroups] = useState<subjectUserMapType[]>([]);
   // Student Status List
   const StudentStatusList = useQuery({
@@ -195,11 +199,12 @@ export default function Home() {
     onSuccess: (data: StudentStatusListReturnType) => {
       if (data[1] && location) {
         setStudyGroups(
-          ParseStudentStatusList(data[1], {
+          ParseStudyGroupList(data[1], {
             latitude: location.coords.latitude,
             longitude: location.coords.longitude,
           })
         );
+        setStudentStatuses(ParseStudentStatusList(data[1]));
       }
     },
     onError: (error: Error) => {
@@ -244,6 +249,57 @@ export default function Home() {
               }}
               loadingBackgroundColor={colors.secondary_2}
             >
+              {student_statuses.map(
+                (
+                  student_status: StudentStatusFilterTypeFlattened,
+                  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}
+                      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(
                 (student_status: subjectUserMapType, index: number) => {
                   const randomColorWithOpacity = `rgba(${Math.floor(
@@ -285,7 +341,7 @@ export default function Home() {
                                 }}
                               >
                                 <Text style={styles.text_white_tiny_bold}>
-                                  Create Group & Invite
+                                  Join Group
                                 </Text>
                               </Button>
                             </View>,