Merge pull request #16 from lemeow125/feature/qol-fixes

Feature/qol fixes

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -143,7 +143,7 @@ export default function CustomDrawerContent(props: {}) {
         <DrawerButton
           onPress={async () => {
             // We don't clear student statuses when logging out on debug
-            if (!debug) {
+            if (debug) {
               queryClient.clear();
               dispatch(logout());
               await AsyncStorage.clear();

src/icons/CaretLeftIcon/CaretLeftIcon.tsx

@@ -3,7 +3,7 @@ import { IconProps } from "../../interfaces/Interfaces";
 import { Svg, Path } from "react-native-svg";
 import { colors } from "../../styles";
 
-export default function CaretLeftIcon(props: IconProps) {
+export default function CaretRightIcon(props: IconProps) {
   return (
     <>
       <Svg

src/icons/CaretRightIcon/CaretRightIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+import { Svg, Path } from "react-native-svg";
+import { colors } from "../../styles";
+
+export default function CaretRightIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        height={props.size + "px"}
+        width={props.size + "px"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={colors.icon_color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path
+          d="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
+          stroke-width="0"
+          fill={colors.icon_color}
+        ></Path>
+      </Svg>
+    </>
+  );
+}

src/routes/ConversationPage/ConversationPage.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ActivityIndicator, Image } from "react-native";
+import { ActivityIndicator, Image, Pressable } from "react-native";
 import styles from "../../styles";
 import {
   View,
@@ -36,6 +36,7 @@ import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContai
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
+import CaretRightIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
 
 export default function ConversationPage() {
   const toast = useToast();
@@ -70,6 +71,7 @@ export default function ConversationPage() {
     enabled:
       student_status?.study_group != "" && student_status?.study_group != null,
     queryKey: ["study_group"],
+    refetchInterval: 10000,
     queryFn: async () => {
       const data = await GetStudyGroup(student_status?.study_group || "");
       if (data[0] == false) {
@@ -127,7 +129,7 @@ export default function ConversationPage() {
   // Avatar List
   const [users, setUsers] = useState<GroupMessageAvatarType[]>([]);
   const AvatarsQuery = useQuery({
-    refetchInterval: 3000,
+    refetchInterval: 10000,
     enabled:
       student_status?.study_group != null ||
       (student_status?.study_group != "" &&
@@ -162,7 +164,7 @@ export default function ConversationPage() {
     mutationFn: async (info: MessagePostType) => {
       const data = await PostMessage(info);
       if (data[0] != true) {
-        return Promise.reject(new Error());
+        return Promise.reject(new Error(data[1]));
       }
       return data;
     },
@@ -209,7 +211,9 @@ export default function ConversationPage() {
                   paddingRight: 4,
                 }}
               >
-                {studygroup.students.length} studying
+                {!StudyGroupQuery.isFetching
+                  ? studygroup.students.length + " studying"
+                  : "Loading"}
               </Text>
               {users.map((user: GroupMessageAvatarType, index: number) => {
                 if (index > 6) {
@@ -293,23 +297,41 @@ export default function ConversationPage() {
               <Text style={styles.text_white_small}>There are no messages</Text>
             )}
           </ScrollView>
-          <TextInput
-            style={styles.chatbox}
-            placeholder="Send a message..."
-            placeholderTextColor="white"
-            value={message}
-            onChange={(
-              e: NativeSyntheticEvent<TextInputChangeEventData>
-            ): void => {
-              setMessage(e.nativeEvent.text);
-            }}
-            onSubmitEditing={() => {
-              send_message.mutate({
-                message_content: message,
-              });
-              setMessage("");
-            }}
-          />
+          <View style={styles.flex_row}>
+            <TextInput
+              style={styles.chatbox}
+              placeholder="Send a message..."
+              placeholderTextColor="white"
+              value={message}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setMessage(e.nativeEvent.text);
+              }}
+              onSubmitEditing={() => {
+                send_message.mutate({
+                  message_content: message,
+                });
+                setMessage("");
+              }}
+            />
+            <Pressable
+              style={{
+                backgroundColor: colors.secondary_3,
+                borderRadius: 16,
+                alignSelf: "center",
+                marginLeft: 16,
+              }}
+              onPress={() => {
+                send_message.mutate({
+                  message_content: message,
+                });
+                setMessage("");
+              }}
+            >
+              <CaretRightIcon size={48} />
+            </Pressable>
+          </View>
         </AnimatedContainer>
       </View>
     );

src/routes/CreateGroup/CreateGroup.tsx

@@ -24,6 +24,7 @@ import MapView, { UrlTile, Marker } from "react-native-maps";
 import { useNavigation } from "@react-navigation/native";
 import { useToast } from "react-native-toast-notifications";
 import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function CreateGroup({ route }: any) {
   const { location, subject } = route.params;
@@ -82,9 +83,9 @@ export default function CreateGroup({ route }: any) {
         duration: 2000,
         animationType: "slide-in",
       });
-      // Set a delay before going back to homepage to hopefully let the queries refresh in time
+      // Set a delay before going back to conversation page to hopefully let the queries refresh in time
       setTimeout(() => {
-        navigation.navigate("Home");
+        navigation.navigate("Conversation");
       }, 200);
     },
     onError: (error: Error) => {
@@ -100,7 +101,7 @@ export default function CreateGroup({ route }: any) {
   if (location) {
     return (
       <View style={styles.background}>
-        <AnimatedContainerNoScroll>
+        <AnimatedContainer>
           <View style={{ zIndex: -1 }}>
             <View style={styles.padding} />
             <View style={{ borderRadius: 16, overflow: "hidden" }}>
@@ -183,7 +184,7 @@ export default function CreateGroup({ route }: any) {
           </View>
 
           <View style={styles.padding} />
-        </AnimatedContainerNoScroll>
+        </AnimatedContainer>
       </View>
     );
   }

src/routes/Home/Home.tsx

@@ -44,6 +44,7 @@ import Modal from "react-native-modal";
 import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
 import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
 import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export default function Home() {
   // Switch this condition to see the main map when debugging
@@ -61,7 +62,7 @@ export default function Home() {
   const [modalOpen, setModalOpen] = useState(false);
   const [modalByGroup, setModalByGroup] = useState(false);
 
-  async function requestLocation() {
+  async function requestLocationPermission() {
     const { status } = await Location.requestForegroundPermissionsAsync();
     if (status !== "granted") {
       setFeedback("Allow location permissions to continue");
@@ -75,12 +76,13 @@ export default function Home() {
         }
       );
       return;
+    } else {
+      setLocationPermitted(true);
     }
-    if (status == "granted") {
-      if (locationPermitted === false) {
-        setLocationPermitted(true);
-      }
+  }
 
+  async function requestLocation() {
+    if (locationPermitted) {
       let newLocation = await Location.getCurrentPositionAsync();
       if (newLocation) {
         // Only update location state if user's location has changed
@@ -96,23 +98,18 @@ export default function Home() {
     }
   }
 
-  // Refresh every 10 seconds
-  requestLocation();
   useEffect(() => {
+    console.log("changed");
+    console.log(locationPermitted);
+    requestLocation();
+  }, [locationPermitted]);
+
+  useEffect(() => {
+    requestLocationPermission();
+    // Refresh every 30 seconds
     const interval = setInterval(() => {
       requestLocation();
     }, 30000);
-    setTimeout(() => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      queryClient.invalidateQueries({
-        queryKey: ["user_status_list"],
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["study_group_list"],
-      });
-      requestLocation();
-    }, 2000);
     return () => clearInterval(interval);
   }, []);
 
@@ -129,6 +126,9 @@ export default function Home() {
     }
   }
 
+  async function clear_messages_notification_cache() {
+    AsyncStorage.setItem("messages", "");
+  }
   // Student Status
   const [studying, setStudying] = useState(false);
   const [subject, setSubject] = useState("");
@@ -167,7 +167,7 @@ export default function Home() {
     mutationFn: async (info: StudentStatusPatchType) => {
       const data = await PatchStudentStatus(info);
       if (data[0] != true) {
-        return Promise.reject(new Error());
+        return Promise.reject(new Error(JSON.stringify(data[1])));
       }
       return data;
     },
@@ -220,7 +220,7 @@ export default function Home() {
       return data;
     },
     onSuccess: () => {
-      if (student_status?.study_group) {
+      if (student_status?.study_group == "") {
         // Display separate toast if you stop studying while in a study group
         toast.show("You left study group  \n" + student_status?.study_group, {
           type: "success",
@@ -228,7 +228,9 @@ export default function Home() {
           duration: 2000,
           animationType: "slide-in",
         });
+        clear_messages_notification_cache();
       }
+
       queryClient.invalidateQueries({ queryKey: ["user_status"] });
 
       // Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
@@ -380,12 +382,14 @@ export default function Home() {
         </>
       );
     } else if (
-      (StudentStatusQuery.isFetching && studying) ||
-      StudentStatusListQuery.isFetching ||
-      StudyGroupQuery.isFetching ||
-      (StudentStatusQuery.isFetching && !studying) ||
-      StudentStatusListGlobalQuery.isFetching ||
-      StudyGroupGlobalQuery.isFetching
+      (!StudentStatusQuery.isSuccess &&
+        studying &&
+        !StudentStatusListQuery.isSuccess &&
+        !StudyGroupQuery.isSuccess) ||
+      (!StudentStatusQuery.isSuccess &&
+        !studying &&
+        !StudentStatusListGlobalQuery.isSuccess &&
+        !StudyGroupGlobalQuery.isSuccess)
     ) {
       return (
         <>
@@ -598,6 +602,7 @@ export default function Home() {
                                         study_group: studygroup.name,
                                         subject: studygroup.subject,
                                       });
+                                      navigation.navigate("Conversation");
                                     }}
                                   >
                                     <Text style={styles.text_white_tiny_bold}>
@@ -932,6 +937,8 @@ export default function Home() {
         return <MapRendererFar location={location.coords} dist={dist} />;
       }
     } else {
+      requestLocationPermission();
+      requestLocation();
       return (
         <>
           <View style={{ paddingVertical: 8 }} />
@@ -1049,6 +1056,7 @@ export default function Home() {
                             study_group: studygroup.name,
                             subject: studygroup.subject,
                           });
+                          navigation.navigate("Conversation");
                           setModalOpen(!modalOpen);
                         }}
                       >

src/routes/Register/Register.tsx

@@ -17,6 +17,7 @@ import { UserRegister } from "../../components/Api/Api";
 import IsNumber from "../../components/IsNumber/IsNumber";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useToast } from "react-native-toast-notifications";
+import { ScrollView } from "react-native-gesture-handler";
 
 export default function Register() {
   const navigation = useNavigation<RootDrawerParamList>();

src/styles.tsx

@@ -44,8 +44,9 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     display: "flex",
     flexDirection: "column",
-    flex: 1,
+    flexGrow: 1,
     paddingHorizontal: 4,
+    paddingVertical: 32,
   },
   flex_row: {
     display: "flex",