Browse Source

Adding new screens of Account screen options

master
GabrielTrettel 3 years ago
parent
commit
cc345b6e4a
  1. 46
      src/app/navigation/AccountNavigator.js
  2. 10
      src/app/screens/Abbout.js
  3. 78
      src/app/screens/AccountScreen.js
  4. 10
      src/app/screens/ActivateInstitution.js
  5. 11
      src/app/screens/EditUserData.js
  6. 11
      src/app/screens/UpdatePassword.js

46
src/app/navigation/AccountNavigator.js

@ -3,6 +3,10 @@ import { createStackNavigator } from "@react-navigation/stack";
import AccountScreen from "../screens/AccountScreen"; import AccountScreen from "../screens/AccountScreen";
import PluviometerRegisterScreen from '../screens/PluviometerRegisterScreen'; import PluviometerRegisterScreen from '../screens/PluviometerRegisterScreen';
import MapFormScreen from "../screens/MapFormScreen"; import MapFormScreen from "../screens/MapFormScreen";
import Abbout from "../screens/Abbout";
import ActivateInstitution from "../screens/ActivateInstitution";
import UpdatePassword from "../screens/UpdatePassword";
import EditUserData from "../screens/EditUserData";
const Stack = createStackNavigator(); const Stack = createStackNavigator();
@ -29,6 +33,48 @@ const AccountNavigator = () => (
}, },
}} }}
/> />
<Stack.Screen
name="Abbout"
component={Abbout}
options={{
title: "",
headerStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen
name="ActivateInstitution"
component={ActivateInstitution}
options={{
title: "",
headerStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen
name="UpdatePassword"
component={UpdatePassword}
options={{
title: "",
headerStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen
name="EditUserData"
component={EditUserData}
options={{
title: "",
headerStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen <Stack.Screen
name="FormMap" name="FormMap"
component={MapFormScreen} component={MapFormScreen}

10
src/app/screens/Abbout.js

@ -0,0 +1,10 @@
import React from "react";
import {View, Text} from "react-native";
export default function Abbout(props) {
return (
<View>
<Text>Abbout</Text>
</View>
)
}

78
src/app/screens/AccountScreen.js

@ -1,13 +1,17 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Text, Button, Image, View, StyleSheet } from "react-native";
import {
Text,
Image,
View,
StyleSheet,
ScrollView,
} from "react-native";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import { AuthContext } from "../auth/context"; import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage"; import authStorage from "../auth/storage";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import assets from "../config/assets"; import assets from "../config/assets";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
import colors from "../config/colors"; import colors from "../config/colors";
function handleLogOut(setUser) { function handleLogOut(setUser) {
@ -30,7 +34,7 @@ function UserHeader({ name, fone }) {
); );
} }
function ProfileItensList({ icon, title, onPress }) {
function ProfileItensList({ icon, IconProvider, title, onPress }) {
return ( return (
<View> <View>
<View <View
@ -41,9 +45,27 @@ function ProfileItensList({ icon, title, onPress }) {
></View> ></View>
<TouchableOpacity onPress={onPress}> <TouchableOpacity onPress={onPress}>
<View style={{ marginVertical: 16, flexDirection: "row" }}>
<MaterialCommunityIcons name={icon} size={18} color={colors.dark} />
<View
style={{
marginVertical: 16,
flexDirection: "row",
alignItems: "center",
}}
>
<IconProvider name={icon} size={18} color={colors.dark} />
<Text style={{ fontSize: 16, marginLeft: 16 }}>{title}</Text> <Text style={{ fontSize: 16, marginLeft: 16 }}>{title}</Text>
<View
style={{
alignItems: "flex-end",
flex: 1,
}}
>
<MaterialCommunityIcons
name={"chevron-right"}
size={20}
color={colors.dark}
/>
</View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -55,41 +77,47 @@ function AccountScreen(props) {
const profileItems = [ const profileItems = [
{ {
icon: "account", icon: "account",
IconProvider: MaterialCommunityIcons,
title: "Editar Perfil", title: "Editar Perfil",
onPress: () => { onPress: () => {
console.log("1");
props.navigation.navigate("EditUserData");
}, },
}, },
{ {
icon: "lock", icon: "lock",
IconProvider: MaterialCommunityIcons,
title: "Alterar senha", title: "Alterar senha",
onPress: () => { onPress: () => {
console.log("2");
props.navigation.navigate("UpdatePassword");
}, },
}, },
{ {
icon: "account", icon: "account",
IconProvider: MaterialCommunityIcons,
title: "Cadastrar pluviômetro", title: "Cadastrar pluviômetro",
onPress: () => { onPress: () => {
console.log("3");
props.navigation.navigate("PluviometerRegister");
}, },
}, },
{ {
icon: "account",
icon: "institution",
IconProvider: FontAwesome,
title: "ATIVAR INSTITUIÇÃO", title: "ATIVAR INSTITUIÇÃO",
onPress: () => { onPress: () => {
console.log("4");
props.navigation.navigate("ActivateInstitution");
}, },
}, },
{ {
icon: "information-outline", icon: "information-outline",
IconProvider: MaterialCommunityIcons,
title: "SOBRE O PROJETO", title: "SOBRE O PROJETO",
onPress: () => { onPress: () => {
console.log("5");
props.navigation.navigate("Abbout");
}, },
}, },
{ {
icon: "logout", icon: "logout",
IconProvider: MaterialCommunityIcons,
title: "sair", title: "sair",
onPress: () => { onPress: () => {
handleLogOut(setUser); handleLogOut(setUser);
@ -97,15 +125,18 @@ function AccountScreen(props) {
}, },
{ {
icon: "trash-can", icon: "trash-can",
IconProvider: MaterialCommunityIcons,
title: "Desativar conta", title: "Desativar conta",
onPress: () => { onPress: () => {
console.log("7"); console.log("7");
}, },
}, },
]; ];
console.log("a");
return ( return (
<Screen
<Screen>
<ScrollView>
<View
style={{ style={{
padding: 16, padding: 16,
}} }}
@ -113,18 +144,17 @@ function AccountScreen(props) {
<UserHeader name={user.name} fone={user.email} image={"1"} /> <UserHeader name={user.name} fone={user.email} image={"1"} />
<View style={{ marginTop: 24 }}> <View style={{ marginTop: 24 }}>
{profileItems.map(({ icon, title, onPress }) => (
<ProfileItensList icon={icon} title={title} onPress={onPress} />
{profileItems.map(({ icon, IconProvider, title, onPress }) => (
<ProfileItensList
icon={icon}
IconProvider={IconProvider}
title={title}
onPress={onPress}
/>
))} ))}
</View> </View>
<View style={{ paddingTop: 40 }}>
<Button
title="Logout"
onPress={() => {
handleLogOut(setUser);
}}
/>
</View> </View>
</ScrollView>
</Screen> </Screen>
); );
} }

10
src/app/screens/ActivateInstitution.js

@ -0,0 +1,10 @@
import React from "react";
import {View, Text} from "react-native";
export default function ActivateInstitution(props) {
return (
<View>
<Text>Ativar instituição</Text>
</View>
)
}

11
src/app/screens/EditUserData.js

@ -0,0 +1,11 @@
import React from "react";
import {View, Text} from "react-native";
export default function EditUserData(props) {
return (
<View>
<Text>Editar perfil</Text>
</View>
)
}

11
src/app/screens/UpdatePassword.js

@ -0,0 +1,11 @@
import React from "react";
import {View, Text} from "react-native";
export default function UpdatePassword(props) {
return (
<View>
<Text>Alterar senha</Text>
</View>
)
}
Loading…
Cancel
Save