Theme name now sent for remote card coloring

app/ProfileScreen.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Platform } from "react-native";
+import { Platform, View, TouchableOpacity, StyleSheet } from "react-native";
-import { Button, TextInput, Dialog, Portal, Avatar, useTheme } from "react-native-paper";
+import { Button, TextInput, Dialog, Portal, Avatar, useTheme, Text } from "react-native-paper";
 import { Asset } from 'expo-asset';
 import * as FileSystem from 'expo-file-system';
 import * as ImagePicker from "expo-image-picker";
+import { themes } from '@/app/themes';
+import { featureFlags } from '@/featureFlags';
 
 interface ProfileScreenProps {
     visible: boolean;
@@ -13,21 +15,26 @@ interface ProfileScreenProps {
     image: string;
     setImage: (image: string) => void;
     setChanged: (dataChanged: boolean) => void;
+    setTheme: (theme: string) => void;
+    currentTheme: string;
     onClose: () => void;
 }
 
-const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, image, setImage, setChanged, onClose }) => {
+const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, image, setImage, setChanged, currentTheme, setTheme, onClose }) => {
-    const { colors } = useTheme();
+    const theme = useTheme();
     const isNameEmpty = !name.trim();
+    const themeColors = ['red', 'blue', 'yellow', 'green', 'orange', 'purple'];
 
     // Track the initial values when the component first mounts
     const [initialName, setInitialName] = useState(name);
     const [initialImage, setInitialImage] = useState(image);
+    const [initialTheme, setInitialTheme] = useState(currentTheme);
 
     useEffect(() => {
         if (visible) {
             setInitialName(name);   // Store initial name when the profile opens
-            setInitialImage(image); // Store initial image when the profile opens
+            setInitialImage(image);
+            setInitialTheme(currentTheme)// Store initial image when the profile opens
         }
     }, [visible]); // Reset when the dialog is opened
 
@@ -78,7 +85,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
 
     const handleSave = () => {
         // Check if the name or image has changed
-        const hasChanged = name !== initialName || image !== initialImage;
+        const hasChanged = name !== initialName || image !== initialImage || currentTheme !== initialTheme;
         if (hasChanged) {
             setChanged(true);
         }
@@ -94,8 +101,8 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
                         onClose();
                     }
                 }}
-                style={{ backgroundColor: colors.background }}>
+                style={{ backgroundColor: theme.colors.background }}>
-                <Dialog.Title style={{ color: colors.onBackground, textAlign: 'center' }}>Edit Your Profile</Dialog.Title>
+                <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center' }}>Edit Your Profile</Dialog.Title>
                 <Dialog.Content>
                     <Avatar.Image
                         size={100}
@@ -105,8 +112,8 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
                     <Button
                         onPress={pickImage}
                         mode="contained"
-                        style={{ backgroundColor: colors.primary, marginBottom: 10 }}
+                        style={{ backgroundColor: theme.colors.primary, marginBottom: 10 }}
-                        labelStyle={{ color: colors.onPrimary }}
+                        labelStyle={{ color: theme.colors.onPrimary }}
                     >
                         Change Profile Picture
                     </Button>
@@ -120,10 +127,26 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
                                 console.log("Name change");
                             }
                         }}
-                        style={{ marginBottom: 15, backgroundColor: colors.surface }}
+                        style={{ marginBottom: 15, backgroundColor: theme.colors.surface }}
-                        placeholderTextColor={colors.onSurface}
+                        placeholderTextColor={theme.colors.onSurface}
-                        theme={{ colors: { text: colors.onSurface } }}
+                        theme={{ colors: { text: theme.colors.onSurface } }}
                     />
+                    {featureFlags.enableThemeSelection && (
+                        <>
+                            <Text style={{ color: theme.colors.onBackground, fontSize: 18, textAlign: 'center' }}>Choose Theme</Text>
+                            <View style={styles.themeContainer}>
+                                {themeColors.map((userTheme) => (
+                                    <TouchableOpacity
+                                        key={userTheme}
+                                        style={[styles.themeButton, { backgroundColor: themes[userTheme as keyof typeof themes]['light'].colors.primary }]}
+                                        onPress={() => {setTheme(userTheme); console.log("Changing Theme: ", userTheme)}}
+                                    >
+                                        <View style={[styles.halfCircle, { backgroundColor: themes[userTheme as keyof typeof themes]['dark'].colors.primary }]} />
+                                    </TouchableOpacity>
+                                ))}
+                            </View>
+                        </>
+                    )}
                 </Dialog.Content>
                 <Dialog.Actions>
                     <Button
