AppState status update, button & logic fixes

app/StatusPage.tsx

@@ -73,6 +73,8 @@ interface StatusProps {
 }
 
 const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, isProfileActive })  => {
+    console.log("WebSocket URL: ", WS_URL);
+    console.log("API URL: ", API_URL);
     const theme = useTheme();
     const [messages, setMessages] = useState<Message[]>([]);
     const { lastMessage } = useWebSocket(WS_URL + "/ws", {
@@ -109,7 +111,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
     };
 
     useEffect(() => {
-        console.log("Updated status: ", currentStatus);
+        //console.log("Updated status: ", currentStatus);
 
         if (currentStatus === "On the Way") {
             startPulsing(pulseAnimOnTheWay);
@@ -137,18 +139,35 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
     const handleStatusPress = async (status: string) => {
         try {
             if (currentStatus === status) {
-                // If pressed again, send "expired" status and clear currentStatus
+                // If pressed again, send "none" status and clear currentStatus
-                console.log(`Expiring status: ${status}`);
+                console.log(`Removing status: ${status}`);
-                const message: Message = { Id: id, Name: name, Image: image, Status: "expired", Timestamp: new Date().toISOString() };
+                const message: Message = {
+                    Id: id,
+                    Name: name,
+                    Image: image,
+                    Status: "none",
+                    Timestamp: new Date().toISOString()
+                };
                 await axios.post(API_URL + "/set", message);
-                setStatus(""); // Reset status
+                setTimeout(() => {
+                    setStatus("none"); // Reset status
+                }, 0)
             } else {
                 // Otherwise, send the new status
                 console.log(`Setting status: ${status}`);
-                const message: Message = { Id: id, Name: name, Image: image, Status: status, Timestamp: new Date().toISOString() };
+                const message: Message = {
+                    Id: id,
+                    Name: name,
+                    Image: image,
+                    Status: status,
+                    Timestamp: new Date().toISOString()
+                };
                 await axios.post(API_URL + "/set", message);
+                setTimeout(() => {
                     setStatus(status);
+                }, 0)
             }
+
         } catch (error) {
             console.error(`Error sending status '${status}':`, error);
         }
@@ -165,14 +184,16 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
         if (lastMessage?.data) {
             try {
                 const newMessage: Message = JSON.parse(lastMessage.data);
+                console.log("Current Status", currentStatus);
                 setMessages((prev) => {
-                    if (newMessage.Status === "removed") {
+                    if (newMessage.Id === id && newMessage.Status !== currentStatus) {
-                        if (newMessage.Id === id) {
+                        console.log("Status different, change to: ", newMessage.Status);
                         setTimeout(() => {
-                                setStatus("");  // Correctly clears the status
+                           setStatus(newMessage.Status);
                         }, 0);
-                        }
+                        //return prev.filter((msg) => msg.Id !== newMessage.Id);
-                        return prev.filter((msg) => msg.Id !== newMessage.Id);
+                    }else{
+                        console.log("Status equal, no change");
                     }
                     return prev.filter((msg) => msg.Id !== newMessage.Id).concat(newMessage);
                 });

app/index.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import {View, StyleSheet, Text } from "react-native";
+import {View, StyleSheet, Text, AppState } from "react-native";
 import { useTheme } from "react-native-paper";
 import { v4 as uuidv4 } from "uuid";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import ProfileScreen from "@/app/ProfileScreen";
 import StatusPage from "@/app/StatusPage";
 import Nav from "@/app/Nav";
+import axios from "axios";
+
+export const API_URL = process.env.EXPO_PUBLIC_API_URL;
 
 const Index = () => {
     const { colors } = useTheme();
@@ -13,9 +16,10 @@ const Index = () => {
     const [userId, setUserId] = useState("");
     const [userName, setUserName] = useState("");
     const [userImage, setUserImage] = useState("");
-    const [userStatus, setUserStatus] = useState("");
+    const [userStatus, setUserStatus] = useState("none");
     const [userDataChanged, setUserDataChanged] = useState(false);
     const [isLoading, setIsLoading] = useState(true);  // New loading state
+    const [appState, setAppState] = useState(AppState.currentState);
 
     useEffect(() => {
         const loadUserData = async () => {
@@ -23,7 +27,7 @@ const Index = () => {
                 const storedUserId = await AsyncStorage.getItem("userId");
                 const storedUserName = await AsyncStorage.getItem("userName");
                 const storedUserImage = await AsyncStorage.getItem("userImage");
-
+                console.log("User Id: ", storedUserId);
                 if (storedUserId) {
                     setUserId(storedUserId || uuidv4());
                     setUserName(storedUserName || "");
@@ -62,6 +66,41 @@ const Index = () => {
         saveUserData();
     }, [userDataChanged]);
 
+    useEffect(() => {
+        const handleAppStateChange = (nextAppState: string) => {
+            if (appState.match(/inactive|background/) && nextAppState === "active") {
+                // When the app comes to the foreground, fetch the status
+                if (!isLoading) {
+                    fetchCurrentStatus().then(r => null);
+                } else {
+                    console.log("Waiting for loading to complete before fetching status...");
+                }
+            }
+            setAppState(AppState.currentState);
+        };
+
+        const listener = AppState.addEventListener("change", handleAppStateChange);
+
+        // Cleanup listener on unmount
+        return () => {
+            listener.remove();
+        };
+    }, [appState]);
+
+    const fetchCurrentStatus = async () => {
+        try {
+            const response = await axios.post(API_URL + "/get", { id: userId });
+            console.log("response: ", response);
+            if (response.data?.status) {
+                setTimeout(() => {
+                    setUserStatus("none"); // Reset status
+                }, 0)
+            }
+        } catch (error) {
+            console.error("Error fetching status:", error);
+        }
+    };
+
     if (isLoading) {
         console.log("Still loading");
         return (