From 0728523c621c712205d5a183a19648946dcb36da Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Wed, 15 Nov 2023 10:10:11 +0100 Subject: [PATCH] finish page recipe details, some details to change like images and button on other pages but they are finished --- LeftOvers/App.tsx | 43 +++++- LeftOvers/package-lock.json | 165 ++++++++++++++++++++++ LeftOvers/package.json | 2 + LeftOvers/screens/IngredientSelection.tsx | 2 +- LeftOvers/screens/RecipeDetails.tsx | 31 +++- LeftOvers/screens/RecipeSuggestion.tsx | 18 ++- 6 files changed, 248 insertions(+), 13 deletions(-) diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx index 0b62476..02e37c5 100644 --- a/LeftOvers/App.tsx +++ b/LeftOvers/App.tsx @@ -3,18 +3,47 @@ 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'; 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 ( - - - - - - - + /* */ + ); } diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index c75e7ca..31f60a2 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -18,6 +18,8 @@ "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", "typescript": "^5.1.3" @@ -1970,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", @@ -7675,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", @@ -7688,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", @@ -10126,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", @@ -14805,6 +14858,31 @@ "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", @@ -14813,6 +14891,72 @@ "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", @@ -15534,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", @@ -16580,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", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index 0357d85..e3e3094 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -19,6 +19,8 @@ "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", "typescript": "^5.1.3" diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx index 39e61f9..6e8fa0a 100644 --- a/LeftOvers/screens/IngredientSelection.tsx +++ b/LeftOvers/screens/IngredientSelection.tsx @@ -109,7 +109,7 @@ export default function IngredientSelection() { - + diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx index 2b51f33..6412252 100644 --- a/LeftOvers/screens/RecipeDetails.tsx +++ b/LeftOvers/screens/RecipeDetails.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { View, StyleSheet} from 'react-native'; +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) { @@ -14,6 +15,31 @@ export default function RecipeDetails(props) { title={props.title} number={props.number} duree={props.duree}/> + + + + + + Preparation + + + + + + + + + + + + + Cooking + + + + + + ); @@ -29,7 +55,8 @@ export default function RecipeDetails(props) { padding: 20, }, element: { - marginTop: 20, + backgroundColor:'#F2F0E4', + borderRadius: 30, }, horizontalAlignement: { display: 'flex', diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index 25c9d82..6357bb3 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -11,6 +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'; export default function RecipeSuggestion(props) { @@ -114,9 +115,20 @@ export default function RecipeSuggestion(props) { )} {visibleFilters &&( - - HEHEHEHEHEHEHE - + + + + + Available + + + + + + + + +