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 {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
|
||||
import {SafeAreaProvider} from 'react-native-safe-area-context';
|
||||
import {Searchbar} from 'react-native-paper';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList } from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import { Searchbar } from 'react-native-paper';
|
||||
|
||||
import FoodElementText from '../components/FoodElementText';
|
||||
import CustomButton from '../components/CustomButton';
|
||||
import Ingredient from '../Models/Ingredient';
|
||||
import IngredientService from '../Services/Ingredients/IngredientsServices';
|
||||
|
||||
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>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
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,
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<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 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 [error, setError] = useState();
|
||||
const [response, setResponse] = useState<Ingredient[] | undefined>(undefined);
|
||||
const [selectedIngredients, setSelectedIngredients] = useState([]);
|
||||
const ingredientService = new IngredientService();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const filterIngredients = async (query) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
if (query === '') {
|
||||
// Si le query (prompt) est vide, charger tous les ingrédients
|
||||
loadIngredients();
|
||||
} else {
|
||||
const filtered = await ingredientService.getfilteredIngredient(query);
|
||||
setResponse(filtered);
|
||||
}
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Appelée à chaque changement de la recherche
|
||||
const handleSearch = (query) => {
|
||||
setSearchQuery(query);
|
||||
filterIngredients(query);
|
||||
};
|
||||
|
||||
|
||||
const loadIngredients = async () => {
|
||||
try {
|
||||
const ingredients = await ingredientService.getAllIngredient();
|
||||
setResponse(ingredients);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadIngredients();
|
||||
}, []);
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
|
||||
const ChooseItem = ({ value }: { value: Ingredient }) => (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
||||
const SelectIngredient = (newIngredient: Ingredient) => {
|
||||
const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
|
||||
|
||||
if (!exists) {
|
||||
setSelectedIngredients([...selectedIngredients, newIngredient]);
|
||||
}
|
||||
};
|
||||
|
||||
const RemoveIngredient = (idIngredient: number) => {
|
||||
const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
|
||||
setSelectedIngredients(updatedIngredients);
|
||||
};
|
||||
|
||||
const handleLetterPress = async (letter: string) => {
|
||||
try {
|
||||
const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
|
||||
setResponse(ingredientsByLetter);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<View style={styles.page}>
|
||||
<View style={styles.element}>
|
||||
|
||||
<View style={[styles.horizontalAlignement, { margin: 10 }]}>
|
||||
{alphabetArray.map((source, index) => (
|
||||
<Pressable key={index} onPress={() => handleLetterPress(source)}>
|
||||
<Text style={{ color: "blue" }}>{source}</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Searchbar
|
||||
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