From 9e077667e9cb8ab9eecdf24139d2110c0862c8e7 Mon Sep 17 00:00:00 2001 From: whysman Date: Sun, 2 Mar 2025 15:32:39 -0500 Subject: [PATCH] Log levels, moved styles, cleaning up --- app/Nav.tsx | 12 +- app/ProfileScreen.tsx | 64 ++--- app/StatusPage.tsx | 77 ++---- app/_layout.tsx | 7 +- app/index.tsx | 21 +- app/styles.ts | 89 ++++++ app/themes.ts | 344 +++++++++++++++++++++++- context/UserContext.tsx | 14 +- package-lock.json | 22 +- package.json | 1 + featureFlags.ts => util/featureFlags.ts | 4 +- util/log.ts | 7 + 12 files changed, 507 insertions(+), 155 deletions(-) create mode 100644 app/styles.ts rename featureFlags.ts => util/featureFlags.ts (64%) create mode 100644 util/log.ts diff --git a/app/Nav.tsx b/app/Nav.tsx index 7e94bb8..361f1cf 100644 --- a/app/Nav.tsx +++ b/app/Nav.tsx @@ -1,11 +1,7 @@ import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper"; -import {Image, StyleSheet, useColorScheme, View} from "react-native"; +import {Image, useColorScheme, View} from "react-native"; import React, {useState} from "react"; - -const styles = StyleSheet.create({ - logoContainer: { flex: 1, alignItems: "center" }, - logo: { width: 150, height: 75, resizeMode: "contain" }, -}); +import styles from "@/app/styles"; const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => { const theme = useTheme(); @@ -28,11 +24,11 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => { }} iconColor={theme.colors.primary} /> - + + } style={styles.logo} resizeMode={"contain"} /> diff --git a/app/ProfileScreen.tsx b/app/ProfileScreen.tsx index c08f599..ea6023a 100644 --- a/app/ProfileScreen.tsx +++ b/app/ProfileScreen.tsx @@ -1,11 +1,13 @@ import React, { useEffect, useState } from 'react'; -import { Platform, View, TouchableOpacity, StyleSheet } from "react-native"; +import { Platform, View, TouchableOpacity } from "react-native"; 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'; +import themes from '@/app/themes'; +import styles from "@/app/styles"; +import log from "@/util/log" +import featureFlags from '@/util/featureFlags'; interface ProfileScreenProps { visible: boolean; @@ -66,7 +68,7 @@ const ProfileScreen: React.FC = ({ visible, name, setName, i const loadImage = async () => { if (!image || image === "") { - console.log("Loading ", image); + log.debug("Loading ", image); await loadDefaultImage(); } }; @@ -78,7 +80,7 @@ const ProfileScreen: React.FC = ({ visible, name, setName, i if (!result.canceled && result.assets.length > 0) { if (result.assets[0].base64 !== image) { // Only update if the image actually changes setImage(result.assets[0].base64 || image); - console.log("Picking Image"); + log.debug("Picking Image"); } } }; @@ -124,7 +126,7 @@ const ProfileScreen: React.FC = ({ visible, name, setName, i onChangeText={(newName) => { if (newName !== name) { // Only trigger change if it's different setName(newName); - console.log("Name change"); + log.debug("Name change"); } }} style={{ marginBottom: 15, fontFamily: "SpaceReg" }} @@ -134,18 +136,18 @@ const ProfileScreen: React.FC = ({ visible, name, setName, i /> {featureFlags.enableThemeSelection && ( <> - Choose Theme - - {themeColors.map((userTheme) => ( - {setTheme(userTheme); console.log("Changing Theme: ", userTheme)}} - > - - - ))} - + Choose Theme + + {themeColors.map((userTheme) => ( + {setTheme(userTheme); log.debug("Changing Theme: ", userTheme)}} + > + + + ))} + )} @@ -165,30 +167,4 @@ const ProfileScreen: React.FC = ({ visible, name, setName, i ); }; - -const styles = StyleSheet.create({ - themeContainer: { - flexDirection: 'row', - justifyContent: 'space-around', - alignItems: 'center', - 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; diff --git a/app/StatusPage.tsx b/app/StatusPage.tsx index 8f9a55b..2b77f66 100644 --- a/app/StatusPage.tsx +++ b/app/StatusPage.tsx @@ -1,9 +1,11 @@ import React, { useEffect, useState, useRef } from "react"; import useWebSocket from "react-use-websocket"; import axios from "axios"; -import {Animated, Easing, ImageBackground, StyleSheet, useColorScheme, View} from "react-native"; +import {Animated, Easing, ImageBackground, useColorScheme, View} from "react-native"; import { Avatar, List, Button, useTheme, } from "react-native-paper"; -import { themes } from "@/app/themes"; +import themes from "@/app/themes"; +import styles from "@/app/styles"; +import log from "@/util/log" export const API_URL = process.env.EXPO_PUBLIC_API_URL; export const WS_URL = process.env.EXPO_PUBLIC_WS_URL; @@ -17,55 +19,6 @@ interface Message { Timestamp: string; } -const styles = StyleSheet.create({ - container: { flex: 1, alignItems: "stretch" }, - listContainer: { flex: 1, width: "100%", backgroundColor: 'transparent' }, - listSubheader: { - fontFamily: "Medium", - fontSize: 18, // Larger text - textAlign: "center", // Center the text - fontWeight: "bold", // Make it more distinct - marginBottom: 10, // Add spacing below - zIndex: 0, - }, - listWrapper: { flex: 1, padding: 5 }, - listRow: { - flexDirection: "row", - justifyContent: "space-between", - alignItems: "flex-start", // Aligns subheaders properly - paddingHorizontal: 10, // Adds some spacing - }, - listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1}, - buttonContainer: { - flexDirection: "row", - justifyContent: "space-between", - alignSelf: "stretch", - paddingHorizontal: 10, - paddingBottom: 20, - }, - actionButton: { - flex: 1, - marginHorizontal: 5, - }, - card: { - marginVertical: 5, - elevation: 4, // Android shadow - shadowColor: "#000", // iOS shadow - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.2, - shadowRadius: 4, - borderRadius: 10, - }, - imageBackground: { - position: "absolute", // Allows child elements to layer on top - width: "100%", // Ensure full coverage of the column - height: "100%", // Fully stretches to column height - resizeMode: "cover", // Ensures it fits well - opacity: 0.2, // Fades the image - zIndex: -1, - }, -}); - interface StatusProps { id: string; name: string; @@ -77,11 +30,11 @@ interface StatusProps { } const StatusPage: React.FC = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive }) => { - //console.log("WebSocket URL: ", WS_URL); - //console.log("API URL: ", API_URL); + log.debug("WebSocket URL: ", WS_URL); + log.debug("API URL: ", API_URL); const theme = useTheme(); const colorScheme = useColorScheme(); - console.log(themes[currentTheme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary); + log.debug(themes[currentTheme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary); const [messages, setMessages] = useState([]); const { lastMessage } = useWebSocket(WS_URL + "/ws", { @@ -118,7 +71,7 @@ const StatusPage: React.FC = ({ id, name, image, currentStatus, set }; useEffect(() => { - //console.log("Updated status: ", currentStatus); + log.debug("Updated status: ", currentStatus); if (currentStatus === "On the Way") { startPulsing(pulseAnimOnTheWay); @@ -147,7 +100,7 @@ const StatusPage: React.FC = ({ id, name, image, currentStatus, set try { if (currentStatus === status) { // If pressed again, send "none" status and clear currentStatus - console.log(`Removing status: ${status}`); + log.debug(`Removing status: ${status}`); const message: Message = { Id: id, Name: name, @@ -162,7 +115,7 @@ const StatusPage: React.FC = ({ id, name, image, currentStatus, set }, 0) } else { // Otherwise, send the new status - console.log(`Setting status: ${status}`); + log.debug(`Setting status: ${status}`); const message: Message = { Id: id, Name: name, @@ -178,7 +131,7 @@ const StatusPage: React.FC = ({ id, name, image, currentStatus, set } } catch (error) { - console.error(`Error sending status '${status}':`, error); + log.error(`Error sending status '${status}':`, error); } }; @@ -193,21 +146,21 @@ 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); + log.debug("Current Status", currentStatus); setMessages((prev) => { if (newMessage.Id === id && newMessage.Status !== currentStatus) { - console.log("Status different, change to: ", newMessage.Status); + log.debug("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"); + log.debug("Status equal, no change"); } return prev.filter((msg) => msg.Id !== newMessage.Id).concat(newMessage); }); } catch (error) { - console.error("Error parsing WebSocket message:", error); + log.error("Error parsing WebSocket message:", error); } } }, [lastMessage, setStatus, id]); diff --git a/app/_layout.tsx b/app/_layout.tsx index 712da7e..97c1dc3 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -5,8 +5,9 @@ import { useEffect } from 'react'; 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"; +import themes from '@/app/themes' +import log from "@/util/log" // Prevent the splash screen from auto-hiding before asset loading is complete. SplashScreen.preventAutoHideAsync(); @@ -21,9 +22,9 @@ export default function RootLayout() { function InnerRootLayout() { const { currentTheme } = useUser(); // Access the currentTheme from UserContext - console.log(currentTheme); + log.debug(currentTheme); const colorScheme = useColorScheme(); - console.log(colorScheme); + log.debug(colorScheme); const [loaded] = useFonts({ SpaceReg: require('../assets/fonts/SpaceMono-Regular.ttf'), SpaceBold: require('../assets/fonts/SpaceMono-Bold.ttf'), diff --git a/app/index.tsx b/app/index.tsx index e986df9..5a18aec 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import {View, StyleSheet, Text } from "react-native"; +import {View, Text } from "react-native"; import { useTheme } from "react-native-paper"; import ProfileScreen from "@/app/ProfileScreen"; import StatusPage from "@/app/StatusPage"; import Nav from "@/app/Nav"; import { useUser } from "@/context/UserContext"; +import styles from "@/app/styles"; +import log from "@/util/log" const Index = () => { const theme = useTheme(); @@ -26,16 +28,16 @@ const Index = () => { } = useUser(); if (isLoading) { - console.log("Still loading"); + log.debug("Still loading"); return ( - + Loading... ); } return ( - +