link API with application, create modele and services

LeftOvers/Models/Ingredient.tsx

@@ -0,0 +1,23 @@
+export default class Ingredient {
+    private _id: number;
+    private _name: string;
+
+    constructor(id: number, name: string) {
+      this._id = id;
+      this._name = name;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    get id(): number{
+        return this._id;
+    }
+    
+
+    static convertApiResponse(apiResponse: string): Ingredient[] {
+      const parsedResponses = JSON.parse(apiResponse);
+      return parsedResponses.map((item: any) => new Ingredient(item.id, item.name));
+    }
+  }

LeftOvers/screens/HomePage.tsx

@@ -1,4 +1,4 @@
-import {React, useState} from 'react';
+import React from 'react';
 import {StyleSheet, View, Text, Pressable, Image} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
@@ -22,7 +22,7 @@ export default function HomePage(props) {
 
   const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
 
-  const [cpt, setCpt] = useState(0);
+  const [cpt, setCpt] = React.useState(0);
   const decreaseCounter = () => {
     if (cpt > 0) {
       setCpt(cpt - 1);
@@ -138,7 +138,6 @@ const styles = StyleSheet.create({
         flex: 0.8,
         fontSize: 20,
         color: '#ACA279',
-        flex: 1,
         padding: 5,
         paddingLeft: 0,
         paddingBottom: 0,

LeftOvers/screens/IngredientSelection.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
+import {View, StyleSheet, Text, Image, Pressable, ScrollView, ActivityIndicator} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import TopBar from '../components/TopBar';
 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';
@@ -11,39 +10,117 @@ 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';
+import Ingredient from '../Models/Ingredient'
 
 
 export default function IngredientSelection(props) {
 
-  const [searchQuery, setSearchQuery] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+  let [isLoading, setIsLoading] = useState(true);
+  let [error, setError] = useState();
+  let [response, setResponse] = useState();
+  let [SelectedIngredient, setSelectedIngredients] = useState([]);
+  let instancesArray: Array<any> = [];
  
-  const onChangeSearch = query => setSearchQuery(query);
 
-  type ItemProps = {value: string}
+// Pour se connecter à l'API
+  useEffect(() => {
+    fetch('http://localhost:3000/ingredients')
+      .then(res => res.json())
+      .then(
+        result => {
+          setIsLoading(false);
+          setResponse(result);
+        },
+        error => {
+          setIsLoading(false);
+          setError(error);
+        }
+      );
+  }, []);
 
-  const AvailaibleItem = ({value}: ItemProps) => (
+// Pour 
-    <><View style={styles.horizontalAlignement}>
+  const getContent = () => {
-      <FoodElementText title={value} />
+    
-      <Pressable>
+    if (isLoading) {
+      return <ActivityIndicator size="large" />;
+    }
+
+    if (error) {
+      console.log('Erreur ici' + error);
+      return <Text>Ca marche Pos</Text>;
+    }
+
+    if (response) {
+      try {
+        instancesArray = Ingredient.convertApiResponse(JSON.stringify(response));
+
+        return instancesArray.map((ingredient, index) => (
+          <AvailableItem key={index} value={ingredient} />
+        ));
+      } catch (error) {
+        console.error("Erreur de conversion de la réponse en instances d'Ingredient:", error);
+        return <Text>Erreur lors du traitement des données</Text>;
+      }
+    }
+  };
+
+// Ingredients disponible
+  const AvailableItem = ({ value }: { value: Ingredient }) => (
+    <>
+      <View style={styles.horizontalAlignement}>
+        <FoodElementText title={value.name} />
+        <Pressable onPress={() => SelectIngredient(value)}>
           <Image source={plus} style={{ width: 20, height: 20 }} />
         </Pressable>
-    </View><View style={{ height: 30 }}></View></>   
+      </View>
-)
+      <View style={{ height: 30 }}></View>
+    </>
+  );
 
-const ChooseItem = ({value}: ItemProps) => (
+// Ingredient choisi par l'utilisateur 
-  <><View style={styles.horizontalAlignement}>
+  const ChooseItem = ({ value }: { value: { id: number; name: string } }) => (
-    <FoodElementText title={value} />
+    <>
-    <Pressable>
+      <View style={styles.horizontalAlignement}>
+        <FoodElementText title={value.name} />
+        <Pressable onPress={() => RemoveIngredient(value.id)}>
           <Image source={moins} style={{ width: 20, height: 20 }} />
         </Pressable>
-  </View><View style={{ height: 30 }}></View></>   
+      </View>
-)
+      <View style={{ height: 30 }}></View>
+    </>
+  );
+
+  function SelectIngredient(newIngredient: Ingredient) {
+    const exists = SelectedIngredient.find(
+        (ingredient) => ingredient.id === newIngredient.id
+    );
+
+    if (!exists) {
+        setSelectedIngredients([...SelectedIngredient, newIngredient]);
+        console.log(newIngredient);
+        console.log(SelectedIngredient);
+    }else{
+      console.log(exists)
+      console.log("cheh pas ajouté")
+    }
+}
+
+function RemoveIngredient(idIngredient: Number){
+  const updatedIngredients = SelectedIngredient.filter(
+    (ingredient) => ingredient.id !== idIngredient
+  );
+
+  setSelectedIngredients(updatedIngredients);
+}
+
 
   return (
     <SafeAreaProvider>
           <TopBar title="Ingredient selection" />
+        <ScrollView contentContainerStyle={{ alignItems: 'center', height: '100%'}}>
           <View style={styles.page}>
-
             <View style={styles.element}>
               <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
                 <Pressable>
@@ -58,9 +135,9 @@ const ChooseItem = ({value}: ItemProps) => (
               </View>
               <View>
               <Searchbar
-                  placeholder="Search"
+                  placeholder="Rechercher"
-                  onChangeText={onChangeSearch}
+                  onChangeText={query => setSearchValue(query)}
-                  value={searchQuery} 
+                  value={searchValue}
                   style={{margin: 10, 
                     backgroundColor: '#F2F0E4', 
                     borderWidth : 1,
@@ -68,12 +145,11 @@ const ChooseItem = ({value}: ItemProps) => (
                     borderRadius: 15,
                     height: 50,
                     }}/> 
+                  
               </View>
               <View style={{ flex: 1}} >
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
-                      {props.listIngredient.map((source, index) => (
+                  {getContent()}
-                        <AvailaibleItem key={index} value={source}></AvailaibleItem>
-                      ))}
                 </ScrollView>
               </View>
               <View style={{ height: 20 }}></View>
@@ -88,7 +164,7 @@ const ChooseItem = ({value}: ItemProps) => (
 
                 <View style={{ flex: 1}} > 
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                      {props.listIngredient.map((source, index) => (
+                      {SelectedIngredient.map((source, index) => (
                         <ChooseItem key={index} value={source}></ChooseItem>
                       ))}
                 </ScrollView>
@@ -99,6 +175,7 @@ const ChooseItem = ({value}: ItemProps) => (
             <View style={{ height: 15 }}></View>
             <CustomButton title="Find a recipe"/>                
             </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }

LeftOvers/screens/Profiles.tsx

@@ -1,4 +1,4 @@
-import {React, useState} from 'react';
+import React from 'react';
 import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
 import ProfileDetails from '../components/ProfileDetails';
 import ProfileDelete from '../components/ProfileDelete';
@@ -19,8 +19,8 @@ export default function ModifyProfile(props) {
   const allViktor = [{value: "Pasta"}, {value: "Fish"}]
   const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
 
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = React.useState(false);
-  const [opacity, setOpacity] = useState(1);
+  const [opacity, setOpacity] = React.useState(1);
   const raisePopUp = () => {
         setVisible(true)
         setOpacity(0.4)
@@ -96,9 +96,6 @@ const styles = StyleSheet.create({
     padding: 10,
     paddingTop: 0,
   },
-
-
-
   modal: {
         position: 'absolute',
         top: '50%',
@@ -116,8 +113,6 @@ const styles = StyleSheet.create({
         width: "100%",
         height: 200,
   },
-
-
   profileValidation: {
         width: "100%",
         alignItems: "center",

LeftOvers/screens/RecipeSuggestion.tsx

@@ -11,7 +11,7 @@ import ParameterTopBar from '../components/ParameterTopBar';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 import CustomButton from '../components/CustomButton';
-import DietsTab from '../components/DietsTab';
+import DietsTab from '../components/ListSelect';
 
 
 export default function RecipeSuggestion(props) {
@@ -165,7 +165,7 @@ const styles = StyleSheet.create({
   horizontalAlignement: {
     display: 'flex',
     height: 30,
-    width: 350,
+    width: '80%',
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',