Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add navigation for profile

Browse Source
pull/20/head
Rémi REGNAULT 1 year ago
parent 579db32a92
commit 3b6eff8f3b
7 changed files with 110 additions and 66 deletions
Show Stats Download Patch File Download Diff File

7
LeftOvers/components/ProfileDetails.tsx
Unescape View File

@ -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<string>
allergies: list<string>
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) {
<View style={styles.pseudoBar}>
<Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
<Text style={styles.text}>{props.name}</Text>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
<Pressable onPress={() => props.navigation.navigate('ProfileModification')}>
<Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
</Pressable>
<Pressable onPress={props.onDeleteProfile}>
<Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
</Pressable>

3
LeftOvers/components/ProfileModification.tsx
Unescape View File

@ -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';

29
LeftOvers/navigation/HomeStackScreen.tsx
Unescape View File

@ -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 (
<Text
style={styles.headerTitle}>
{props.title}
</Text>
)
}
export default function HomeStackScreen() {
return (
<HomeStack.Navigator>
@ -39,7 +31,7 @@ export default function HomeStackScreen() {
),
headerTitle: () => (
<TextTitle title='LeftOvers'/>
<HeaderTitle title='LeftOvers'/>
),
headerTitleAlign: 'center',
@ -54,7 +46,7 @@ export default function HomeStackScreen() {
options={{
headerStyle: styles.headerBarContainer,
headerTitle: () => (
<TextTitle title='Profiles'/>
<HeaderTitle title='Profiles'/>
)
}}
/>
@ -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,
}
})

103
LeftOvers/navigation/ProfileStackScreen.tsx
Unescape View File

@ -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 (
<ProfilesStack.Navigator>
<ProfilesStack.Screen
name='Profiles'
component={Profiles}
options={{
headerTitle: () => (
<TopBar title='Profiles' isVisible={true}/>
)
}}
/>
</ProfilesStack.Navigator>
)
export default function ProfilesStackScreen({ navigation }) {
const _handleSearch = () => console.log('Searching');
const _handleHeaderAdd = () => navigation.navigate('ProfileCreation');
return (
<ProfilesStack.Navigator>
<ProfilesStack.Screen
name='Profiles'
component={Profiles}
options={{
headerStyle: styles.headerBarContainer,
headerTitle: () => (
<HeaderTitle title='Profiles'/>
),
headerRight: () => (
<View style={styles.headerBarRightContainer}>
<Pressable onPress={_handleSearch}>
<Image
source={SearchIcon}
style={styles.headerBarIcon}/>
</Pressable>
<Pressable onPress={_handleHeaderAdd}>
<Image
source={AddIcon}
style={styles.headerBarIcon}/>
</Pressable>
</View>
)
}}
/>
<ProfilesStack.Screen
name='ProfileCreation'
component={CreateProfile}
options={{
headerStyle: styles.headerBarContainer,
headerTitle: () => (
<HeaderTitle title='Profile Creation'/>
)
}}
/>
<ProfilesStack.Screen
name='ProfileModification'
component={ModifyProfile}
options={{
headerStyle: styles.headerBarContainer,
headerTitle: () => (
<HeaderTitle title='Profile Modification'/>
)
}}
/>
</ProfilesStack.Navigator>
)
}
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
}
})

19
LeftOvers/navigation/Utils.tsx
Unescape View File

@ -0,0 +1,19 @@
import React from 'react';
import { Text, StyleSheet } from 'react-native';
export function HeaderTitle(props) {
return (
<Text
style={styles.headerTitle}>
{props.title}
</Text>
)
}
const styles = StyleSheet.create({
headerTitle: {
fontSize: 20,
fontWeight: "bold",
color: '#3F3C42',
}
})

1
LeftOvers/screens/ModifyProfile.tsx
Unescape View File

@ -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 (
<SafeAreaProvider>
<TopBar title="Modify Profile" isVisible="true"/>
<View style={styles.container}>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 20}}/>

14
LeftOvers/screens/Profiles.tsx
Unescape View File

@ -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) {
<SafeAreaProvider>
<View style={styles.container}>
<View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
<TopBar title="Profiles" isVisible="true"/>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
<ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
<ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
<ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
<View style={{marginTop: 10}}/>
<ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
<ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
<View style={{marginTop: 10}}/>
<View style={styles.modal}>
<Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>

Write Preview
Loading…
Cancel
Save