Merge pull request 'master' (#13) from master into WORK-RRE

Reviewed-on: #13

.drone.yml

@@ -0,0 +1,32 @@
+kind: pipeline
+type: docker
+name: LeftOvers
+
+trigger:
+  event:
+    - push
+
+steps:
+  - name: app-build
+    image: node:latest
+    commands:
+      - cd ./LeftOvers/
+      - npm install
+      - npm run
+      
+  - name: code-analysis
+    image: node:latest
+    environment:
+      SONAR_TOKEN:
+        from_secret: SONAR_TOKEN
+    settings:
+      sources: ./LeftOvers/
+    commands:
+      - export SONAR_SCANNER_VERSION=4.7.0.2747
+      - export SONAR_SCANNER_HOME=$HOME/.sonar/sonar-scanner-$SONAR_SCANNER_VERSION-linux
+      - curl --create-dirs -sSLo $HOME/.sonar/sonar-scanner.zip https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-$SONAR_SCANNER_VERSION-linux.zip
+      - unzip -o $HOME/.sonar/sonar-scanner.zip -d $HOME/.sonar/
+      - export PATH=$SONAR_SCANNER_HOME/bin:$PATH
+      - export SONAR_SCANNER_OPTS="-server"
+      - sonar-scanner -D sonar.projectKey=LeftOvers -D sonar.sources=. -D sonar.host.url=https://codefirst.iut.uca.fr/sonar
+    depends_on: [ app-build ]

LeftOvers/App.js

@@ -1,21 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

LeftOvers/App.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {StyleSheet, View } from 'react-native';
+import ProfileModification from './components/ProfileModification';
+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"}]
+  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
+  const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}]
+  const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
+  const steps = [{value: "Chauffer chocolat"}, 
+  {value: "1. Casser oeuf"}, 
+  {value: "2. Melanger la farine, le lait et les oeufs"},
+  {value: "3. Battre fort"},
+  {value: "4. Voler la montre de Louison"},
+  {value: "5. Melanger avec le chocolat"},
+  {value: "6. Mettre au four"},
+]
+  
+  function generateList() {
+    const list = [];
+    list.push("Meat");
+    list.push("Meat");
+    list.push("Meat");
+    list.push("Meat");
+    list.push("Teat");
+    list.push("Meat");
+    list.push("Meat");
+    list.push("Meat");
+    return list;
+}
+
+const ingredients = generateList();
+  
+  return (
+    <IngredientSelection listIngredient={ingredients}></IngredientSelection>
+    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
+    /*<RecipeDetails ingredient={ingredient} 
+    ustensils={ustensils} 
+    steps={steps} 
+    title="Chocolat Cake" 
+    number="63"
+    duree="30 minutes"
+    ></RecipeDetails>*/
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    //height: 844,
+    //width: 390,
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+    //backgroundColor: "#59BDCD",
+    //alignItems: 'center',
+    //justifyContent: 'flex-start',
+  },
+});

LeftOvers/app.json

@@ -3,9 +3,32 @@
     "name": "LeftOvers",
     "slug": "LeftOvers",
     "version": "1.0.0",
-    "assetBundlePatterns": [
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#57BDCC"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundle Patterns": [
       "**/*"
-    ]
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foreground Image": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
     },
-  "name": "LeftOvers"
+    "web": {
+      "favicon": "./assets/images/icon.png"
+    }
+  }
 }

LeftOvers/components/AllergiesTab.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import ValidateButton from './ValidateButton';
+import HeaderFlatList from './HeaderFlatList';
+import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
+
+type AllergiesProps = {
+    title: string
+    content : list<string>
+}
+
+export default function AllergiesTab(props: AllergiesProps) {
+  const [selected, setSelected] = React.useState([]);
+  const data = [
+        {key:'1', value:'Dairy free'},
+        {key:'2', value:'Gluten free'},
+        {key:'3', value:'Porkless'},
+        {key:'4', value:'Vegan'},
+        {key:'5', value:'Vegetatian'},
+        {key:'6', value:'Pescatarian'},
+  ]
+  return (
+    <MultipleSelectList
+        data={props.content}
+        save="value"
+        search={false}
+        arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
+        boxStyles={styles.titleBar}
+        inputStyles={styles.title}
+        dropdownStyles={styles.itemList}
+        dropdownItemStyles={styles.itemCell}
+        dropdownTextStyles={styles.itemText}
+        checkBoxStyles={styles.box}
+        placeholder={props.title}
+        label={props.title}/>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    minHeight: 25,
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 330,
+    marginBottom: 0,
+    overflow: "hidden",
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.1,
+  },
+  title: {
+    fontSize: 15,
+    color: '#3F3C42',
+    alignItems: 'center',
+    textAlign: "left",
+    flex: 0.9,
+  },
+
+  itemList: {
+      //flexDirection: "row",
+      alignItems: "flex-start",
+      //justifyContent: "stretch",
+      borderWidth: 0,
+      borderTopRightRadius: 0,
+      borderTopLeftRadius: 0,
+      borderBottomRightRadius: 15,
+      borderBottomLeftRadius: 15,
+      backgroundColor: "#E3DEC9",
+      width: 330,
+  },
+  itemCell: {
+      maxHeight: 30,
+      flex: 1,
+      padding: 0,
+      paddingLeft: 10,
+  },
+  itemText: {
+      fontSize: 13,
+      textAlign: "left",
+      flex: 1,
+      padding: 5,
+      paddingLeft: 10,
+      color: "#3F3C42",
+  },
+
+  box: {
+      borderWidth: 0,
+      flex: 0,
+  }
+});

