From 83776bc651476570d286bb6ad3a2697a4a28e97a Mon Sep 17 00:00:00 2001
From: vutukuri15 <vutukuri@pdx.edu>
Date: Sun, 9 Feb 2025 15:40:21 -0800
Subject: [PATCH 1/2] Created a BuyInAmount Selector component; Added index;
 Added tests

---
 app/index.tsx                               |  19 ++-
 components/BuyInSelector.tsx                | 138 ++++++++++++++++++++
 components/__tests__/BuyInSelector.test.tsx |  59 +++++++++
 3 files changed, 215 insertions(+), 1 deletion(-)
 create mode 100644 components/BuyInSelector.tsx
 create mode 100644 components/__tests__/BuyInSelector.test.tsx

diff --git a/app/index.tsx b/app/index.tsx
index 7c7e016..5183247 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,9 +1,17 @@
 import React, { useState } from "react";
-import { ScrollView, Text } from "react-native";
+import { ScrollView, Text, Alert, Button } from "react-native";
 import PlayerSelector from "@/components/PlayerSelector";
+import BuyInSelector from "@/components/BuyInSelector";
 
 const IndexScreen = () => {
   const [playerCount, setPlayerCount] = useState(2);
+  const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
+
+  const handleSave = () => {
+    if (buyInAmount === null) {
+      Alert.alert("Error", "Please select a valid buy-in amount");
+    }
+  };
 
   return (
     <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
@@ -15,7 +23,16 @@ const IndexScreen = () => {
         playerCount={playerCount}
         setPlayerCount={setPlayerCount}
       />
+
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+
+      <Button
+        title="Save"
+        onPress={handleSave}
+        disabled={buyInAmount === null}
+      />
     </ScrollView>
   );
 };
+
 export default IndexScreen;
diff --git a/components/BuyInSelector.tsx b/components/BuyInSelector.tsx
new file mode 100644
index 0000000..88b9e2c
--- /dev/null
+++ b/components/BuyInSelector.tsx
@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+} from "react-native";
+
+interface BuyInSelectorProps {
+  setBuyInAmount: React.Dispatch<React.SetStateAction<number | null>>;
+}
+
+const defaultBuyInOptions = [10, 25, 50]; // Default buy-in values
+
+const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
+  const [customAmount, setCustomAmount] = useState("");
+  const [buyInAmount, setBuyInAmountState] = useState<number | null>(null); // Store the selected amount locally
+
+  const handleCustomAmountChange = (value: string) => {
+    const numericValue = parseFloat(value);
+    if (!isNaN(numericValue) && numericValue >= 0) {
+      setCustomAmount(value);
+      setBuyInAmountState(numericValue); // Update buy-in amount
+      setBuyInAmount(numericValue); // Pass it back to parent component
+    } else {
+      setCustomAmount("");
+      setBuyInAmountState(null); // Reset if invalid
+      setBuyInAmount(null);
+    }
+  };
+
+  const handleBuyInSelection = (amount: number) => {
+    setBuyInAmountState(amount);
+    setCustomAmount("");
+    setBuyInAmount(amount); // Pass it back to parent component
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Title with Money Icon */}
+      <View style={styles.header}>
+        <Image
+          source={{
+            uri: "https://png.pngtree.com/png-vector/20191128/ourmid/pngtree-coin-money-icon-png-image_2049478.jpg",
+          }}
+          style={styles.icon}
+        />
+        <Text style={styles.title}>Select Buy-in Amount:</Text>
+      </View>
+
+      {/* Default Buy-In Options */}
+      <View style={styles.optionsContainer}>
+        {defaultBuyInOptions.map((amount) => (
+          <TouchableOpacity
+            key={amount}
+            style={[
+              styles.buyInButton,
+              buyInAmount === amount ? styles.selectedButton : null,
+            ]}
+            onPress={() => handleBuyInSelection(amount)}
+          >
+            <Text style={styles.buttonText}>{amount}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+
+      {/* Custom Amount Input */}
+      <Text style={styles.orText}>Or enter a custom amount:</Text>
+      <TextInput
+        style={styles.input}
+        value={customAmount}
+        onChangeText={handleCustomAmountChange}
+        placeholder="Enter custom buy-in"
+        keyboardType="numeric"
+      />
+
+      {/* Display the selected buy-in amount */}
+      <Text style={styles.selectionText}>
+        Selected Buy-in: {buyInAmount !== null ? buyInAmount : "None"}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  icon: {
+    width: 50,
+    height: 50,
+    marginRight: 15,
+  },
+  title: {
+    fontSize: 22,
+  },
+  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/__tests__/BuyInSelector.test.tsx b/components/__tests__/BuyInSelector.test.tsx
new file mode 100644
index 0000000..8a9af11
--- /dev/null
+++ b/components/__tests__/BuyInSelector.test.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import BuyInSelector from "@/components/BuyInSelector";
+
+describe("BuyInSelector Component", () => {
+  it("renders the buy-in options and input correctly", () => {
+    const setBuyInAmount = jest.fn();
+    const { getByText, getByPlaceholderText } = render(
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+    );
+
+    expect(getByText("Select Buy-in Amount:")).toBeTruthy();
+    expect(getByText("10")).toBeTruthy();
+    expect(getByText("25")).toBeTruthy();
+    expect(getByText("50")).toBeTruthy();
+    expect(getByPlaceholderText("Enter custom buy-in")).toBeTruthy();
+  });
+
+  it("sets a predefined buy-in amount correctly", () => {
+    const setBuyInAmount = jest.fn();
+    const { getByText } = render(
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+    );
+
+    fireEvent.press(getByText("25"));
+    expect(setBuyInAmount).toHaveBeenCalledWith(25);
+  });
+
+  it("sets a custom buy-in amount correctly", () => {
+    const setBuyInAmount = jest.fn();
+    const { getByPlaceholderText } = render(
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+    );
+
+    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
+    expect(setBuyInAmount).toHaveBeenCalledWith(100);
+  });
+
+  it("resets custom amount if invalid input is entered", () => {
+    const setBuyInAmount = jest.fn();
+    const { getByPlaceholderText } = render(
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+    );
+
+    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-10");
+    expect(setBuyInAmount).toHaveBeenCalledWith(null);
+  });
+
+  it("clears the custom amount when selecting a predefined option", () => {
+    const setBuyInAmount = jest.fn();
+    const { getByText, getByPlaceholderText } = render(
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+    );
+
+    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
+    fireEvent.press(getByText("50"));
+    expect(setBuyInAmount).toHaveBeenCalledWith(50);
+  });
+});
-- 
2.39.5


From 76342ed534e2bdec3e76dc9355d1aa9b2ea97003 Mon Sep 17 00:00:00 2001
From: vutukuri15 <vutukuri@pdx.edu>
Date: Sun, 9 Feb 2025 21:21:33 -0800
Subject: [PATCH 2/2] Replaced external image icon with MaterialIcons for money
 image

---
 components/BuyInSelector.tsx                | 31 ++++++---------------
 components/__tests__/BuyInSelector.test.tsx | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/components/BuyInSelector.tsx b/components/BuyInSelector.tsx
index 88b9e2c..48d56c1 100644
--- a/components/BuyInSelector.tsx
+++ b/components/BuyInSelector.tsx
@@ -4,29 +4,29 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  Image,
   StyleSheet,
 } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
 
 interface BuyInSelectorProps {
   setBuyInAmount: React.Dispatch<React.SetStateAction<number | null>>;
 }
 
-const defaultBuyInOptions = [10, 25, 50]; // Default buy-in values
+const defaultBuyInOptions = [10, 25, 50];
 
 const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
   const [customAmount, setCustomAmount] = useState("");
-  const [buyInAmount, setBuyInAmountState] = useState<number | null>(null); // Store the selected amount locally
+  const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
 
   const handleCustomAmountChange = (value: string) => {
     const numericValue = parseFloat(value);
     if (!isNaN(numericValue) && numericValue >= 0) {
       setCustomAmount(value);
-      setBuyInAmountState(numericValue); // Update buy-in amount
-      setBuyInAmount(numericValue); // Pass it back to parent component
+      setBuyInAmountState(numericValue);
+      setBuyInAmount(numericValue);
     } else {
       setCustomAmount("");
-      setBuyInAmountState(null); // Reset if invalid
+      setBuyInAmountState(null);
       setBuyInAmount(null);
     }
   };
@@ -34,23 +34,16 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
   const handleBuyInSelection = (amount: number) => {
     setBuyInAmountState(amount);
     setCustomAmount("");
-    setBuyInAmount(amount); // Pass it back to parent component
+    setBuyInAmount(amount);
   };
 
   return (
     <View style={styles.container}>
-      {/* Title with Money Icon */}
       <View style={styles.header}>
-        <Image
-          source={{
-            uri: "https://png.pngtree.com/png-vector/20191128/ourmid/pngtree-coin-money-icon-png-image_2049478.jpg",
-          }}
-          style={styles.icon}
-        />
+        <MaterialIcons name="monetization-on" size={30} color="green" />
         <Text style={styles.title}>Select Buy-in Amount:</Text>
       </View>
 
-      {/* Default Buy-In Options */}
       <View style={styles.optionsContainer}>
         {defaultBuyInOptions.map((amount) => (
           <TouchableOpacity
@@ -66,7 +59,6 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
         ))}
       </View>
 
-      {/* Custom Amount Input */}
       <Text style={styles.orText}>Or enter a custom amount:</Text>
       <TextInput
         style={styles.input}
@@ -76,7 +68,6 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
         keyboardType="numeric"
       />
 
-      {/* Display the selected buy-in amount */}
       <Text style={styles.selectionText}>
         Selected Buy-in: {buyInAmount !== null ? buyInAmount : "None"}
       </Text>
@@ -93,13 +84,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     marginBottom: 10,
   },
-  icon: {
-    width: 50,
-    height: 50,
-    marginRight: 15,
-  },
   title: {
     fontSize: 22,
+    marginLeft: 10,
   },
   optionsContainer: {
     flexDirection: "row",
diff --git a/components/__tests__/BuyInSelector.test.tsx b/components/__tests__/BuyInSelector.test.tsx
index 8a9af11..6f6706f 100644
--- a/components/__tests__/BuyInSelector.test.tsx
+++ b/components/__tests__/BuyInSelector.test.tsx
@@ -2,6 +2,14 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import BuyInSelector from "@/components/BuyInSelector";
 
+jest.mock("@expo/vector-icons", () => {
+  const React = require("react");
+  const { Text } = require("react-native");
+  return {
+    MaterialIcons: () => <Text>MaterialIcons</Text>,
+  };
+});
+
 describe("BuyInSelector Component", () => {
   it("renders the buy-in options and input correctly", () => {
     const setBuyInAmount = jest.fn();
@@ -23,6 +31,7 @@ describe("BuyInSelector Component", () => {
     );
 
     fireEvent.press(getByText("25"));
+
     expect(setBuyInAmount).toHaveBeenCalledWith(25);
   });
 
@@ -33,6 +42,7 @@ describe("BuyInSelector Component", () => {
     );
 
     fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
+
     expect(setBuyInAmount).toHaveBeenCalledWith(100);
   });
 
@@ -43,6 +53,7 @@ describe("BuyInSelector Component", () => {
     );
 
     fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-10");
+
     expect(setBuyInAmount).toHaveBeenCalledWith(null);
   });
 
@@ -53,7 +64,25 @@ describe("BuyInSelector Component", () => {
     );
 
     fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
+
     fireEvent.press(getByText("50"));
+
     expect(setBuyInAmount).toHaveBeenCalledWith(50);
   });
+
+  it("handles valid and invalid input for custom amount correctly", () => {
+    const setBuyInAmount = jest.fn();
+    const { getByPlaceholderText } = render(
+      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+    );
+
+    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "75");
+    expect(setBuyInAmount).toHaveBeenCalledWith(75);
+
+    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-5");
+    expect(setBuyInAmount).toHaveBeenCalledWith(null);
+
+    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "abc");
+    expect(setBuyInAmount).toHaveBeenCalledWith(null);
+  });
 });
-- 
2.39.5