@@ -131,17 +154,39 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
                         mode="contained"
                         disabled={isNameEmpty}  // Disable if name is empty
                         style={{
-                            backgroundColor: isNameEmpty ? colors.tertiary : colors.secondary, // Dim the button
+                            backgroundColor: theme.colors.primary,
                             opacity: isNameEmpty ? 0.5 : 1, // Visually dim the button
                         }}
-                        labelStyle={{ color: colors.onPrimary }}
+                        labelStyle={{ color: theme.colors.onPrimary }}>Save</Button>
-                    >
-                        Save
-                    </Button>
                 </Dialog.Actions>
             </Dialog>
         </Portal>
     );
 };
 
+
+const styles = StyleSheet.create({
+    themeContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        marginTop: 10,
+    },
+    themeButton: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+        overflow: 'hidden',
+        borderWidth: 1,
+        borderColor: 'black',
+    },
+    halfCircle: {
+        width: '50%',
+        height: '100%',
+        position: 'absolute',
+        bottom: 0,
+    },
+});
+
 export default ProfileScreen;

app/StatusPage.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
 import useWebSocket from "react-use-websocket";
 import axios from "axios";
-import { Animated, Easing, ImageBackground, StyleSheet, View } from "react-native";
+import {Animated, Easing, ImageBackground, StyleSheet, useColorScheme, View} from "react-native";
 import { Avatar, List, Button, useTheme,  } from "react-native-paper";
+import { themes } from "@/app/themes";
 
 export const API_URL = process.env.EXPO_PUBLIC_API_URL;
 export const WS_URL = process.env.EXPO_PUBLIC_WS_URL;
@@ -12,6 +13,7 @@ interface Message {
     Name: string;
     Image: string;
     Status: string;
+    Theme: string;
     Timestamp: string;
 }
 
@@ -69,13 +71,15 @@ interface StatusProps {
     image: string;
     currentStatus: string;
     setStatus: (currentStatus: string) => void;
+    currentTheme: string;
     isProfileActive: boolean;
 }
 
-const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, isProfileActive })  => {
+const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive })  => {
     //console.log("WebSocket URL: ", WS_URL);
     //console.log("API URL: ", API_URL);
     const theme = useTheme();
+    const colorScheme = useColorScheme();
     const [messages, setMessages] = useState<Message[]>([]);
     const { lastMessage } = useWebSocket(WS_URL + "/ws", {
         shouldReconnect: () => true,
@@ -146,6 +150,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                     Name: name,
                     Image: image,
                     Status: "none",
+                    Theme: currentTheme,
                     Timestamp: new Date().toISOString()
                 };
                 await axios.post(API_URL + "/set", message);
@@ -160,6 +165,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                     Name: name,
                     Image: image,
                     Status: status,
+                    Theme: currentTheme,
                     Timestamp: new Date().toISOString()
                 };
                 await axios.post(API_URL + "/set", message);
@@ -213,13 +219,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                             {messages.filter(msg => msg.Status === "On the Way")
                                 .sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
                                 .map(item => (
-                                    <View key={item.Id} style={[styles.card, { backgroundColor: theme.colors.primaryContainer }]}>
+                                    <View key={item.Id} style={[styles.card,
+                                        { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
                                         <List.Item
                                             key={item.Id}
                                             title={item.Name}
-                                            titleStyle={{ color: theme.colors.onSurface }}
+                                            titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             description={new Date(item.Timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
-                                            descriptionStyle={{ color: theme.colors.onSurface }}
+                                            descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
                                         />
                                     </View>
@@ -232,13 +239,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                             {messages.filter(msg => msg.Status === "Arrived")
                                 .sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
                                 .map(item => (
-                                    <View key={item.Id} style={[styles.card, { backgroundColor: theme.colors.primaryContainer }]}>
+                                    <View key={item.Id} style={[styles.card,
+                                        { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
                                         <List.Item
                                             key={item.Id}
                                             title={item.Name}
-                                            titleStyle={{ color: theme.colors.onSurface }}
+                                            titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             description={new Date(item.Timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
-                                            descriptionStyle={{ color: theme.colors.onSurface }}
+                                            descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
                                             left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
                                         />
                                     </View>

app/_layout.tsx

@@ -6,17 +6,27 @@ import 'react-native-reanimated';
 import { useColorScheme } from 'react-native';
 import { PaperProvider, Provider } from "react-native-paper";
 import { themes } from '@/app/themes'
+import { UserProvider, useUser } from "@/context/UserContext";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
+  return (
+      <UserProvider>
+        <InnerRootLayout />
+      </UserProvider>
+  );
+}
+
+function InnerRootLayout() {
+  const { currentTheme } = useUser(); // Access the currentTheme from UserContext
+  console.log(currentTheme);
   const colorScheme = useColorScheme();
   console.log(colorScheme);
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
-
   useEffect(() => {
     if (loaded) {
       SplashScreen.hideAsync();
@@ -26,12 +36,18 @@ export default function RootLayout() {
   if (!loaded) {
     return null;
   }
-  const selectedTheme = 'green';
+
-  //const [selectedTheme, setSelectedTheme] = useState<'red' | 'blue' | 'yellow' | 'green' | 'orange'>('red');
+  // Ensure currentTheme is treated as a valid key, or fallback to 'blue'
-  const appTheme = themes[selectedTheme][colorScheme === 'dark' ? 'dark' : 'light'];
+  const themeKey: 'blue' | 'green' | 'red' | 'yellow' | 'orange' = (currentTheme as 'blue' | 'green' | 'red' | 'yellow' | 'orange') || 'blue';
+
+  // Use the themeKey to index into the themes object
+
+  const appTheme = themes[themeKey][colorScheme === 'dark' ? 'dark' : 'light'];
+  const appTheme2 = themes[currentTheme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light']
+
   return (
       <Provider>
-        <PaperProvider theme={appTheme} >
+        <PaperProvider theme={appTheme2}>
           <Stack>
             <Stack.Screen name="index" options={{ headerShown: false }} />
           </Stack>

app/index.tsx

@@ -1,106 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import {View, StyleSheet, Text, AppState } from "react-native";
+import {View, StyleSheet, Text } 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";
+import { useUser } from "@/context/UserContext";
-export const API_URL = process.env.EXPO_PUBLIC_API_URL;
 
 const Index = () => {
     const theme = useTheme();
-    const [isProfileActive, setProfileActive] = useState(false);
-    const [userId, setUserId] = useState("");
-    const [userName, setUserName] = useState("");
-    const [userImage, setUserImage] = 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 {
-        const loadUserData = async () => {
+        isProfileActive,
-            try {
+        setProfileActive,
-                const storedUserId = await AsyncStorage.getItem("userId");
+        userId,
-                const storedUserName = await AsyncStorage.getItem("userName");
+        userName,
-                const storedUserImage = await AsyncStorage.getItem("userImage");
+        setUserName,
-                console.log("User Id: ", storedUserId);
+        userImage,
-                if (storedUserId) {
+        setUserImage,
-                    setUserId(storedUserId || uuidv4());
+        userStatus,
-                    setUserName(storedUserName || "");
+        setUserStatus,
-                    setUserImage(storedUserImage || "");
+        setUserDataChanged,
-                    setProfileActive(false);
+        setTheme,
-                } else {
+        currentTheme,
-                    setUserId(uuidv4());
+        isLoading,
-                    setUserName("");
+    } = useUser();
-                    setUserImage("");
-                    setProfileActive(true);
-                }
-                console.log("Loading data ", userId);
-            } catch (error) {
-                console.error("Error loading user data:", error);
-            } finally {
-                setIsLoading(false);  // Mark loading as complete
-            }
-        };
-        loadUserData();
-    }, []);
-
-    useEffect(() => {
-        if (!userDataChanged) return;
-
-        const saveUserData = async () => {
-            try {
-                console.log("Saving data ", userId);
-                await AsyncStorage.setItem("userId", userId);
-                await AsyncStorage.setItem("userName", userName);
-                await AsyncStorage.setItem("userImage", userImage);
-                setUserDataChanged(false);
-            } catch (error) {
-                console.error("Error saving user data:", error);
-            }
-        };
-        saveUserData();
-    }, [userDataChanged]);
-
-    useEffect(() => {
-        const handleAppStateChange = (nextAppState: string) => {
-            //console.log("App state", appState);
-            //console.log("Next App state", nextAppState);
-            if (appState.match(/inactive|background/) && nextAppState === "active") {
-                // When the app comes to the foreground, fetch the status
-                if (!isLoading) {
-                    fetchCurrentStatus().then()
-                } 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");
@@ -122,6 +45,7 @@ const Index = () => {
                 image={userImage}
                 currentStatus={userStatus}
                 setStatus={setUserStatus}
+                currentTheme={currentTheme}
                 isProfileActive={isProfileActive}
             />
             <ProfileScreen
@@ -131,6 +55,8 @@ const Index = () => {
                 setName={setUserName}
                 image={userImage}
                 setImage={setUserImage}
+                setTheme={setTheme}
+                currentTheme={currentTheme}
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />

context/UserContext.tsx

@@ -0,0 +1,157 @@
+import React, { createContext, useContext, useEffect, useState, ReactNode } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AppState } from "react-native";
+import { v4 as uuidv4 } from "uuid";
+import axios from "axios";
+
+export const API_URL = process.env.EXPO_PUBLIC_API_URL;
+
+// Define context type
+interface UserContextType {
+    isProfileActive: boolean;
+    setProfileActive: (active: boolean) => void;
+    userId: string;
+    userName: string;
+    setUserName: (name: string) => void;
+    userImage: string;
+    setUserImage: (image: string) => void;
+    userStatus: string;
+    setUserStatus: (status: string) => void;
+    setUserDataChanged: (changed: boolean) => void;
+    isLoading: boolean;
+    currentTheme: string;
+    setTheme: (theme: string) => void;
+}
+
+// Create context with default values
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+// Define provider props type
+interface UserProviderProps {
+    children: ReactNode;
+}
+
+export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
+    const [isProfileActive, setProfileActive] = useState(false);
+    const [userId, setUserId] = useState("");
+    const [userName, setUserName] = useState("");
+    const [userImage, setUserImage] = useState("");
+    const [userStatus, setUserStatus] = useState("none");
+    const [userDataChanged, setUserDataChanged] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [appState, setAppState] = useState(AppState.currentState);
+    const [currentTheme, setTheme] = useState("");
+
+    useEffect(() => {
+        const loadUserData = async () => {
+            try {
+                const storedUserId = await AsyncStorage.getItem("userId");
+                const storedUserName = await AsyncStorage.getItem("userName");
+                const storedUserImage = await AsyncStorage.getItem("userImage");
+                const storedUserTheme = await AsyncStorage.getItem("theme");
+                console.log("Stored theme: ", storedUserTheme);
+                if (storedUserId) {
+                    setUserId(storedUserId);
+                    setUserName(storedUserName || "");
+                    setUserImage(storedUserImage || "");
+                    setTheme(storedUserTheme || "blue");
+                    setProfileActive(false);
+                } else {
+                    setUserId(uuidv4());
+                    setUserName("");
+                    setUserImage("");
+                    setTheme("blue")
+                    setProfileActive(true);
+                }
+            } catch (error) {
+                console.error("Error loading user data:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadUserData();
+    }, []);
+
+    useEffect(() => {
+        if (!userDataChanged) return;
+
+        const saveUserData = async () => {
+            try {
+                await AsyncStorage.setItem("userId", userId);
+                await AsyncStorage.setItem("userName", userName);
+                await AsyncStorage.setItem("userImage", userImage);
+                await AsyncStorage.setItem("theme", currentTheme);
+                console.log("Current theme: ", currentTheme);
+                setUserDataChanged(false);
+            } catch (error) {
+                console.error("Error saving user data:", error);
+            }
+        };
+
+        saveUserData();
+    }, [userDataChanged]);
+
+    useEffect(() => {
+        const handleAppStateChange = (nextAppState: string) => {
+            if (appState.match(/inactive|background/) && nextAppState === "active") {
+                if (!isLoading) {
+                    fetchCurrentStatus();
+                } else {
+                    console.log("Waiting for loading to complete before fetching status...");
+                }
+            }
+            setAppState(AppState.currentState);
+        };
+
+        const listener = AppState.addEventListener("change", handleAppStateChange);
+
+        return () => {
+            listener.remove();
+        };
+    }, [appState]);
+
+    const fetchCurrentStatus = async () => {
+        try {
+            const response = await axios.post(API_URL + "/get", { id: userId });
+            if (response.data?.status) {
+                setTimeout(() => {
+                    setUserStatus("none");
+                }, 0);
+            }
+        } catch (error) {
+            console.error("Error fetching status:", error);
+        }
+    };
+
+    return (
+        <UserContext.Provider
+            value={{
+                isProfileActive,
+                setProfileActive,
+                userId,
+                userName,
+                setUserName,
+                userImage,
+                setUserImage,
+                userStatus,
+                setUserStatus,
+                setUserDataChanged,
+                isLoading,
+                currentTheme,
+                setTheme,
+            }}
+        >
+            {children}
+        </UserContext.Provider>
+    );
+};
+
+// Custom hook to use context
+export const useUser = (): UserContextType => {
+    const context = useContext(UserContext);
+    if (!context) {
+        throw new Error("useUser must be used within a UserProvider");
+    }
+    return context;
+};

featureFlags.ts

@@ -0,0 +1,3 @@
+export const featureFlags = {
+    enableThemeSelection: true, // Toggle this to true or false to enable/disable the feature
+};