Merge pull request #4 from coolguyzone/redux

Create recipe cards and get available recipe cards to show up on reci…

Author: coolguyzone

Screens/RecipesScreen.js

@@ -1,7 +1,32 @@
-import { Text } from "react-native";
+import { ScrollView, Text } 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";
 
 function RecipesScreen() {
-  return <Text style={{ marginTop: 20 }}>Recipes Screen</Text>;
+  const drinkList = Constants.drinkList;
+  const ingredients = useSelector((state) => state.inventory.ingredientsArray);
+
+  return (
+    <ScrollView>
+      <Text style={{ marginVertical: 20 }}>Recipes Screen</Text>
+
+      {ingredients.map((ingredient) => (
+        <Text>{ingredient}</Text>
+      ))}
+
+      {drinkList.map((drink) => {
+        let drinkIngredients = drink.ingredients;
+        for (let i = 0; i < drinkIngredients.length; i++) {
+          if (ingredients.indexOf(drinkIngredients[i]) < 0) {
+            return;
+          } 
+        }
+        return <RecipeCard>{drink.name}</RecipeCard>;
+      })}
+    </ScrollView>
+  );
 }
 
-export default RecipesScreen;
+export default RecipesScreen;

components/recipe-components/RecipeCard.js

@@ -0,0 +1,26 @@
+import { View, Text, StyleSheet } from "react-native";
+
+function RecipeCard({children}) {
+  return <View style={styles.container}>
+    <Text style={styles.label}>{children}</Text>
+  </View>
+}
+
+export default RecipeCard;
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 12,
+    marginVertical: 12,
+    paddingVertical: 12,
+    borderColor: 'black',
+    borderWidth: 2,
+    borderRadius: 5,
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 18,
+    fontWeight: 'bold'
+  }
+})
+

util/slices/inventorySlice.js

@@ -3,7 +3,7 @@ import { createSlice } from "@reduxjs/toolkit";
 export const inventorySlice = createSlice({
   name: "inventory",
   initialState: {
-    ingredientsArray: ['water'],
+    ingredientsArray: ['Water'],
   },
   reducers: {
     addIngredient: (state, action) => {