Get data to show up correctly in recipe modal

Author: coolguyzone

Screens/IngredientsTabs/LightBoozeTab.js

@@ -13,8 +13,6 @@ function LightBoozeTab() {
   const ingredients = useSelector((state) => state.inventory);
   const dispatch = useDispatch();
   // dispatch(inventory.addIngredient('bourbon'))
-  console.log("addIngredient", addIngredient),
-    console.log("ingredients", ingredients);
 
   return (
     <ScrollView>

Screens/RecipesScreen.js

@@ -1,34 +1,36 @@
-import {
-  ScrollView,
-  Text,
-  Modal,
-  View,
-  Pressable,
-  StyleSheet,
-} from "react-native";
+import { ScrollView, Text, View, Pressable, StyleSheet } from "react-native";
 import RecipeCard from "../components/recipe-components/RecipeCard";
 import { Constants } from "../util/constants";
-import { useSelector, useDispatch } from "react-redux";
-import { ingredientsArray } from "../util/slices/inventorySlice";
+import { useSelector } from "react-redux";
+import RecipeModal from "../components/recipe-components/RecipeModal";
+import { useState, useEffect, useLayoutEffect } from "react";
 
 function RecipesScreen() {
   const drinkList = Constants.drinkList;
   const ingredients = useSelector((state) => state.inventory.ingredientsArray);
+  const [modalVisible, setModalVisible] = useState(true);
+  const [recipeTitle, setRecipeTitle] = useState("");
+  const [recipeIngredients, setRecipeIngredients] = useState([]);
+  const [recipeInstructions, setRecipeInstructions] = useState([]);
+
+  function showDrinkModal(title, ingredients, instructions) {
+    setRecipeTitle(title);
+    setRecipeIngredients(ingredients);
+    setRecipeInstructions(instructions);
+    setModalVisible(true);
+  }
 
   return (
     <ScrollView>
       <Text style={{ marginVertical: 20 }}>Recipes Screen</Text>
 
-      <Modal  animationType="slide" transparent={true} visible={true}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-          <Text  style={styles.modalText}>This is the MODAL!</Text>
-          <Pressable>
-            <Text>Here is a pressable</Text>
-          </Pressable>
-          </View>
-        </View>
-      </Modal>
+      <RecipeModal
+        recipeTitle={recipeTitle}
+        recipeIngredients={recipeIngredients}
+        recipeInstructions={recipeInstructions}
+        modalVisible={modalVisible}
+        setModalVisible={setModalVisible}
+      />
 
       {ingredients.map((ingredient) => (
         <Text>{ingredient}</Text>
@@ -41,39 +43,23 @@ function RecipesScreen() {
             return;
           }
         }
-        return <RecipeCard>{drink.name}</RecipeCard>;
+        console.log("drink", drink);
+        return (
+          <Pressable
+            onPress={() =>
+              showDrinkModal(
+                drink.name,
+                drink.ingredients[0].toString(),
+                drink.instructions
+              )
+            }
+          >
+            <RecipeCard>{drink.name}</RecipeCard>
+          </Pressable>
+        );
       })}
     </ScrollView>
   );
 }
 
 export default RecipesScreen;
-
-const styles = StyleSheet.create({
-  ceneteredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 22,
-  },
-  modalView: {
-    margin: 20,
-    marginTop: 280,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  modalText: {
-    color: 'green',
-    fontSize: 12,
-  }
-});

components/recipe-components/RecipeModal.js

@@ -0,0 +1,51 @@
+import { Text, Modal, View, Pressable, StyleSheet } from "react-native";
+import { useState } from "react";
+
+function RecipeModal({ recipeTitle, recipeIngredients, recipeInstructions, modalVisible, setModalVisible }) {
+
+  return (
+    <Modal animationType="slide" transparent={true} visible={modalVisible}>
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalText}>{recipeTitle}</Text>
+          <Text>Ingredients: {recipeIngredients}</Text>
+          <Text>Instructions: {recipeInstructions}</Text>
+          <Pressable onPress={() => setModalVisible(!modalVisible)}>
+            <Text>Here is a pressable</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export default RecipeModal;
+
+const styles = StyleSheet.create({
+  ceneteredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    marginTop: 280,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    color: "green",
+    fontSize: 24,
+  },
+});

util/slices/inventorySlice.js

@@ -7,7 +7,6 @@ export const inventorySlice = createSlice({
   },
   reducers: {
     addIngredient: (state, action) => {
-      console.log('addIngredient')
       state.ingredientsArray.push(action.payload);
     },
     removeIngredient: (state, action) => {