Fixed pullup menu wording on homepage and added message notifications

src/components/BackgroundTask/BackgroundTask.tsx

@@ -3,15 +3,55 @@ import { View } from "react-native";
 import * as BackgroundFetch from "expo-background-fetch";
 import * as TaskManager from "expo-task-manager";
 import * as Notifications from "expo-notifications";
-import { GetStudentStatus, GetStudyGroupListFiltered } from "../Api/Api";
+import {
+  GetStudentStatus,
+  GetStudyGroupListFiltered,
+  GetStudyGroupMessages,
+} from "../Api/Api";
 import { StudyGroupType } from "../../interfaces/Interfaces";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const FETCH_STUDENT_STATUS = "STUDENT_STATUS_TASK";
+const FETCH_GROUP_MESSAGES = "GROUP_MESSAGES_TASK";
+
+TaskManager.defineTask(FETCH_GROUP_MESSAGES, async () => {
+  const data = await GetStudyGroupMessages();
+  if (data[0] && data[1]) {
+    let messages_prev = JSON.parse(
+      (await AsyncStorage.getItem("messages")) || "{}"
+    );
+    if (!messages_prev) {
+      await AsyncStorage.setItem("messages", JSON.stringify(data[1]));
+    } else {
+      let message_curr = data[1];
+      let difference: Array<any> = messages_prev
+        .filter((x: any) => !message_curr.includes(x))
+        .concat(message_curr.filter((x: any) => !messages_prev.includes(x)));
+
+      if (difference.length > 0) {
+        console.log(`${difference.length} unread messages`);
+        Notifications.scheduleNotificationAsync({
+          content: {
+            title: `${difference.length} unread messages`,
+            body: `${difference[0].user}: ${difference[0].message_content}`,
+          },
+          trigger: {
+            seconds: 1,
+          },
+        });
+      }
+    }
+  } else {
+    console.log(data[1].response.data);
+  }
+
+  return BackgroundFetch.BackgroundFetchResult.NewData;
+});
 
 TaskManager.defineTask(FETCH_STUDENT_STATUS, async () => {
   const data = await GetStudyGroupListFiltered();
   const student_status_data = await GetStudentStatus();
-  if (data[0] && data[1].length > -1) {
+  if (data[0] && data[1]) {
     console.log("Background Fetch", data[1]);
     const entryWithLeastDistance = data[1].reduce(
       (prev: StudyGroupType, curr: StudyGroupType) => {
@@ -44,35 +84,50 @@ TaskManager.defineTask(FETCH_STUDENT_STATUS, async () => {
 
 const BackgroundComponent = () => {
   const notification_debug = true;
-  const [isRegistered, setIsRegistered] = React.useState(false);
+  const [Task1_isRegistered, Task1_setIsRegistered] = React.useState(false);
+  const [Task2_isRegistered, Task2_setIsRegistered] = React.useState(false);
   const [status, setStatus] = React.useState<any>();
   const checkStatusAsync = async () => {
-    const status = await BackgroundFetch.getStatusAsync();
-    const isRegistered = await TaskManager.isTaskRegisteredAsync(
+    let status = await BackgroundFetch.getStatusAsync();
+    setStatus(status);
+    let Task1_isRegistered = await TaskManager.isTaskRegisteredAsync(
       FETCH_STUDENT_STATUS
     );
-    setStatus(status);
-    setIsRegistered(isRegistered);
+    let Task2_isRegistered = await TaskManager.isTaskRegisteredAsync(
+      FETCH_GROUP_MESSAGES
+    );
+    Task1_setIsRegistered(Task1_isRegistered);
+    Task2_setIsRegistered(Task2_isRegistered);
   };
 
   useEffect(() => {
-    const registerTask = async () => {
+    const registerTasks = async () => {
       try {
         await checkStatusAsync();
-        if (!isRegistered) {
+        // Nearby students task
+        if (!Task1_isRegistered) {
           await BackgroundFetch.registerTaskAsync(FETCH_STUDENT_STATUS, {
             minimumInterval: notification_debug ? 5 : 60 * 3, // Check every 5 seconds in dev & every 3 minutes in production builds
           });
-          console.log("Task registered");
+          console.log("Task for nearby students check registered");
         } else {
-          console.log("Task already registered");
+          console.log("Task for nearby students check already registered");
+        }
+        // Message Checking Task
+        if (!Task2_isRegistered) {
+          await BackgroundFetch.registerTaskAsync(FETCH_GROUP_MESSAGES, {
+            minimumInterval: notification_debug ? 5 : 30, // Check every 5 seconds in dev & every 30 seconds in production builds
+          });
+          console.log("Task for group messages check registered");
+        } else {
+          console.log("Task for group messages check already registered");
         }
       } catch (err) {
         console.log("Task Register failed:", err);
       }
     };
 
-    registerTask();
+    registerTasks();
   }, []);
 
   return <View />;

src/routes/ConversationPage/ConversationPage.tsx

@@ -33,6 +33,7 @@ import {
 import { useToast } from "react-native-toast-notifications";
 import { useQueryClient } from "@tanstack/react-query";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export default function ConversationPage() {
   const toast = useToast();
@@ -104,8 +105,9 @@ export default function ConversationPage() {
       }
       return data;
     },
-    onSuccess: (data: MessageReturnType) => {
+    onSuccess: async (data: MessageReturnType) => {
       if (data[1]) {
+        await AsyncStorage.setItem("messages", JSON.stringify(data[1]));
         setMessages(data[1]);
       }
     },

src/routes/Home/Home.tsx

@@ -845,7 +845,6 @@ export default function Home() {
         hasBackdrop={false}
       >
         <AnimatedContainer>
-          <Text style={styles.text_white_medium}>Groups List</Text>
           <Pressable
             style={{
               alignContent: "flex-start",
@@ -856,12 +855,16 @@ export default function Home() {
           >
             <DropdownIcon size={32} />
           </Pressable>
-          <Switch
-            value={modalByGroup}
-            onChange={() => {
-              setModalByGroup(!modalByGroup);
-            }}
-          />
+          <View style={styles.flex_row}>
+            <Switch
+              value={modalByGroup}
+              onChange={() => {
+                setModalByGroup(!modalByGroup);
+              }}
+            />
+            <Text style={styles.text_white_medium}>List View</Text>
+          </View>
+
           <ScrollView>
             {!modalByGroup ? (
               student_statuses.map(