LeftOvers/components/CustomButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {StyleSheet, Pressable, Text, View} from 'react-native';
+
+
+interface CustomButtonProps {
+  title  : string
+}
+
+export default function CustomButton(props: CustomButtonProps) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.title}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 150,
+    height: 40,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'white',
+  },
+  view: {
+    width : 145,
+    height: 35,
+    borderRadius: 4,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    justifyContent: 'center', // Centre le contenu horizontalement
+  },
+});
+

LeftOvers/components/DietsTab.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import ValidateButton from './ValidateButton';
+import HeaderFlatList from './HeaderFlatList';
+import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
+
+type DietsProps = {
+    title: string
+    content : list<string>
+}
+
+export default function DietsTab(props: DietsProps) {
+  const [selected, setSelected] = React.useState([]);
+  const data = [
+        {key:'1', value:'Dairy free'},
+        {key:'2', value:'Gluten free'},
+        {key:'3', value:'Porkless'},
+        {key:'4', value:'Vegan'},
+        {key:'5', value:'Vegetatian'},
+        {key:'6', value:'Pescatarian'},
+  ]
+  return (
+    <MultipleSelectList
+        setSelected={(val) => setSelected(val)}
+        data={props.content}
+        save="value"
+        search={false}
+        arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
+        boxStyles={styles.titleBar}
+        inputStyles={styles.title}
+        dropdownStyles={styles.itemList}
+        dropdownItemStyles={styles.itemCell}
+        dropdownTextStyles={styles.itemText}
+        placeholder={props.title}
+        label={props.title}/>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    minHeight: 25,
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 330,
+    marginBottom: 0,
+    overflow: "hidden",
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.1,
+  },
+  title: {
+    fontSize: 15,
+    color: '#3F3C42',
+    alignItems: 'center',
+    textAlign: "left",
+    flex: 0.9,
+  },
+
+  itemList: {
+      //flexDirection: "row",
+      alignItems: "flex-start",
+      //justifyContent: "stretch",
+      borderWidth: 0,
+      borderTopRightRadius: 0,
+      borderTopLeftRadius: 0,
+      borderBottomRightRadius: 15,
+      borderBottomLeftRadius: 15,
+      backgroundColor: "#E3DEC9",
+      width: 330,
+  },
+  itemCell: {
+      maxHeight: 30,
+      flex: 1,
+      padding: 0,
+      paddingLeft: 10,
+  },
+  itemText: {
+      fontSize: 13,
+      textAlign: "left",
+      flex: 1,
+      padding: 5,
+      paddingLeft: 10,
+      color: "#3F3C42",
+  },
+});

LeftOvers/components/FoodElementText.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import Separator from '../components/Separator';
+import plus from '../assets/images/plus.png'; 
+import moins from '../assets/images/minus.png'; 
+
+
+
+interface foodElementImageProps {
+  source : string
+  title  : string
+}
+
+
+export default function FoodElementText(props : any) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.container}>
+        <View style={styles.view}>
+            <Text style={styles.text}>{props.title}</Text>
+            <Separator/>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 270,
+    height: 60,
+    borderRadius: 5,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    padding : 7,
+    color: 'black',
+  },
+  view: {
+
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    marginRight: 5 // Centre le contenu horizontalement
+  },
+  container: {
+    width :260,
+    height: 50,
+    borderRadius: 5,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'black',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});

LeftOvers/components/HeaderFlatList.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+
+type TitleProps = {
+    title: string
+}
+
+export default function ListTab(props: TitleProps) {
+  return (
+    <View style={styles.titleBar}>
+        <Text style={styles.title}>{props.title}</Text>
+        <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 330,
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.1,
+  },
+  title: {
+    fontSize: 12,
+    color: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'left',
+    textAlign: "left",
+    flex: 0.9,
+    padding: 5,
+  },
+});

