From 438350efeb316cd0efd3865fedf6d5ded10b2ef0 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Fri, 10 Nov 2023 14:46:22 +0100 Subject: [PATCH 1/5] add a new component SelectedIngredients --- LeftOvers/App.js | 26 +++-- .../assets/images/angle_bracket_left.png | Bin 0 -> 3470 bytes .../assets/images/angle_bracket_right.png | Bin 0 -> 3454 bytes LeftOvers/assets/images/parameter.png | Bin 0 -> 410 bytes LeftOvers/components/FoodElementText.tsx | 8 +- LeftOvers/components/RecipeElementReduce.tsx | 4 +- LeftOvers/components/SelectedIngredient.tsx | 90 ++++++++++++++++++ LeftOvers/components/Separator.tsx | 2 +- LeftOvers/naviguation/parameter.png | Bin 0 -> 410 bytes 9 files changed, 106 insertions(+), 24 deletions(-) create mode 100644 LeftOvers/assets/images/angle_bracket_left.png create mode 100644 LeftOvers/assets/images/angle_bracket_right.png create mode 100644 LeftOvers/assets/images/parameter.png create mode 100644 LeftOvers/components/SelectedIngredient.tsx create mode 100644 LeftOvers/naviguation/parameter.png diff --git a/LeftOvers/App.js b/LeftOvers/App.js index 7c5d287..ed37109 100644 --- a/LeftOvers/App.js +++ b/LeftOvers/App.js @@ -1,29 +1,25 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import RecipeElement from './components/RecipeElement'; +import SelectedIngredient from './components/SelectedIngredient'; import RecipeElementReduce from './components/RecipeElementReduce'; +import RecipeElement from './components/RecipeElement'; -const generateImageList = () => { - const imageList = []; - const meat = '../assets/images/meat.png'; - for (let i = 0; i < 5; i++) { - imageList.push(meat); - } - return imageList; +const generateList = () => { + const list = []; + list.push('Apple'); + list.push('Pineapple'); + list.push('Tomato'); + list.push('Meat') + return list; }; export default function App() { const imageList = []; + const list = generateList(); return ( - - - - + ); } diff --git a/LeftOvers/assets/images/angle_bracket_left.png b/LeftOvers/assets/images/angle_bracket_left.png new file mode 100644 index 0000000000000000000000000000000000000000..7af1534756a87ef242a88dfd8d30feca81a20437 GIT binary patch literal 3470 zcmd^CeNal2@WZSIdan?Y3^x!@9}g$nH5ddSaQ7i@`Ps;f6jo0>uz+=3+CGBpPG0_`Nd-rcfTclWd}Z@6l&XBfbb z)sJN9GmZCJF6e&_&^&2}PZS*Z+wS_DU+J5V>cGixy zbpWus4hbiO)87LK?21oG>;bsLKTfD!5LH+Y2-n|O51_ocv00cqm}$&30PEKJW_?(J zF}R2l&gfgCaoClpoCta52}FeBZQ*-kIFKv%A;bL`ocvWT(q~KzZh^I5E{r&#kZfuI zNP6JAYHI9THGm?E7ul>kruv{_U7?{Onb$e7q}TGRvy}iXRaqKmH|8&=4Z-E)hUVpd zcX5!`{HBr6si~ZZ(j=Wb4U)_4bwiVrH!?7sG!@I~Q!!zdpa|zh8qU;o;GiwE|JK~j zZJjq7UM%vvGqx^mu@&^8<^Pd%&H@x-dy)Bo>%mVjSmUU30@AZtXqlu3!5)+i2Nbu& za*=v?GXsL^vUn4==WL-);3OV!(!tuxMShLV%fSd~)M^aK^GI$X1S`4ks=fgx97kCN zYB9c#S7~y(JD5b4n8!^R6CUr3v3j_1!5_O4juDKm|C7A`Q>_aw%|XF+_gt~366T8E zeqkOPt!al#%mq~a`!D&C6l#zvLE+-@AG~yMvsy?2a;U^Sp3=;di|P=rXbp0DJ%z8U za}@ESd485s@@w;Qic<1p(25!T9B2NS(M1Ebsi?y+=&Px2Ll)@*97oBVv$Y?lJ@Dd31;s{M?hQ9YO}1j^^^7)Y5>Z zx=J2N&AsN_8N=*~!v#!~YwNy|$F^lz0Ch!I#;{~-=vl==vvF$Gw7kYO=o}5$2Qhw( zF7I&$78}jn?*)+hw+)+(#$CY05oz9EYHQH*(6)?=6D7#qecl|49BNKwmn6!^;z3ZJ z4;6mQNtMfss#%Yuvwz3$1Z9B)VG>SnxslGkyXo&7fJXLU$b!Ev0qe77&>8*qW0L2M zS{JZ;yHjqa<29pCMpgp!O{^0uM^LmRts6nr9tD>Hb${xbe!Ka_ z+cO07k!_i+F_1T3ZB?uhD~IP5>69WJDSq5lf0~V@BVX|V){VPL8&c3+wf3e%w#tn_ z7gJx=?$T3%I1$lkK-xF-$(Yk`53XsN6ujXAA5#p>M7cAo`j(p<>6#RXY2=A&*z!si z)W$NPLSF)wQXJw^uNOM2RUc#@I9kWUfnQ$SnSSgG6B@xe66x8q1R(P@I(qhiuVs5v zO9B6f0-h-<8oAO{Y!|x_{#_9qo})91%CYOgpH~f_{m!{q?04G)`sjw{$hoBw~`4pi1ja;O;)A(4{M2b>qkb1@Ii1ql3 zChhw`M!AZW&)8vR{vWb{j0t|gA&<|b+JJ&Z&0lBC;*LHQ{LB$Z*=wqip?1H#fVW4| z`Vxm!AMetN{;)=40Ll4czlZLLYX+}=SHGgrkY8|hM!VsK%99_u8p!DV0sTwHQ)b5> z1%;ktVHHc!wc=k^Rba2!H#Z#|YU4#RF^DZK?hMqs87-KFypCGN1VLFJ%A-DQVhaMD zyi3C+rb2gP6Ucm%ugBX_r`MIx#~>Ym-19m=TpI|)g^`Wrny~@pa!`88-mV7JYW3t5 zbhPLLfH>Nfa7}}{JeJB1HAR-s1C-7>84mepT2fTob(OdDBjf!5ZBmDp6lZ>lR1uYi zDWoy4!c46;n))j>A-BV|*!hct4{wYOb*FBg`u$e>Wc8U%X_~voL0+@%n5r`|{(9k9 i|Fw6o?}wmMdd%m|idRNYUT&xU(r`Sv+sd}`zy2rLx+~fM literal 0 HcmV?d00001 diff --git a/LeftOvers/assets/images/angle_bracket_right.png b/LeftOvers/assets/images/angle_bracket_right.png new file mode 100644 index 0000000000000000000000000000000000000000..58fb0b960e7c14c4d4d128c35da23c63ddb3e561 GIT binary patch literal 3454 zcmd^BiC0r+7QZhE0fb^xWk3mwrPh&6ka1y=u!w>S(9m%SAh8x15hO8zfQotQc;ZME zPqpm9+5>V@3Q{qEBg=Crg^^BBK}3ZR5e_7H%d^Q^Rc%@ER}$c-UiW?>V98_v@oE;;=)Y$bQUKff=)JM45F`Jnky zRd7I~l*~2%^WziWJ)*@G`Q9n2yRtLbtH*$luB z+f=IG^7p)$85O?z>D1oivjPl~Q=5kkUJZHrj`Pa^l2e+~hIsA5ivgq|3aoeV6xivf zqpjez;>AFsR=8ov46?iz(hPzjD}c$}U2W|{7J!>`ibQ#>G=S;R3ne*{JR~_>A88s+ zrvTv?FcSD|PGB9DlL=&fyYJfj=C1S^UlJ&+6RvL3o&&J|OJp_1M&__nVk>k7@UQMR zR8frJAzn;(%_iWeS}an#pY;lsxI$wX72_K*YIsF=qO8Wc3*b47@wPWzme@FD#dS zdI)9ivULsu56SO6+lUxEsn+oIPW^slSie8fRZ-O-)Z6#_kYSf&-8CAA z>(96>W02t0q!`ad6}w$xJ5|QZ@HbX3lHZi6J!-?`7zB+J>Y5gD&O}pzNZ%&OSTn@) zB7t`35^GuO#LYV;0a&e-69y0c_B-d1`!ohGC$o9OaMc&601^4WrSrQ$7VR+07V()A1spGNMIR9?{Z+y?GG zE1Zy9a_j(Vd@A}L=#&Fy`1Zr*VE?o*O>VhMMQS<|O{oo`g7+PtCv%;-rco)ui@h__rwU$)i z6r6t~vv`fZI6*y^SPj|@RJM8mgUL3ZcPdJjHF4D*h#bGGdJB!<*cxw#y{L_i70$R4 z1tg5{+%9>iH4ILJHq-_9sB!39%W?_oF&ZwKN=s>pnf|O6qr&T$Jz`lRv->g$_(zLb zc~E8!qxCIcHnha=Oae`)%i7zBu`AViB)6O!ha5db!CVxUjlP(5Z1IIR)}Wx%W5*X^ zL6*VUNbhw#!f_H}$}lL+-S^TP{@4v5Ymb(+!S{ja`P;2}^I{QZs||`NMHUy`$Z*FO zfGx5H=wC(#$m~Ss|6E2idjrnnMmRFe&-xU=Rqx^_!O{;Y(z8Q$H66V&5M9;tGtp;4gUoTE)<|+-TCou@T z^v-Xlu9t_*jGO%8MBO-QUjz4-8hFR=sbbBc@pL}xws1NSeMTO!Qp^lGUo+5ncuK!A zT;b6`@hdCkv_4Gf2E;jO?*d(ij1G!TtdwwlY~}rHwj|=z0g0_9T3iM2Fa=5D#`BA; zly=?c%1FTTknZ=AQYEVHA1ikBrypstgx4XS(jSiZ@N7YG3IPp1U;rPP@pl^FuB2ke z-2@#uxH6yRBY3wE#0Y7?WN_GI(3yVJ27^5Z(QEXitn$B7RZlh@*z2YeyTbubXcsPk z+A7VglmVSB!$RA19hs;ZZY^7Z;bL@CC0C~bTZzzbO>di5rB9jTQJ&J_!K3*=$fUhz z8#HrqO#ML!qrFUb`S5%=aa!#A*saxBx$|NF=bEQ}F8Zc+XYl_YzpOGP`@+P5pLE!m z-GQk2q>E$cx%huOMm0M3unSD9sORREYTQ@`ET+4{SRFPJTMnus%s3+$i>ISfy;>UT zg}57=U%iQMSw40`uvfTAPa5?Ha`cHSN6}q!eEE*vcIQSxBBfr*tyj)AW&ccLTaaXQ zR_vG(F92u@Jf|TOlk`vZP`g!m#ExwVoMhQl0=^sw@vOhm@=xJfj9rj_h5@hce}WQ8 zC_XHlLT$73T-U(FLTa^e8ogR|yw1VEPjruH;2LDpaQJ`Qh{S7jukLe;Lw0M26TKAEAZ^V0?7UDnFN#Y;yxs^ zd*ANu{kwvW*|8ncnD^S35Jv9R9h!{kCKbJ2+VWwBT}I+(dOiOH#S`H}APWukPXys9 zSPM8+yuaN)kHn7WOB$^3PYcAoq2ZzxCA}cbXYPWkPPsIZbA91HQFqr$Q`iQK~GB z$2s9L-nf0q2ZD}u=N2T~>~?O`WX{$|vDTjT3Vd~m9~R|_oVka=VgLXD07*qoM6N<$ Ef__h{jsO4v literal 0 HcmV?d00001 diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx index 2e6062c..1e3b028 100644 --- a/LeftOvers/components/FoodElementText.tsx +++ b/LeftOvers/components/FoodElementText.tsx @@ -19,9 +19,7 @@ export default function FoodElementText(props : any) { {props.title} - - ); @@ -31,7 +29,7 @@ const styles = StyleSheet.create({ button: { alignItems: 'center', justifyContent: 'center', - width : 350, + width : 270, height: 60, borderRadius: 5, elevation: 3, @@ -52,7 +50,7 @@ const styles = StyleSheet.create({ marginRight: 5 // Centre le contenu horizontalement }, container: { - width : 340, + width :260, height: 50, borderRadius: 5, elevation: 3, @@ -62,5 +60,3 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', }, }); - - diff --git a/LeftOvers/components/RecipeElementReduce.tsx b/LeftOvers/components/RecipeElementReduce.tsx index b4d7920..88f8a59 100644 --- a/LeftOvers/components/RecipeElementReduce.tsx +++ b/LeftOvers/components/RecipeElementReduce.tsx @@ -1,8 +1,6 @@ import React from 'react'; import {StyleSheet,Pressable, Text, View, Image} 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'; import normalize from './Normalize'; @@ -14,6 +12,8 @@ interface recipeElementReduceProps { duree : string } + + export default function RecipeElementReduce(props : any) { return ( diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx new file mode 100644 index 0000000..e739d41 --- /dev/null +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -0,0 +1,90 @@ +import React, { useState } from 'react'; +import {StyleSheet,Pressable, Text, View, Image} 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[] + +} + +export default function SelectedIngredient(props : any) { + + 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); + } + }; + + return ( + + + Selected ingredients + + + + + + + + + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + view: { + width : 350, + height: 120, + borderRadius: 10, + elevation: 3, + borderWidth: 2, + borderColor: 'black', + display: "flex", + flexWrap: "wrap", + backgroundColor: '#E3DEC9', + }, + horizontalAlignement: { + display: "flex", + height : 40, + width: 350, + flexDirection : 'row', + justifyContent : 'space-around', + alignItems: 'center', + marginTop: 10, + }, + text: { + fontSize: 14, + lineHeight: 21, + fontWeight: 'bold', + letterSpacing: 0.25, + color: 'black', + } + }); + + diff --git a/LeftOvers/components/Separator.tsx b/LeftOvers/components/Separator.tsx index 12562c2..dbeae6f 100644 --- a/LeftOvers/components/Separator.tsx +++ b/LeftOvers/components/Separator.tsx @@ -7,7 +7,7 @@ export default function Separator (){ const styles = StyleSheet.create({ separator: { - width: 250, // Largeur de la ligne + width: 200, // Largeur de la ligne backgroundColor: 'black', // Couleur de la ligne borderWidth : 1, marginLeft : 10, diff --git a/LeftOvers/naviguation/parameter.png b/LeftOvers/naviguation/parameter.png new file mode 100644 index 0000000000000000000000000000000000000000..08425b498d677ebd915c1bb20acb5317f0d496b6 GIT binary patch literal 410 zcmV;L0cHM)P)ruH;2LDpaQJ`Qh{S7jukLe;Lw0M26TKAEAZ^V0?7UDnFN#Y;yxs^ zd*ANu{kwvW*|8ncnD^S35Jv9R9h!{kCKbJ2+VWwBT}I+(dOiOH#S`H}APWukPXys9 zSPM8+yuaN)kHn7WOB$^3PYcAoq2ZzxCA}cbXYPWkPPsIZbA91HQFqr$Q`iQK~GB z$2s9L-nf0q2ZD}u=N2T~>~?O`WX{$|vDTjT3Vd~m9~R|_oVka=VgLXD07*qoM6N<$ Ef__h{jsO4v literal 0 HcmV?d00001 From 45ab6bd7d37bcef7de068c0b214b76bfe866f373 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Mon, 13 Nov 2023 10:38:21 +0100 Subject: [PATCH 2/5] add a few component like tabbar and selected ingredient, changes the recipe display and create a new page --- LeftOvers/App.js | 10 +- LeftOvers/assets/images/backward_arrows.png | Bin 0 -> 2099 bytes LeftOvers/components/RecipeElement.tsx | 57 +++++-- LeftOvers/components/SelectedIngredient.tsx | 9 +- LeftOvers/components/TopBar.tsx | 28 ++++ LeftOvers/package-lock.json | 171 ++++++++++++++++++++ LeftOvers/package.json | 4 + LeftOvers/screens/RecipeSuggestion.tsx | 46 ++++++ 8 files changed, 297 insertions(+), 28 deletions(-) create mode 100644 LeftOvers/assets/images/backward_arrows.png create mode 100644 LeftOvers/components/TopBar.tsx diff --git a/LeftOvers/App.js b/LeftOvers/App.js index ed37109..1310760 100644 --- a/LeftOvers/App.js +++ b/LeftOvers/App.js @@ -1,8 +1,8 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import SelectedIngredient from './components/SelectedIngredient'; -import RecipeElementReduce from './components/RecipeElementReduce'; -import RecipeElement from './components/RecipeElement'; +import TopBar from './components/TopBar'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import RecipeSuggestion from './screens/RecipeSuggestion'; const generateList = () => { const list = []; @@ -18,9 +18,7 @@ export default function App() { const list = generateList(); return ( - - - + ); } diff --git a/LeftOvers/assets/images/backward_arrows.png b/LeftOvers/assets/images/backward_arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..ea48792f95739da698b9268b6034920e42641950 GIT binary patch literal 2099 zcmd^=>sONb7RR6GQN$oGj8UGvOnI^?AaymSVyS2rxf(B(5?blg#k&TLI$lNvsil>v zb5^HJFoiB^NDgM2nHQL;7;{k5L?aa%M?C7F7P0~_ba1Wn2h5szd0y=G-M{bev-gYr zV(%+qA!G~GW)uJb7D0ysj{*RQHwI{KW^}e(zxcaR*3l0|rU3xjW-UN~U1@7H!L*~~ z0HC4Qe%kmjjrR}s2Y|*h^vY=j03d$}3iJ=p0@Y*E3--ggsZaLtN69N}F!qaEs7F9;kC zQ`bP~ENjceMa5D_nJa|0uK$@>7$$Wz+qi{Nbb-KQN5J5jW`<+~j(Ux%E)Ns?VCq+i zvar-Obk$2$l4PUYk?u#nDdgws=E9h}kOIY@gq=bYLUd{$CmIoDn z6)sx1gtDy)1AnehVZWomF`pVUwD`G>LY)JDD_z8a_Bw7y^zo^CREci^kzAKP%7o0 zF#@wGY??yLMLx;35pBI4yPV#c^X_5;jZz)EoSe&aPN~u3XssY4uW88}=y}jS=_}Jx ziF|!MhxVn0N+pZEiP3Q#_yDMS{aQi3WFu8;#;Rp@ZCNn#PdN?xGo1BC5yWO6sR> z7m6PeCd3c>y?v3?*=^VjoYid|ZsEUmp_EVALc;do^C=Ncv!PG)9zc)$8%@OdrvrPR ze$eM$661@Y!z1VH_|jB{zPqIFvo+1x%6?q$&gec-dSq-=pn5pt)Ph&iRh;Qiew761%0I_-pSi@v7WsO1GuYr%DlH(4yje8$RqHCHvh!o@I)rBxMpuoV{5H z{CDi=*BAn|QSXvp`yca-f{{^k#}{ecIB%n-5c8u!O4@%T12LP;Y{AW< zWRYvKPL@m5{V$7T%5byhH`S<8Qmlj6+oC^uQg=~H5FM$r&lKic(A{wo2LXzp^lznc z5~Y?s&xiV6^yhYTs-R*Lx|=y_6?2XXFjfR}Bfyerrg?aQV*yxcCa z5d<5zc7_+no-FhLDZGJY`>PRdsEKuvzZb6MY+&m4>#j{SQ!{t zi L2nlQmfLZ?q;Ut#h literal 0 HcmV?d00001 diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index b7925e9..c53f34e 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -16,19 +16,23 @@ interface recipeElementProps { } export default function RecipeElement(props : any) { + + const totalContentCount = props.imageList.length + 11; + const dynamicHeight = totalContentCount * 40; + const scrollViewHeight = 100; + + return ( - - + + {props.number} {props.title} - {props.imageList.length > 0 ? ( - Ingredients + Ingredients - ) : null} {props.imageList.length > 0 && props.imageList.map((source, index) => ( @@ -36,14 +40,30 @@ export default function RecipeElement(props : any) { ))} - + + {props.imageList.length <= 0 ? ( + + {props.textList.length > 0 && props.textList.map((source, index) => ( + {source} + ))} + + ) : null} + + + - - {props.description} + + + Description + + + + {props.description} - - + + + ); @@ -54,8 +74,7 @@ const styles = StyleSheet.create({ button: { alignItems: 'center', justifyContent: 'center', - width : 250, - height: 350, + width : 300, borderRadius: 40, elevation: 3, backgroundColor: '#E3DEC9', @@ -75,7 +94,7 @@ const styles = StyleSheet.create({ letterSpacing: 0.25, color: '#71662A', textAlign: "center", - marginTop: 5, + margin : 5 }, title:{ fontSize: 18, @@ -85,8 +104,7 @@ const styles = StyleSheet.create({ color: '#524B1A', }, view: { - width : 240, - height: 340, + width : 290, borderRadius: 40, elevation: 3, borderWidth: 2, @@ -99,6 +117,11 @@ const styles = StyleSheet.create({ display: "flex", flexDirection : 'row', alignItems: 'center', - marginTop: 10, - } + justifyContent: 'space-between', + marginTop : 5, + flexWrap: 'wrap', + }, + scrollViewContainer: { + flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant + }, }); \ No newline at end of file diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx index e739d41..6886287 100644 --- a/LeftOvers/components/SelectedIngredient.tsx +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -37,12 +37,11 @@ export default function SelectedIngredient(props : any) { Selected ingredients - + - @@ -60,8 +59,8 @@ export default function SelectedIngredient(props : any) { const styles = StyleSheet.create({ view: { width : 350, - height: 120, - borderRadius: 10, + height: 110, + borderRadius: 15, elevation: 3, borderWidth: 2, borderColor: 'black', @@ -71,7 +70,7 @@ const styles = StyleSheet.create({ }, horizontalAlignement: { display: "flex", - height : 40, + height : 30, width: 350, flexDirection : 'row', justifyContent : 'space-around', diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx new file mode 100644 index 0000000..c305bfc --- /dev/null +++ b/LeftOvers/components/TopBar.tsx @@ -0,0 +1,28 @@ +import React, { startTransition } from 'react'; +import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; +import { Appbar } from 'react-native-paper'; +import backward from '../assets/images/backward_arrows.png'; + +interface TopBarProps{ + source : string + firstImage : string + lastImage : string + } + + + export default function TopBar(props : any) { + + const _goBack = () => console.log('Went back'); + + const _handleSearch = () => console.log('Searching'); + + const _handleMore = () => console.log('Shown more'); + return ( + + + + + + + ); + } \ No newline at end of file diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index 9c11e5c..dca14c6 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -16,7 +16,11 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.6", + "react-native-linear-gradient": "^2.8.3", + "react-native-paper": "^5.11.1", + "react-native-safe-area-context": "^4.7.4", "react-native-splash-screen": "^3.3.0", + "react-native-vector-icons": "^10.0.2", "react-native-web": "~0.19.6", "typescript": "^5.1.3" }, @@ -1968,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", @@ -7673,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", @@ -7686,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", @@ -10116,6 +10158,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", @@ -14790,6 +14845,40 @@ "react": "18.2.0" } }, + "node_modules/react-native-linear-gradient": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz", + "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "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", @@ -14798,6 +14887,67 @@ "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==", + "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==", + "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==", + "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==", + "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==", + "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", @@ -15519,6 +15669,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", @@ -16565,6 +16728,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 54de2b4..bcb7fd0 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -17,7 +17,11 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.6", + "react-native-linear-gradient": "^2.8.3", + "react-native-paper": "^5.11.1", + "react-native-safe-area-context": "^4.7.4", "react-native-splash-screen": "^3.3.0", + "react-native-vector-icons": "^10.0.2", "react-native-web": "~0.19.6", "typescript": "^5.1.3" }, diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index e69de29..f02b18c 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {StyleSheet, View} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import TopBar from '../components/TopBar'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import SelectedIngredient from '../components/SelectedIngredient'; +import RecipeElement from '../components/RecipeElement'; + +interface RecipeSuggestionProps{ + source : string + firstImage : string + lastImage : string + } + + export default function RecipeSuggestion(props : any) { + + const imageList=[] + return ( + + + + + + + + + + + + ); + } + + const styles = StyleSheet.create({ + page: { + flex: 1, + backgroundColor: '#59BDCD', + alignItems: 'center', + display: "flex", + flexWrap: "wrap", + padding: 20, + }, + element: { + marginTop: 20, + } +}); + From da6c25d296acb00051d3d4bf4175900db0ce8060 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Mon, 13 Nov 2023 15:49:36 +0100 Subject: [PATCH 3/5] add modal --- LeftOvers/components/SelectedIngredient.tsx | 127 ++++++++++---------- LeftOvers/components/TopBar.tsx | 6 +- LeftOvers/screens/RecipeSuggestion.tsx | 122 +++++++++++++------ 3 files changed, 150 insertions(+), 105 deletions(-) diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx index 6886287..26e690c 100644 --- a/LeftOvers/components/SelectedIngredient.tsx +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -1,89 +1,90 @@ -import React, { useState } from 'react'; -import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; -import bracketLeft from '../assets/images/angle_bracket_left.png'; +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[] - +interface SelectedIngredientProps { + listeIngredient: string[]; + listeImage: string[]; + onEvent: (value: string) => void; } -export default function SelectedIngredient(props : any) { - - const [cpt, setCpt] = useState(0); +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); + } else { + setCpt(props.listeIngredient.length - 1); } }; const increaseCounter = () => { if (cpt < props.listeIngredient.length - 1) { setCpt(cpt + 1); - }else{ - setCpt(0); + } else { + setCpt(0); } }; - return ( - - - Selected ingredients - - - - + const handlePress = () => { + // Supposons que vous voulez envoyer la valeur 'Hello' au parent + props.onEvent('Hello'); + }; - - - - + return ( + + + Selected ingredients + + + + - + + + + - - - - + + + + + - ); + + ); } const styles = StyleSheet.create({ - view: { - width : 350, - height: 110, - borderRadius: 15, - elevation: 3, - borderWidth: 2, - 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', - } - }); - - + 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', + }, +}); diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx index c305bfc..639422d 100644 --- a/LeftOvers/components/TopBar.tsx +++ b/LeftOvers/components/TopBar.tsx @@ -1,7 +1,5 @@ -import React, { startTransition } from 'react'; -import {StyleSheet,Pressable, Text, View, Image} from 'react-native'; +import React from 'react'; import { Appbar } from 'react-native-paper'; -import backward from '../assets/images/backward_arrows.png'; interface TopBarProps{ source : string @@ -20,7 +18,7 @@ interface TopBarProps{ return ( - + diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index f02b18c..0892ff9 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -1,46 +1,92 @@ -import React from 'react'; -import {StyleSheet, View} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; -import TopBar from '../components/TopBar'; +import React, { useState } from 'react'; +import { View, StyleSheet, Text, Image} from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; -import SelectedIngredient from '../components/SelectedIngredient'; +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'; -interface RecipeSuggestionProps{ - source : string - firstImage : string - lastImage : string - } - export default function RecipeSuggestion(props : any) { +export default function RecipeSuggestion(props) { - const imageList=[] - return ( - - - - - - - - - + const imageList = []; + const [visible, setVisible] = React.useState(false); + const showModal = () => setVisible(true); + const hideModal = () => setVisible(false); + const containerStyle = { + backgroundColor: 'white', + height: 350, + width: 350, + }; + + const handleChildEvent = (value) => { + setVisible(!visible) + }; - - ); - } + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} - const styles = StyleSheet.create({ - page: { - flex: 1, - backgroundColor: '#59BDCD', - alignItems: 'center', - display: "flex", - flexWrap: "wrap", - padding: 20, - }, - element: { - marginTop: 20, - } +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: -150 }, { translateY: -150 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur + } }); - From a3b27eaaab2ba24a311173959a8cbf602f661072 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Mon, 13 Nov 2023 16:26:47 +0100 Subject: [PATCH 4/5] modify modal --- LeftOvers/screens/RecipeSuggestion.tsx | 41 +++++++++++++++++--------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index 0892ff9..bb128ac 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { View, StyleSheet, Text, Image} from 'react-native'; +import { View, StyleSheet, Text, Image, ScrollView} from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import { Modal, Portal, PaperProvider } from 'react-native-paper'; import TopBar from '../components/TopBar'; @@ -18,7 +18,7 @@ export default function RecipeSuggestion(props) { const containerStyle = { backgroundColor: 'white', height: 350, - width: 350, + width: 370, }; const handleChildEvent = (value) => { @@ -49,17 +49,21 @@ export default function RecipeSuggestion(props) { - - - - - - - - - - - + + + + + + + + + + + + + + + @@ -87,6 +91,15 @@ const styles = StyleSheet.create({ position: 'absolute', top: '50%', // Centre verticalement left: '50%', // Centre horizontalement - transform: [{ translateX: -150 }, { translateY: -150 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur + transform: [{ translateX: -185 }, { translateY: -175 }], // 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, } }); From 11b7df605ce092b24f4489c25d2162f072d642f4 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Tue, 14 Nov 2023 10:24:10 +0100 Subject: [PATCH 5/5] upgrade parameters for selected ingredient, the modal is functionnal, to do : filters selection --- LeftOvers/App.js | 5 ++ LeftOvers/components/ParameterTopBar.tsx | 27 +++++++ LeftOvers/components/RecipeElement.tsx | 1 + LeftOvers/components/SelectedIngredient.tsx | 1 - LeftOvers/screens/RecipeSuggestion.tsx | 89 ++++++++++++++++----- 5 files changed, 103 insertions(+), 20 deletions(-) create mode 100644 LeftOvers/components/ParameterTopBar.tsx diff --git a/LeftOvers/App.js b/LeftOvers/App.js index 1310760..5271af4 100644 --- a/LeftOvers/App.js +++ b/LeftOvers/App.js @@ -10,6 +10,11 @@ const generateList = () => { list.push('Pineapple'); list.push('Tomato'); list.push('Meat') + list.push('d)àrok'); + list.push('dddd'); + list.push('fff'); + list.push('fffgg') + list.push('Apple'); return list; }; diff --git a/LeftOvers/components/ParameterTopBar.tsx b/LeftOvers/components/ParameterTopBar.tsx new file mode 100644 index 0000000..6f84163 --- /dev/null +++ b/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 ( + + + + + ); + } \ No newline at end of file diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index c53f34e..57b5588 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -22,6 +22,7 @@ export default function RecipeElement(props : any) { const scrollViewHeight = 100; + return ( diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx index 26e690c..a6c3ffd 100644 --- a/LeftOvers/components/SelectedIngredient.tsx +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -31,7 +31,6 @@ export default function SelectedIngredient(props: SelectedIngredientProps) { }; const handlePress = () => { - // Supposons que vous voulez envoyer la valeur 'Hello' au parent props.onEvent('Hello'); }; diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index bb128ac..738fe00 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -1,30 +1,72 @@ import React, { useState } from 'react'; -import { View, StyleSheet, Text, Image, ScrollView} from 'react-native'; +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 { 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'; 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: 350, - width: 370, + height: 400, + 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) => ( + + + + + + )); + return ( @@ -49,21 +91,30 @@ export default function RecipeSuggestion(props) { - - - - - - - + + + {visibleIngredients && ( + + {imageElements} + + + + + + + + + + + )} + + {visibleFilters &&( + + HEHEHEHEHEHEHE + + )} + - - - - - - - @@ -91,7 +142,7 @@ const styles = StyleSheet.create({ position: 'absolute', top: '50%', // Centre verticalement left: '50%', // Centre horizontalement - transform: [{ translateX: -185 }, { translateY: -175 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur + transform: [{ translateX: -185 }, { translateY: -120 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur }, horizontalAlignement: { display: 'flex',