initial implementation of account screen

src/app/screens/AccountScreen.js

@@ -1,61 +1,122 @@
 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 InDevelopment from "../components/InDevelopment";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import assets from "../config/assets";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import colors from "../config/colors";
 
-
-
 function handleLogOut(setUser) {
-
-
   setUser(null);
   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 (
     <Screen
       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 }}>
         <Button
           title="Logout"
@@ -64,10 +125,14 @@ function AccountScreen(props) {
           }}
         />
       </View>
-
-      {/* <InDevelopment /> */}
     </Screen>
   );
 }
 
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+  },
+});
+
 export default AccountScreen;