LeftOvers/components/ListTab.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import ValidateButton from './ValidateButton';
+import HeaderFlatList from './HeaderFlatList';
+
+type ListProps = {
+    title: string
+    content : list<string>
+}
+
+type ItemProps = {value: string}
+
+const Item = ({value}: ItemProps) => (
+    <View style={styles.itemList}>
+        <Text style={styles.itemText}>{value}</Text>
+    </View>
+)
+
+export default function ListTab(props: ListProps) {
+  return (
+    <View style={styles.background}>
+        <View>
+            <FlatList data={props.content} renderItem={({item}) => <Item value={item.value}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#E3DEC9',
+    marginBottom: 20,
+  },
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 250,
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.5,
+  },
+  title: {
+    fontSize: 15,
+    color: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'left',
+    textAlign: "left",
+    flex: 0.5,
+    padding: 5,
+  },
+
+  itemList: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      justifyContent: "stretch",
+      width: 330,
+  },
+  itemText: {
+      fontSize: 13,
+      textAlign: "left",
+      flex: 1,
+      padding: 5,
+      paddingLeft: 10,
+      color: "#3F3C42",
+  },
+});

LeftOvers/components/Normalize.tsx

@@ -0,0 +1,17 @@
+import { Dimensions, Platform, PixelRatio } from 'react-native';
+
+const {
+  width: SCREEN_WIDTH,
+} = Dimensions.get('window');
+
+const scale = SCREEN_WIDTH / 480;
+
+// @ts-ignore
+export default function normalize(size) {
+  const newSize = size * scale
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize))
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 3
+  }
+}

LeftOvers/components/ParameterTopBar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Appbar } from 'react-native-paper';
+
+interface TopBarProps{
+    source : string
+    firstImage  : string
+    lastImage : string
+  }
+  
+  
+  export default function ParameterTopBar(props : any) {
+
+    const goFilter = () =>{
+        props.onEventFilter('Hello');
+    }
+
+    const goIngredients = () =>{
+        props.onEventIngredient('Hello');
+    }
+
+    return (
+        <Appbar.Header  style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} >
+            <Appbar.Action icon="magnify" onPress={goIngredients} />
+            <Appbar.Action icon="dots-vertical" onPress={goFilter} />
+      </Appbar.Header>
+    );
+  }

LeftOvers/components/ProfileModification.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
+import ValidateButton from './ValidateButton';
+import ListTab from './ListTab';
+import DietsTab from './DietsTab';
+import AllergiesTab from './AllergiesTab';
+
+type ProfileProps = {
+  name: string
+  avatar: string
+  diets: list<string>
+  allergies: list<string>
+}
+
+export default function ProfileModification(props: ProfileProps) {
+  return (
+    <View style={styles.background}>
+        <View style={styles.pseudoBar}>
+            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <TextInput style={styles.textInput} value={props.name}></TextInput>
+            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+        </View>
+        <View style={styles.filterBar}>
+            <Text style={styles.filters}>Filters</Text>
+            <Text style={styles.nbSelected}>3 selected</Text>
+        </View>
+        <DietsTab title="Diets" content={props.diets}></DietsTab>
+        <View style={{marginTop: 10}}/>
+        <AllergiesTab title="Allergies" content={props.allergies}></AllergiesTab>
+        <View style={{marginTop: 10}}/>
+        <ListTab title="Diets" content={props.diets}></ListTab>
+        <ListTab title="Allergies" content={props.allergies}></ListTab>
+        <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    width: 370,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#F2F0E4',
+    padding: 10,
+  },
+  pseudoBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 0.7,
+    width: 330,
+    marginBottom: 10,
+  },
+  avatar: {
+    padding: 20,
+    resizeMode: 'contain',
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    borderRadius: 45,
+  },
+  textInput: {
+    flex: 0.5,
+    fontSize: 15,
+    color: '#ACA279',
+    width : 150,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: '#ACA279',
+    alignItems: 'center',
+    justifyContent: 'left',
+    flex: 0.8,
+    marginLeft: 20,
+    padding: 5,
+  },
+  modify: {
+      height: 20,
+      width: 20,
+      tintColor: "#ACA279",
+      resizeMode: 'contain',
+      flex: 0.1,
+      marginLeft: 5,
+  },
+
+
+
+  filterBar: {
+      flexDirection: "row",
+      width: 300,
+      paddingTop: 10,
+      paddingBottom: 5,
+      alignItems: "flex-end",
+      justifyContent: "center",
+      flex: 0.2,
+  },
+  filters: {
+      flex: 0.5,
+      fontSize: 20,
+      color: '#ACA279',
+      flex: 1,
+      padding: 5,
+      paddingLeft: 0,
+      paddingBottom: 0,
+  },
+  nbSelected: {
+      fontSize: 11,
+      flex: 1,
+      color: "#3F3C42",
+      textAlign: "right",
+    }
+});

