commit
75bc1a6bd9
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
export default class Profil {
|
||||||
|
private _id: number;
|
||||||
|
private _name: string;
|
||||||
|
private _allergy: string[];
|
||||||
|
private _diets: string[];
|
||||||
|
|
||||||
|
constructor(id: number, name: string) {
|
||||||
|
this._id = id;
|
||||||
|
this._name = name;
|
||||||
|
}
|
||||||
|
|
||||||
|
get name(): string {
|
||||||
|
return this._name;
|
||||||
|
}
|
||||||
|
|
||||||
|
get id(): number{
|
||||||
|
return this._id;
|
||||||
|
}
|
||||||
|
|
||||||
|
get allergy(): string[]{
|
||||||
|
return this._allergy;
|
||||||
|
}
|
||||||
|
|
||||||
|
get diets(): string[]{
|
||||||
|
return this._diets;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import Ingredient from "./Ingredient";
|
||||||
|
|
||||||
|
export default class Recipes {
|
||||||
|
private _id: number;
|
||||||
|
private _name: string;
|
||||||
|
private _description: string;
|
||||||
|
private _time_to_cook: number;
|
||||||
|
private _steps: string[];
|
||||||
|
private _ingredients: Ingredient[];
|
||||||
|
|
||||||
|
constructor(id: number, name: string, description: string, time_to_cook: number, steps: string[], ingredients: Ingredient[]) {
|
||||||
|
this._id = id;
|
||||||
|
this._name = name;
|
||||||
|
this._description = description;
|
||||||
|
this._time_to_cook = time_to_cook;
|
||||||
|
this._steps = steps;
|
||||||
|
this._ingredients = ingredients;
|
||||||
|
}
|
||||||
|
|
||||||
|
get name(): string {
|
||||||
|
return this._name;
|
||||||
|
}
|
||||||
|
|
||||||
|
get id(): number{
|
||||||
|
return this._id;
|
||||||
|
}
|
||||||
|
|
||||||
|
get description(): string{
|
||||||
|
return this._description;
|
||||||
|
}
|
||||||
|
|
||||||
|
get time_to_cook(): number{
|
||||||
|
return this._time_to_cook;
|
||||||
|
}
|
||||||
|
|
||||||
|
get steps(): string[]{
|
||||||
|
return this._steps;
|
||||||
|
}
|
||||||
|
|
||||||
|
get ingredients(): Ingredient[]{
|
||||||
|
return this._ingredients;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
static convertApiResponse(apiResponse: string): Recipes[] {
|
||||||
|
const parsedResponses = JSON.parse(apiResponse);
|
||||||
|
return parsedResponses.map((item: any) => new Recipes(item.id, item.name, item.description, item.time_to_cook, item.steps, item.ingredient));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import Ingredient from "../../Models/Ingredient";
|
||||||
|
|
||||||
|
export default interface IIngredientService {
|
||||||
|
getAllIngredient(): Promise<Ingredient[]>;
|
||||||
|
getIngredientById(id: Number): Promise<Ingredient | null>;
|
||||||
|
getIngredientByLetter(id: String): Promise<Ingredient[]>;
|
||||||
|
getfilteredIngredient(prompt: String): Promise<Ingredient[]>;
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import Ingredient from "../../Models/Ingredient";
|
||||||
|
import IIngredientService from "./IIngredientService";
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export default class IngredientService implements IIngredientService {
|
||||||
|
private readonly API_URL = "http://localhost:3000/ingredients";
|
||||||
|
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
async getAllIngredient(): Promise<Ingredient[]> {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(this.API_URL);
|
||||||
|
return response.data as Ingredient[];
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async getIngredientById(id: Number): Promise<Ingredient | null>{
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${this.API_URL}/${id}`);
|
||||||
|
return response.data as Ingredient;
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getIngredientByLetter(letter: String): Promise<any>{
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${this.API_URL}/letter/${letter}`);
|
||||||
|
return response.data as Ingredient[];
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getfilteredIngredient(prompt: String): Promise<Ingredient[]> {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${this.API_URL}/filter/${prompt}`);
|
||||||
|
return response.data as Ingredient[];
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import Recipes from "../../Models/Recipes";
|
||||||
|
|
||||||
|
export default interface IRecipesService {
|
||||||
|
getAllRecipes(): Promise<Recipes[]>;
|
||||||
|
getRecipeById(id: Number): Promise<Recipes | null>;
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import IRecipesService from "./IRecipesServices";
|
||||||
|
import Recipes from "../../Models/Recipes";
|
||||||
|
|
||||||
|
export default class RecipesService implements IRecipesService {
|
||||||
|
private readonly API_URL = "http://localhost:3000/recipes";
|
||||||
|
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
async getAllRecipes(): Promise<Recipes[]> {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(this.API_URL);
|
||||||
|
return response.data as Recipes[];
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async getRecipeById(id: Number): Promise<Recipes | null>{
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${this.API_URL}/${id}`);
|
||||||
|
console.log(response);
|
||||||
|
return response.data as Recipes;
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,130 +1,204 @@
|
|||||||
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, ActivityIndicator, FlatList } from 'react-native';
|
||||||
import {SafeAreaProvider} from 'react-native-safe-area-context';
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||||
import {Searchbar} from 'react-native-paper';
|
import { Searchbar } from 'react-native-paper';
|
||||||
|
|
||||||
import FoodElementText from '../components/FoodElementText';
|
import FoodElementText from '../components/FoodElementText';
|
||||||
import CustomButton from '../components/CustomButton';
|
import CustomButton from '../components/CustomButton';
|
||||||
|
import Ingredient from '../Models/Ingredient';
|
||||||
|
import IngredientService from '../Services/Ingredients/IngredientsServices';
|
||||||
|
|
||||||
import plus from '../assets/images/plus.png';
|
import plus from '../assets/images/plus.png';
|
||||||
import moins from '../assets/images/minus.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) {
|
export default function IngredientSelection(props) {
|
||||||
const [searchQuery, setSearchQuery] = React.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"];
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const onChangeSearch = query => setSearchQuery(query);
|
const [error, setError] = useState();
|
||||||
|
const [response, setResponse] = useState<Ingredient[] | undefined>(undefined);
|
||||||
type ItemProps = {value: string}
|
const [selectedIngredients, setSelectedIngredients] = useState([]);
|
||||||
|
const ingredientService = new IngredientService();
|
||||||
const AvailaibleItem = ({value}: ItemProps) => (
|
|
||||||
<>
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
<View style={styles.horizontalAlignement}>
|
|
||||||
<FoodElementText title={value} />
|
const filterIngredients = async (query) => {
|
||||||
<Pressable>
|
try {
|
||||||
<Image source={plus} style={{ width: 20, height: 20 }} />
|
setIsLoading(true);
|
||||||
</Pressable>
|
if (query === '') {
|
||||||
</View><View style={{ height: 30 }}></View>
|
// Si le query (prompt) est vide, charger tous les ingrédients
|
||||||
</>
|
loadIngredients();
|
||||||
)
|
} else {
|
||||||
|
const filtered = await ingredientService.getfilteredIngredient(query);
|
||||||
const ChooseItem = ({value}: ItemProps) => (
|
setResponse(filtered);
|
||||||
<>
|
}
|
||||||
<View style={styles.horizontalAlignement}>
|
} catch (error) {
|
||||||
<FoodElementText title={value} />
|
setError(error);
|
||||||
<Pressable>
|
} finally {
|
||||||
<Image source={moins} style={{ width: 20, height: 20 }} />
|
setIsLoading(false);
|
||||||
</Pressable>
|
}
|
||||||
</View><View style={{ height: 30 }}></View>
|
};
|
||||||
</>
|
|
||||||
)
|
// Appelée à chaque changement de la recherche
|
||||||
|
const handleSearch = (query) => {
|
||||||
|
setSearchQuery(query);
|
||||||
const styles = StyleSheet.create({
|
filterIngredients(query);
|
||||||
page: {
|
};
|
||||||
flex: 1,
|
|
||||||
backgroundColor: '#59BDCD',
|
|
||||||
alignItems: 'center',
|
const loadIngredients = async () => {
|
||||||
display: 'flex',
|
try {
|
||||||
flexWrap: 'wrap',
|
const ingredients = await ingredientService.getAllIngredient();
|
||||||
padding: 20,
|
setResponse(ingredients);
|
||||||
},
|
} catch (error) {
|
||||||
element: {
|
setError(error);
|
||||||
backgroundColor:'#F2F0E4',
|
} finally {
|
||||||
borderRadius: 30,
|
setIsLoading(false);
|
||||||
},
|
}
|
||||||
horizontalAlignement: {
|
};
|
||||||
display: 'flex',
|
|
||||||
height: 30,
|
useEffect(() => {
|
||||||
width: 350,
|
loadIngredients();
|
||||||
flexDirection: 'row',
|
}, []);
|
||||||
justifyContent: 'space-around',
|
|
||||||
alignItems: 'center',
|
const AvailableItem = ({ value }: { value: Ingredient }) => (
|
||||||
marginTop: 15,
|
<>
|
||||||
}
|
<View style={styles.horizontalAlignement}>
|
||||||
});
|
<FoodElementText title={value.name} />
|
||||||
|
<Pressable onPress={() => SelectIngredient(value)}>
|
||||||
return (
|
<Image source={plus} style={{ width: 20, height: 20 }} />
|
||||||
<SafeAreaProvider>
|
</Pressable>
|
||||||
<View style={styles.page}>
|
</View>
|
||||||
<View style={styles.element}>
|
<View style={{ height: 30 }}></View>
|
||||||
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
|
</>
|
||||||
<Pressable>
|
);
|
||||||
<Image source={meat} style={{ width: 30, height: 30 }} />
|
|
||||||
</Pressable>
|
const ChooseItem = ({ value }: { value: Ingredient }) => (
|
||||||
<Pressable>
|
<>
|
||||||
<Image source={vegetable} style={{ width: 30, height: 30 }} />
|
<View style={styles.horizontalAlignement}>
|
||||||
</Pressable>
|
<FoodElementText title={value.name} />
|
||||||
<Pressable>
|
<Pressable onPress={() => RemoveIngredient(value.id)}>
|
||||||
<Image source={fruit} style={{ width: 30, height: 30 }} />
|
<Image source={moins} style={{ width: 20, height: 20 }} />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
<View>
|
<View style={{ height: 30 }}></View>
|
||||||
<Searchbar
|
</>
|
||||||
placeholder="Search"
|
);
|
||||||
onChangeText={onChangeSearch}
|
|
||||||
value={searchQuery}
|
const SelectIngredient = (newIngredient: Ingredient) => {
|
||||||
style={{margin: 10,
|
const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
|
||||||
backgroundColor: '#F2F0E4',
|
|
||||||
borderWidth : 1,
|
if (!exists) {
|
||||||
borderColor: "#ACA279",
|
setSelectedIngredients([...selectedIngredients, newIngredient]);
|
||||||
borderRadius: 15,
|
}
|
||||||
height: 50,
|
};
|
||||||
}}/>
|
|
||||||
</View>
|
const RemoveIngredient = (idIngredient: number) => {
|
||||||
<View style={{ flex: 1}} >
|
const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
|
||||||
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
|
setSelectedIngredients(updatedIngredients);
|
||||||
{props.listIngredient.map((source, index) => (
|
};
|
||||||
<AvailaibleItem key={index} value={source}></AvailaibleItem>
|
|
||||||
))}
|
const handleLetterPress = async (letter: string) => {
|
||||||
</ScrollView>
|
try {
|
||||||
</View>
|
const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
|
||||||
<View style={{ height: 20 }}></View>
|
setResponse(ingredientsByLetter);
|
||||||
</View>
|
} catch (error) {
|
||||||
|
setError(error);
|
||||||
<View style={[styles.element, {marginTop: 40}]}>
|
} finally {
|
||||||
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
|
setIsLoading(false);
|
||||||
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
|
}
|
||||||
</View>
|
};
|
||||||
|
|
||||||
<View style={{ height: 5 }}></View>
|
return (
|
||||||
|
<SafeAreaProvider>
|
||||||
<View style={{ flex: 1}} >
|
<View style={styles.page}>
|
||||||
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
|
<View style={styles.element}>
|
||||||
{props.listIngredient.map((source, index) => (
|
|
||||||
<ChooseItem key={index} value={source}></ChooseItem>
|
<View style={[styles.horizontalAlignement, { margin: 10 }]}>
|
||||||
))}
|
{alphabetArray.map((source, index) => (
|
||||||
</ScrollView>
|
<Pressable key={index} onPress={() => handleLetterPress(source)}>
|
||||||
</View>
|
<Text style={{ color: "blue" }}>{source}</Text>
|
||||||
<View style={{ height: 20 }}></View>
|
</Pressable>
|
||||||
</View>
|
))}
|
||||||
|
</View>
|
||||||
<View style={{ height: 15 }}></View>
|
|
||||||
<CustomButton title="Find a recipe" />
|
<View>
|
||||||
</View>
|
<Searchbar
|
||||||
</SafeAreaProvider>
|
placeholder="Rechercher"
|
||||||
);
|
onChangeText={handleSearch}
|
||||||
|
value={searchQuery}
|
||||||
|
style={{
|
||||||
|
margin: 10,
|
||||||
|
backgroundColor: '#F2F0E4',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#ACA279",
|
||||||
|
borderRadius: 15,
|
||||||
|
height: 50,
|
||||||
|
}} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{ alignItems: 'center', height: 300}}>
|
||||||
|
<FlatList
|
||||||
|
data={response ? response : []}
|
||||||
|
renderItem={({ item }) => (
|
||||||
|
<AvailableItem value={item} />
|
||||||
|
)}
|
||||||
|
keyExtractor={(item, index) => index.toString()}
|
||||||
|
ListEmptyComponent={() => (
|
||||||
|
isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
|
||||||
|
)}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
/>
|
||||||
|
</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' }}>Selected</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ height: 5 }}></View>
|
||||||
|
|
||||||
|
<View style={{ alignItems: 'center', maxHeight: 200}}>
|
||||||
|
<FlatList
|
||||||
|
data={selectedIngredients}
|
||||||
|
renderItem={({ item }) => (
|
||||||
|
<ChooseItem value={item} />
|
||||||
|
)}
|
||||||
|
keyExtractor={(item, index) => index.toString()}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
/>
|
||||||
|
</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,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue