Ability to save and load calculator states into two slots

app/index.tsx

@@ -1,51 +1,94 @@
 import React, { useState } from "react";
-import { ScrollView, Text, Alert, Button } from "react-native";
+import { ScrollView, Text, Alert, Button, View, StyleSheet } from "react-native";
 import PlayerSelector from "@/components/PlayerSelector";
 import BuyInSelector from "@/components/BuyInSelector";
 import ChipsSelector from "@/components/ChipsSelector";
-import ChipDistributionSummary from "@/components/ChipDistributionSummary"; 
+import ChipDistributionSummary from "@/components/ChipDistributionSummary";
+import DarkModeToggle from "@/components/DarkModeToggle";
+import { saveState, loadState } from "../components/CalculatorState";
+
 const IndexScreen = () => {
   const [playerCount, setPlayerCount] = useState(2);
   const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
   const [numberOfChips, setNumberOfChips] = useState<number>(5);
   const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
-  const handleSave = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const handleSave = async (slot: "SLOT1" | "SLOT2") => {
     if (buyInAmount === null) {
       Alert.alert("Error", "Please select a valid buy-in amount");
+      return;
+    }
+    const state = { playerCount, buyInAmount, numberOfChips, totalChipsCount };
+    const result = await saveState(slot, state);
+    Alert.alert(result.success ? "Success" : "Error", result.message);
+  };
+
+  const handleLoad = async (slot: "SLOT1" | "SLOT2") => {
+    const loadedState = await loadState(slot);
+    if (loadedState) {
+      setPlayerCount(loadedState.playerCount);
+      setBuyInAmount(loadedState.buyInAmount);
+      setNumberOfChips(loadedState.numberOfChips);
+      setTotalChipsCount(loadedState.totalChipsCount);
+      Alert.alert("Success", `State loaded from ${slot}`);
     } else {
-      Alert.alert(
+      Alert.alert("Info", "No saved state found");
-        "Success",
-        `Buy-in amount set to ${buyInAmount} for ${playerCount} players`
-      );
     }
   };
+
   return (
-    <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
+    <View style={[styles.container, darkMode ? styles.darkBackground : styles.lightBackground]}>
-      <Text style={{ fontSize: 24, marginBottom: 30, marginTop: 50 }}>
+      <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
-        Poker Chip Helper
+        <Text style={[styles.title, darkMode ? styles.darkText : styles.lightText]}>
-      </Text>
+          Poker Chip Helper
-      <PlayerSelector
+        </Text>
-        playerCount={playerCount}
+        <DarkModeToggle darkMode={darkMode} onToggle={() => setDarkMode(!darkMode)} />
-        setPlayerCount={setPlayerCount}
+        <PlayerSelector playerCount={playerCount} setPlayerCount={setPlayerCount} />
-      />
+        <BuyInSelector setBuyInAmount={setBuyInAmount} />
-      <BuyInSelector setBuyInAmount={setBuyInAmount} />
+        <ChipsSelector
-      <ChipsSelector
+          totalChipsCount={totalChipsCount}
-        totalChipsCount={totalChipsCount}
+          setTotalChipsCount={setTotalChipsCount}
-        setTotalChipsCount={setTotalChipsCount}
+          numberOfChips={numberOfChips}
-        numberOfChips={numberOfChips}
+          setNumberOfChips={setNumberOfChips}
-        setNumberOfChips={setNumberOfChips}
+        />
-      />
+        <ChipDistributionSummary
-      <ChipDistributionSummary
+          playerCount={playerCount}
-        playerCount={playerCount}
+          buyInAmount={buyInAmount}
-        buyInAmount={buyInAmount}
+          totalChipsCount={totalChipsCount}
-        totalChipsCount={totalChipsCount}
+        />
-      />
+        <Button title="Save to Slot 1" onPress={() => handleSave("SLOT1")} disabled={buyInAmount === null} />
-      <Button
+        <Button title="Save to Slot 2" onPress={() => handleSave("SLOT2")} disabled={buyInAmount === null} />
-        title="Save"
+        <Button title="Load from Slot 1" onPress={() => handleLoad("SLOT1")} />
-        onPress={handleSave}
+        <Button title="Load from Slot 2" onPress={() => handleLoad("SLOT2")} />
-        disabled={buyInAmount === null}
+      </ScrollView>
-      />
+    </View>
-    </ScrollView>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 30,
+    marginTop: 50,
+    textAlign: "center",
+  },
+  lightBackground: {
+    backgroundColor: "#F0F0F0",
+  },
+  darkBackground: {
+    backgroundColor: "#B0B0B0",
+  },
+  lightText: {
+    color: "#000000",
+  },
+  darkText: {
+    color: "#FFFFFF",
+  },
+});
+
 export default IndexScreen;
