Browse Source

Initial implementation of ConfirmationModal in AccountScreen

master
GabrielTrettel 3 years ago
parent
commit
52de8f3b4b
  1. 96
      src/app/components/ConfirmationModal.js
  2. 41
      src/app/screens/AccountScreen.js

96
src/app/components/ConfirmationModal.js

@ -0,0 +1,96 @@
import React from "react";
import {
Modal,
StyleSheet,
Text,
TouchableHighlight,
View,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { TouchableOpacity } from "react-native-gesture-handler";
function Btn({ label, onPress, bgColor, txtColor }) {
return (
<TouchableOpacity onPress={() => onPress()}>
<View
style={{
paddingHorizontal: 30,
paddingVertical: 5,
backgroundColor: bgColor,
borderRadius: 6,
}}
>
<Text>{label}</Text>
</View>
</TouchableOpacity>
);
}
export default function ConfirmationModal({
show,
title = "",
description = "",
confirmationLabel = "",
declineLabel = "",
onConfirm = () => {},
onDecline = () => {},
}) {
console.log("show: " + show);
return (
<Modal
transparent={true}
animationType="slide"
visible={show}
supportedOrientations={["portrait"]}
>
<View style={styles.container}>
<View style={{ flex: 1 }}>
<Text style={[styles.text, { fontSize: dimensions.text.secondary }]}>
{title}
</Text>
</View>
<Text style={styles.text}>{description}</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-evenly",
marginTop: 24,
}}
>
<Btn
label={confirmationLabel}
onPress={onConfirm}
bgColor={colors.secondary}
/>
<Btn
label={declineLabel}
onPress={onDecline}
bgColor={colors.lightGray}
/>
</View>
</View>
</Modal>
);
}
const styles = StyleSheet.create({
container: {
width: "80%",
height: 150,
justifyContent: "center",
alignSelf: "center",
backgroundColor: colors.lightestGray,
borderColor: colors.primary,
borderWidth: 2,
borderRadius: 12,
padding: 12,
},
text: {
fontSize: dimensions.text.default,
textAlign: "left",
fontWeight: "bold",
},
});

41
src/app/screens/AccountScreen.js

@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import { Text, Image, View, StyleSheet, ScrollView } from "react-native";
import Screen from "../components/Screen";
import { AuthContext } from "../auth/context";
@ -7,11 +7,8 @@ import { TouchableOpacity } from "react-native-gesture-handler";
import assets from "../config/assets";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
import colors from "../config/colors";
import ConfirmationModal from "../components/ConfirmationModal";
function handleLogOut(setUser) {
setUser(null);
authStorage.removeToken();
}
function UserHeader({ name, fone }) {
return (
@ -77,6 +74,13 @@ function ProfileItensList({ icon, IconProvider, title, onPress }) {
function AccountScreen(props) {
const { user, setUser } = useContext(AuthContext);
const [ showLog, setShowLog ] = useState(false);
const logout = () => {
setUser(null);
authStorage.removeToken();
};
const profileItems = [
{
icon: "account",
@ -123,17 +127,17 @@ function AccountScreen(props) {
IconProvider: MaterialCommunityIcons,
title: "sair",
onPress: () => {
handleLogOut(setUser);
},
},
{
icon: "trash-can",
IconProvider: MaterialCommunityIcons,
title: "DESATIVAR CONTA",
onPress: () => {
console.log("7");
setShowLog(true)
},
},
// {
// icon: "trash-can",
// IconProvider: MaterialCommunityIcons,
// title: "DESATIVAR CONTA",
// onPress: () => {
// console.log("7");
// },
// },
];
return (
@ -158,6 +162,15 @@ function AccountScreen(props) {
</View>
))}
</View>
<ConfirmationModal
show={showLog}
title="SAIR"
description="Você tem certeza que deseja sair?"
confirmationLabel="SIM"
declineLabel="NÃO"
onConfirm={logout}
onDecline={() => setShowLog(false)}
/>
</View>
</ScrollView>
</Screen>

Loading…
Cancel
Save