From 3b6eff8f3bfe60befb5b184a353beced1a9a0708 Mon Sep 17 00:00:00 2001 From: Remi REGNAULT Date: Tue, 21 Nov 2023 15:19:38 +0100 Subject: [PATCH] add navigation for profile --- LeftOvers/components/ProfileDetails.tsx | 7 +- LeftOvers/components/ProfileModification.tsx | 3 +- LeftOvers/navigation/HomeStackScreen.tsx | 29 ++---- LeftOvers/navigation/ProfileStackScreen.tsx | 103 +++++++++++++------ LeftOvers/navigation/Utils.tsx | 19 ++++ LeftOvers/screens/ModifyProfile.tsx | 1 - LeftOvers/screens/Profiles.tsx | 14 +-- 7 files changed, 110 insertions(+), 66 deletions(-) create mode 100644 LeftOvers/navigation/Utils.tsx diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx index deb63f7..cd0aae5 100644 --- a/LeftOvers/components/ProfileDetails.tsx +++ b/LeftOvers/components/ProfileDetails.tsx @@ -2,6 +2,7 @@ import {React, useState} from 'react'; import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native'; import ValidateButton from './ValidateButton'; import ListWithoutSelect from './ListWithoutSelect'; +import { useNavigation } from '@react-navigation/native'; type ProfileProps = { name: string @@ -9,9 +10,11 @@ type ProfileProps = { diets: list allergies: list onDeleteProfile: () => void + navigation } export default function ProfileDetails(props: ProfileProps) { + const [display, setDisplay] = useState("none") const changeListVisibility = () => { if (display == "none"){ @@ -27,7 +30,9 @@ export default function ProfileDetails(props: ProfileProps) { {props.name} - + props.navigation.navigate('ProfileModification')}> + + diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx index 7f66760..8188c8d 100644 --- a/LeftOvers/components/ProfileModification.tsx +++ b/LeftOvers/components/ProfileModification.tsx @@ -1,4 +1,5 @@ -import {React, useState} from 'react'; +import React from 'react'; +import { useState } from 'react'; import {StyleSheet, Text, TextInput, View, Image} from 'react-native'; import ValidateButton from './ValidateButton'; import ListSelect from './ListSelect'; diff --git a/LeftOvers/navigation/HomeStackScreen.tsx b/LeftOvers/navigation/HomeStackScreen.tsx index 4a0e77d..f93d07c 100644 --- a/LeftOvers/navigation/HomeStackScreen.tsx +++ b/LeftOvers/navigation/HomeStackScreen.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { View, Image, Text, StyleSheet } from 'react-native'; +import { Image, Text, StyleSheet } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomePage from '../screens/HomePage'; import Profiles from '../screens/Profiles'; -import appLogo from '../assets/images/icon.png'; +import { HeaderTitle } from './Utils'; +import appLogo from '../assets/images/logo.png'; const HomeStack = createNativeStackNavigator() @@ -16,15 +17,6 @@ function AppIcon() { ) } -function TextTitle(props) { - return ( - - {props.title} - - ) -} - export default function HomeStackScreen() { return ( @@ -39,7 +31,7 @@ export default function HomeStackScreen() { ), headerTitle: () => ( - + ), headerTitleAlign: 'center', @@ -54,7 +46,7 @@ export default function HomeStackScreen() { options={{ headerStyle: styles.headerBarContainer, headerTitle: () => ( - + ) }} /> @@ -66,16 +58,9 @@ const styles = StyleSheet.create({ headerBarContainer: { backgroundColor: '#F2F0E4', }, - headerTitle: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - }, headerAppIcon: { - width: 35, - height: 35, - borderRadius: 20, - overflow:'hidden', + width: 45, + height: 45, marginHorizontal: 10, } }) \ No newline at end of file diff --git a/LeftOvers/navigation/ProfileStackScreen.tsx b/LeftOvers/navigation/ProfileStackScreen.tsx index a268479..1a18c12 100644 --- a/LeftOvers/navigation/ProfileStackScreen.tsx +++ b/LeftOvers/navigation/ProfileStackScreen.tsx @@ -1,50 +1,85 @@ import React from 'react' -import { View, StyleSheet } from 'react-native' +import { StyleSheet, View, Image, Pressable } from 'react-native' import { createNativeStackNavigator } from '@react-navigation/native-stack'; import Profiles from '../screens/Profiles'; -import TopBar from '../components/TopBar'; +import CreateProfile from '../screens/CreateProfile'; +import ModifyProfile from '../screens/ModifyProfile'; + +import { HeaderTitle } from './Utils'; + +import SearchIcon from '../assets/images/search.png'; +import AddIcon from '../assets/images/plus.png' const ProfilesStack = createNativeStackNavigator() -export default function ProfilesStackScreen() { - return ( - - ( - - ) - }} - /> - - ) +export default function ProfilesStackScreen({ navigation }) { + const _handleSearch = () => console.log('Searching'); + const _handleHeaderAdd = () => navigation.navigate('ProfileCreation'); + + return ( + + ( + + ), + headerRight: () => ( + + + + + + + + + ) + }} + /> + ( + + ) + }} + /> + ( + + ) + }} + /> + + ) } const styles = StyleSheet.create({ headerBarContainer: { - flexDirection: 'row', - width: "100%", - alignItems: 'center', - justifyContent: 'center', backgroundColor: '#F2F0E4', - padding: 5, }, - headerTitle: { - fontSize: 20, - fontWeight: "bold", - color: '#3F3C42', - textAlign: "center", - textAlignVertical: 'center', - flex: 0.8, - }, - headerAppIcon: { - width: 35, - height: 35 + headerBarRightContainer: { + display: 'flex', + flexDirection: 'row', + alignContent: 'space-between', + marginHorizontal: 10, }, - headerAppIconContainer: { - + headerBarIcon: { + width: 30, + height: 30, + marginHorizontal: 10 } }) \ No newline at end of file diff --git a/LeftOvers/navigation/Utils.tsx b/LeftOvers/navigation/Utils.tsx new file mode 100644 index 0000000..f0811dc --- /dev/null +++ b/LeftOvers/navigation/Utils.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Text, StyleSheet } from 'react-native'; + +export function HeaderTitle(props) { + return ( + + {props.title} + + ) +} + +const styles = StyleSheet.create({ + headerTitle: { + fontSize: 20, + fontWeight: "bold", + color: '#3F3C42', + } +}) \ No newline at end of file diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx index 1a8b096..b4cf97d 100644 --- a/LeftOvers/screens/ModifyProfile.tsx +++ b/LeftOvers/screens/ModifyProfile.tsx @@ -11,7 +11,6 @@ export default function ModifyProfile(props) { const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}] return ( - diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index cedf8bf..4286cbe 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -1,4 +1,5 @@ -import {React, useState} from 'react'; +import React from 'react'; +import { useState } from 'react'; import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native'; import ProfileDetails from '../components/ProfileDetails'; import ProfileDelete from '../components/ProfileDelete'; @@ -6,7 +7,7 @@ import TopBar from '../components/TopBar'; import {LinearGradient} from 'expo-linear-gradient'; import {SafeAreaProvider} from 'react-native-safe-area-context'; -export default function Profiles(props) { +export default function Profiles({props, navigation}) { const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}] @@ -34,16 +35,15 @@ export default function Profiles(props) { - - + - + - + - +