LeftOvers/components/RecipeElement.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image, SafeAreaView, ScrollView} from 'react-native';
+import brochette from '../assets/images/brochette.png'; 
+import Union_left from '../assets/images/Union_left.png';
+import Union_right from '../assets/images/Union_right.png';
+import background from '../assets/images/Background.png'; 
+
+interface recipeElementProps {
+  number : number
+  title  : string
+  description : string
+  imageList : string[]
+  image : string
+}
+
+export default function RecipeElement(props : any) {
+
+  const totalContentCount = props.imageList.length + 11;
+  const dynamicHeight = totalContentCount * 40;
+  const scrollViewHeight = 100;
+
+
+
+  return (
+    <Pressable style={[styles.button, { height: dynamicHeight }]}>
+      <View style={[styles.view, { height: dynamicHeight - 10}]}>
+        <Text style={styles.text}>{props.number}</Text>
+        <Text style={styles.title}>{props.title}</Text>
+        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
+          <View style={styles.horizontalAlignement}>
+            <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
+            <Text style={styles.text}>Ingredients</Text>
+            <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
+          </View>
+        
+        <View style={styles.horizontalAlignement}>
+          {props.imageList.length > 0 && props.imageList.map((source, index) => (
+          <Image key={index} source={source} style={{ width: 40, height: 40 }} />
+          ))}
+        </View>
+
+        
+        {props.imageList.length <= 0 ? (
+          <View style={styles.horizontalAlignement}>
+                  {props.textList.length > 0 && props.textList.map((source, index) => (
+                    <Text key={index} style={styles.smallText}>{source}</Text>
+                  ))}
+          </View>
+          ) : null}
+
+
+        <View style={styles.scrollViewContainer}>
+          <SafeAreaView>
+            <View style={styles.horizontalAlignement}>
+              <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
+              <Text style={styles.text}>Description</Text>
+              <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
+            </View>
+            <ScrollView style={{ marginTop: 5, height: scrollViewHeight }}>
+              <Text style={styles.smallText}>{props.description}</Text>
+            </ScrollView>
+          </SafeAreaView>
+        </View>
+
+        <Image source={background} style={{width: 210, height: 20, marginTop: dynamicHeight - 50, position: 'absolute'}}></Image>
+      </View>
+    </Pressable>
+  ); 
+}
+
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 300,
+    borderRadius: 40,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#756C28',
+    marginTop: 10,
+  },
+  smallText: {
+    fontSize: 12,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#71662A',
+    textAlign: "center",
+    margin : 5
+  },
+  title:{
+    fontSize: 18,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#524B1A',
+  },
+  view: {
+    width : 290,
+    borderRadius: 40,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  horizontalAlignement: {
+    display: "flex",
+    flexDirection : 'row',
+    alignItems: 'center', 
+    justifyContent: 'space-between',
+    marginTop : 5,
+    flexWrap: 'wrap',
+  },
+  scrollViewContainer: {
+    flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant
+  },
+});

LeftOvers/components/RecipeElementReduce.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import brochette from '../assets/images/brochette.png'; 
+import background from '../assets/images/Background.png'; 
+
+
+interface recipeElementReduceProps {
+  number : number
+  title  : string
+  image : string
+  duree : string
+}
+
+
+
+export default function RecipeElementReduce(props : any) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.number}</Text>
+        <Text style={styles.title}>{props.title}</Text>
+        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
+        <View style={{marginTop: 200, position: 'absolute'}}>
+            <Image source={background} style={{width: 210, height: 20}}></Image>
+            <Text style={styles.smallText}>{props.duree}</Text>
+        </View>
+      </View>
+    </Pressable>
+  ); 
+}
+
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 250,
+    height: 250,
+    borderRadius: 40,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#756C28',
+    marginTop: 10,
+  },
+  smallText: {
+    position: 'absolute', 
+    textAlign: 'center', 
+    left: 0, 
+    right: 0, 
+    marginHorizontal: 'auto', 
+    color: '#E3DEC9',
+
+  },
+  title:{
+    fontSize: 18,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#524B1A',
+  },
+  view: {
+    width : 240,
+    height: 240,
+    borderRadius: 40,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  horizontalAlignement: {
+    display: "flex",
+    flexDirection : 'row',
+    alignItems: 'center', 
+    marginTop: 10,
+  }
+});

