app/index.tsx

@@ -1,53 +1,46 @@
 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 ChipDetection from "@/components/ChipDetection";
+import { saveState, loadState } from "../components/CalculatorState";
 
-export enum COLORS {
+const IndexScreen = () => {
-  "white",
-  "red",
-  "green",
-  "blue",
-  "black",
-}
-
-const IndexScreen: React.FC = () => {
   const [playerCount, setPlayerCount] = useState(2);
-  const [buyInAmount, setBuyInAmount] = useState<number>(20);
+  const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
   const [numberOfChips, setNumberOfChips] = useState<number>(5);
   const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
 
-  const handleSave = () => {
+  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`
-      );
     }
   };
 
-  // Update chip count based on detection or manual edit
-  const updateChipCount = (chipData: { [color: string]: number }) => {
-    // Convert the chip data from the API response or manual edit to a count array
-    const chipCountArray = Object.entries(chipData).map(
-      ([color, count]) => count
-    );
-    setTotalChipsCount(chipCountArray); // Update the parent component's state
-  };
-
   return (
+    <View style={styles.container}>
       <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
-      <PlayerSelector
+        <Text style={styles.title}>Poker Chip Helper</Text>
-        playerCount={playerCount}
+        <PlayerSelector playerCount={playerCount} setPlayerCount={setPlayerCount} />
-        setPlayerCount={setPlayerCount}
-      />
         <BuyInSelector setBuyInAmount={setBuyInAmount} />
-      <ChipDetection updateChipCount={updateChipCount} />
         <ChipsSelector
           totalChipsCount={totalChipsCount}
           setTotalChipsCount={setTotalChipsCount}
@@ -59,13 +52,25 @@ const IndexScreen: React.FC = () => {
           buyInAmount={buyInAmount}
           totalChipsCount={totalChipsCount}
         />
-      <Button
+        <Button title="Save to Slot 1" onPress={() => handleSave("SLOT1")} disabled={buyInAmount === null} />
-        title="Save"
+        <Button title="Save to Slot 2" onPress={() => handleSave("SLOT2")} disabled={buyInAmount === null} />
-        onPress={handleSave}
+        <Button title="Load from Slot 1" onPress={() => handleLoad("SLOT1")} />
-        disabled={buyInAmount === null}
+        <Button title="Load from Slot 2" onPress={() => handleLoad("SLOT2")} />
-      />
       </ScrollView>
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 30,
+    marginTop: 50,
+    textAlign: "center",
+  },
+});
+
 export default IndexScreen;

components/CalculatorState.tsx

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

package-lock.json

@@ -9,9 +9,10 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "14.0.4",
+        "@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.37",
+        "expo": "^52.0.37",
         "expo-blur": "14.0.3",
         "expo-constants": "17.0.7",
         "expo-file-system": "18.0.11",
@@ -57,8 +58,7 @@
         "typescript": "5.7.3"
       },
       "engines": {
-        "node": ">=22.0.0 <23.0.0",
+        "node": ">=22.0.0 <23.0.0"
-        "npm": ">=8.0.0"
       }
     },
     "node_modules/@0no-co/graphql.web": {
@@ -3914,6 +3914,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",
@@ -9905,6 +9917,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",
@@ -12268,6 +12289,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

@@ -19,9 +19,10 @@
   },
   "dependencies": {
     "@expo/vector-icons": "14.0.4",
+    "@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.37",
+    "expo": "^52.0.37",
     "expo-blur": "14.0.3",
     "expo-constants": "17.0.7",
     "expo-file-system": "18.0.11",