From 62cee96b941d7bb9315a06c7ddc004c8863a55be Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Tue, 26 Sep 2023 20:29:21 +0800
Subject: [PATCH] Added study group creation

---
 src/components/Api/Api.tsx    |  18 +++++-
 src/interfaces/Interfaces.tsx |   7 +++
 src/routes/Home/Home.tsx      | 110 ++++++++++++++++++++++++++++++----
 3 files changed, 124 insertions(+), 11 deletions(-)

diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx
index 430124f..3130d12 100644
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@@ -8,6 +8,8 @@ import {
   RegistrationType,
   StudentStatusPatchType,
   StudentStatusType,
+  StudyGroupCreateType,
+  StudyGroupType,
 } from "../../interfaces/Interfaces";
 
 export let backendURL = "https://stude.keannu1.duckdns.org";
@@ -275,6 +277,7 @@ export async function GetStudentStatusListFiltered() {
   return instance
     .get("/api/v1/student_status/filter/near_student_status", config)
     .then((response) => {
+      console.log("test", response.data);
       return [true, response.data];
     })
     .catch((error) => {
@@ -315,7 +318,20 @@ export async function GetStudyGroupList() {
   return instance
     .get("/api/v1/study_groups/", config)
     .then((response) => {
-      console.log("test", response.data);
+      return [true, response.data];
+    })
+    .catch((error) => {
+      let error_message = ParseError(error);
+      return [false, error_message];
+    });
+}
+
+export async function CreateStudyGroup(info: StudyGroupCreateType) {
+  const config = await GetConfig();
+  console.log("Payload:", info);
+  return instance
+    .post("/api/v1/study_groups/create/", info, config)
+    .then((response) => {
       return [true, response.data];
     })
     .catch((error) => {
diff --git a/src/interfaces/Interfaces.tsx b/src/interfaces/Interfaces.tsx
index be6d983..33844eb 100644
--- a/src/interfaces/Interfaces.tsx
+++ b/src/interfaces/Interfaces.tsx
@@ -175,6 +175,13 @@ export interface StudyGroupType {
   subject: string;
   radius: number;
 }
+
+export interface StudyGroupCreateType {
+  name: string;
+  location: LocationType;
+  subject: string;
+}
+
 export type StudyGroupReturnType = [boolean, StudyGroupType[]];
 
 export type StudentStatusReturnType = [boolean, StudentStatusType];
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index f926c26..b3465b3 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -27,9 +27,11 @@ import {
   StudyGroupType,
   StudyGroupReturnType,
   StudentStatusFilterType,
+  StudyGroupCreateType,
 } from "../../interfaces/Interfaces";
 import { useNavigation } from "@react-navigation/native";
 import {
+  CreateStudyGroup,
   GetStudentStatus,
   GetStudentStatusList,
   GetStudentStatusListFiltered,
@@ -44,10 +46,13 @@ 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);
@@ -185,6 +190,34 @@ export default function Home() {
     },
   });
 
+  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
@@ -531,16 +564,73 @@ export default function Home() {
                   }
                 }}
                 pinColor={colors.primary_1}
-              >
-                <CustomMapCallout
-                  location={{
-                    latitude: location.coords.latitude,
-                    longitude: location.coords.longitude,
-                  }}
-                  studying={studying}
-                  subject={subject}
-                />
-              </Marker>
+                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 != 0
+                            ? student_status?.location?.longitude.toFixed(4)
+                            : location.coords.longitude.toFixed(4))}
+                      </Text>
+                      <Text style={styles.text_white_tiny_bold}>
+                        {"y: " +
+                          (student_status?.location?.latitude != 0
+                            ? student_status?.location?.latitude.toFixed(4)
+                            : location.coords.latitude.toFixed(4))}
+                      </Text>
+                      {studying ? (
+                        <>
+                          <Text style={styles.text_white_tiny_bold}>
+                            {studying
+                              ? "Studying " + student_status?.subject
+                              : ""}
+                          </Text>
+                          <Button
+                            onPress={() => {
+                              if (student_status?.subject) {
+                                study_group_create.mutate({
+                                  name: "asdasdasdasd",
+                                  location: location.coords,
+                                  subject: student_status?.subject,
+                                });
+                              }
+                            }}
+                          >
+                            <Text style={styles.text_white_tiny_bold}>
+                              Create Group
+                            </Text>
+                          </Button>
+                        </>
+                      ) : (
+                        <></>
+                      )}
+                    </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 () => {