LeftOvers/components/SelectedIngredient.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Pressable, Image, Text } from 'react-native';
+import bracketLeft from '../assets/images/angle_bracket_left.png';
+import bracketRight from '../assets/images/angle_bracket_right.png';
+import parameter from '../assets/images/parameter.png';
+import FoodElementText from './FoodElementText';
+
+interface SelectedIngredientProps {
+  listeIngredient: string[];
+  listeImage: string[];
+  onEvent: (value: string) => void;
+}
+
+export default function SelectedIngredient(props: SelectedIngredientProps) {
+  const [cpt, setCpt] = useState(0);
+
+  const decreaseCounter = () => {
+    if (cpt > 0) {
+      setCpt(cpt - 1);
+    } else {
+      setCpt(props.listeIngredient.length - 1);
+    }
+  };
+
+  const increaseCounter = () => {
+    if (cpt < props.listeIngredient.length - 1) {
+      setCpt(cpt + 1);
+    } else {
+      setCpt(0);
+    }
+  };
+
+  const handlePress = () => {
+    // Supposons que vous voulez envoyer la valeur 'Hello' au parent
+    props.onEvent('Hello');
+  };
+
+  return (
+    <View style={styles.view}>
+      <View id="Top" style={styles.horizontalAlignement}>
+        <Text style={styles.text}>Selected ingredients</Text>
+        <Pressable onPress={handlePress}>
+          <Image source={parameter} style={{ width: 15, height: 15 }} />
+        </Pressable>
+      </View>
+
+      <View id="IngredientList" style={styles.horizontalAlignement}>
+        <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
+          <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+        </Pressable>
+
+        <FoodElementText title={props.listeIngredient[cpt]} />
+
+        <Pressable onPress={increaseCounter} id="GoRight" style={{}}>
+          <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  view: {
+    width: 350,
+    height: 110,
+    borderRadius: 15,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: 'black',
+    display: 'flex',
+    flexWrap: 'wrap',
+    backgroundColor: '#E3DEC9',
+  },
+  horizontalAlignement: {
+    display: 'flex',
+    height: 30,
+    width: 350,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'black',
+  },
+});

LeftOvers/components/Separator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+
+export default function Separator (){
+    return <View style={styles.separator} />;
+};
+  
+  const styles = StyleSheet.create({
+    separator: {
+      width: 200, // Largeur de la ligne
+      backgroundColor: 'black', // Couleur de la ligne
+      borderWidth : 1,
+      marginLeft : 10,
+      marginRight : 10,
+    },
+  });
+  

LeftOvers/components/TopBar.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Appbar } from 'react-native-paper';
+
+interface TopBarProps{
+    title : string
+    isVisible : boolean
+  }
+  
+  
+  export default function TopBar(props) {
+
+    const _goBack = () => console.log('Went back');
+
+    const _handleSearch = () => console.log('Searching');
+
+    const _handleMore = () => console.log('Shown more');
+    return (
+        <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
+            <Appbar.BackAction onPress={_goBack} />
+            <Appbar.Content title={props.title} />
+
+            {props.isVisible &&(
+              <><Appbar.Action icon="magnify" onPress={_handleSearch} />
+              <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
+              </>
+            )}
+
+            
+      </Appbar.Header>
+    );
+  }

LeftOvers/components/ValidateButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {StyleSheet, Pressable, Text, View, Image} from 'react-native';
+
+
+type ValidateButtonProps = {
+  title: string
+  image: string
+  colour: string
+  backColour: string
+}
+
+export default function ValidateButton(props: ValidateButtonProps) {
+  return (
+    <Pressable style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,}}>
+        <View style={{
+            borderRadius: 30,
+            borderWidth: 2,
+            borderColor: props.colour,
+            backgroundColor: props.backColour,
+            alignItems: 'center',
+            flexDirection: "row",
+            padding: 5,
+            paddingRight: 10,}}>
+            <Image source={require('../assets/images/'+props.image)} style={{
+                height: 20,
+                width: 20,
+                marginLeft: 5,
+                marginRight: 10,
+                resizeMode: "center",
+                tintColor: props.colour,}}>
+            </Image>
+            <Text style={{
+                fontSize: 20,
+                color: props.colour,
+            }}>{props.title}</Text>
+        </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    //width : 150,
+    //height: 35,
+    borderRadius: 20,
+    backgroundColor: '#F2F0E4',
+  },
+  text: {
+    fontSize: 20,
+    color: '#ACA279',
+    paddingLeft: 15,
+    flex: 0.7,
+  },
+  view: {
+    //width: 150,
+    //height: 35,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: '#ACA279',
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: "row",
+    paddingLeft: 25,
+    paddingRight: 30,
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+  image:{
+    height: 20,
+    width: 20,
+    flex: 0.3,
+    resizeMode: "center",
+    tintColor: "#ACA279",
+  },
+});

