public/pogdark-app
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

AppState status update, button & logic fixes
All checks were successful
Build Flutter Web and Docker Image for Local Registry / Build React Native Web App (push) Successful in 10m29s
Details

Browse Source
This commit is contained in:
whysman 2025-02-24 19:50:06 -05:00
parent d4d8d34d1f
commit 2129dce3b8
2 changed files with 77 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/StatusPage.tsx
View File

@ -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
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<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) {
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);
});

45
app/index.tsx
View File

@ -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 (