eletrotupi / tcc / commit / 286fe93

frontend: reorganize tabs and remove cruft

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 286fe93819d9fb8b22de437d4bbf6887d6de40cd
Parents: cfc8f14
8 file(s) changed
  • frontend/app/(tabs)/_layout.tsx +24 -8
  • frontend/app/(tabs)/actions/index.tsx +12 -0
  • frontend/app/(tabs)/explore.tsx +0 -112
  • frontend/app/(tabs)/history/index.tsx +12 -0
  • frontend/app/(tabs)/index.tsx +0 -124
  • frontend/app/(tabs)/insights/index.tsx +12 -0
  • frontend/app/(tabs)/new/index.tsx +12 -0
  • frontend/app/(tabs)/settings/index.tsx +0 -0
frontend/app/(tabs)/_layout.tsx
@@ -40,25 +40,41 @@ tabBarButton: HapticTab,
40 40 }}>
41 41
42 42 <Tabs.Screen
43 - name="index"
43 + name="history/index"
44 44 options={{
45 - title: 'Home',
46 - tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
45 + title: 'Histórico',
46 + tabBarIcon: ({ color }) => <IconSymbol size={28} name="history" color={color} />,
47 47 }}
48 48 />
49 49
50 50 <Tabs.Screen
51 - name="explore"
51 + name="insights/index"
52 52 options={{
53 - title: 'Explore',
54 - tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
53 + title: 'Insights',
54 + tabBarIcon: ({ color }) => <IconSymbol size={28} name="lightbulb-outline" color={color} />,
55 55 }}
56 56 />
57 57
58 58 <Tabs.Screen
59 - name="settings"
59 + name="new/index"
60 60 options={{
61 - title: 'Configurações',
61 + title: 'Novo',
62 + tabBarIcon: ({ color }) => <IconSymbol size={28} name="add-circle" color={color} />,
63 + }}
64 + />
65 +
66 + <Tabs.Screen
67 + name="actions/index"
68 + options={{
69 + title: 'Ações',
70 + tabBarIcon: ({ color }) => <IconSymbol size={28} name="bolt" color={color} />,
71 + }}
72 + />
73 +
74 + <Tabs.Screen
75 + name="settings/index"
76 + options={{
77 + title: 'Ajustes',
62 78 tabBarIcon: ({ color }) => <IconSymbol size={28} name="settings.fill" color={color} />,
63 79 }}
64 80 />
frontend/app/(tabs)/actions/index.tsx
@@ -0,0 +1,12 @@
1 + import { ThemedText } from '@/components/misc/themed-text';
2 + import { ThemedView } from '@/components/misc/themed-view';
3 +
4 + export default function Actions() {
5 + return (
6 + <ThemedView>
7 + <ThemedText>
8 + Actions
9 + </ThemedText>
10 + </ThemedView>
11 + )
12 + }
@@ -1,112 +0,0 @@
1 - import { Image } from 'expo-image';
2 - import { Platform, StyleSheet } from 'react-native';
3 -
4 - import { Collapsible } from '@/components/ui/collapsible';
5 - import { ExternalLink } from '@/components/misc/external-link';
6 - import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
7 - import { ThemedText } from '@/components/misc/themed-text';
8 - import { ThemedView } from '@/components/misc/themed-view';
9 - import { IconSymbol } from '@/components/ui/icon-symbol';
10 - import { Fonts } from '@/constants/theme';
11 -
12 - export default function TabTwoScreen() {
13 - return (
14 - <ParallaxScrollView
15 - headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
16 - headerImage={
17 - <IconSymbol
18 - size={310}
19 - color="#808080"
20 - name="chevron.left.forwardslash.chevron.right"
21 - style={styles.headerImage}
22 - />
23 - }>
24 - <ThemedView style={styles.titleContainer}>
25 - <ThemedText
26 - type="title"
27 - style={{
28 - fontFamily: Fonts.rounded,
29 - }}>
30 - Explore
31 - </ThemedText>
32 - </ThemedView>
33 - <ThemedText>This app includes example code to help you get started.</ThemedText>
34 - <Collapsible title="File-based routing">
35 - <ThemedText>
36 - This app has two screens:{' '}
37 - <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
38 - <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
39 - </ThemedText>
40 - <ThemedText>
41 - The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
42 - sets up the tab navigator.
43 - </ThemedText>
44 - <ExternalLink href="https://docs.expo.dev/router/introduction">
45 - <ThemedText type="link">Learn more</ThemedText>
46 - </ExternalLink>
47 - </Collapsible>
48 - <Collapsible title="Android, iOS, and web support">
49 - <ThemedText>
50 - You can open this project on Android, iOS, and the web. To open the web version, press{' '}
51 - <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
52 - </ThemedText>
53 - </Collapsible>
54 - <Collapsible title="Images">
55 - <ThemedText>
56 - For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
57 - <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
58 - different screen densities
59 - </ThemedText>
60 - <Image
61 - source={require('@/assets/images/react-logo.png')}
62 - style={{ width: 100, height: 100, alignSelf: 'center' }}
63 - />
64 - <ExternalLink href="https://reactnative.dev/docs/images">
65 - <ThemedText type="link">Learn more</ThemedText>
66 - </ExternalLink>
67 - </Collapsible>
68 - <Collapsible title="Light and dark mode components">
69 - <ThemedText>
70 - This template has light and dark mode support. The{' '}
71 - <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
72 - what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
73 - </ThemedText>
74 - <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
75 - <ThemedText type="link">Learn more</ThemedText>
76 - </ExternalLink>
77 - </Collapsible>
78 - <Collapsible title="Animations">
79 - <ThemedText>
80 - This template includes an example of an animated component. The{' '}
81 - <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
82 - the powerful{' '}
83 - <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
84 - react-native-reanimated
85 - </ThemedText>{' '}
86 - library to create a waving hand animation.
87 - </ThemedText>
88 - {Platform.select({
89 - ios: (
90 - <ThemedText>
91 - The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
92 - component provides a parallax effect for the header image.
93 - </ThemedText>
94 - ),
95 - })}
96 - </Collapsible>
97 - </ParallaxScrollView>
98 - );
99 - }
100 -
101 - const styles = StyleSheet.create({
102 - headerImage: {
103 - color: '#808080',
104 - bottom: -90,
105 - left: -35,
106 - position: 'absolute',
107 - },
108 - titleContainer: {
109 - flexDirection: 'row',
110 - gap: 8,
111 - },
112 - });
frontend/app/(tabs)/history/index.tsx
@@ -0,0 +1,12 @@
1 + import { ThemedText } from '@/components/misc/themed-text';
2 + import { ThemedView } from '@/components/misc/themed-view';
3 +
4 + export default function History() {
5 + return (
6 + <ThemedView>
7 + <ThemedText>
8 + History
9 + </ThemedText>
10 + </ThemedView>
11 + )
12 + }
@@ -1,124 +0,0 @@
1 - import { Image } from 'expo-image';
2 - import { Platform, StyleSheet, TouchableOpacity, Alert } from 'react-native';
3 -
4 - import { HelloWave } from '@/components/hello-wave';
5 - import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
6 - import { ThemedText } from '@/components/misc/themed-text';
7 - import { ThemedView } from '@/components/misc/themed-view';
8 - import { Link } from 'expo-router';
9 - import { useAuth } from '@/context/AuthContext';
10 - import { Button } from '@/components/ui';
11 -
12 - export default function HomeScreen() {
13 - const { user, logout } = useAuth();
14 -
15 - const handleLogout = async () => {
16 - Alert.alert(
17 - 'Sair',
18 - 'Tem certeza que quer sair?',
19 - [
20 - { text: 'Cancelar', style: 'cancel' },
21 - {
22 - text: 'Sair',
23 - style: 'destructive',
24 - onPress: logout
25 - },
26 - ]
27 - );
28 - };
29 -
30 - return (
31 - <ParallaxScrollView
32 - headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
33 - headerImage={
34 - <Image
35 - source={require('@/assets/images/partial-react-logo.png')}
36 - style={styles.reactLogo}
37 - />
38 - }>
39 - <ThemedView style={styles.titleContainer}>
40 - <ThemedText type="title">Bem vindo{user?.firstName ? `, ${user.firstName}` : ''}!</ThemedText>
41 - <HelloWave />
42 - </ThemedView>
43 - <ThemedView style={styles.stepContainer}>
44 - <Button
45 - title="Sair"
46 - variant="outline"
47 - onPress={handleLogout}
48 - />
49 - </ThemedView>
50 - <ThemedView style={styles.stepContainer}>
51 - <ThemedText type="subtitle">Step 1: Try it</ThemedText>
52 - <ThemedText>
53 - Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
54 - Press{' '}
55 - <ThemedText type="defaultSemiBold">
56 - {Platform.select({
57 - ios: 'cmd + d',
58 - android: 'cmd + m',
59 - web: 'F12',
60 - })}
61 - </ThemedText>{' '}
62 - to open developer tools.
63 - </ThemedText>
64 - </ThemedView>
65 - <ThemedView style={styles.stepContainer}>
66 - <Link href="/modal">
67 - <Link.Trigger>
68 - <ThemedText type="subtitle">Step 2: Explore</ThemedText>
69 - </Link.Trigger>
70 - <Link.Preview />
71 - <Link.Menu>
72 - <Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
73 - <Link.MenuAction
74 - title="Share"
75 - icon="square.and.arrow.up"
76 - onPress={() => alert('Share pressed')}
77 - />
78 - <Link.Menu title="More" icon="ellipsis">
79 - <Link.MenuAction
80 - title="Delete"
81 - icon="trash"
82 - destructive
83 - onPress={() => alert('Delete pressed')}
84 - />
85 - </Link.Menu>
86 - </Link.Menu>
87 - </Link>
88 -
89 - <ThemedText>
90 - {`Tap the Explore tab to learn more about what's included in this starter app.`}
91 - </ThemedText>
92 - </ThemedView>
93 - <ThemedView style={styles.stepContainer}>
94 - <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
95 - <ThemedText>
96 - {`When you're ready, run `}
97 - <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
98 - <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
99 - <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
100 - <ThemedText type="defaultSemiBold">app-example</ThemedText>.
101 - </ThemedText>
102 - </ThemedView>
103 - </ParallaxScrollView>
104 - );
105 - }
106 -
107 - const styles = StyleSheet.create({
108 - titleContainer: {
109 - flexDirection: 'row',
110 - alignItems: 'center',
111 - gap: 8,
112 - },
113 - stepContainer: {
114 - gap: 8,
115 - marginBottom: 8,
116 - },
117 - reactLogo: {
118 - height: 178,
119 - width: 290,
120 - bottom: 0,
121 - left: 0,
122 - position: 'absolute',
123 - },
124 - });
frontend/app/(tabs)/insights/index.tsx
@@ -0,0 +1,12 @@
1 + import { ThemedText } from '@/components/misc/themed-text';
2 + import { ThemedView } from '@/components/misc/themed-view';
3 +
4 + export default function Insights() {
5 + return (
6 + <ThemedView>
7 + <ThemedText>
8 + Insights
9 + </ThemedText>
10 + </ThemedView>
11 + )
12 + }
frontend/app/(tabs)/new/index.tsx
@@ -0,0 +1,12 @@
1 + import { ThemedText } from '@/components/misc/themed-text';
2 + import { ThemedView } from '@/components/misc/themed-view';
3 +
4 + export default function New() {
5 + return (
6 + <ThemedView>
7 + <ThemedText>
8 + New
9 + </ThemedText>
10 + </ThemedView>
11 + )
12 + }
frontend/app/(tabs)/settings/index.tsx