LeftOvers/package-lock.json

@@ -9,13 +9,20 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/webpack-config": "^19.0.0",
+        "@types/react": "~18.2.14",
         "expo": "~49.0.15",
+        "expo-linear-gradient": "~12.3.0",
         "expo-splash-screen": "~0.20.5",
         "expo-status-bar": "~1.6.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
-        "react-native-web": "~0.19.6"
+        "react-native-dropdown-select-list": "^2.0.5",
+        "react-native-paper": "^5.11.1",
+        "react-native-safe-area-context": "^4.7.4",
+        "react-native-splash-screen": "^3.3.0",
+        "react-native-web": "~0.19.6",
+        "typescript": "^5.1.3"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0"
@@ -1965,6 +1972,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -6144,6 +6171,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.10",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
+      "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A=="
+    },
     "node_modules/@types/qs": {
       "version": "6.9.9",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
@@ -6154,11 +6186,26 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.6.tgz",
       "integrity": "sha512-+0autS93xyXizIYiyL02FCY8N+KkKPhILhcUSA276HxzreZ16kl+cmwvV2qAM/PuCCwPXzOXOWhiPcw20uSFcA=="
     },
+    "node_modules/@types/react": {
+      "version": "18.2.36",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.36.tgz",
+      "integrity": "sha512-o9XFsHYLLZ4+sb9CWUYwHqFVoG61SesydF353vFMMsQziiyRu8np4n2OYMUSDZ8XuImxDr9c5tR7gidlH29Vnw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.5",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
+      "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw=="
+    },
     "node_modules/@types/send": {
       "version": "0.17.3",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.3.tgz",
@@ -7650,6 +7697,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7663,6 +7719,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -8376,6 +8441,11 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/dag-map": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz",
@@ -9021,6 +9091,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-linear-gradient": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.3.0.tgz",
+      "integrity": "sha512-f9e+Oxe5z7fNQarTBZXilMyswlkbYWQHONVfq8MqmiEnW3h9XsxxmVJLG8uVQSQPUsbW+x1UUT/tnU6mkMWeLg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.5.1.tgz",
@@ -10088,6 +10166,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -14762,6 +14853,110 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-dropdown-select-list": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
+      "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
+    },
+    "node_modules/react-native-paper": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.11.1.tgz",
+      "integrity": "sha512-axqRTagGL8LtuYh172cx2Q2THOVJ3PTpPjCKhL5ECRdpJs2ceiboVecSiOIBuO3H7dVpaneptBA0vJr9HeVHwg==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz",
+      "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-splash-screen": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
+      "integrity": "sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==",
+      "peerDependencies": {
+        "react-native": ">=0.57.0"
+      }
+    },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.2.tgz",
+      "integrity": "sha512-ZwhUkJhIMkGL3cW7IT4sEEHu2AOzerqsRQ73UzXsB+ecBpVK5bRmp0XswiQleZKZalZfs/WIfWLXLfTQHcQo6A==",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -15483,6 +15678,19 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -16322,6 +16530,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "1.0.37",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
@@ -16517,6 +16737,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

LeftOvers/package.json

@@ -9,14 +9,21 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/webpack-config": "^19.0.0",
+    "@types/react": "~18.2.14",
     "expo": "~49.0.15",
+    "expo-linear-gradient": "~12.3.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-dropdown-select-list": "^2.0.5",
+    "react-native-paper": "^5.11.1",
+    "react-native-safe-area-context": "^4.7.4",
+    "react-native-splash-screen": "^3.3.0",
     "react-native-web": "~0.19.6",
-    "react-dom": "18.2.0",
+    "typescript": "^5.1.3"
-    "@expo/webpack-config": "^19.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

LeftOvers/react-app-env.d.tsx

@@ -0,0 +1,4 @@
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";