+

components/CalculatorState.tsx

@@ -0,0 +1,65 @@
+/*import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORAGE_KEYS = {
+  SLOT1: "@poker_state_slot1",
+  SLOT2: "@poker_state_slot2",
+};
+
+export interface PokerState {
+  playerCount: number;
+  buyInAmount: number | null;
+  numberOfChips: number;
+  totalChipsCount: number[];
+}
+
+export const saveState = async (slot: keyof typeof STORAGE_KEYS, state: PokerState) => {
+  try {
+    await AsyncStorage.setItem(STORAGE_KEYS[slot], JSON.stringify(state));
+    return { success: true, message: `State saved to ${slot}` };
+  } catch (error) {
+    return { success: false, message: "Failed to save state" };
+  }
+};
+
+export const loadState = async (slot: keyof typeof STORAGE_KEYS): Promise<PokerState | null> => {
+  try {
+    const storedState = await AsyncStorage.getItem(STORAGE_KEYS[slot]);
+    return storedState ? JSON.parse(storedState) : null;
+  } catch (error) {
+    return null;
+  }
+};*/
+
+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORAGE_KEYS = {
+  SLOT1: "@poker_state_slot1",
+  SLOT2: "@poker_state_slot2",
+};
+
+export interface PokerState {
+  playerCount: number;
+  buyInAmount: number | null;
+  numberOfChips: number;
+  totalChipsCount: number[];
+}
+
+export const saveState = async (slot: keyof typeof STORAGE_KEYS, state: PokerState) => {
+  try {
+    await AsyncStorage.setItem(STORAGE_KEYS[slot], JSON.stringify(state));
+    return { success: true, message: `State saved to ${slot}` };
+  } catch (error) {
+    return { success: false, message: "Failed to save state" };
+  }
+};
+
+export const loadState = async (slot: keyof typeof STORAGE_KEYS): Promise<PokerState | null> => {
+  try {
+    const storedState = await AsyncStorage.getItem(STORAGE_KEYS[slot]);
+    return storedState ? JSON.parse(storedState) : null;
+  } catch (error) {
+    return null;
+  }
+};
+

components/DarkModeToggle.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, Text, Button, StyleSheet } from "react-native";
+
+interface DarkModeToggleProps {
+  darkMode: boolean;
+  onToggle: () => void;
+}
+
+const DarkModeToggle: React.FC<DarkModeToggleProps> = ({ darkMode, onToggle }) => {
+  return (
+    <View style={[styles.container, darkMode ? styles.darkBackground : styles.lightBackground]}>
+      <Text style={[styles.text, darkMode ? styles.darkText : styles.lightText]}>
+        Dark Mode is {darkMode ? "Enabled" : "Disabled"}
+      </Text>
+      <Button title="Toggle Dark Mode" onPress={onToggle} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  lightBackground: {
+    backgroundColor: "#F0F0F0",
+  },
+  darkBackground: {
+    backgroundColor: "#B0B0B0",
+  },
+  lightText: {
+    color: "#000000",
+  },
+  darkText: {
+    color: "#FFFFFF",
+  },
+});
+
+export default DarkModeToggle;
+

components/__tests__/CalculatorState.test.tsx

