Browse Source

initial implementation of account screen

master
GabrielTrettel 3 years ago
parent
commit
f4f6a5a8f5
  1. 139
      src/app/screens/AccountScreen.js

139
src/app/screens/AccountScreen.js

@ -1,61 +1,122 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Text, Button, Image, View } from "react-native";
import { Text, Button, Image, View, StyleSheet } from "react-native";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import InDevelopment from "../components/InDevelopment";
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 { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import colors from "../config/colors"; import colors from "../config/colors";
function handleLogOut(setUser) { function handleLogOut(setUser) {
setUser(null); setUser(null);
authStorage.removeToken(); authStorage.removeToken();
} }
function AccountScreen(props) {
const { user, setUser } = useContext(AuthContext);
function UserHeader({ name, fone }) {
return (
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Image
style={{ width: 70, height: 70 }}
source={require("../assets/rain/chuva_peq.png")}
/>
<View style={{ marginLeft: 16 }}>
<Text style={[styles.text, { fontWeight: "bold" }]}>{name}</Text>
<Text style={styles.text}>{fone}</Text>
</View>
</View>
);
}
const dims = scaleDimsFromWidth(93, 106, 35);
function ProfileItensList({ icon, title, onPress }) {
return (
<View>
<View
style={{
height: 1,
backgroundColor: colors.separatorGray,
}}
></View>
<TouchableOpacity onPress={onPress}>
<View style={{ marginVertical: 16, flexDirection: "row" }}>
<MaterialCommunityIcons name={icon} size={18} color={colors.dark} />
<Text style={{ fontSize: 16, marginLeft: 16 }}>{title}</Text>
</View>
</TouchableOpacity>
</View>
);
}
function AccountScreen(props) {
const { user, setUser } = useContext(AuthContext);
const profileItems = [
{
icon: "account",
title: "Editar Perfil",
onPress: () => {
console.log("1");
},
},
{
icon: "lock",
title: "Alterar senha",
onPress: () => {
console.log("2");
},
},
{
icon: "account",
title: "Cadastrar pluviômetro",
onPress: () => {
console.log("3");
},
},
{
icon: "account",
title: "ATIVAR INSTITUIÇÃO",
onPress: () => {
console.log("4");
},
},
{
icon: "information-outline",
title: "SOBRE O PROJETO",
onPress: () => {
console.log("5");
},
},
{
icon: "logout",
title: "sair",
onPress: () => {
handleLogOut(setUser);
},
},
{
icon: "trash-can",
title: "Desativar conta",
onPress: () => {
console.log("7");
},
},
];
console.log("a");
return ( return (
<Screen <Screen
style={{ style={{
padding: 10,
fleex: 1,
padding: 16,
}} }}
> >
<Text>{user.name}</Text>
<Text>{user.email}</Text>
<UserHeader name={user.name} fone={user.email} image={"1"} />
{/* <TouchableOpacity onPress={()=> props.navigation.navigate("PluviometerRegister")}>
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
alignContent: "center",
paddingTop: 40
}}>
<Image
style={{ width: 28 }}
resizeMode="contain"
source={require("../assets/pluviometer/pluviometro.png")}
/>
<View style={{ justifyContent: "center" }}>
<Text style={{
fontSize: dimensions.text.default,
fontWeight: "bold"
}}>
Cadastrar Pluviômetro
</Text>
</View>
</View>
</TouchableOpacity>*/}
<View style={{ marginTop: 24 }}>
{profileItems.map(({ icon, title, onPress }) => (
<ProfileItensList icon={icon} title={title} onPress={onPress} />
))}
</View>
<View style={{ paddingTop: 40 }}> <View style={{ paddingTop: 40 }}>
<Button <Button
title="Logout" title="Logout"
@ -64,10 +125,14 @@ function AccountScreen(props) {
}} }}
/> />
</View> </View>
{/* <InDevelopment /> */}
</Screen> </Screen>
); );
} }
const styles = StyleSheet.create({
text: {
fontSize: 16,
},
});
export default AccountScreen; export default AccountScreen;
Loading…
Cancel
Save