diff --git a/app/StatusPage.tsx b/app/StatusPage.tsx index 9ed2011..d02f86a 100644 --- a/app/StatusPage.tsx +++ b/app/StatusPage.tsx @@ -73,6 +73,8 @@ interface StatusProps { } const StatusPage: React.FC = ({ 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([]); const { lastMessage } = useWebSocket(WS_URL + "/ws", { @@ -109,7 +111,7 @@ const StatusPage: React.FC = ({ 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 = ({ id, name, image, currentStatus, set const handleStatusPress = async (status: string) => { try { if (currentStatus === status) { - // If pressed again, send "expired" status and clear currentStatus - console.log(`Expiring status: ${status}`); - const message: Message = { Id: id, Name: name, Image: image, Status: "expired", Timestamp: new Date().toISOString() }; + // If pressed again, send "none" status and clear currentStatus + console.log(`Removing status: ${status}`); + 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); - setStatus(status); + setTimeout(() => { + setStatus(status); + }, 0) } + } catch (error) { console.error(`Error sending status '${status}':`, error); } @@ -165,14 +184,16 @@ const StatusPage: React.FC = ({ 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) { - setTimeout(() => { - setStatus(""); // Correctly clears the status - }, 0); - } - return prev.filter((msg) => msg.Id !== newMessage.Id); + if (newMessage.Id === id && newMessage.Status !== currentStatus) { + console.log("Status different, change to: ", newMessage.Status); + setTimeout(() => { + setStatus(newMessage.Status); + }, 0); + //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); }); diff --git a/app/index.tsx b/app/index.tsx index 971eac8..8c9fe0e 100644 --- a/app/index.tsx +++ b/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 (