eletrotupi / tcc/ commit / ad35690

frontend: fix status bar & replace pressable with touchable opacity

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago ad3569091b073a36184310365ccb67466041ea37 Browse files
Parents 44b054e
Changed files
1
Additions
+33
Deletions
-7
frontend/app/(tabs)/settings.tsx modified+33 -7
frontend/app/(tabs)/settings.tsx
1 - 
import { TouchableOpacity, StyleSheet, Text, SectionList, View, StatusBar, Pressable } from 'react-native';
1 + 
import { TouchableOpacity, StyleSheet, Text, SectionList, View, Alert } from 'react-native';
2 2 
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
3 3 
import { useState } from 'react';
4 4 
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
5 5 
import { Link } from 'expo-router'
6 + 
import { StatusBar } from 'expo-status-bar';
6 7
7 8 
import { ThemedText } from '@/components/misc/themed-text';
8 9 
import { ThemedView } from '@/components/misc/themed-view';
9 10 
import { IconSymbol } from '@/components/ui/icon-symbol';
10 11 
import { Fonts } from '@/constants/theme';
11 12 
import { useThemeColor } from '@/hooks/use-theme-color';
13 + 
import { useAuth } from '@/context/AuthContext';
12 14
13 15 
const SECTIONS = [
14 16 
  {
15 17 
    title: 'Geral',
16 18 
    data: [{
37 39 
    ]
38 40 
  }
39 41 
]
40 42
41 43 
export default function Settings() {
44 + 
  const { user, logout } = useAuth();
42 45 
  const [options] = useState([
43 46 
    { id: 'profile', name: 'Perfil', path: '/profile'}
44 47 
  ])
45 48
46 49 
  const textColor = useThemeColor({}, 'text');
47 50 
  const tintColor = useThemeColor({}, 'tint');
48 51
49 - 
  console.log(tintColor, textColor)
52 + 
  const handleLogout = async () => {
53 + 
    Alert.alert(
54 + 
      'Sair',
55 + 
      'Tem certeza que quer sair?',
56 + 
      [
57 + 
        { text: 'Cancelar', style: 'cancel' },
58 + 
        {
59 + 
          text: 'Sair',
60 + 
          style: 'destructive',
61 + 
          onPress: logout
62 + 
        },
63 + 
      ]
64 + 
    );
65 + 
  };
50 66
51 67 
  const renderItem = ({item}) => {
52 68 
    const itemStyle = [
53 69 
      styles.item,
54 70 
    ]
55 71
56 72 
    const itemColor = { color: item.logout ? '#FF2C2C' : textColor }
57 73
74 + 
    if (item.logout) {
75 + 
      return (
76 + 
        <TouchableOpacity onPress={handleLogout} style={itemStyle}>
77 + 
          <Text style={itemColor}>
78 + 
            Sair
79 + 
          </Text>
80 + 
        </TouchableOpacity>
81 + 
      )
82 + 
    }
83 +
58 84 
    return (
59 85 
      <View>
60 86 
        <Link key={item.id} href={item.path} asChild style={itemStyle}>
61 - 
          <Pressable>
87 + 
          <TouchableOpacity>
62 88 
            <Text style={itemColor}>
63 89 
              {item.title}
64 90 
            </Text>
65 - 
          </Pressable>
91 + 
          </TouchableOpacity>
66 92 
        </Link>
67 93 
      </View>
68 94 
    )
69 95 
  }
70 96
71 97 
  return (
72 98 
    <SafeAreaProvider>
73 99 
      <SafeAreaView style={styles.container} edges={['top']}>
74 - 
        <StatusBar style='dark' />
100 + 
        <StatusBar style="dark" />
75 101 
        <SectionList
76 102 
          sections={SECTIONS}
77 103 
          keyExtractor={(item, index) => item.title + index}
78 104 
          renderItem={renderItem}
79 105 
          renderSectionHeader={({section: {title}}) => (
85 111 
}
86 112
87 113 
const styles = StyleSheet.create({
88 114 
  container: {
89 115 
    flex: 1,
90 - 
    paddingTop: StatusBar.currentHeight,
91 - 
    marginHorizontal: 16
116 + 
    marginHorizontal: 16,
117 + 
    paddingTop: 10
92 118 
  },
93 119 
  item: {
94 120 
    paddingTop: 20,
95 121 
    paddingBottom: 20,
96 122 
  },
100 126 
  },
101 127 
  logout: {
102 128 
    textColor: '#FF2C2C'
103 129 
  }
104 130 
});