@@ -0,0 +1,52 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { saveState, loadState, PokerState } from "../CalculatorState";
+
+jest.mock("@react-native-async-storage/async-storage", () =>
+  require("@react-native-async-storage/async-storage/jest/async-storage-mock")
+);
+
+describe("CalculatorState.tsx", () => {
+  const mockState: PokerState = {
+    playerCount: 4,
+    buyInAmount: 50,
+    numberOfChips: 5,
+    totalChipsCount: [100, 200, 150, 50, 75],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should save state successfully", async () => {
+    await saveState("SLOT1", mockState);
+    expect(AsyncStorage.setItem).toHaveBeenCalledWith(
+      "@poker_state_slot1",
+      JSON.stringify(mockState)
+    );
+  });
+
+  it("should fail to save state if an error occurs", async () => {
+    jest.spyOn(AsyncStorage, "setItem").mockRejectedValueOnce(new Error("Failed to save"));
+    const result = await saveState("SLOT1", mockState);
+    expect(result.success).toBe(false);
+    expect(result.message).toBe("Failed to save state");
+  });
+
+  it("should load state successfully", async () => {
+    await AsyncStorage.setItem("@poker_state_slot1", JSON.stringify(mockState));
+    const result = await loadState("SLOT1");
+    expect(result).toEqual(mockState);
+  });
+
+  it("should return null if no state is found", async () => {
+    jest.spyOn(AsyncStorage, "getItem").mockResolvedValueOnce(null);
+    const result = await loadState("SLOT1");
+    expect(result).toBeNull();
+  });
+
+  it("should return null if an error occurs while loading state", async () => {
+    jest.spyOn(AsyncStorage, "getItem").mockRejectedValueOnce(new Error("Failed to load"));
+    const result = await loadState("SLOT1");
+    expect(result).toBeNull();
+  });
+});

components/__tests__/ChipDistributionSummary.test.tsx

@@ -8,8 +8,7 @@ describe("ChipDistributionSummary Component", () => {
     const totalChipsCount = [100, 200, 300, 400, 500];
     const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
 
-    // Update this to match the actual component's chip distribution logic
+    const expectedDistribution = [8, 16, 25, 33, 41];
-    const expectedDistribution = [8, 16, 25, 33, 41]; // Adjust based on actual component calculations
 
     const { getByText } = render(
       <ChipDistributionSummary
@@ -44,7 +43,7 @@ describe("ChipDistributionSummary Component", () => {
       totalChipsCount = totalChipsCount.map(count => Math.round(count * scaleFactor));
     }
 
-    const expectedDistribution = [30, 40, 50, 60, 70]; // Adjust to match actual component calculations
+    const expectedDistribution = [30, 40, 50, 60, 70]; 
     const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
 
     const { getByText } = render(

components/__tests__/DarkModeToggle.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import DarkModeToggle from "@/components/DarkModeToggle";
+
+describe("DarkModeToggle Component", () => {
+  it("renders correctly with initial light mode", () => {
+    const { getByText } = render(<DarkModeToggle darkMode={false} onToggle={() => {}} />);
+    expect(getByText("Dark Mode is Disabled")).toBeTruthy();
+  });
+
+  it("renders correctly with initial dark mode", () => {
+    const { getByText } = render(<DarkModeToggle darkMode={true} onToggle={() => {}} />);
+    expect(getByText("Dark Mode is Enabled")).toBeTruthy();
+  });
+
+  it("toggles dark mode when button is pressed", () => {
+    const mockToggle = jest.fn();
+    const { getByText } = render(<DarkModeToggle darkMode={false} onToggle={mockToggle} />);
+
+    const button = getByText("Toggle Dark Mode");
+    fireEvent.press(button);
+
+    expect(mockToggle).toHaveBeenCalledTimes(1);
+  });
+});

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
+        "@react-native-async-storage/async-storage": "^2.1.1",
         "@react-navigation/bottom-tabs": "^7.2.0",
         "@react-navigation/native": "^7.0.14",
         "expo": "~52.0.31",
@@ -3856,6 +3857,18 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.1.1.tgz",
+      "integrity": "sha512-UqlnxddwM3rlCHvteFz+HpIXjqhQM7GkBgVQ9sMvMdl8QVOJQDjG7BODCUvabysMDw+9QfMFlLiOI8U6c0VzzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || >=0.65 <1.0"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.76.7",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.76.7.tgz",
@@ -9808,6 +9821,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -11890,6 +11912,18 @@
       "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
       "license": "MIT"
     },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "^2.1.1",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "expo": "~52.0.31",