From e720e2e0108493c1d002307ab6c7c4027250d00a Mon Sep 17 00:00:00 2001 From: David Westgate Date: Mon, 17 Mar 2025 23:10:31 -0700 Subject: [PATCH] global darkmode hook usage; use style abstractions; remove ui wrapper causing issues --- app/_layout.tsx | 18 ++ app/index.tsx | 241 ++++++++++--------- components/BuyInSelector.tsx | 18 +- components/ChipDetection.tsx | 14 +- components/ChipsSelector.tsx | 8 - components/CurrencySelector.tsx | 50 +++- components/PlayerSelector.tsx | 20 +- components/__tests__/BuyInSelector.test.tsx | 1 - components/__tests__/ChipDetection.test.tsx | 12 +- components/__tests__/ChipsSelector.test.tsx | 1 - components/__tests__/PlayerSelector.test.tsx | 30 +-- containers/Button.tsx | 35 ++- containers/PokerAppUi.tsx | 52 ---- containers/Section.tsx | 18 +- i18n/en.json | 2 +- i18n/es.json | 2 +- styles/styles.ts | 25 +- 17 files changed, 268 insertions(+), 279 deletions(-) delete mode 100644 containers/PokerAppUi.tsx diff --git a/app/_layout.tsx b/app/_layout.tsx index 6ed6aef..2da16e6 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,9 +1,11 @@ import i18n from "@/i18n/i18n"; +import { COLORS } from "@/styles/styles"; import AppContext, { IAppContext } from "@/util/context"; import { MaterialIcons } from "@expo/vector-icons"; import { Stack } from "expo-router"; import React, { useMemo, useState } from "react"; import { I18nextProvider, useTranslation } from "react-i18next"; +import { useColorScheme } from "react-native"; const RootLayout: React.FC = () => { const [showSettings, setShowSettings] = useState(false); @@ -17,20 +19,36 @@ const RootLayout: React.FC = () => { [showSettings] ); + const colorScheme = useColorScheme(); + const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]); + const colors = useMemo( + () => (darkMode ? COLORS.DARK : COLORS.LIGHT), + [darkMode] + ); return ( ( setShowSettings(!showSettings)} size={30} + color={colors.TEXT} /> ), + headerStyle: { + backgroundColor: colors.PRIMARY, + }, + headerTintColor: colors.TEXT, + statusBarBackgroundColor: "grey", }} /> diff --git a/app/index.tsx b/app/index.tsx index 20658de..704688a 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext, useMemo } from "react"; -import { ScrollView, Alert } from "react-native"; +import { ScrollView, Alert, useColorScheme, Appearance } from "react-native"; import Button from "@/containers/Button"; import PlayerSelector from "@/components/PlayerSelector"; import BuyInSelector from "@/components/BuyInSelector"; @@ -12,12 +12,11 @@ import { savePersistentState, loadPersistentState, } from "@/util/PersistentState"; -import styles from "@/styles/styles"; +import styles, { COLORS } from "@/styles/styles"; import Section from "@/containers/Section"; import AppContext from "@/util/context"; import { Picker } from "@react-native-picker/picker"; import i18n from "@/i18n/i18n"; -import PokerAppUi from "@/containers/PokerAppUi"; const IndexScreen: React.FC = () => { const [playerCount, setPlayerCount] = useState(2); @@ -26,8 +25,12 @@ const IndexScreen: React.FC = () => { const [totalChipsCount, setTotalChipsCount] = useState([]); const [selectedCurrency, setSelectedCurrency] = useState("$"); const [selectedLanguage, setSelectedLanguage] = useState("en"); - const [lightGrayMode, setLightGrayMode] = useState(false); - + const colorScheme = useColorScheme(); + const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]); + const colors = useMemo( + () => (darkMode ? COLORS.DARK : COLORS.LIGHT), + [darkMode] + ); const context = useContext(AppContext); const isSettingsVisible = useMemo(() => context.showSettings, [context]); @@ -87,14 +90,12 @@ const IndexScreen: React.FC = () => { }; return ( - - - {isSettingsVisible && ( + + {isSettingsVisible && ( + <>
{ >
- )} - {isSettingsVisible && (
{ - - + +
- )} - {isSettingsVisible && (
{ setSelectedCurrency={setSelectedCurrency} />
- )} + + )} -
- + +
+ +
+ +
+ +
+ { + const chipCountArray = Object.values(chipData); + setTotalChipsCount(chipCountArray); + setNumberOfChips(chipCountArray.length); + }} + /> +
+ +
+ +
+ +
+ +
+ +
+ <> +
- -
- handleSave("SLOT2")} + disabled={buyInAmount === null} /> -
- -
- { - const chipCountArray = Object.values(chipData); - setTotalChipsCount(chipCountArray); - setNumberOfChips(chipCountArray.length); - }} - darkMode={lightGrayMode} +
- -
- handleLoad("SLOT2")} /> -
- -
- -
- -
- <> -
- - + + + ); }; diff --git a/components/BuyInSelector.tsx b/components/BuyInSelector.tsx index 24efbdd..45fb4ca 100644 --- a/components/BuyInSelector.tsx +++ b/components/BuyInSelector.tsx @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import { View, Text, TextInput } from "react-native"; +import React, { useMemo, useState } from "react"; +import { View, Text, TextInput, useColorScheme } from "react-native"; import styles, { COLORS } from "@/styles/styles"; import Button from "@/containers/Button"; import i18n from "@/i18n/i18n"; @@ -7,7 +7,6 @@ import i18n from "@/i18n/i18n"; interface BuyInSelectorProps { setBuyInAmount: React.Dispatch>; selectedCurrency: string; - darkMode: boolean; } const defaultBuyInOptions = [10, 25, 50]; @@ -23,10 +22,15 @@ const parseRoundClamp = (num: string): number => { const BuyInSelector: React.FC = ({ setBuyInAmount, selectedCurrency, - darkMode, }) => { const [customAmount, setCustomAmount] = useState(""); const [buyInAmount, setBuyInAmountState] = useState(null); + const colorScheme = useColorScheme(); + const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]); + const colors = useMemo( + () => (darkMode ? COLORS.DARK : COLORS.LIGHT), + [darkMode] + ); const handleCustomAmountChange = (value: string) => { const numericValue = parseRoundClamp(value); @@ -55,13 +59,13 @@ const BuyInSelector: React.FC = ({ key={amount} onPress={() => handleBuyInSelection(amount)} title={`${selectedCurrency} ${amount}`} - darkMode={darkMode} /> ))} = ({ keyboardType="numeric" /> - + {`${i18n.t("selected_buy_in")} `} {buyInAmount !== null ? `${selectedCurrency} ${buyInAmount}` diff --git a/components/ChipDetection.tsx b/components/ChipDetection.tsx index 240b0e4..84d1958 100644 --- a/components/ChipDetection.tsx +++ b/components/ChipDetection.tsx @@ -6,10 +6,8 @@ import i18n from "@/i18n/i18n"; const ChipDetection = ({ updateChipCount, - darkMode, }: { updateChipCount: (chipData: Record) => void; - darkMode: boolean; }) => { const [imageUri, setImageUri] = useState(null); const [loading, setLoading] = useState(false); @@ -135,16 +133,8 @@ const ChipDetection = ({ marginBottom: 10, }} > -