eletrotupi / tcc/ commit / 44b054e

frontend: use section list for the settings page

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 44b054e4cfc3aeed5d7a44187823bf954d563f71 Browse files
Parents 474ef7d
Changed files
1
Additions
+75
Deletions
-51
frontend/app/(tabs)/settings.tsx modified+75 -51
frontend/app/(tabs)/settings.tsx
1 - 
import { TouchableOpacity, StyleSheet, FlatList, View } from 'react-native';
1 + 
import { TouchableOpacity, StyleSheet, Text, SectionList, View, StatusBar, Pressable } from 'react-native';
2 + 
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
2 3 
import { useState } from 'react';
3 4 
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
4 5 
import { Link } from 'expo-router'
5 6
6 7 
import { ThemedText } from '@/components/misc/themed-text';
7 8 
import { ThemedView } from '@/components/misc/themed-view';
8 9 
import { IconSymbol } from '@/components/ui/icon-symbol';
9 10 
import { Fonts } from '@/constants/theme';
10 11 
import { useThemeColor } from '@/hooks/use-theme-color';
11 12
13 + 
const SECTIONS = [
14 + 
  {
15 + 
    title: 'Geral',
16 + 
    data: [{
17 + 
      title: 'Perfil & Senha',
18 + 
      path: '/profile'
19 + 
    }]
20 + 
  },
21 + 
  {
22 + 
    title: 'Sobre',
23 + 
    data: [
24 + 
      {
25 + 
        title: 'Sobre o aplicativo',
26 + 
        path: '/about'
27 + 
      },
28 + 
      {
29 + 
        title: 'O que acontece com seus dados?',
30 + 
        path: '/data'
31 + 
      },
32 + 
      {
33 + 
        title: 'Sair',
34 + 
        path: '/logout',
35 + 
        logout: true
36 + 
      }
37 + 
    ]
38 + 
  }
39 + 
]
40 +
12 41 
export default function Settings() {
13 42 
  const [options] = useState([
14 43 
    { id: 'profile', name: 'Perfil', path: '/profile'}
15 44 
  ])
16 45
17 46 
  const textColor = useThemeColor({}, 'text');
18 47 
  const tintColor = useThemeColor({}, 'tint');
19 48
20 - 
  const renderItem = ({item}) => (
21 - 
    <Link key={item.id} href={item.path} asChild style={[styles.item, { color: tintColor }]}>
22 - 
      <ThemedText>
23 - 
        {item.name}
24 - 
      </ThemedText>
25 - 
    </Link>
26 - 
  )
49 + 
  console.log(tintColor, textColor)
27 50
28 - 
  return (
29 - 
    <ParallaxScrollView
30 - 
      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
31 - 
      headerImage={
32 - 
        <IconSymbol
33 - 
          size={310}
34 - 
          color="pink"
35 - 
          name="chevron.left.forwardslash.chevron.right"
36 - 
          style={styles.headerImage}
37 - 
        />
38 - 
      }>
39 - 
      <ThemedView style={styles.titleContainer}>
40 - 
        <ThemedText
41 - 
          type="title"
42 - 
          style={{
43 - 
            fontFamily: Fonts.rounded,
44 - 
          }}>
45 - 
          Configurações
46 - 
        </ThemedText>
47 - 
      </ThemedView>
51 + 
  const renderItem = ({item}) => {
52 + 
    const itemStyle = [
53 + 
      styles.item,
54 + 
    ]
48 55
49 - 
      {(options.map((opt) => (
50 - 
        renderItem({ item: opt })
51 - 
      )))}
52 - 
    </ParallaxScrollView>
56 + 
    const itemColor = { color: item.logout ? '#FF2C2C' : textColor }
57 +
58 + 
    return (
59 + 
      <View>
60 + 
        <Link key={item.id} href={item.path} asChild style={itemStyle}>
61 + 
          <Pressable>
62 + 
            <Text style={itemColor}>
63 + 
              {item.title}
64 + 
            </Text>
65 + 
          </Pressable>
66 + 
        </Link>
67 + 
      </View>
68 + 
    )
69 + 
  }
70 +
71 + 
  return (
72 + 
    <SafeAreaProvider>
73 + 
      <SafeAreaView style={styles.container} edges={['top']}>
74 + 
        <StatusBar style='dark' />
75 + 
        <SectionList
76 + 
          sections={SECTIONS}
77 + 
          keyExtractor={(item, index) => item.title + index}
78 + 
          renderItem={renderItem}
79 + 
          renderSectionHeader={({section: {title}}) => (
80 + 
            <ThemedText style={styles.header}>{title}</ThemedText>
81 + 
          )} />
82 + 
      </SafeAreaView>
83 + 
    </SafeAreaProvider>
53 84 
  )
54 85 
}
55 86
56 -
57 87 
const styles = StyleSheet.create({
58 - 
  headerImage: {
59 - 
    color: '#808080',
60 - 
    bottom: -90,
61 - 
    left: -35,
62 - 
    position: 'absolute',
88 + 
  container: {
89 + 
    flex: 1,
90 + 
    paddingTop: StatusBar.currentHeight,
91 + 
    marginHorizontal: 16
63 92 
  },
64 93 
  item: {
65 - 
    paddingTop: 16,
66 - 
    paddingBottom: 16,
94 + 
    paddingTop: 20,
95 + 
    paddingBottom: 20,
67 96 
  },
68 - 
  itemName: {
69 - 
    fontSize: 16,
70 - 
    fontWeight: 'bold',
97 + 
  header: {
98 + 
    fontSize: 22,
99 + 
    fontWeight: 'bold'
71 100 
  },
72 - 
  separator: {
73 - 
    height: 1,
74 - 
    backgroundColor: '#ccc'
75 - 
  },
76 - 
  titleContainer: {
77 - 
    flexDirection: 'row',
78 - 
    gap: 8,
79 - 
  },
101 + 
  logout: {
102 + 
    textColor: '#FF2C2C'
103 + 
  }
80 104 
});