From 1b1cf41a19bd502672e96400a8e01c6d5e9ad5ba Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Wed, 22 Nov 2023 15:20:03 +0100 Subject: [PATCH] link API with application, create modele and services --- LeftOvers/Models/Ingredient.tsx | 23 ++++ LeftOvers/Models/Recipes.tsx | 0 LeftOvers/Services/IngredientsServices.tsx | 0 LeftOvers/screens/HomePage.tsx | 5 +- LeftOvers/screens/IngredientSelection.tsx | 153 ++++++++++++++++----- LeftOvers/screens/Profiles.tsx | 11 +- LeftOvers/screens/RecipeSuggestion.tsx | 4 +- 7 files changed, 145 insertions(+), 51 deletions(-) create mode 100644 LeftOvers/Models/Ingredient.tsx create mode 100644 LeftOvers/Models/Recipes.tsx create mode 100644 LeftOvers/Services/IngredientsServices.tsx diff --git a/LeftOvers/Models/Ingredient.tsx b/LeftOvers/Models/Ingredient.tsx new file mode 100644 index 0000000..2a898c9 --- /dev/null +++ b/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)); + } + } diff --git a/LeftOvers/Models/Recipes.tsx b/LeftOvers/Models/Recipes.tsx new file mode 100644 index 0000000..e69de29 diff --git a/LeftOvers/Services/IngredientsServices.tsx b/LeftOvers/Services/IngredientsServices.tsx new file mode 100644 index 0000000..e69de29 diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx index dcf7ce7..7441c1e 100644 --- a/LeftOvers/screens/HomePage.tsx +++ b/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, diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx index 5ddc0bd..224bf47 100644 --- a/LeftOvers/screens/IngredientSelection.tsx +++ b/LeftOvers/screens/IngredientSelection.tsx @@ -1,9 +1,8 @@ -import React from 'react'; -import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native'; +import React, { useEffect, useState } from 'react'; +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 = ["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 = []; + - const onChangeSearch = query => setSearchQuery(query); +// 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); + } + ); + }, []); - type ItemProps = {value: string} +// Pour + const getContent = () => { + + if (isLoading) { + return ; + } - const AvailaibleItem = ({value}: ItemProps) => ( - <> - - - - - -) + if (error) { + console.log('Erreur ici' + error); + return Ca marche Pos; + } + + if (response) { + try { + instancesArray = Ingredient.convertApiResponse(JSON.stringify(response)); + + return instancesArray.map((ingredient, index) => ( + + )); + } catch (error) { + console.error("Erreur de conversion de la réponse en instances d'Ingredient:", error); + return Erreur lors du traitement des données; + } + } + }; + +// Ingredients disponible + const AvailableItem = ({ value }: { value: Ingredient }) => ( + <> + + + SelectIngredient(value)}> + + + + + + ); + +// Ingredient choisi par l'utilisateur + const ChooseItem = ({ value }: { value: { id: number; name: string } }) => ( + <> + + + RemoveIngredient(value.id)}> + + + + + + ); + + 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); +} -const ChooseItem = ({value}: ItemProps) => ( - <> - - - - - -) return ( + - @@ -58,22 +135,21 @@ const ChooseItem = ({value}: ItemProps) => ( setSearchValue(query)} + value={searchValue} style={{margin: 10, - backgroundColor: '#F2F0E4', - borderWidth : 1, - borderColor: "#ACA279", - borderRadius: 15, - height: 50, - }}/> + backgroundColor: '#F2F0E4', + borderWidth : 1, + borderColor: "#ACA279", + borderRadius: 15, + height: 50, + }}/> + - {props.listIngredient.map((source, index) => ( - - ))} + {getContent()} @@ -88,7 +164,7 @@ const ChooseItem = ({value}: ItemProps) => ( - {props.listIngredient.map((source, index) => ( + {SelectedIngredient.map((source, index) => ( ))} @@ -98,8 +174,9 @@ const ChooseItem = ({value}: ItemProps) => ( - - + + + ); } diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index 0f2e83e..85475e0 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/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 [opacity, setOpacity] = useState(1); + const [visible, setVisible] = React.useState(false); + 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", diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index eebd752..46626d7 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/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',