LeftOvers/screens/IngredientSelection.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { View, StyleSheet, Text, Image, Pressable,ScrollView} 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';
+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(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" />
+          <View style={styles.page}>
+
+            <View style={styles.element}>
+              <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
+                <Pressable>
+                    <Image source={meat} style={{ width: 30, height: 30 }} />
+                </Pressable>
+                <Pressable>
+                    <Image source={vegetable} style={{ width: 30, height: 30 }} />
+                </Pressable>
+                <Pressable>
+                    <Image source={fruit} style={{ width: 30, height: 30 }} />
+                </Pressable>
+              </View>
+              <View>
+              <Searchbar
+                  placeholder="Search"
+                  onChangeText={onChangeSearch}
+                  value={searchQuery} 
+                  style={{margin: 10, 
+                          backgroundColor: '#F2F0E4', 
+                          borderWidth : 1,
+                          borderColor: "#ACA279", 
+                          borderRadius: 15,
+                          height: 50,
+                          }}/>
+              </View>
+              <View style={{ flex: 1}} >
+                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
+                      {props.listIngredient.map((source, index) => (
+                        <AvailaibleItem key={index} value={source}></AvailaibleItem>
+                      ))}
+                </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>
+                
+                <View style={{ height: 5 }}></View>
+
+                <View style={{ flex: 1}} > 
+                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
+                      {props.listIngredient.map((source, index) => (
+                        <ChooseItem key={index} value={source}></ChooseItem>
+                      ))}
+                </ScrollView>
+              </View>
+              <View style={{ height: 20 }}></View>
+            </View>
+
+            <View style={{ height: 15 }}></View>
+            <CustomButton title="Find a recipe"/>                
+          </View>
+        </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    backgroundColor: '#59BDCD',
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 20,
+  },
+  element: {
+    backgroundColor:'#F2F0E4', 
+    borderRadius: 30,
+  },
+  horizontalAlignement: {
+    display: 'flex',
+    height: 30,
+    width: 350,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 15,
+  }
+});

LeftOvers/screens/RecipeDetails.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View, StyleSheet, Text} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import TopBar from '../components/TopBar';
+import RecipeElementReduce from '../components/RecipeElementReduce';
+import AllergiesTab from '../components/AllergiesTab';
+
+
+export default function RecipeDetails(props) {
+    return (
+        <SafeAreaProvider>
+          <TopBar title="Recipe Detail"/>
+          <View style={styles.page}>
+            <RecipeElementReduce 
+                title={props.title} 
+                number={props.number}
+                duree={props.duree}/>
+
+            <View style={{height: 20}}></View>
+
+            <View style={styles.element}>
+              <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
+                    <Text style={{fontSize: 20, color: '#ACA279'}}>Preparation</Text>
+              </View>
+              <View style={{margin: 20}}>
+                <AllergiesTab title="Ingredient" content={props.ingredient}></AllergiesTab>
+                <View style={{height: 5}}></View>
+                <AllergiesTab title="Ustensils" content={props.ustensils}></AllergiesTab>
+              </View>
+            </View >
+
+            <View style={{height: 20}}></View>
+                
+            <View style={styles.element}>
+              <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
+                  <Text style={{fontSize: 20, color: '#ACA279'}}>Cooking</Text>
+              </View>
+              <View style={{margin: 20}}>
+                <AllergiesTab title="Steps" content={props.steps}></AllergiesTab>
+              </View>
+            </View>
+            
+          </View>
+        </SafeAreaProvider>
+      );
+    }
+    
+    const styles = StyleSheet.create({
+      page: {
+        flex: 1,
+        backgroundColor: '#59BDCD',
+        alignItems: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: 20,
+      },
+      element: {
+        backgroundColor:'#F2F0E4', 
+        borderRadius: 30,
+      },
+      horizontalAlignement: {
+        display: 'flex',
+        height: 30,
+        width: 350,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        marginTop: 10,
+      }
+    });
+    

