From 4e1a73f6ed5a3968a07bd63fd8b860f28a2195e2 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 29 Sep 2023 20:58:59 +0800
Subject: [PATCH] Fix some styling issues and improve pull up modal for
 groups/students list

---
 src/components/Api/Api.tsx                    |  1 -
 .../DrawerSettings/CustomDrawerContent.tsx    | 32 +++++--
 src/routes/Home/Home.tsx                      | 85 ++++++++++++++++++-
 src/styles.tsx                                |  1 -
 4 files changed, 105 insertions(+), 14 deletions(-)

diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx
index 9537cd1..b6362d7 100644
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@@ -254,7 +254,6 @@ export async function PatchStudentStatus(info: StudentStatusPatchType) {
     })
     .catch((error) => {
       let error_message = ParseError(error);
-      console.log("DEBUG", error.response.data);
       return [false, error_message];
     });
 }
diff --git a/src/components/DrawerSettings/CustomDrawerContent.tsx b/src/components/DrawerSettings/CustomDrawerContent.tsx
index 40901f0..7a8d64b 100644
--- a/src/components/DrawerSettings/CustomDrawerContent.tsx
+++ b/src/components/DrawerSettings/CustomDrawerContent.tsx
@@ -31,8 +31,8 @@ export default function CustomDrawerContent(props: {}) {
   const status = useSelector((state: RootState) => state.status);
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
-  const debug = false;
   const toast = useToast();
+  const debug_disable_clear_on_logout = true;
   const stop_studying_logout = useMutation({
     mutationFn: async (info: StudentStatusPatchType) => {
       const data = await PatchStudentStatus(info);
@@ -77,10 +77,17 @@ export default function CustomDrawerContent(props: {}) {
         </View>
 
         <DrawerButton
-          onPress={() => {
-            stop_studying_logout.mutate({
-              active: false,
-            });
+          onPress={async () => {
+            if (debug_disable_clear_on_logout) {
+              queryClient.clear();
+              dispatch(logout());
+              await AsyncStorage.clear();
+              navigation.navigate("Login");
+            } else {
+              stop_studying_logout.mutate({
+                active: false,
+              });
+            }
           }}
         >
           <LogoutIcon size={32} />
@@ -125,10 +132,17 @@ export default function CustomDrawerContent(props: {}) {
           <Text style={styles.text_white_medium}>Subjects</Text>
         </DrawerButton>
         <DrawerButton
-          onPress={() => {
-            stop_studying_logout.mutate({
-              active: false,
-            });
+          onPress={async () => {
+            if (debug_disable_clear_on_logout) {
+              queryClient.clear();
+              dispatch(logout());
+              await AsyncStorage.clear();
+              navigation.navigate("Login");
+            } else {
+              stop_studying_logout.mutate({
+                active: false,
+              });
+            }
           }}
         >
           <LogoutIcon size={32} />
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 22b2150..464bb1c 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -1,5 +1,5 @@
 import styles, { colors } from "../../styles";
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, ScrollView, Switch } from "react-native";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useState, useEffect } from "react";
 import MapView, { Circle, Marker } from "react-native-maps";
@@ -48,6 +48,7 @@ export default function Home() {
   const toast = useToast();
 
   const [modalOpen, setModalOpen] = useState(false);
+  const [modalByGroup, setModalByGroup] = useState(false);
 
   async function requestLocation() {
     const { status } = await Location.requestForegroundPermissionsAsync();
@@ -240,10 +241,11 @@ export default function Home() {
       return data;
     },
     onSuccess: (data: StudentStatusListReturnType) => {
+      console.log("DEBUGGG", data[1]);
       if (data[1] && location) {
         // Filter to only include students studying solo
         let data_filtered = data[1].filter(
-          (item: StudentStatusFilterType) => item.study_group == ""
+          (item: StudentStatusFilterType) => item.study_group == null
         );
         setStudentStatuses(data_filtered);
       }
@@ -741,7 +743,6 @@ export default function Home() {
         isVisible={modalOpen}
         style={{ opacity: 0.85 }}
         hasBackdrop={false}
-        useNativeDriver={true}
       >
         <AnimatedContainer>
           <Text style={styles.text_white_medium}>Groups List</Text>
@@ -755,6 +756,84 @@ export default function Home() {
           >
             <DropdownIcon size={32} />
           </Pressable>
+          <Switch
+            value={modalByGroup}
+            onChange={() => {
+              setModalByGroup(!modalByGroup);
+            }}
+          />
+          <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 Subject: {student_status.subject}
+                      </Text>
+                    </View>
+                  );
+                }
+              )
+            ) : (
+              <></>
+            )}
+            {modalByGroup ? (
+              study_groups_global.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}>
+                        Subject: {studygroup.subject}
+                      </Text>
+                      <Text style={styles.text_white_tiny_bold}>
+                        Group Name: {studygroup.name}
+                      </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}>
+                          Study nearby to join
+                        </Text>
+                      ) : (
+                        <></>
+                      )}
+                    </View>
+                  );
+                }
+              )
+            ) : (
+              <></>
+            )}
+          </ScrollView>
         </AnimatedContainer>
       </Modal>
       <AnimatedContainer>
diff --git a/src/styles.tsx b/src/styles.tsx
index 1236f56..546847e 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -51,7 +51,6 @@ const styles = StyleSheet.create({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    flexGrow: 1,
   },
   flex_column: {
     display: "flex",