From 4b27aea68807597c6fdc427a123dca38ffecdbc5 Mon Sep 17 00:00:00 2001 From: David Westgate Date: Sun, 2 Mar 2025 16:21:33 -0800 Subject: [PATCH] style refactor --- app/_layout.tsx | 36 +++- app/index.tsx | 175 ++++++++---------- components/BuyInSelector.tsx | 91 ++------- components/ChipDetection.tsx | 27 +-- components/ChipDistributionSummary.tsx | 85 ++------- components/ChipsSelector.tsx | 95 ++++++---- components/CurrencySelector.tsx | 21 +-- components/PlayerSelector.tsx | 61 ++---- components/__tests__/BuyInSelector.test.tsx | 1 - .../ChipDistributionSummary.test.tsx | 20 +- components/__tests__/ChipsSelector.test.tsx | 7 + .../__tests__/CurrencySelector.test.tsx | 1 - components/__tests__/PlayerSelector.test.tsx | 1 - containers/Button.tsx | 9 + containers/Section.tsx | 67 +++++++ containers/__tests__/Section.test.tsx | 32 ++++ styles/styles.ts | 59 ++++++ util/context.ts | 13 ++ 18 files changed, 429 insertions(+), 372 deletions(-) create mode 100644 containers/Button.tsx create mode 100644 containers/Section.tsx create mode 100644 containers/__tests__/Section.test.tsx create mode 100644 styles/styles.ts create mode 100644 util/context.ts diff --git a/app/_layout.tsx b/app/_layout.tsx index c3648ac..d73d8d3 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,7 +1,35 @@ +import AppContext, { IAppContext } from "@/util/context"; +import { MaterialIcons } from "@expo/vector-icons"; import { Stack } from "expo-router"; -import React from "react"; +import React, { useMemo, useState } from "react"; + +const RootLayout: React.FC = () => { + const [showSettings, setShowSettings] = useState(false); + + const ctx = useMemo( + () => ({ + showSettings, + }), + [showSettings] + ); + + return ( + + ( + setShowSettings(!showSettings)} + size={30} + /> + ), + }} + /> + + ); +}; -const RootLayout: React.FC = () => ( - -); export default RootLayout; diff --git a/app/index.tsx b/app/index.tsx index 2c2d790..6437c19 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,14 +1,6 @@ -import React, { useState, useEffect } from "react"; -import { - ScrollView, - Text, - Alert, - Button, - View, - StyleSheet, - TouchableOpacity, -} from "react-native"; -import { FontAwesome } from "@expo/vector-icons"; +import React, { useState, useEffect, useContext, useMemo } from "react"; +import { ScrollView, Alert } from "react-native"; +import Button from "@/containers/Button"; import PlayerSelector from "@/components/PlayerSelector"; import BuyInSelector from "@/components/BuyInSelector"; import ChipsSelector from "@/components/ChipsSelector"; @@ -20,14 +12,9 @@ import { savePersistentState, loadPersistentState, } from "@/components/PersistentState"; - -export enum COLORS { - "white", - "red", - "green", - "blue", - "black", -} +import styles from "@/styles/styles"; +import Section from "@/containers/Section"; +import AppContext from "@/util/context"; const IndexScreen: React.FC = () => { const [playerCount, setPlayerCount] = useState(2); @@ -35,7 +22,8 @@ const IndexScreen: React.FC = () => { const [numberOfChips, setNumberOfChips] = useState(5); const [totalChipsCount, setTotalChipsCount] = useState([]); const [selectedCurrency, setSelectedCurrency] = useState("$"); - const [isSettingsVisible, setIsSettingsVisible] = useState(false); + const context = useContext(AppContext); + const isSettingsVisible = useMemo(() => context.showSettings, [context]); useEffect(() => { const loadPersistentData = async () => { @@ -104,96 +92,85 @@ const IndexScreen: React.FC = () => { }; return ( - - - setIsSettingsVisible(!isSettingsVisible)} - > - - - - - - + {isSettingsVisible && ( - +
- +
)} - - - - - { - const chipCountArray = Object.values(chipData); - setTotalChipsCount(chipCountArray); - }} - /> - - - - - - - ))} - Or enter a custom amount: + Or enter a custom amount: = ({ keyboardType="numeric" /> - + Selected Buy-in:{" "} - {buyInAmount !== null ? `${selectedCurrency} ${buyInAmount}` : "None"}{" "} - {/* Display the currency here */} + {buyInAmount !== null ? `${selectedCurrency} ${buyInAmount}` : "None"} - + ); }; -const styles = StyleSheet.create({ - container: { - padding: 20, - }, - header: { - flexDirection: "row", - alignItems: "center", - marginBottom: 10, - }, - title: { - fontSize: 22, - marginLeft: 10, - }, - optionsContainer: { - flexDirection: "row", - justifyContent: "space-around", - marginVertical: 10, - }, - buyInButton: { - backgroundColor: "#ddd", - padding: 10, - borderRadius: 5, - }, - selectedButton: { - backgroundColor: "#4caf50", - }, - buttonText: { - fontSize: 16, - }, - orText: { - marginTop: 10, - textAlign: "center", - }, - input: { - borderWidth: 1, - borderColor: "#ccc", - padding: 8, - marginVertical: 10, - borderRadius: 5, - }, - selectionText: { - marginTop: 15, - fontSize: 16, - fontWeight: "bold", - }, -}); - export default BuyInSelector; diff --git a/components/ChipDetection.tsx b/components/ChipDetection.tsx index 0a51c46..53e6748 100644 --- a/components/ChipDetection.tsx +++ b/components/ChipDetection.tsx @@ -1,15 +1,14 @@ import React, { useState } from "react"; -import { - View, - Button, - Image, - ActivityIndicator, - Text, - ScrollView, -} from "react-native"; +import { Image, ActivityIndicator, Text, View } from "react-native"; +import Button from "@/containers/Button"; + import * as ImagePicker from "expo-image-picker"; -const ChipDetection = ({ updateChipCount }) => { +const ChipDetection = ({ + updateChipCount, +}: { + updateChipCount: () => void; +}) => { const [imageUri, setImageUri] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); @@ -113,9 +112,11 @@ const ChipDetection = ({ updateChipCount }) => { }; return ( - -