LeftOvers/screens/RecipeSuggestion.tsx

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Text, Image, Pressable} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Modal, Portal, PaperProvider} from 'react-native-paper';
+import TopBar from '../components/TopBar';
+import RecipeElement from '../components/RecipeElement';
+import SelectedIngredient from '../components/SelectedIngredient';
+import FoodElementText from '../components/FoodElementText';
+import brochette from '../assets/images/brochette.png'; 
+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';
+
+
+export default function RecipeSuggestion(props) {
+
+  const imageList = [];
+  const [visible, setVisible] = React.useState(false);
+  const [visibleFilters, setVisibleFilters] = React.useState(false);
+  const [visibleIngredients, setVisibleIngredients] = React.useState(true);
+  const [minCpt, setMinCpt] = useState(0);
+  const [maxCpt, setMaxCpt] = useState(4);
+  const listeIngredient = props.list;
+  const limitedList = listeIngredient.slice(minCpt, maxCpt);
+  const showModal = () => setVisible(true);
+  const hideModal = () => setVisible(false);
+  const containerStyle = {
+    backgroundColor: 'white',
+    height: 450,
+    width: 380,
+  };
+  
+  const handleChildEvent = (value) => {
+   setVisible(!visible)
+  };
+
+  const handleChildEventGoFilters = (value) => {
+    setVisibleIngredients(false);
+    setVisibleFilters(true);
+  }
+
+  const handleChildEventGoIngredients = (value) => {
+      setVisibleFilters(false);
+      setVisibleIngredients(true);
+      console.log("jai change pour iingredient");
+  }
+
+  const decreaseCounter = () => {
+    if (minCpt > 0) {
+      setMinCpt(minCpt - 4);
+      setMaxCpt(maxCpt - 4)
+    } 
+  };
+
+  const increaseCounter = () => {
+    if (maxCpt < listeIngredient.length) {
+      setMinCpt(minCpt + 4);
+      setMaxCpt(maxCpt + 4)
+    } 
+  };
+
+  const imageElements = limitedList.map((source, index) => (
+      <View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
+        <FoodElementText key={index} title={source} />
+        <Image source={brochette} style={{ width: 20, height: 20 }} />
+        <Image source={brochette} style={{ width: 20, height: 20 }} />
+      </View>
+  ));
+
+  return (
+    <SafeAreaProvider>
+      <TopBar title="Recipes" isVisible="true"/>
+      <View style={styles.page}>
+        <SelectedIngredient 
+          listeIngredient={props.list} 
+          listeImage={imageList} 
+          onEvent={handleChildEvent} 
+        />
+        <View style={{ marginTop: 100 }}>
+          <RecipeElement
+            number="13"
+            title="Pizza with Pineapples"
+            imageList={imageList}
+            textList={props.list}
+            description="delicious plate that will please you"
+            style={styles.element}
+          />
+        </View>
+      </View>
+      <View style={styles.modal}>
+            <PaperProvider>
+                <Portal>
+                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
+                        <ParameterTopBar  onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
+
+                        {visibleIngredients && (
+                        <View style={[styles.page, { justifyContent: 'space-between' }]}>   
+                                    {imageElements}
+                                    <View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
+                                        <Pressable onPress={decreaseCounter} id="GoLeft" >
+                                          <Image source={bracketLeft} style={{ width: 20, height: 20 }} />
+                                        </Pressable>
+
+                                        <Pressable onPress={increaseCounter} id="GoRight">
+                                          <Image source={bracketRight} style={{ width: 20, height: 20 }} />
+                                        </Pressable>
+                                      </View>
+
+                                      <View>
+                                          <CustomButton title="Save"></CustomButton>
+                                      </View>
+                        </View>
+                        )} 
+
+                        {visibleFilters &&(
+                           <View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}>
+
+                            <View style={{backgroundColor: '#F2F0E4', zIndex: 2}}>
+                              <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 20}]}>
+                                  <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+                              </View>
+                              <View style={{alignContent: 'center', justifyContent: 'space-between', margin: 10}}>
+                                <DietsTab title="Diets" content={props.diets}></DietsTab>
+                                <View style={{height: 5}}></View>
+                                <DietsTab title="Allergy" content={props.allergy}></DietsTab>
+                              </View>
+                              
+                            </View>
+                              <View style={{zIndex: 1, position: 'absolute', marginTop: 300}} >
+                                  <CustomButton title="Save"></CustomButton>
+                              </View>
+                          </View>
+
+
+                        )}
+
+
+                    </Modal>
+                </Portal>
+            </PaperProvider>
+        </View>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    backgroundColor: '#59BDCD',
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 20,
+  },
+  element: {
+    marginTop: 20,
+  },
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modal :{
+    position: 'absolute',
+    top: '50%', // Centre verticalement
+    left: '50%', // Centre horizontalement
+    transform: [{ translateX: -185 }, { translateY: -90 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
+  },
+  horizontalAlignement: {
+    display: 'flex',
+    height: 30,
+    width: 350,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 10,
+  }
+});

LeftOvers/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}

README.md

@@ -24,7 +24,7 @@ La racine de notre repo est composée de deux dossiers essentiels au projet:
 
 [**Images**](Images) : **Images de l'application**
 
-👉 [**Solution de l'application**](LeftOvers/App.js)
+👉 [**Solution de l'application**](LeftOvers/App.tsx)
 
 # Fonctionnement
 
@@ -51,7 +51,6 @@ Technologies utilisées :
   ![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
   ![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
   ![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white)
-  ![Android Studio](https://img.shields.io/badge/Android_Studio-3DDC84?style=for-the-badge&logo=android-studio&logoColor=white)
 
 </div>
 

package.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "@eva-design/eva": "^2.2.0",
+    "@ui-kitten/components": "^5.3.1",
+    "expo": "^49.0.17",
+    "react-native-svg": "^13.14.0",
+    "typescript": "^5.1.3",
+    "@types/react": "~18.2.14",
+    "react-native-web": "~0.19.6",
+    "react-dom": "18.2.0",
+    "@expo/webpack-config": "^19.0.0"
+  }
+}