Merge pull request #2 from coolguyzone/redux

Get adding and removing ingredients to store working on light booze tab

Author: coolguyzone

Screens/IngredientsTabs/LightBoozeTab.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, StyleSheet, Text, View } from "react-native";
+import { Button, ScrollView, StyleSheet, Text, View } from "react-native";
 import CheckBox from "react-native-check-box";
 import IngredientCheckBox from "../../components/IngredientCheckBox";
 import { Constants } from "../../util/constants";
@@ -13,29 +13,31 @@ function LightBoozeTab() {
   const ingredients = useSelector((state) => state.inventory);
   const dispatch = useDispatch();
   // dispatch(inventory.addIngredient('bourbon'))
-  console.log('addIngredient', addIngredient),
-  console.log('ingredients', ingredients)
-
-
+  console.log("addIngredient", addIngredient),
+    console.log("ingredients", ingredients);
 
   return (
-    <>
+    <ScrollView>
       <Text style={{ marginTop: 20 }}>Light Booze</Text>
       <View style={styles.IngredientContainer}>
-        {Constants.clearDrinks.map((drink) => {
-          return <IngredientCheckBox key={drink}>{drink}</IngredientCheckBox>;
+        {Constants.clearBooze.map((drink) => {
+          return (
+            <IngredientCheckBox key={drink} booze={drink}>
+              {drink}
+            </IngredientCheckBox>
+          );
         })}
-        <Button
+        {/* <Button
           title="test"
           onPress={() => {
             console.log("clicked");
-            console.log('ingredients2', ingredients)
+            console.log("ingredients2", ingredients);
             return dispatch(addIngredient("bourbon"));
           }}
-        ></Button>
-        <Text>WHat's up!!! {useSelector(ingredientsArray)}</Text>
+        ></Button>*/}
+        <Text>WHat's up!!! {useSelector(ingredientsArray)}</Text> 
       </View>
-    </>
+    </ScrollView>
   );
 }
 

components/IngredientCheckBox.js

@@ -1,17 +1,31 @@
 import { useState } from "react";
 import CheckBox from "react-native-check-box";
+import { useSelector, useDispatch } from "react-redux";
+import { addIngredient, removeIngredient } from "../util/slices/inventorySlice";
+
+function IngredientCheckBox(props) {
+  const ingredients = useSelector((state) => state.inventory);
+  const dispatch = useDispatch();
 
-function IngredientCheckBox({ children }) {
   const [CheckBoxState, setCheckBoxState] = useState(false);
   return (
     <CheckBox
       onClick={() =>
-        CheckBoxState === true
-          ? setCheckBoxState(false)
-          : setCheckBoxState(true)
+        // CheckBoxState === true
+        //   ? setCheckBoxState(false)
+        //   : setCheckBoxState(true)
+        {
+          if (CheckBoxState === true) {
+            setCheckBoxState(false);
+            dispatch(removeIngredient(props.booze));
+          } else {
+            setCheckBoxState(true);
+            dispatch(addIngredient(props.booze));
+          }
+        }
       }
       isChecked={CheckBoxState}
-      leftText={children}
+      leftText={props.children}
     />
   );
 }

util/constants.js

@@ -25,7 +25,7 @@ export const Constants = {
     "Añejo Rum",
     "Benedictine",
   ],
-  clearDrinks: [
+  clearBooze: [
     "Vodka",
     "Gin",
     "Tequila",

util/slices/inventorySlice.js

@@ -10,10 +10,16 @@ export const inventorySlice = createSlice({
       console.log('addIngredient')
       state.ingredientsArray.push(action.payload);
     },
+    removeIngredient: (state, action) => {
+      const index = state.ingredientsArray.indexOf(action.payload);
+      if (index > -1) {
+        state.ingredientsArray.splice(index, 1)
+      }
+    }
   },
 });
 
-export const { addIngredient }  = inventorySlice.actions;
-export const ingredientsArray = (state) => state.inventory.ingredientsArray;
+export const { addIngredient, removeIngredient }  = inventorySlice.actions;
+export const ingredientsArray = (state) => state.inventory.ingredientsArray.toString();
 
 export default inventorySlice.reducer;