LeftOvers/App.tsx

@@ -5,6 +5,7 @@ import ValidateButton from './components/ValidateButton';
 import { LinearGradient } from 'expo-linear-gradient';
 import RecipeSuggestion from './screens/RecipeSuggestion';
 import RecipeDetails from './screens/RecipeDetails';
+import IngredientSelection from './screens/IngredientSelection';
 
 export default function App() {
   const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
@@ -36,14 +37,15 @@ export default function App() {
 const ingredients = generateList();
   
   return (
-    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion> */
+    <IngredientSelection listIngredient={ingredients}></IngredientSelection>
-    <RecipeDetails ingredient={ingredient} 
+    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
+    /*<RecipeDetails ingredient={ingredient} 
     ustensils={ustensils} 
     steps={steps} 
     title="Chocolat Cake" 
     number="63"
     duree="30 minutes"
-    ></RecipeDetails>
+    ></RecipeDetails>*/
   );
 }
 

LeftOvers/screens/IngredientSelection.tsx

@@ -6,14 +6,39 @@ import { Searchbar } from 'react-native-paper';
 import brochette from '../assets/images/brochette.png'; 
 import FoodElementText from '../components/FoodElementText';
 import CustomButton from '../components/CustomButton';
+import plus from '../assets/images/plus.png';
+import moins from '../assets/images/minus.png';
+import meat from '../assets/images/meat_icon.png';
+import vegetable from '../assets/images/vegetable_icon.png';
+import fruit from '../assets/images/fruit_icon.png';
 
 
-export default function IngredientSelection() {
+export default function IngredientSelection(props) {
 
   const [searchQuery, setSearchQuery] = React.useState('');
 
   const onChangeSearch = query => setSearchQuery(query);
 
+  type ItemProps = {value: string}
+
+  const AvailaibleItem = ({value}: ItemProps) => (
+    <><View style={styles.horizontalAlignement}>
+      <FoodElementText title={value} />
+      <Pressable>
+        <Image source={plus} style={{ width: 20, height: 20 }} />
+      </Pressable>
+    </View><View style={{ height: 30 }}></View></>   
+)
+
+const ChooseItem = ({value}: ItemProps) => (
+  <><View style={styles.horizontalAlignement}>
+    <FoodElementText title={value} />
+    <Pressable>
+      <Image source={moins} style={{ width: 20, height: 20 }} />
+    </Pressable>
+  </View><View style={{ height: 30 }}></View></>   
+)
+
   return (
     <SafeAreaProvider>
           <TopBar title="Ingredient selection" />
@@ -22,16 +47,13 @@ export default function IngredientSelection() {
             <View style={styles.element}>
               <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
                 <Pressable>
-                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                    <Image source={meat} style={{ width: 30, height: 30 }} />
-                </Pressable>
-                <Pressable>
-                    <Image source={brochette} style={{ width: 40, height: 40 }} />
                 </Pressable>
                 <Pressable>
-                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                    <Image source={vegetable} style={{ width: 30, height: 30 }} />
                 </Pressable>
                 <Pressable>
-                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                    <Image source={fruit} style={{ width: 30, height: 30 }} />
                 </Pressable>
               </View>
               <View>
@@ -49,45 +71,15 @@ export default function IngredientSelection() {
               </View>
               <View style={{ flex: 1}} >
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
-
+                      {props.listIngredient.map((source, index) => (
-                  <View style={styles.horizontalAlignement}>
+                        <AvailaibleItem key={index} value={source}></AvailaibleItem>
-                    <FoodElementText title="test" />
+                      ))}
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-  
-                  
                 </ScrollView>
               </View>
               <View style={{ height: 20 }}></View>
             </View>
 
             <View style={[styles.element, {marginTop:  40}]}>
-
                 <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
                   <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
                 </View>
@@ -96,23 +88,9 @@ export default function IngredientSelection() {
 
                 <View style={{ flex: 1}} > 
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                <View style={styles.horizontalAlignement}>
+                      {props.listIngredient.map((source, index) => (
-                    <FoodElementText title="test" />
+                        <ChooseItem key={index} value={source}></ChooseItem>
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                      ))}
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />       
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
                 </ScrollView>
               </View>
               <View style={{ height: 20 }}></View>