Angela

client/App.js

@@ -1,22 +1,49 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Alert, SafeAreaView, ScrollView } from 'react-native';
 import SomeComponent from './src/SomeComponent';
+import React, { useState, useEffect } from 'react';
+import NotificationClient from "./NotificationHandler";
+import WaterSourceMap from './src/components/WaterSourceMap';
 
 export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>This is me testing how to use Expo Go!</Text>
-      <StatusBar style="auto" />
-      <SomeComponent />
-    </View>
-  );
+    return (
+
+        <SafeAreaView style={styles.container}>
+            <Text style={styles.h1}> S  P  O  T  T  Y</Text>
+            <ScrollView style={styles.scrollView}>
+                <Text style={styles.text}>Have fun on your backpacking trip!</Text>
+                <StatusBar style="auto" />
+                <NotificationClient />
+            </ScrollView>
+
+            {/*<WaterSourceMap />*/}
+        </SafeAreaView>
+    );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+    container: {
+        flex: 1,
+        paddingTop: StatusBar.currentHeight,
+    },
+    scrollView: {
+        backgroundColor: 'light-blue',
+        marginHorizontal: 20,
+    },
+    text: {
+        fontSize: 20,
+        textAlignVertical: "center",
+        font: 'Roboto',
+        justifyContent: "center"
+    },
+    h1: {
+        fontSize: 40,
+        align: "center",
+        font: 'Roboto',
+        justifyContent: "center",
+        textAlign: "center",
+    }
+});
+
+
+

client/NotificationHandler.js

@@ -0,0 +1,81 @@
+import {Alert, Text, View} from "react-native";
+import {useState, useEffect} from "react";
+
+const NotificationClient = () => {
+    const [isToggled, setIsToggled] = useState(false);
+    const [notificationData, setNotificationData] = useState(null);
+    const [notificationCount, setNotificationCount] = useState(0); // Counter for notifications
+    const [notificationTimestamps, setNotificationTimestamps] = useState([1,3,4,5,6,7]); // Store timestamps
+
+    useEffect(() => {
+        // Connect to WebSocket server
+        const ws = new WebSocket('ws://localhost:8080'); // Replace with your server IP
+
+        // When WebSocket receives a message
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            console.log('Notification received:', data);
+            handleNotification(data.notification);
+        };
+        // Clean up WebSocket connection when component unmounts
+        return () => ws.close;
+    }, []);
+
+    const handleNotification = (data) => {
+        if (typeof (data.type) != "string") {
+            setNotificationData('error retrieving notification');
+            return;
+        }
+        const currentTime = new Date().getTime(); // Current timestamp
+
+        // Update timestamps and filter out old timestamps (older than 5 minutes)
+        setNotificationTimestamps(prevTimestamps => {
+            const newTimestamps = [...prevTimestamps, currentTime];
+
+            // Remove timestamps older than 5 minutes (300000 ms)
+            return newTimestamps.filter(timestamp => currentTime - timestamp <= 900000);
+        });
+
+        // check if there was more than 5 within 15 minutes
+        if (notificationTimestamps.length >= 5) {
+            // Alert.alert('Our system has detected the connection in this area is spotty. Would you like to ' +
+                // 'send a message to friends or family with your location?');
+            Alert.alert('', 'Our system has detected the connection in this area is spotty. Would you like to ' +
+                'send a message to friends or family with your location?', [
+                {
+                    text: 'No Thanks',
+                    onPress: () => console.log('Cancel Pressed'),
+                },
+                {text: 'OK', onPress: () => console.log('OK Pressed')},
+            ]);
+        }
+        else {
+            // Check if the count exceeds 3 within 5 minutes
+            if (notificationTimestamps.length >= 3) { // Already 2 in timestamps array, this makes it 3
+                setNotificationCount(prevCount => prevCount + 1);
+                Alert.alert('Be careful! Your connection is unstable');
+            } else {
+                setIsToggled(prev => !prev); // Toggle the state when a notification is received
+                setNotificationData(data.type);
+                const notificationType = (notificationData === "org.camaraproject.device-status.v0.connectivity-data"
+                    ? "You've lost connection!" : "You've regained connection");
+                // Optionally show an alert to the user
+                Alert.alert('Notification', notificationType);
+                setNotificationCount(prevCount => prevCount + 1); // Increment the notification count
+            }
+        }
+    };
+
+    return (
+        <View style={{ padding: 40 }}>
+            {notificationData && (
+                <View>
+                    <Text>Here is your network connection information:</Text>
+                    <Text>{JSON.stringify(notificationData)}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default NotificationClient;