Merge pull request #15 from djwesty/vutukuri15/3

Implement BuyInAmount Selector Component (Issue #3)

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;

components/BuyInSelector.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+
+interface BuyInSelectorProps {
+  setBuyInAmount: React.Dispatch<React.SetStateAction<number | null>>;
+}
+
+const defaultBuyInOptions = [10, 25, 50];
+
+const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
+  const [customAmount, setCustomAmount] = useState("");
+  const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
+
+  const handleCustomAmountChange = (value: string) => {
+    const numericValue = parseFloat(value);
+    if (!isNaN(numericValue) && numericValue >= 0) {
+      setCustomAmount(value);
+      setBuyInAmountState(numericValue);
+      setBuyInAmount(numericValue);
+    } else {
+      setCustomAmount("");
+      setBuyInAmountState(null);
+      setBuyInAmount(null);
+    }
+  };
+
+  const handleBuyInSelection = (amount: number) => {
+    setBuyInAmountState(amount);
+    setCustomAmount("");
+    setBuyInAmount(amount);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <MaterialIcons name="monetization-on" size={30} color="green" />
+        <Text style={styles.title}>Select Buy-in Amount:</Text>
+      </View>
+
+      <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>
+
+      <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"
+      />
+
+      <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,
+  },
+  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;

components/__tests__/BuyInSelector.test.tsx

@@ -0,0 +1,88 @@
+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();
+    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);
+  });
+
+  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);
+  });
+});